ウォーターフォールをパーティクルで

ウォーターフォールを描画する1つの方法は、パーティクルを使うことです。このサイト
http://spinorlab.matrix.jp/mytest4.html
を訪問すれば、デモを見ることができます。

約6,800個のパーティクルが、600 x 400画素のイメージのために使われています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
  <script>
    window.addEventListener("load", init);
    function init() {
      var stage = new createjs.Stage("myCanvas");
      var particles = [];
      createjs.Ticker.setFPS(30);
      createjs.Ticker.addEventListener("tick", handleTick);
      function handleTick(event) {
        emitParticles();
        updateParticles();
        stage.update();
      }
      function emitParticles() {
        for (var i = 0; i < 100; i++) {
          var particle = new createjs.Shape();
          particle.graphics
                  .beginFill(createjs.Graphics.getHSL((i*3.6+20*Math.random())%360, 100, 50))
                  .drawCircle(0, 0, 2);
          stage.addChild(particle);
          particle.compositeOperation = "darker";
          particle.x  = i * 6 + 3;
          particle.y  = 0;
          particle.vy = 6;
          particle.life = 400/6 - 1;
          particles.push(particle);
        }
      }
      function updateParticles() {
        for (var i = 0; i < particles.length; i++) {
          var particle = particles[i];
          particle.y += particle.vy;
          if (particle.life-- <= 0) {
            stage.removeChild(particle);
            particles.splice(i, 1);
          }
        }
      }
    }
  </script>
</head>

<body>
  <canvas id="myCanvas"
          width="600"
          height="400"
          style="background:black;">
  </canvas>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.