PICO-8のパレットでモザイク処理

 
クラウドファンディングで申し込んだ「PocketCHIP」から、ようやく出荷の案内が届きました。


PocketCHIP
https://getchip.com/pages/pocketchip

当初7月頃に届く予定がトラブルで遅れていました。
これで多少は現実味が出てきのですが、案内が届いて3日間、荷物の追跡をしてみると出発点の香港から微動だりしていません。まだまだ先が長いようです。

そんなことで我慢しきれずの第二弾として「PICO-8」のカラーパットでモザイク処理をするプログラムを作ってみました。このPICO-8の16色カラーパレットは絶妙で好きです。

PICO-8
http://www.lexaloffle.com/pico-8.php


昭和チックなポップカルチャー的なピクセルアートがマイブームです。
その内にブレイクすると思ってるんですがねー・・・


使うパレットは16色ですが、色の配置を誤差分散することで表現が豊かになります。
下記のリンクから「ファイルを選択」ボタンを押してローカルの画像ファイルを選択してください。
画像ファイルは各種(JPEG,PNG,GIF)に対応しています。
PICO-8の16色カラーパレットでモザイク処理をした結果を返します。

PICO-8 Palette Mosaic
http://www6.plala.or.jp/TimeTripper/html5/pico8.html

サーバーにはアップロードしないローカル処理なのでご安心ください。
処理結果の画像はプラウザからPNG形式で保存もできます。

Chrome、Firefox、IE11で動作確認しています。
スマホでは動作しないと思います。


この画像が・・・


こんなモザイク画像になります。


拡大すると色の配置がよくわかります。


単に減色するのではなく、予め決められたパレットカラーで最適なモザイク処理をするのは突き詰めると奥が深いのですが、今回は簡単なプログラムなっています。

【処理の概要】
1.元の画素色を取得して色の三原色(RGB)に分解する。
2.予め用意したパレット色(PICO-8カラー)と色素毎に比較して一番近いパレット色を探す。
3.原色とパレットとの誤差を色素単位に計算する。
4.その誤差を縦横の画素に乱数による割合で付加する。
5.以後はこの誤差を元の画素の色に付加した値でモザイク処理を行う。

今回は誤差分散する割合を単純に乱数で割り振っています。
この割合を調整すると色々と面白い画像編集も出来ます。

HTML5によるJavaScriptでプログラム(HTMLに記載)しているのでプログラム変更も簡単です。
ブラウザによるローカル処理なので高速でサーバーにも負荷がかかりません。
パレットの色や使う色数も簡単に変更できます。

プログラム的にはモザイク処理以外にリサイズ処理の機能も搭載しています。
少しコードを変更すれば写真のリサイズツールとしても活用できます。

pico8(inimage, ctx, cv.width, cv.height);
cv.width, cv.heightを変更するとリサイズ処理をします。

マニアックな話ですが、本来はローカル画像ファイルを「drawImage」して「getImageData」するとセキュリティエラーに引っかかりますが、この方法だとエラーになりません。色々な画像処理に応用できるかと思います。


一日でも早くPocketCHIPが届くことを期待して待ちたいと思います。


【参考】

プチコンとPICO-8との違い
http://ttripper.blogspot.jp/2016/05/pico-8.html

クラウドファンディングでポチっとな「PocketCHIP」
http://ttripper.blogspot.jp/2016/05/pocketchip.html

PICO-8風シューティングもどき MIT Scratch AP 3D Dot World (Shooting)
http://ttripper.blogspot.jp/2016/09/pico-8mit-scratch-ap-3d-dot-world.html