let particles = [], logoPoints = [], explosions = [], mouseTrail = []; let time = 0, currentLogo = 0, mouseForce = 0; let colors = [ {r: 100, g: 180, b: 255}, {r: 255, g: 100, b: 150}, {r: 150, g: 255, b: 100}, {r: 255, g: 200, b: 100}, {r: 200, g: 100, b: 255} ]; let currentColor = 0; function setup() { createCanvas(windowWidth, windowHeight); noStroke(); for (let i = 0; i < 500; i++) particles.push(new Particle()); createLogo(); } function draw() { drawBackground(); time += 0.01; updateMouseTrail(); for (let p of particles) p.update(), p.display(); for (let pt of logoPoints) pt.update(), pt.display(); for (let i = explosions.length - 1; i >= 0; i--) { explosions[i].update(); explosions[i].display(); if (explosions[i].isDead()) explosions.splice(i, 1); } drawMouseTrail(); drawCustomCursor(); } function drawBackground() { for (let y = 0; y < height; y += 1) { // ← ← ← ココを変えるだけ！ let inter = map(y, 0, height, 0, 1); let c1 = lerpColor( color(5 + sin(time) * 5, 10 + cos(time) * 5, 30 + sin(time * 0.5) * 10), color(5, 5, 15), inter ); stroke(c1); line(0, y, width, y); } noStroke(); } function updateMouseTrail() { mouseTrail.push({x: mouseX, y: mouseY}); if (mouseTrail.length > 15) mouseTrail.shift(); } function drawMouseTrail() { for (let i = 0; i < mouseTrail.length - 1; i++) { let alpha = map(i, 0, mouseTrail.length - 1, 0, 150); let size = map(i, 0, mouseTrail.length - 1, 2, 8); let c = colors[currentColor]; fill(c.r, c.g, c.b, alpha); ellipse(mouseTrail[i].x, mouseTrail[i].y, size); } } function drawCustomCursor() { let c = colors[currentColor]; stroke(c.r, c.g, c.b, 200); strokeWeight(2); noFill(); let size = 20 + sin(time * 3) * 5; ellipse(mouseX, mouseY, size); line(mouseX - 10, mouseY, mouseX + 10, mouseY); line(mouseX, mouseY - 10, mouseX, mouseY + 10); noStroke(); } function mousePressed() { mouseForce = 30; for (let i = 0; i < 20; i++) explosions.push(new Explosion(mouseX, mouseY)); } function mouseReleased() { mouseForce = 0; } function keyPressed() { if (key === ' ') { currentLogo = (currentLogo + 1) % 5; currentColor = (currentColor + 1) % colors.length; logoPoints = []; createLogo(); } else if (key === 'r' || key === 'R') { particles = []; for (let i = 0; i < 500; i++) particles.push(new Particle()); } } function windowResized() { resizeCanvas(windowWidth, windowHeight); logoPoints = []; createLogo(); } // ---- Explosionクラス ---- class Explosion { constructor(x, y) { this.x = x; this.y = y; this.vx = random(-5, 5); this.vy = random(-5, 5); this.life = 255; this.size = random(2, 6); } update() { this.x += this.vx; this.y += this.vy; this.vx *= 0.98; this.vy *= 0.98; this.life -= 5; } display() { let c = colors[currentColor]; fill(c.r, c.g, c.b, this.life); ellipse(this.x, this.y, this.size); } isDead() { return this.life <= 0; } } // ---- Particleクラス ---- class Particle { constructor() { this.x = random(width); this.y = random(height); this.vx = random(-0.5, 0.5); this.vy = random(-0.8, 1.2); this.alpha = random(80, 120); this.size = random(1, 3); this.pulseOffset = random(0, TWO_PI); } update() { this.x += this.vx + sin(time + this.pulseOffset) * 0.1; this.y += this.vy + cos(time + this.pulseOffset) * 0.1; if (this.x > width) this.x = 0; if (this.x < 0) this.x = width; if (this.y > height) this.y = 0; if (this.y < 0) this.y = height; let d = dist(mouseX, mouseY, this.x, this.y); if (d < 100) { let angle = atan2(this.y - mouseY, this.x - mouseX); let force = map(d, 0, 100, 2, 0); this.vx += cos(angle) * force * 0.01; this.vy += sin(angle) * force * 0.01; } this.vx = constrain(this.vx, -2, 2); this.vy = constrain(this.vy, -2, 2); } display() { let c = colors[currentColor]; let pulse = sin(time * 2 + this.pulseOffset) * 30 + this.alpha; fill(c.r, c.g, c.b, pulse); ellipse(this.x, this.y, this.size + sin(time + this.pulseOffset) * 0.5); for (let other of particles) { let d = dist(this.x, this.y, other.x, other.y); if (d < 80 && d > 0) { let alpha = map(d, 0, 80, 100, 0); stroke(c.r, c.g, c.b, alpha); strokeWeight(0.5); line(this.x, this.y, other.x, other.y); noStroke(); } } } } // ---- LogoPointクラス ---- class LogoPoint { constructor(x, y) { this.baseX = x; this.baseY = y; this.x = x; this.y = y; this.pulse = random(0, TWO_PI); this.energy = 0; } update() { let d = dist(mouseX, mouseY, this.baseX, this.baseY); let angle = atan2(this.baseY - mouseY, this.baseX - mouseX); let offset = d < 80 ? map(d, 0, 80, 60 + mouseForce, 0) : 0; let targetX = this.baseX + cos(angle) * offset; let targetY = this.baseY + sin(angle) * offset; this.x = lerp(this.x, targetX, 0.1); this.y = lerp(this.y, targetY, 0.1); let waveX = sin(time * 2 + this.baseY * 0.01) * 2; let waveY = cos(time * 1.5 + this.baseX * 0.01) * 1; this.x += waveX; this.y += waveY; this.pulse += 0.08; this.energy = d < 80 ? map(d, 0, 80, 1, 0) : 0; } display() { let c = colors[currentColor]; let glow = map(sin(this.pulse), -1, 1, 150, 255); let energyGlow = this.energy * 100; for (let i = 0; i < 3; i++) { let size = 2 + i * 0.5 + sin(this.pulse * 2) * 0.3; let alpha = glow - i * 50 + energyGlow; fill(c.r, c.g, c.b, alpha); ellipse(this.x, this.y, size); } if (this.energy > 0.5) { stroke(c.r, c.g, c.b, this.energy * 150); strokeWeight(1); noFill(); ellipse(this.x, this.y, 10 + this.energy * 5); noStroke(); } } } // ---- ロゴの形状を生成する関数 ---- function createLogo() { let cx = width / 2, cy = height / 2; logoPoints = []; if (currentLogo === 0) drawLogoIDD(cx, cy); else if (currentLogo === 1) drawHexagon(cx, cy); else if (currentLogo === 2) drawWave(cx, cy); else if (currentLogo === 3) drawFlower(cx, cy); else if (currentLogo === 4) drawSpiral(cx, cy); } function drawSpiral(cx, cy) { for (let a = 0; a < TWO_PI * 4; a += 0.1) { let r = map(a, 0, TWO_PI * 4, 10, 120); let x = cx + sin(a) * r; // 横にうねる let y = cy + cos(a) * r; // 縦に進む（渦巻きの進行方向） logoPoints.push(new LogoPoint(x, y)); } } function drawHexagon(cx, cy) { for (let layer = 0; layer < 5; layer++) { let radius = 30 + layer * 15; for (let i = 0; i < 6; i++) { let a1 = (i * TWO_PI) / 6, a2 = ((i + 1) * TWO_PI) / 6; let x1 = cx + cos(a1) * radius, y1 = cy + sin(a1) * radius; let x2 = cx + cos(a2) * radius, y2 = cy + sin(a2) * radius; let steps = int(dist(x1, y1, x2, y2) / 3); for (let j = 0; j <= steps; j++) { let x = lerp(x1, x2, j / steps); let y = lerp(y1, y2, j / steps); logoPoints.push(new LogoPoint(x, y)); } } } } function drawWave(cx, cy) { for (let y = cy - 150; y <= cy + 150; y += 3) { for (let wave = 0; wave < 3; wave++) { // 横方向にsin波が揺れて、縦に下へ進む let x = cx + sin((y - cy) * 0.02 + wave * TWO_PI / 3) * (30 + wave * 15); logoPoints.push(new LogoPoint(x, y)); } } } function drawFlower(cx, cy) { for (let a = 0; a < TWO_PI; a += 0.05) { for (let p = 0; p < 8; p++) { let pa = a + (p * TWO_PI) / 8; let r = 50 + sin(a * 3) * 30; let x = cx + cos(pa) * r; let y = cy + sin(pa) * r; logoPoints.push(new LogoPoint(x, y)); } } for (let a = 0; a < TWO_PI; a += 0.2) { let r = 20; let x = cx + cos(a) * r; let y = cy + sin(a) * r; logoPoints.push(new LogoPoint(x, y)); } } function drawLogoIDD(cx, cy) { let spacing = 120; // "i" のパーツ drawWave(cx - spacing, cy); // i の棒 drawFlower(cx - spacing, cy - 80); // i の上の丸 // 最初の "d"：スパイラル + 六角形 drawSpiral(cx-30, cy+60); drawWave(cx + 40, cy); // 2つ目の "d"：スパイラル + 花 drawHexagon(cx + spacing, cy+60); drawWave(cx + spacing + 40, cy); }

交わるカタチ