create.js - sine wave

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 shape = new createjs.Shape();
      stage.addChild(shape);
			//
      var angleY = 0;
      var centerY = stage.canvas.width / 2;
      var range = 80;
      var speedX = .2;
      var speedY = .02;
      var px = 0;
      shape.graphics.setStrokeStyle(1).beginStroke('#888888').moveTo(0, centerY);
      //
      createjs.Ticker.addEventListener("tick", handleTick);
      function handleTick() {
        px += speedX;
        var py = centerY + Math.sin(angleY) * range;
        angleY += speedY;
        //
        shape.graphics.lineTo(px, py);
        stage.update();
      }
      createjs.Ticker.timingMode = createjs.Ticker.RAF;
    }