let offset = 150; // 最初のひし形の横の位置オフセット let speed = 1.2; // 移動速度 let minOffset = 25; // 重なりの境界 let animateStar = false; let particles = []; let starExploded = false; let starSize = 95; function setup() { createCanvas(windowWidth, windowHeight); strokeWeight(2); noFill(); angleMode(DEGREES); } function draw() { background(30); stroke(255); // 位置を徐々に中央に近づける if (offset > minOffset) { offset -= speed; } let centerY = height / 2; let centerX = width / 2; // 左のひし形と円 noFill(); strokeWeight(2); drawAnimatedStar2((centerX - 50) - offset, centerY, 150, 60); drawAnimatedCircle((centerX - 130) - offset, centerY - 190, 50, 90); // ←円をアニメ化 // 右のひし形と円 noFill(); strokeWeight(2); drawAnimatedStar2((centerX + 50) + offset, centerY, 150, 120); drawAnimatedCircle((centerX - 20) + offset, centerY - 190, 50, 150); // ←円をアニメ化 // 中央に近づいて重なり始めたら白く塗りつぶす if (offset <= 25) { fill(255); noStroke(); // 重なり部分の描画（単純に中央に白のひし形を重ねて表現） drawTwinkleStar1(centerX, centerY,90); noFill(); stroke(255); } if (offset <= 25) { animateStar = true; } if (animateStar) { drawAnimatedStar(centerX, centerY, starSize); } // 星が重なったらアニメーション開始 if (offset <= 25) { animateStar = true; } if (animateStar) { drawAnimatedStar(centerX, centerY, starSize); // 毎フレーム1〜3個ずつ生成 for (let i = 0; i < 3; i++) { particles.push(new Particle(centerX, centerY)); } } if (particles.length > 500) { particles.splice(0, particles.length - 500); // 古い粒子から消す } // 粒子を更新・表示 for (let i = particles.length - 1; i >= 0; i--) { particles[i].update(); particles[i].show(); if (particles[i].isDead()) { particles.splice(i, 1); } } } // ひし形（ダイヤ形）を描く関数 function drawAnimatedStar2(x, y, r, delay) { push(); translate(x, y); noFill(); for (let theta = 0; theta < 360; theta += 1) { let tx = r * pow(cos(theta), 3); let ty = r * 1.4 * pow(sin(theta), 3); let wave = sin((theta + (frameCount - delay) * 3) % 360); let c = map(wave, -1, 1, 0, 255); stroke(c); point(tx, ty); } pop(); } function drawTwinkleStar1(x, y, r) { push(); translate(x, y); beginShape(); for (let theta = 0; theta < 360; theta++) { vertex(r * pow(cos(theta), 3), r * 0.6 * pow(sin(theta), 3)); } endShape(CLOSE); pop(); } function drawAnimatedStar(x, y, r) { push(); translate(x, y); noFill(); beginShape(); for (let theta = 0; theta < 360; theta += 1) { let tx = r * pow(cos(theta), 3); let ty = r * 0.6 * pow(sin(theta), 3); // 色を時間差で流すように変化 let wave = sin((theta + frameCount * 3) % 360); let c = map(wave, -1, 1, 0, 255); // 白黒グラデーション stroke(c); point(tx, ty); // 線ではなく点で表現（必要ならlineに変更可） } endShape(); pop(); } function drawAnimatedCircle(x, y, r, delay) { push(); translate(x, y); noFill(); beginShape(POINTS); for (let theta = 0; theta < 360; theta += 1) { let tx = cos(theta) * r; let ty = sin(theta) * r; let wave = sin((theta + (frameCount - delay) * 3) % 360); let c = map(wave, -1, 1, 0, 255); stroke(c); point(tx, ty); } endShape(); pop(); } class Particle { constructor(x, y) { this.pos = createVector(x, y); let angle = random(360); let speed = random(2, 5); this.vel = p5.Vector.fromAngle(radians(angle)).mult(speed); this.alpha = 255; this.size = random(3, 8); } update() { this.pos.add(this.vel); this.alpha -= 3; } show() { push(); translate(this.pos.x, this.pos.y); stroke(255, this.alpha); strokeWeight(1); noFill(); beginShape(); let angle = TWO_PI / 5; let halfAngle = angle / 2.0; for (let a = 0; a < TWO_PI; a += angle) { let sx = cos(a) * this.size; let sy = sin(a) * this.size; vertex(sx, sy); sx = cos(a + halfAngle) * this.size * 0.5; sy = sin(a + halfAngle) * this.size * 0.5; vertex(sx, sy); } endShape(CLOSE); pop(); } isDead() { return this.alpha <= 0; } } function starShape(x, y, radius1, radius2) { let angle = TWO_PI / 5; let halfAngle = angle / 2.0; beginShape(); for (let a = 0; a < TWO_PI; a += angle) { let sx = x + cos(a) * radius1; let sy = y + sin(a) * radius1; vertex(sx, sy); sx = x + cos(a + halfAngle) * radius2; sy = y + sin(a + halfAngle) * radius2; vertex(sx, sy); } endShape(CLOSE); }

繋がり