文字をサブピクセルアートに
こんにちは。
サブピクセルアートというものをご存知でしょうか。
ディスプレイ上の画像はすべて光の粒の集合体であり（ピクセル）、それをRGBに細分化したものがサブピクセルです。
サブピクセルアートではこのサブピクセルを利用します。
普通のピクセルアートだとピクセルが最小単位ですが、サブピクセルアートだとサブピクセルが最小単位です。
実際はRGBまとめて1x1のピクセルに収まっているので
こうです。
これをピクセルに直すと、
こうなります。
これをディスプレイに映すともとのピクセルアートを得られます。
これを用いて文字をサブピクセルアートにしてみるという話です。
手法
まず手法ですが、お好きなピクセルフォントを用意して、文字を打ち込んでください。
そうしたら、それぞれのピクセルを正方形にしてください。
次に、左から1列目、4列目、7列目のように2列おきに正方形を選択してください。
そうしたら、それを赤色にします。
同じように2列目からを緑色、3列目からを青色にします。
そうしたら緑色のものを右へ1つ、青色のものを右へ2つずらします。
間をなくすようにずらします。
最後に、正方形のブレンドモードをスクリーンにします。
すると…
サブピクセルアートになりました！！！
…面倒ですよね。
そこで、自動でサブピクセルアートに変換するウェブサイトを作りました。
仕組み
仕組みです。
まず、文字をピクセルに変換する必要があります。
幸いフォントが公開されていたので使います。
文字を入力すると0と1のピクセルで表現できるようにしました。
text2pixels("NOTE");[
[1,1,0,0,0,0,0,1,1,1,0,0,0,0,1,1,1,0,0,0,0,1,1,1],
[1,0,1,0,0,0,0,1,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0,0],
[1,0,1,0,0,0,0,1,0,1,0,0,0,0,0,1,0,0,0,0,0,1,1,0],
[1,0,1,0,0,0,0,1,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0,0],
[1,0,1,0,0,0,0,1,1,1,0,0,0,0,0,1,0,0,0,0,0,1,1,1],
]
そうしたら配列を3つずつに区切ります。RGBに対応しています。
[
[
[1, 1, 0],
[0, 0, 0],
[0, 1, 1],
[1, 0, 0],
[0, 0, 1],
[1, 1, 0],
[0, 0, 0],
[1, 1, 1]
],
[
[1, 0, 1],
[0, 0, 0],
[0, 1, 0],
[1, 0, 0],
[0, 0, 0],
[1, 0, 0],
[0, 0, 0],
[1, 0, 0]
],
[
[1, 0, 1],
[0, 0, 0],
[0, 1, 0],
[1, 0, 0],
[0, 0, 0],
[1, 0, 0],
[0, 0, 0],
[1, 1, 0]
],
[
[1, 0, 1],
[0, 0, 0],
[0, 1, 0],
[1, 0, 0],
[0, 0, 0],
[1, 0, 0],
[0, 0, 0],
[1, 0, 0]
],
[
[1, 0, 1],
[0, 0, 0],
[0, 1, 1],
[1, 0, 0],
[0, 0, 0],
[1, 0, 0],
[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, 0, 0],
[0, 0, 0]
]
]そして、色に変換します。
[
[
"#ffff00",
"#000000",
"#00ffff",
"#ff0000",
"#0000ff",
"#ffff00",
"#000000",
"#ffffff"
],
[
"#ff00ff",
"#000000",
"#00ff00",
"#ff0000",
"#000000",
"#ff0000",
"#000000",
"#ff0000"
],
[
"#ff00ff",
"#000000",
"#00ff00",
"#ff0000",
"#000000",
"#ff0000",
"#000000",
"#ffff00"
],
[
"#ff00ff",
"#000000",
"#00ff00",
"#ff0000",
"#000000",
"#ff0000",
"#000000",
"#ff0000"
],
[
"#ff00ff",
"#000000",
"#00ffff",
"#ff0000",
"#000000",
"#ff0000",
"#000000",
"#ffffff"
],
[
"#000000",
"#000000",
"#000000",
"#000000"
],
[
"#000000",
"#000000",
"#000000",
"#000000"
]
]これをcanvasに表示させます。
…
本当はcanvasを使った方が良いのでしょうが、
使えない使い勝手が悪いのですべてhtmlで行います。そのせいで少し重いです。
canvasの部分のコードはChatGPTに書いてもらいました！！！
Canvasを使えるようになるのはまだ先の話…
使い方
使い方は至ってシンプル。
変換したい文字を入力してConvertボタンを押すだけ。
すぐに変換されます。
注意点としてはいくつかの画面（僕のものとか）だと1ピクセルが2x2で表示されるのでCtrl（⌘）と-を何回か押して画面を50%の大きさに縮小します。
出来上がったものを見る方法としては、百均に売っているマクロレンズをスマホのカメラに取り付けて、うまい位置で写真を取ると見えます。
ぜひ試して見てください。
おまけ
参考：
（おしまい）
いいなと思ったら応援しよう！
