Javascriptで馬の絵を走らせる！

今回はcanvasのCreateJSというフレームワークを使用して作ってみます。

↑の参考記事に沿うと円がぐるぐる回るアニメーションを描くことができます。

まずはこの円を作ったドット絵にしてみます。

// 画像を投影
var horse = new createjs.Bitmap("images/dot_left_t.png");
horse.scaleX = 0.12;
horse.scaleY = 0.12;
stage.addChild(horse);

続いてちょっとした工夫として、

向こう正面を走るときに画像を反転させ、かつ少し小さくします。

// スタート位置は0°
var angle = 0;

// 画像の軌道設定
var centerX = 320;
var radiusX = 200;
var centerY = 100;
var radiusY = 80;
var speed = 0.015;

// 時間経過処理（sinがマイナスの時は画像反転）
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {

horse.x = centerX - 20 + Math.cos(angle) * radiusX;
horse.y = centerY - 20 + Math.sin(angle) * radiusY;
if(Math.sin(angle) < 0){
horse.scaleX = -0.1;
horse.scaleY = 0.1;
stage.addChild(horse);
horse.x = centerX + 20 + Math.cos(angle) * radiusX;
horse.y = centerY - 20 + Math.sin(angle) * radiusY;
}else{
horse.scaleX = 0.12;
horse.scaleY = 0.12;
stage.addChild(horse);
}
angle += speed;

stage.update(); // 画面更新

}

向こう正面の判定はsinがマイナスのときにしています。

学校を卒業して初めてsin、cosが便利な場面に遭遇したぞ！

なんでこんなことを勉強するんだと思っている高校生諸君！

円運動の条件に使えるんだぞ！

え？そんなこと場面普通ないって？？

ですよね・・・。

話を戻して最後に走る場所を二つの楕円を重ねて描きました。

// ２つの楕円を描く
var radiusX2 = 210;
var radiusY2 = 90;
var radiusX3 = 190;
var radiusY3 = 70;
var bg2 = new createjs.Shape();
bg2.graphics.beginFill("LightGray")
.drawEllipse(centerX - radiusX2, centerY + 20 - radiusY2,
radiusX2 * 2, radiusY2 * 2);
stage.addChildAt(bg2, 0);
var bg3 = new createjs.Shape();
bg2.graphics.beginFill("Green")
.drawEllipse(centerX - radiusX3, centerY - radiusY3,
radiusX3 * 2, radiusY3 * 2);
stage.addChildAt(bg3, 0);

これで出来上がり！

iframeで埋め込んで見ました。

https://umatome.net/umatome/canvas.html

canvasの奥が深すぎてこれ以上手を出すことができませんでした。

自由度が高いので次に何をつくるかはお楽しみにー♪

UMATOME

（馬＋まとめ）！４頭のウマ達が競馬界を盛り上げる（？）

【SSLife】Javascriptで馬の絵を走らせる！【CreateJS】

Javascriptで馬の絵を走らせる！