クラウドファンディングで申し込んだ「PocketCHIP」から、ようやく出荷の案内が届きました。
当初７月頃に届く予定がトラブルで遅れていました。
これで多少は現実味が出てきのですが、案内が届いて３日間、荷物の追跡をしてみると出発点の香港から微動だりしていません。まだまだ先が長いようです。
これで多少は現実味が出てきのですが、案内が届いて３日間、荷物の追跡をしてみると出発点の香港から微動だりしていません。まだまだ先が長いようです。
そんなことで我慢しきれずの第二弾として「PICO-8」のカラーパットでモザイク処理をするプログラムを作ってみました。このPICO-8の１６色カラーパレットが絶妙で好きです。
昭和チックなポップカルチャー的なピクセルアートがマイブームです。
その内にブレイクすると思ってるんですがねー・・・
使うパレットは１６色ですが、色の配置を誤差分散することで表現が豊かになります。
下記のリンクから「ファイルを選択」ボタンを押してローカルの画像ファイルを選択してください。
下記のリンクから「ファイルを選択」ボタンを押してローカルの画像ファイルを選択してください。
画像ファイルは各種（JPEG,PNG,GIF）に対応しています。
PICO-8の１６色カラーパレットでモザイク処理をした結果を返します。
PICO-8の１６色カラーパレットでモザイク処理をした結果を返します。
サーバーにはアップロードしないローカル処理なのでご安心ください。
処理結果の画像はプラウザからＰＮＧ形式で保存もできます。
処理結果の画像はプラウザからＰＮＧ形式で保存もできます。
Chrome、Firefox、IE11で動作確認しています。
スマホでは動作しないと思います。
スマホでは動作しないと思います。
この画像が・・・
こんなモザイク画像になります。
拡大すると色の配置がよくわかります。
単に減色するのではなく、予め決められたパレットカラーで最適なモザイク処理をするのは突き詰めると奥が深いのですが、今回は簡単なプログラムなっています。
【処理の概要】
１．元の画素色を取得して色の三原色（ＲＧＢ）に分解する。
２．予め用意したパレット色（PICO-8カラー）と色素毎に比較して一番近いパレット色を探す。
３．原色と選んだパレット色との誤差を色素単位に計算する。
４．その誤差を縦横の画素に乱数による割合で付加する。
５．以後はこの誤差を元の画素の色に付加した値でモザイク処理を行う。
１．元の画素色を取得して色の三原色（ＲＧＢ）に分解する。
２．予め用意したパレット色（PICO-8カラー）と色素毎に比較して一番近いパレット色を探す。
３．原色と選んだパレット色との誤差を色素単位に計算する。
４．その誤差を縦横の画素に乱数による割合で付加する。
５．以後はこの誤差を元の画素の色に付加した値でモザイク処理を行う。
今回は誤差分散する割合を単純に乱数で割り振っています。
この割合を調整すると色々と面白い画像編集も出来ます。
この割合を調整すると色々と面白い画像編集も出来ます。
HTML5によるJavaScriptでプログラム(HTMLに記載)しているのでプログラム変更も簡単です。
ブラウザによるローカル処理なので高速でサーバーにも負荷がかかりません。
パレットの色や使う色数も簡単に変更できます。
ブラウザによるローカル処理なので高速でサーバーにも負荷がかかりません。
パレットの色や使う色数も簡単に変更できます。
プログラム的にはモザイク処理以外にリサイズ処理の機能も搭載しています。
少しコードを変更すれば写真のリサイズツールとしても活用できます。
少しコードを変更すれば写真のリサイズツールとしても活用できます。
pico8(inimage, ctx, cv.width, cv.height);
cv.width, cv.heightを変更するとリサイズ処理をします。
cv.width, cv.heightを変更するとリサイズ処理をします。
マニアックな話ですが、本来はローカル画像ファイルを「drawImage」して「getImageData」するとセキュリティエラーに引っかかりますが、この方法だとエラーになりません。色々な画像処理に応用できるかと思います。
一日でも早くPocketCHIPが届くことを期待して待ちたいと思います。
【参考】
PICO-8風シューティングもどき MIT Scratch AP 3D Dot World (Shooting)
http://blogs.yahoo.co.jp/kai_yamamoto/64521090.html
http://blogs.yahoo.co.jp/kai_yamamoto/64521090.html