1.0.1 • Published 6 years ago
string-pixelater v1.0.1
String Pixelater
This is a simple tool to pixelate any characters. pixelate means to "convert a character to a two-dimensional array" so that we can deal with the tabular data for several purposes. I actually compose this and p5.js for painting generative art.
> 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]
]How does it work?
- It uses
<canvas>element as a temporary canvas to render characters. - Then it extracts and parses rasterized image data.
Usage
Just install and call StringPixelater.pixelate method with a string which you want to pixelate.
$ npm install --save string-pixelater
or
$ yarn add string-pixelaterUse as ES module
import StringPixelater from 'string-pixelater';
const table = StringPixelater.pixelate('Hello, world');Load through <script> tag
<script type="text/javascript" src="path/to/dist/js/string-pixelater.js"></script>
<script type="text/javascript">
var table = StringPixelater.pixelate('Hello, world');
</script>Pixelation Options
You can change StringPixelater's behavior with the following options.
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| fontSize | false | number | 12 | Font size. |
| fontName | false | string | 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic' | Font name. |
| transpose | false | boolean | false | If it's true, it transposes a result tabular. |
transpose
If you use p5.js or something that has inverted axes, transpose option is quite convenient.
> 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]
]The latter looks correct when it's rendered with simple and intuitive loops.
// 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);
}
})
})
}This results like below:
Examples with this library
It just uses StringPixelater.pixelate('hello').
We can get pixelated emoji as like StringPixelater.pixelate('🐈').