let logos = []; let particles = []; let centerOffset = [230, 250]; let rippleColor, previousRippleColor; let rippleX, rippleY, rippleSize = 0; let rippleActive = false; let rippleTimer = 0; let rippleShape = null; let lastInteractionTime = 0; function setup() { createCanvas(windowWidth, windowHeight); colorMode(HSB, 360, 100, 100, 255); noStroke(); rippleColor = color(0); previousRippleColor = color(0); spawnLogo(); setInterval(spawnLogo, 500); // 캔버스에 직접 터치 이벤트 수동 등록 let cnv = document.querySelector('canvas'); cnv.addEventListener('touchstart', (e) => { e.preventDefault(); // 모바일에서 스크롤 방지 let touch = e.touches[0]; let bounds = cnv.getBoundingClientRect(); let x = touch.clientX - bounds.left; let y = touch.clientY - bounds.top; handleInteraction(x, y); }, { passive: false }); // 마우스 클릭 이벤트도 수동으로 등록 (모바일용 보완) cnv.addEventListener('mousedown', (e) => { let bounds = cnv.getBoundingClientRect(); let x = e.clientX - bounds.left; let y = e.clientY - bounds.top; handleInteraction(x, y); }); } function draw() { noStroke(); let t = constrain((millis() - lastInteractionTime) / 3000, 0, 1); colorMode(RGB); let from = color(red(previousRippleColor), green(previousRippleColor), blue(previousRippleColor)); let to = color(0); let bg = lerpColor(from, to, t); background(bg); colorMode(HSB, 360, 100, 100, 255); if (rippleActive) { rippleSize += 0.05; drawRippleWave(); rippleTimer++; if (rippleSize > 2.5 && previousRippleColor !== rippleColor) { previousRippleColor = rippleColor; lastInteractionTime = millis(); // 업데이트된 시간 저장 } if (rippleSize > 5) { rippleActive = false; } } for (let p of particles) { p.update(); p.display(); } particles = particles.filter(p => !p.isDead()); for (let i = 0; i < logos.length; i++) { let l = logos[i]; l.update(); let overlaps = logos.filter((o, j) => j !== i && dist(o.x, o.y, l.x, l.y) < 60); if (overlaps.length === 0) { l.currentAlpha = 255; } else { let index = logos.indexOf(l); let overlapFrontCount = overlaps.filter(o => logos.indexOf(o) > index).length; l.currentAlpha = constrain(255 - overlapFrontCount * 50, 40, 255); } l.display(); } logos = logos.filter(l => !l.done); drawWaterRipple(); } function drawRippleWave() { push(); translate(rippleX, rippleY); noStroke(); fill(rippleColor); for (let i = 0; i < 12; i++) { let angle = TWO_PI / 12 * i; let d = rippleSize * 200; let x = cos(angle) * d; let y = sin(angle) * d; ellipse(x, y, 300); } pop(); } function drawWaterRipple() { noFill(); stroke(255, 30); strokeWeight(2); for (let y = 0; y < height; y += 15) { beginShape(); for (let x = 0; x < width; x += 10) { let offset = sin((x * 0.02) + (millis() * 0.001 + y * 0.05)) * 3; vertex(x, y + offset); } endShape(); } } function handleInteraction(x, y) { for (let i = logos.length - 1; i >= 0; i--) { if (logos[i].checkHit(x, y)) break; } } function spawnLogo() { if (logos.length >= 100) logos.shift(); // 최대 100개로 제한 let x = random(30, width - 30); let y = random(30, height - 30); let baseHue = random(0, 360); let sat = random(70, 100); let bri = random(80, 100); let col = color(baseHue, sat, bri, 255); logos.push(new Logo(x, y, col)); } class Logo { constructor(x, y, col) { this.x = x; this.y = y; this.col = col; this.shapes = this.generateShapes(); this.done = false; this.clicked = false; this.scale = 0; this.grow = true; this.shapeStates = []; this.currentAlpha = 255; this.initStates(); } generateShapes() { let rawShapes = [ [[170.34, 155.11], [99.38, 135.01], [48.24, 65.34], [119.34, 84.95]], [[156.07, 168.79], [119.59, 84.79], [165.64, 6.51], [202.75, 90.86]], [[191.55, 163.88], [202.79, 90.87], [280.11, 17.99], [268.68, 92.24]], [[219.85, 178.25], [267.59, 92.35], [349.37, 88.33], [301.63, 174.78]], [[224.48, 251.62], [301.82, 174.65], [387.87, 219.9], [309.74, 296.53]], [[211.4, 265.4], [309.69, 296.36], [370.75, 409.35], [272.45, 378.38]], [[185.66, 387.44], [210.27, 275.66], [273.65, 375.82], [249.14, 486.49]], [[92.61, 432.59], [136.3, 346.05], [230.44, 301.51], [186.75, 388.07]], [[42.06, 332.72], [106.07, 269.51], [199.35, 284.13], [135.35, 347.34]], [[32.04, 191.88], [98.83, 134.47], [173.75, 211.46], [106.19, 269.53]] ]; return rawShapes.map(shape => shape.map(([x, y]) => [(x - centerOffset[0]) * 0.325 * 1.2, (y - centerOffset[1]) * 0.325 * 1.2])); } initStates() { for (let shape of this.shapes) { let cx = shape.reduce((sum, p) => sum + p[0], 0) / shape.length; let cy = shape.reduce((sum, p) => sum + p[1], 0) / shape.length; let angle = atan2(cy, cx); let direction = cx < 0 ? -1 : 1; this.shapeStates.push({ shape: shape.map(([x, y]) => [x, y]), angle: 0, scale: 1, dx: cos(angle + random(-0.2, 0.2)) * 1.5, dy: sin(angle + random(-0.2, 0.2)) * 1.5, rotationDir: direction }); } } update() { if (this.grow && this.scale < 1) { this.scale += 0.1; } else { this.grow = false; } if (this.clicked) { for (let s of this.shapeStates) { s.angle += 5 * s.rotationDir; s.scale *= 0.95; for (let pt of s.shape) { pt[0] += s.dx; pt[1] += s.dy; } } if (this.shapeStates[0].scale < 0.05) { this.done = true; } } } display() { push(); translate(this.x, this.y); for (let s of this.shapeStates) { push(); let cx = s.shape.reduce((sum, p) => sum + p[0], 0) / s.shape.length; let cy = s.shape.reduce((sum, p) => sum + p[1], 0) / s.shape.length; translate(cx, cy); rotate(radians(s.angle)); scale(this.scale * s.scale); translate(-cx, -cy); fill(hue(this.col), saturation(this.col), brightness(this.col), this.currentAlpha); beginShape(); for (let [x, y] of s.shape) vertex(x, y); endShape(CLOSE); pop(); } pop(); } checkHit(mx, my) { if (dist(mx, my, this.x, this.y) < 50 && !this.clicked) { this.clicked = true; previousRippleColor = rippleColor; rippleColor = color(hue(this.col), saturation(this.col), brightness(this.col), 255); rippleActive = true; rippleX = this.x; rippleY = this.y; rippleSize = 0; lastInteractionTime = millis(); for (let i = 0; i < 80; i++) { particles.push(new Particle(this.x, this.y, previousRippleColor)); } return true; } return false; } } class Particle { constructor(x, y, col) { this.x = x; this.y = y; let angle = random(TWO_PI); let speed = random(0.5, 3); this.vx = cos(angle) * speed; this.vy = sin(angle) * speed; this.size = random(10, 30); this.alpha = 255; this.col = color(hue(col), saturation(col), brightness(col), this.alpha); } update() { this.x += this.vx; this.y += this.vy; this.alpha -= 3; } display() { let c = color(hue(this.col), saturation(this.col), brightness(this.col), this.alpha); stroke(c); strokeWeight(2); noFill(); ellipse(this.x, this.y, this.size); } isDead() { return this.alpha <= 0; } }