先日隅田川花火大会に行ってきました。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を超えるとリストから削除するようにしています。