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

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

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

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

初期設定の関数は，つぎのように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;
}