create.js - random collection

by uto usui

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="wrap">
	<h1>CreateJS</h1>
	<p>random collection</p>
  <section>
    <h2 class="text-left">Basic <br>ー</h2>
    <canvas id="canvas01"></canvas>
  </section>
  <section>
    <h2 class="text-left">Sum <br>ー</h2>
    <canvas id="canvas02"></canvas>
  </section>
  <section>
    <h2 class="text-left">Times <br>ー</h2>
    <canvas id="canvas03"></canvas>
  </section>
  <section>
    <h2 class="text-left">Square <br>ー</h2>
    <canvas id="canvas04"></canvas>
  </section>
  <section>
    <h2 class="text-left">Root <br>ー</h2>
    <canvas id="canvas05"></canvas>
  </section>
  <section>
    <h2 class="text-left">Sum Reverse<br>ー</h2>
    <canvas id="canvas06"></canvas>
  </section>
  <section>
    <h2 class="text-left">Times Reverse<br>ー</h2>
    <canvas id="canvas07"></canvas>
  </section>
  <section>
    <h2 class="text-left">Square Reverse<br>ー</h2>
    <canvas id="canvas08"></canvas>
  </section>
  <section>
    <h2 class="text-left">Root Reverse<br>ー</h2>
    <canvas id="canvas09"></canvas>
  </section>
</div>

SCSS

body {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 100vh;
  padding: 1rem;
	font-family: Helvetica, 'Helvetica';
	text-align: center;
  background-image: linear-gradient(60deg,#f7cac9 20%,#91A8d0 85%);
}

canvas {
	margin: auto;
	border: 8px solid rgba(white, .1);
  box-shadow: 0 20px 50px rgba(black, .2);
}

section {
  margin-top: 3rem;
}

Babel + JSX

let stage;

const canvasW = 400,
      canvasH = 400,
      circleW = 2,
      circleNum = (canvasW / (circleW / 2) * 20),

      /**
        * ランダム値の関数の定義
        */ 
      randRange = (max, min) => Math.floor(Math.random() * (max + 1 - min) + min),
      randBasic = (max) => Math.floor(Math.random() * max),
      randSum = (max) => Math.floor((Math.random() + Math.random()) / 2 * max),
      randTime = (max) => Math.floor(Math.random() * Math.random() * max),
      randSquare = (max) => {
        let rand = Math.random();
        return Math.floor(rand * rand * max);
      },
      randRoot = (max) => Math.floor(Math.sqrt(Math.random()) * max),
      randSumReverse = (max) => Math.floor( (1 - (Math.random() + Math.random()) / 2) * max),
      randTimeReverse = (max) => Math.floor( (1 - Math.random() * Math.random()) * max),
      randSquareReverse = (max) => {
        let rand = Math.random();
        return Math.floor((1 - rand * rand) * max);
      },
      randRootReverse = (max) => Math.floor((1 - Math.sqrt(Math.random())) * max),

      /**
        * 塗り
        */ 
      draw = (myGraphics) => {

        let light = randRange(60, 80),
            hue = randRange(170, 180),
            color = `hsl(${hue}, 75%, ${light}%)`;
        myGraphics.beginFill(color).drawCircle(0,0, circleW);

      },

      /**
        * 描画の初期設定
        */ 
      init = (target, randFunc) => {

        stage = new createjs.Stage(target);

        stage.canvas.width = canvasW;
        stage.canvas.height = canvasH;

        if (window.devicePixelRatio) {
          let canvas = document.getElementById(target);
          canvas.style.width = canvas.width + "px";
          canvas.style.height = canvas.height + "px";
          canvas.width *= devicePixelRatio;
          canvas.height *= devicePixelRatio;
          stage.scaleX = stage.scaleY = window.devicePixelRatio;
        }

        for (var i = 0; i < circleNum; i++) {

          // シェイプを定義
          var shape = new...