今更ながらCreateJSで、画像のピクセルを抽出してドット絵風にする
CreateJSのキャッシュキャンバスを使って画像情報取得し、ドット絵風に描画するサンプルです。
左上から、徐々に描画されていくようにしてみました。
元の画像
■画像ファイルをあらかじめ読み込む
- Preloaderとか使うのがいい…
- 今回はImageオブジェクトを使用
var img = new Image();
img.src = './images/tulips.png';
■Bitmapオブジェクトからキャッシュキャンバスを取得、画像のピクセル情報を取り出す
- 先程読み込んだ画像でBitmapオブジェクトを作成
- キャッシュキャンバスに描画するように
bmp.cache(0, 0, 300, 225);//キャッシュキャンバスに描画 - キャッシュキャンバスを取得し、ピクセル情報を取り出す
var bmp = new createjs.Bitmap(img);
bmp.cache(0, 0, 300, 225);//キャッシュキャンバスに描画
var bmpcanvas = bmp.cacheCanvas;//キャッシュキャンバスを取得
var ctx = bmpcanvas.getContext( "2d" );//キャンバスを取得
var imageData = ctx.getImageData( 0, 0, 300, 225 );//キャンバスのピクセル情報を取得。左上、右下。
var pixcels = imageData.data;
//ドット絵描画用Shape
var sh = new createjs.Shape();
stage.addChild(sh);
■ピクセル情報を取得して、ドット絵用Shapeに描画する
- 先程取得したピクセルデータを10ドット間隔でサンプリングする
- ピクセルデータ配列は、左上から次のように並んでいる
R,G,B,Alpha,R,G,B,Alpha,R,G,B,Alpha,...
pixcels[0]=R,pixcels[1]=G,pixcels[3]=B,pixcels[1]=Alpha,... - 色情報を取得して、ドット絵用Shapeに8ピクセルのドットとして描画
- 1フレームで1ピクセルずつ表示させるようにする
function update_mosic( cnt ) {
var i = cnt % 30;
var j = Math.floor( cnt / 30 );
//横縦、10dotおきにサンプリング
var k = ( ( i * 10 ) * 4 ) + ( ( j * 10 ) * 300 * 4);
var r = pixcels[k];
var g = pixcels[k+1];
var b = pixcels[k+2];
//8pxのcircleで表現
sh.graphics.beginFill(createjs.Graphics.getRGB(r, g, b) );
sh.graphics.drawCircle( i * 8, j * 8, 4);
}
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
if ( cnt < 660 ) {
update_mosic( cnt );
cnt++;
}
stage.update();
}