CreateJS node moving

by uto usui

HTML

<script src="https://cdn.jsdelivr.net/npm/createjs@1.0.1/builds/1.0.0/createjs.min.js"></script>
<div class="wrap">
  <canvas id="canvas"></canvas>
</div>

<h1>CreateJS _node</h1>

SCSS

.wrap {
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
  border: 20px solid rgba(white,.9);
  background-color: black;
}

h1 {
  display: inline-block;
  font-size: calc(100vw / 10);
  top: 10px;
  left: 10px;
  color: rgba(white, .9);
  font-weight: bold;
  background-color: black;
  line-height: 1;
}

JavaScript

const randRange = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

class _node {

  constructor(target, size = 1, count = 100, speed = .5) {

    this.canvas = document.getElementById(target);
    let wrap = this.canvas.parentNode;
    this.width = wrap.clientWidth;
    this.height = wrap.clientHeight;
    this.size = size;
    this.count = count;
    this.weight = 1;
    this.ratio = 1 / 50000;
    this.max = 100;
    this.speed = speed;

    this.stage = new createjs.Stage(this.canvas);

    this.particles = [];
    this.colorInt = Math.floor(Math.random() * 0xFFFFFF) * 1000;

    this.line = new createjs.Shape();

    this.color = createjs.Graphics.getRGB(this.colorInt);

    this.canvas.width = this.width;
    this.canvas.height = this.height;

    if (window.devicePixelRatio) {

      this.canvas.width *= window.devicePixelRatio;
      this.canvas.height *= window.devicePixelRatio;
      this.canvas.style.width = this.canvas.width / window.devicePixelRatio + 'px';
      this.canvas.style.height = this.canvas.height / window.devicePixelRatio + 'px';

      this.size *= window.devicePixelRatio;
      this.weight *= window.devicePixelRatio;
      this.speed *= window.devicePixelRatio;

    }

    this.stageWidth = this.canvas.width;
    this.stageHeight = this.canvas.height;

    this.stage.addChild(this.line);

    for (let i = 0; i < this.count; i++) {

      /**
       * ステージからはみ出さない位置に
       */
      let x = randRange(this.size * 2, this.stageWidth - this.size * 2),
          y = randRange(this.size * 2, this.stageHeight - this.size * 2);

      let velocityX = (Math.random() - .5) * this.speed,
          velocityY = (Math.random() - .5) * this.speed,
          particle  = this.createShape(this.size, this.color, x, y, velocityX, velocityY);

      this.particles.push(particle);
      this.stage.addChild(particle);

    }

    createjs.Ticker.timingMode = createjs.Ticker.RAF;
    createjs.Ticker.addEventListener('tick', () =>...