HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う

第11回 マウスポインタの動きに合わせてインスタンスをランダムに落とす

この記事を読むのに必要な時間:およそ 7 分

今回から取り組む新たなお題をjsdo.itに公開した。マウスポインタの動きに合わせてインスタンスがつくられ,ランダムな向きと速さで落ちていく図1)。インスタンスにはスプライトアニメーションを用いている。スプライトアニメーションは次回に解説するので,今回はShapeオブジェクトを使う。ランダムな方向に初速を与えて,自然落下させる動きが課題になる。

図1 マウスポインタの動きに合わせてつくられたインスタンスがランダムに落ちる

図1 マウスポインタの動きに合わせてつくられたインスタンスがランダムに落ちる

マウスポインタの動く位置にランダムなカラーと大きさのインスタンスを置く

落下のアニメーションに入る前に,マウスポインタの動く位置にランダムなカラーと大きさのShapeインスタンスを置いてみよう図2)。使うライブラリはEaselJSなので,script要素に読込んでおく。また,body要素のonload属性で,初期設定の関数(initialize())を呼出すという前提だ。

<script src="http://code.createjs.com/easeljs-0.6.1.min.js"></script>

図2 マウスポインタの動く位置にランダムなカラーと大きさのインスタンスが描かれる

図2 マウスポインタの動く位置にランダムなカラーと大きさのインスタンスが描かれる

初期設定の関数は,つぎのようにStage.stagemousemoveイベントにリスナー関数(addInstance())を加える。そして,リスナー関数から改めてShapeインスタンスをつくる関数(createInstance())が呼ばれている。引数には,インスタンスを描くべきマウスポインタのxy座標が渡される。つまり,マウスポインタを動かすと,その座標にインスタンスがつくられるということだ。

var stage;
function initialize() {
  var canvasElement = document.getElementById("myCanvas");
  stage = new createjs.Stage(canvasElement);
  stage.addEventListener("stagemousemove", addInstance);
}
function addInstance(eventObject) {
  createInstance(stage.mouseX, stage.mouseY);
  stage.update();
}

Shapeインスタンスをつくる関数(createInstance())は,以下のようにランダムなカラーと大きさで円のShapeインスタンスを別の関数(createShape())でつくる。引数には描くインスタンスの半径の最小値と最大値を渡す。そして,関数から返されたShapeインスタンスの位置を定め,Stageオブジェクトの子として表示リストに加えている。

円のShapeインスタンスをつくって返す関数(createShape())は,ランダムな半径とカラーでインスタンスに円形を描く。最大値と最小値の範囲からランダムな数値を得る処理はほかにも使うので,別に関数(getRandom())として定めた。これで,ステージ上で動かすマウスポインタの位置に,ランダムなカラーと大きさの円形のShapeインスタンスがつぎつぎに描かれていく(前掲図2)。

function createInstance(x, y) {
  var instance = createShape(2, 10);
  instance.x = x;
  instance.y = y;
  stage.addChild(instance);
}
function createShape(min, max) {
  var instance = new createjs.Shape();
  var radius = getRandom(min, max);
  var color = Math.floor(Math.random() * 0xFFFFFF);
  instance.graphics.beginFill(createjs.Graphics.getRGB(color))
  .drawCircle(0, 0, radius);
  return instance;
}
function getRandom(min, max) {
  var randomNumber = Math.random() * (max - min) + min;
  return randomNumber;
}

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入