webmanab.html

menu

シンプルな重力と摩擦の表現 -『Create.js』 

 

demo

  • シンプルな丸パーティクルを使った重力と摩擦の表現

window.addEventListener("load", init); function init() { // ステージを作成 var stage = new createjs.Stage("myCanvas"); // パーティクルの大きさ(半径) var size = 10; var particle = new createjs.Shape(); particle.graphics.beginFill('hsl(160,65%,70%)').drawCircle(0, 0, size); stage.addChild(particle); particle.x = stage.canvas.width / 2; particle.y = 0; // 速度情報 var vy = 0; // 時間経過 createjs.Ticker.addEventListener("tick", handleTick); // function handleTick() { // 重力 vy += .5; // 摩擦 vy *= 0.95; // particle.y += vy; // 地面の作成 if (particle.y > stage.canvas.height - size) { particle.y = stage.canvas.height - size; // 行き過ぎを補正 vy *= -1; // Y軸の速度を反転 } // ステージの更新 stage.update(); } createjs.Ticker.timingMode = createjs.Ticker.RAF; }

share

lab