その77。

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編

今回試すサンプルは「ピクセル操作」の「砂嵐(白黒)を作ってみよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
白黒の砂嵐が描画されたと思います。

/*
* 定数
*/
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT= 465;
tm.main(function() {
// canvas インスタンス生成
var canvas = tm.graphics.Canvas("#world");

// 幅, 高さを指定
canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
// 画面にフィットさせる
canvas.fitWindow();

// ビットマップを取得
var bitmap = canvas.getBitmap();
for (var i=0,width=bitmap.width; i<width; ++i) {
for (var j=0,height=bitmap.height; j<height; ++j) {
// ピクセルをセット
var value = tm.util.Random.randint(0, 255);
bitmap.setPixel32XY(j, i, value, value, value, 255);
}
}

// 描画
canvas.drawBitmap(bitmap, 0, 0);
}

今回勉強するのは16～21行目になります。

16行目

canvasに描画されているビットマップの情報を取得し、「 bitmap 」という変数に格納しています。

17行目

「 for文 」といって繰り返し処理を行うときに使うものになります。
詳しくはコチラを参照してください。漫画と共に説明してありますのでわかりやすいです。
読んで頂いた上でサンプルのfor文がちょっと違うことに気がつくと思います。
「 height = bitmap.width 」この部分ですね。
16行目で取得したビットマップの横幅を「 width 」という変数に格納し、繰り返し上限値にしています。
上のサンプルを再生させたものであるならば「 i 」に1づつ足して0～465になるまで繰り返すということになります。
「 ++i 」で「 i 」に1づつ足すという意味になります。
ちなみに「 i++ 」でもOKです。

18行目

やっていることは17行目と同じです。
横幅が縦幅に変わっただけなんですが注意しないといけないのが17行目のfor文の処理内だということです。
横幅が1の時に縦幅は0～465まで繰り返し、横幅が2のときにまた、縦幅を0～465まで繰り返します。
横幅が465になるまで同じ事を繰り返します。
なんとなくイメージが沸いてきたでしょうか。

19行目

18行目の処理内ですので縦幅を繰り返す度にこの行は実行されます。
内容はというとランダム値を取得するというものですがランダムクラスの「 randint(min, max) 」というメソッドを使用されています。
パラメータを見るとわかる通リ最小値と最大値を指定してランダム値を取得出来ます。
サンプルですと0～255までの値から取得するということになります。

20行目

この行も縦幅を繰り返す度に実行されます。
「 setPixel32XY( x, y, r, g, b, a ) 」でどこの座標に何色をセットするかを指示しています。
パラメータは下の表のようになります。

サンプルの j と i が逆なような気もしますが最大値が同じですので軽くスルーして横幅が1のとき縦幅が～と言った意味がわかるのではないでしょうか。
そして取得したランダム値を「 rgb 」全てに適用し明度のみの色(白や黒、灰色など)を表現しています。
透明度は255とそのまま数値で指示し、透明にさせないようにしてあります。
この段階ではまだ描画されていません。
描画の準備が終わった状態です。

21行目

ここで今まで準備したものを描画しています。
「 drawBitmap( bitmap, x, y ) 」についてはその76でも説明していますので復習も兼ねて確認してみてください。

サンプルくらいのコード量だと1ピクセルづつセットしては描画してとやってもいいのですが処理速度が低下すると思います。
Javascriptというものは基本的にはブラウザ上で動くものですので早く処理するに越したことはありません。
表示するのが遅かったらイライラしますし、閉じられてしまいますからね。
なるだけコードは短く高速にするよう心がけるといいかと思います。
言ってる自分自身が出来ていませんが・・・

Tweet