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": "38",
          "startX": 480,
          "startXVariance": "570",
          "startY": 304,
          "startYVariance": "98",
          "initialDirection": "0",
          "initialDirectionVariance": "0",
          "initialSpeed": "0",
          "initialSpeedVariance": "0",
          "friction": "0",
          "accelerationSpeed": "0",
          "accelerationDirection": "0",
          "startScale": "0.98",
          "startScaleVariance": "1",
          "finishScale": "0.07",
          "finishScaleVariance": "0.23",
          "lifeSpan": "27",
          "lifeSpanVariance": "93",
          "startAlpha": "1",
          "startAlphaVariance": "0",
          "finishAlpha": "0.34",
          "finishAlphaVariance": 0.5,
          "shapeIdList": [
            "blur_circle",
            "kirakira2",
            "kirakira",
            "star"
          ],
          "startColor": {
            "hue": "88",
            "hueVariance": "99",
            "saturation": "76",
            "saturationVariance": "0",
            "luminance": "77",
            "luminanceVariance": "46"
          },
          "blendMode": true,
          "alphaCurveType": "0"
        }
        // パラメーターJSONのコピー＆ペースト ここまで---
      );

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

    function handleTick() {
      // 時間経過によって色相の基準値を変化させる
      particleSystem.startColor.hue += 2;
      if (particleSystem.startColor.hue >= 360) {
        particleSystem.startColor.hue = 0;
      }

      // パーティクルの発生・更新
      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>