p5jsで花火

kenichiro

先日隅田川花火大会に行ってきました。p5jsを使って簡単な花火スケッチを作製してみました。画面上をクリックすると花火が表示されます。

     let particles = [];

      function setup() {
        createCanvas(600, 600);
        noStroke();
      }

      function draw() {
        fill(0, 10);
        rect(0, 0, width, height);
        particles.forEach((p) => {
          let c = p.color;
          c.setAlpha(200 - p.count);
          p.count++;
          p.x += p.sx / 50;
          p.y += p.sy / 50;
          p.y += p.count / 100;
          fill(c);
          circle(p.x, p.y, 5);
        });
        particles = particles.filter((p) => p.count < 255);
      }

      function mousePressed() {
        let colors = [
          color(255, 0, 0),
          color(255, 255, 0),
          color(255, 255, 255),
          color(0, 255, 0),
          color(0, 0, 255),
          color(0, 255, 255),
        ];
        let c = colors[floor(random(colors.length))];
        for (let i = 0; i < 200; i++) {
          let d = radians(random(360));
          let r = random(50);
          particles.push({
            x: mouseX + r * cos(d),
            y: mouseY + r * sin(d),
            sx: r * cos(d),
            sy: r * sin(d),
            count: 0,
            color: c,
          });
        }
      }

p5jsを使用すると、このようなWebコンテンツを簡単に作成できます。花火の一つ一つの火花をparticlesというリストで管理しています。マウスがクリックされるとmousePressed関数が呼び出されます。そこではいくつか用意しておいた色からランダムに選び、その値を変数cに格納します。

for文を使って、200回繰り返して火花を作製しています。360度ランダムな角度を作製して変数dへ、中心からどれだけ離れているかは変数rで管理しています。あとは、この変数rとdを引数として三角関数で座標を求めています。

draw関数は繰り返し実行されます。particleから要素を取り出して、透明度を設定し、場所を更新して、小さな〇を描画しているだけです。描画するたびにcountを増加させ、255を超えるとリストから削除するようにしています。

Categories: Uncategorized