「tmlib.js 怒濤の 100 サンプル!!」を試す その93

その93。

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

今回試すサンプルは「図形(上級)」の「描画した図形をバウンドさせてみよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
大小の円が画面下に当っては跳ね返る動作が描画されたと思います。

/*
* 定数
*/
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT= 465;
var SHAPE_NUM    = 64;

tm.main(function() {
// canvas インスタンス生成
var canvas = tm.graphics.Canvas("#world");

// 幅, 高さを指定
canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
// 画面にフィットさせる
canvas.fitWindow();
// 黒でクリア
canvas.clearColor("black");

// サークルを生成
var circleList = [];
for (var i=0; i<SHAPE_NUM; ++i) {
var circle = {};
circle.radius = tm.util.Random.randint(10, 32);
circle.x = tm.util.Random.randint(circle.radius, canvas.width-circle.radius);  // X 座標値;
circle.y = tm.util.Random.randint(circle.radius, canvas.height-circle.radius); // Y 座標値;

circle.vx = tm.util.Random.randint(0, 4);
circle.vy = tm.util.Random.randint(0, 4);

var hue = tm.util.Random.randint(0, 360);                    // 色相
var color = "hsl({0}, 50%, 50%)".format(hue);
circle.color = color;

circle.update = function() {
// 移動
this.y += this.vy;
this.vy += 0.1;

// 画面からはみ出ないよう制御
var bottom = canvas.height - this.radius;
if (this.y > bottom) {
this.vy *= -1;
}
}
circle.draw = function() {
// 塗りつぶしスタイルを設定
canvas.fillStyle = this.color;
// 塗りつぶし描画
canvas.fillCircle(this.x, this.y, this.radius);
};

circleList.push(circle);

}

// アニメーション
tm.setLoop(function() {
// 画面クリア
canvas.clearColor("black");

// 更新
for (var i=0,len=circleList.length; i<len; ++i) {
var circle = circleList[i];
circle.update();
}

// ブレンドを乗算に設定
canvas.save();
canvas.globalCompositeOperation = "lighter";
// 描画
for (var i=0,len=circleList.length; i<len; ++i) {
var circle = circleList[i];
circle.draw();
}
canvas.restore();
}, 1000/60);
});

前回勉強したその92をアレンジしてあるものになりますので変更点だけ説明してみます。

25行目までは前回と同じですので省略します。

27行目で「 vx 」というプロパティを追加し円が移動するX方向の向きと速さを取得しています。
前回は取得する値が「 -4~4 」だったのですが今回は「 0~4 」と変更されています。
28行目で「 vy 」というプロパティを追加し円が移動するY方向の向きと速さを取得しています。
こちらも「 -4~4 」だったのが今回は「 0~4 」となっています。
移動する向きが必ずプラス方向になるということになります。
違いは移動速度ということだけですね。

30~32行目も前回と変わりません。

34行目で「 update 」というプロパティを追加し関数を定義しています。
ここでの変更点は移動処理とはみ出ないようにする制御処理です。
移動処理ではX方向の処理を行なっていませんので移動しません。
Y方向では36行目の処理は前回と同じですが、37行目で「 vy 」の値に「 0.1 」づつ増えるように指示されています。
これは同じ速度でどんどんスピードが速くなるようにするためです。
中学の頃に「 等加速度運動 」と習ったと思いますがあのようなイメージです。

はみ出ないようにする制御処理ですが
前回と記述の仕方が変わってはいますが行なっている処理自体は同じものです。
40行目でY方向の制限値として画面幅から半径を引いた値を「 bottom 」として変数に格納しています。
41~43行目で現在のY座標が「 bottom 」より大きいならば「 vy 」の値に「 -1 」を乗算しています。
これは正の値から負の値にすることによって移動方向が反転させたいためです。
最初に取得した「 vy 」は全て同じ方向に移動していますが、この処理によって制限値まで達したものから反対方向に移動を始めます。
ようするにバウンドするということですね。
そして反転した円は37行目で徐々に減速されていきます。

どういうことかというと、最初に取得した「 vy 」が「 2 」だったとします。
加速し座標が「 bottom 」まで達したら「 -1 」が乗算されて「 -2 」となりました。
そして現在の座標から「 -2 」移動します。
次の移動時には「 vy 」に「 +0.1 」された「 -1.9 」が使用されて「 -1.9 」移動することになります。
さらに次の移動時には「 -1.9 」から「 +0.1 」された「 -1.8 」がという感じで計算され移動量が減りながら減速していきます。
vy 」が「 0 」になったらまた反転し加速しながら落ちてくるというわけですね。

慣れないと単純な動作でも自分で表現するのは難しいですよね。
でも今はネット上に色んなサンプルコードが公開されていますから見て弄って学ぶといいかもですね!と自分に言い聞かせる。


「tmlib.js 怒濤の 100 サンプル!!」を試す その93」への2件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です