create.js - planet

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('#888888').drawCircle(0, 0, 10);
      stage.addChild(ball);
			//
      var angle = 0;
      var centerX = stage.canvas.width / 2;
      var centerY = stage.canvas.height / 2;
      var radius = 100;
      var speed = .01;
      // 時間経過
      createjs.Ticker.addEventListener("tick", handleTick);
      function handleTick() {
        ball.x = centerX + Math.cos(angle) * radius;
        ball.y = centerY + Math.sin(angle) * radius;
        angle += speed;
        stage.update(); // 画面更新
      }
      //
      var bg = new createjs.Shape();
      bg.graphics.setStrokeStyle(1).beginStroke("LightGray").drawCircle(centerX, centerY, radius);
      stage.addChildAt(bg, 0);
      
      createjs.Ticker.timingMode = createjs.Ticker.RAF;
    }