その78。

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 r = tm.util.Random.randint(0, 255);
var g = tm.util.Random.randint(0, 255);
var b = tm.util.Random.randint(0, 255);
bitmap.setPixel32XY(j, i, r, g, b, 255);
}
}

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

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

16行目

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

17行目

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

18行目

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

20～22行目

この3行の処理内容は同じものになります。
tmlib.js のランダムクラスを利用して0～255のランダム値を取得し「 r 」「 g 」「 b 」というそれぞれの変数に格納しています。
変数名からもわかるように色を決めるための数値ですね。

23行目

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

取得したランダム値を「 r 」「 g 」「 b 」それぞれに適用し色を表現しています。
透明度は255とそのまま数値で指示し、透明にさせないようにしてあります。
この段階ではまだ描画されていません。
描画の準備が終わった状態です。

28行目

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

Tweet