ParticleJS - マウス追従

<html>
<head>
  <meta charset="UTF-8"/>
  <title>ParticleJS - マウス追従</title>

  <!-- CreateJSのライブラリー読み込み -->
  <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>

  <!-- パーティクルシステムのライブラリー読み込み -->
  <script src="../libs/particlejs.min.js"></script>

  <!-- JS -->
  <script>
    var particleSystem = null;
    var stage = null;

    //  ウィンドウのロードが終わり次第、初期化コードを呼び出す。
    window.addEventListener('load', function () {
      // Stageオブジェクトを作成します。表示リストのルートになります。
      stage = new createjs.Stage('myCanvas');

      // パーティクルシステム作成します。
      particleSystem = new particlejs.ParticleSystem();

      // パーティクルシステムの描画コンテナーを表示リストに登録します。
      stage.addChild(particleSystem.container);

      // Particle Develop( http://ics-web.jp/projects/particle-develop/ ) から書きだしたパーティクルの設定を読み込む
      particleSystem.importFromJson(
        // パラメーターJSONのコピー＆ペースト ここから--
        {
          'bgColor': '#00000',
          'width': 838,
          'height': 607,
          'emitFrequency': 300,
          'startX': 419,
          'startXVariance': '0',
          'startY': 304,
          'startYVariance': '0',
          'initialDirection': '209.5',
          'initialDirectionVariance': '155',
          'initialSpeed': '2.6',
          'initialSpeedVariance': '3.8',
          'friction': '0.0085',
          'accelerationSpeed': '0.835',
          'accelerationDirection': '233.2',
          'startScale': '1',
          'startScaleVariance': '0.52',
          'finishScale': '0',
          'finishScaleVariance': '0',
          'lifeSpan': '40',
          'lifeSpanVariance': '0',
          'startAlpha': '1',
          'startAlphaVariance': '0',
          'finishAlpha': '1',
          'finishAlphaVariance': '0',
          'shapeIdList': [
            'blur_circle'
          ],
          'startColor': {
            'hue': '17',
            'hueVariance': '32',
            'saturation': '100',
            'saturationVariance': '45',
            'luminance': '56',
            'luminanceVariance': '19'
          },
          'blendMode': true,
          'alphaCurveType': '0'
        }
        // パラメーターJSONのコピー＆ペースト ここまで---
      );

      // フレームレートの設定
      createjs.Ticker.framerate = 60;
      // requestAnimationFrameに従った呼び出し
      createjs.Ticker.timingMode = createjs.Ticker.RAF;
      // 定期的に呼ばれる関数を登録
      createjs.Ticker.addEventListener('tick', handleTick);
    });

    function handleTick() {
      //  マウス位置に従って、パーティクル発生位置を変更する
      particleSystem.startX = stage.mouseX;
      particleSystem.startY = stage.mouseY;

      // パーティクルの発生・更新
      particleSystem.update();

      // 描画を更新する
      stage.update();
    }
  </script>

  <!-- CSS -->
  <style>
    canvas {
      background-color: black;
    }

    html, body {
      height: 100%;
    }

    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #323232;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <canvas width="960" height="540" id="myCanvas"></canvas>
</body>
</html>