用画布像素化人物，绘制生成艺术！
正如我之前发帖所说，我正在使用p5.js学习生成艺术。
在本文中，我将介绍我在学习过程中制作的一个工具“字符串像素化器”。
- GitHub：https://github.com/ohbarye/string-pixelater
- npm：https://www.npmjs.com/package/string-pixelater
什么是字符串像素吞噬者
这是一个简单的字符像素化工具。pixelate它的意思是“将字符转换为二维数组”，以便我们可以处理表格数据用于多种用途。我实际上将它与p5.js结合使用，用于绘制生成式艺术作品。
让我们深入了解一下它的工作原理……不过目前它只有一个 API！
> StringPixelater.pixelate('hello', {fontSize: 24})
[
[0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,1,1,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0],
[0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0],
[0,0,1,1,1,1,1,0,0,1,1,1,1,0,0,0,0,1,1,1,0,0,0,1,1,1,1,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,1,1,1,1,0,0,0,1,1,1,1,0,0,0],
[0,0,1,1,1,1,0,0,0,0,1,1,1,0,0,0,1,1,1,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,1,1,1,0,0,0,0,0,1,1,1,1,0,0],
[0,0,1,1,1,0,0,0,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,1,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,0,1,1,1,0,0],
[0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,1,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0],
[0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0],
[0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0],
[0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0],
[0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,1,0,0,0,0,1,1,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,0,1,1,1,0,0],
[0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,1,1,1,0,0,0,1,1,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,0,0,1,1,1,0,0],
[0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,1,1,1,0,0,0,0,1,1,1,1,0,0,0,1,1,0,0,0,1,1,1,0,0,0,1,1,1,1,0,0,0,1,1,1,1,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,1,1,0,0,0,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0]
]
你隐约能从上面的文字中看出“hello”这个词吗？
它是如何运作的？
简而言之，它使用<canvas>元素作为临时画布来渲染字符。然后，它提取并解析栅格化图像数据。其核心代码如下。
const canvas = <HTMLCanvasElement> document.createElement('canvas');
const context = <CanvasRenderingContext2D> this.canvas.getContext('2d');
context.fillText("hello", 0, 0);
let table = new Array(canvas.height);
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
for (let row = 0; row < canvas.height; row++){
table[row] = new Array(canvas.width);
for (let col = 0; col < canvas.width; col++){
const alpha = imageData.data[(canvas.width * row + col) * 4 + 3];
if (alpha >= 64) {
table[row][col] = 1;
} else {
table[row][col] = 0;
}
}
}
用法
只需安装并调用StringPixelater.pixelate该方法，传入一个要像素化的字符串即可。
$ npm install --save string-pixelater
or
$ yarn add string-pixelater
您可以将其用作 ES 模块或通过<script>标签加载。
import StringPixelater from 'string-pixelater';
const table = StringPixelater.pixelate('Hello, world');
<script type="text/javascript" src="path/to/dist/js/string-pixelater.js"></script>
<script type="text/javascript">
var table = StringPixelater.pixelate('Hello, world');
</script>
transpose
如果你p5.js像我一样使用transpose这个选项，它会非常方便，因为它具有反转坐标轴的功能。
> StringPixelater.pixelate('B', {fontSize: 24, transpose: false})
[
[0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0],
[0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,1,1,1,1,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0,1,1,1,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0,1,1,1,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,1,1,1,1,0,0,0],
[0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0],
[0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0,1,1,1,0,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0],
[0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0],
[0,0,1,1,1,0,0,0,0,0,0,1,1,1,1,0,0,0],
[0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0],
[0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0]
]
> StringPixelater.pixelate('B', {fontSize: 24, transpose: true})
[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,1,1],
[1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1],
[1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1],
[1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1],
[1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1],
[1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1],
[1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1],
[1,1,1,0,0,0,0,1,1,1,0,0,0,0,0,0,1,1,1],
[1,1,1,1,0,0,1,1,1,1,1,0,0,0,0,0,1,1,1],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,0,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0],
[0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
]
后者用简单直观的循环渲染出来时看起来是正确的。
// Note: This is just pseudo code!
function draw() {
const imageData = StringPixelater.pixelate('B', {fontSize: 24, transpose: true})
const pixelSize = 10;
imageData.forEach(function(row, i) {
row.forEach(function(cell, j) {
if (cell === 1) {
ellipse(i * pixelSize, j * pixelSize, pixelSize, pixelSize);
}
})
})
}
结果如下：
带有 String Pixelater 的艺术作品
仅与StringPixelater.pixelate('hello')：
我们可以获得像素化的表情符号，例如StringPixelater.pixelate('🐈')。
如果有人能通过这篇文章对生成艺术或字符串像素画产生兴趣，我会很高兴的。:)
文章来源：https://dev.to/ohbarye/pixelate-charactors-with-canvas-and-draw-generative-art-4eb6