not good but great

プログラミング、アート、映画・本の感想について書きます。

Paper.jsでCanvasに画像を表示させて、ピクセルデータを取得する

画像の読み込み方

Rasterを使う

Paper.jsの特徴はベクトルデータを扱えることで描画が綺麗で高速であるということです。
しかし画像はベクトルデータではありません。そこでラスタライズ(ベクトルデータをビットマップデータに変換)する必要があるのでRasterという名前になっているのだと思います。間違ってたらごめんなさいです。

<script type="text/paperscript" canvas="myCanvas">
var raster = new Raster("cat");
    
raster.position = view.center;

</script>
<img id="cat" src="http://jsrun.it/assets/q/a/M/u/qaMu3.jpeg">
<canvas id="myCanvas" resize></canvas>

このようにimgタグにidを設定しておきます。

img{
    display:none;
}

canvasとimgが二重に表示されてしまうので、imgは非表示にしておきます。

サイズを変更する

var raster = new Raster("cat");
    
raster.position = view.center;

raster.on("load",function(){
    raster.size = new Size(100,100);
});

サイズはSizeで指定することができます。raster.onで画像を読み込んだら関数を実行するようにしています。

ピクセルデータを読み込む

demo


ネコの画像をモザイク表示させて、一つ一つの円の大きさをアニメーションで変えています。

for(var y = 0;y < raster.height;y++){
    for(var x = 0;x < raster.width;x++){
        //Pixel Data
        var color = raster.getPixel(x,y);
        
        //circle
        var path = new Path.Circle({
            center:new Point(x,y) * gridSize,
            radius:gridSize / 2 / spacing
        });
        
        path.fillColor = color;
        //Random size
        path.scale(Math.random());
    }
}

座標を指定してgetPixelで色情報を読み込むことができます。

getPixelで取得できるデータ

Color {_type: "rgb", _components: Array[3], _properties: Array[3], _alpha: 1}
_alpha: 1
_canvasStyle: "rgb(22,22,24)"
_components: Array[3]
_owner: Path
_properties: Array[3]
_type: "rgb"
alpha: (...)
blue: (...)
brightness: (...)
components: (...)
destination: (...)
gradient: (...)
gray: (...)
green: (...)
highlight: (...)
hue: (...)
lightness: (...)
origin: (...)
red: (...)
saturation: (...)
type: (...)
__proto__: Color

getPixelで取得できるデータをコンソールに出力してみました。alpha,gray,hueなど色情報に関する様々なプロパティを持っていることがわかります。