create.js - circular motion

by uto usui

HTML

<div class="wrap">

  <h1>create.js</h1>
  <p>三角関数を使ったモーション<br>sin(angle)で-1〜+1の値を得る</p>
  <canvas id="myCanvas" width="250" height="250"></canvas>

</div>

SCSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  font-family: Helvetica, 'Helvetica';
  text-align: center;
}

h1 {
  font-size: 42px;
  font-weight: bold;
  color: #32355a;
}

canvas {
  margin: 20px auto;
  border: 3px dashed rgba(#32355a, .55);
}

JavaScript

window.addEventListener("load", init);

     function init() {
      var stage = new createjs.Stage("myCanvas");
			//
      var ball = new createjs.Shape();
      ball.graphics.beginFill('#aaaaaa').drawCircle(0, 0, 30);
      stage.addChild(ball);
      var angle = 0;
      var centerY = 100; // 中心座標
      var range = 50; // 変化幅
      var xSpeed = 1;
      var ySpeed = 0.05;
      // 時間経過
      createjs.Ticker.addEventListener("tick", handleTick);
      function handleTick() {
        ball.x += xSpeed;
        ball.y = centerY + Math.sin(angle) * range;
        angle += ySpeed;
        // 画面端
        if (ball.x > stage.canvas.width) {
          ball.x = 0;
        }
        stage.update();
      }
      createjs.Ticker.timingMode = createjs.Ticker.RAF;
    }