仕上がり具合

(2011/2/26 github より jsdo.it 貼った方が楽だったのでそっちにしました。モダンなブラウザ推奨。)

趣旨

  1. {canvasの2Dコンテキスト}.getImageData() の結果からピクセルの位置と色情報がわかるよ
  2. それで何かしてみましょう

経緯

以前にProcessingでやってみたことがあったのが、画像のピクセルデータ(X座標、Y座標、何色?)だけを取得。そして白紙の画面の同じ座標に対して2~16pxぐらいの、同じ色のドット打つ。これをランダムな座標でたくさんループさせてみる。そうすると、ちょっと絵画風な雰囲気になるなぁ。というものでした。

その出来上がる様子を見ていると点描を作っているように見えるので、点描って呼んどきましょうと。(実際のそれとはちょっと違うっぽい気がするけど。)それで、canvasでピクセルデータが扱えるそうなので、まあ、同じことが出来るのだろうという。

仕組み

HTML的な意味での素材は3点 : img要素(これを模写することになる) : canvas要素1(ピクセル情報取得用) : canvas要素2(結果描画用)

最初にimg要素として画像を読み込み(display:none;で隠してます)、次にcanvas要素へdrawImageで書き出します(これもdisplay:none;)。そのcanvasからピクセル情報を取得。この情報を基に結果描画用のcanvasにドットを打ってます。

図も描いてみた。

上記仕組みの図

わかったこととか、感想とか

最初、デスクトップ上で普通に書いていたのだけどgetImageData()はクロスドメインとかローカルへのアクセスになるといけないようで、途中、ローカルで動いているApacheでのプレビューに切り替えました。ここへ載せるにも、使う画像はWordpressでアップロードして、JavaScriptはgithubに置いて、とかしてたら少しややこしかったです。

getImageData()は対象のcanvasがdisplay:none;な状態でも効いてるようでした。出来ないかもっていう想像もあったんですが、出来たっぽい。