let state = {}; function setup(ctx, width, height, dpr) { state = { particles: [], traceProgress: 0, phase: 'tracing', // 'tracing', 'burst', 'idle' burstTriggered: false, lastTime: 0, pulsePhase: 0, pathPoints: [], pathLength: 0, segmentLengths: [], cumulativeLengths: [], }; buildPath(); } function buildPath() { // Define bat silhouette as a series of points in normalized coords (-1 to 1) // We'll sample the Bézier path into discrete points for easy tracing const curves = getBatCurves(); const points = []; const segLengths = []; const cumLengths = []; let totalLen = 0; for (let c = 0; c < curves.length; c++) { const curve = curves[c]; const steps = 30; for (let i = (c === 0 ? 0 : 1); i <= steps; i++) { const t = i / steps; let x, y; if (curve.length === 4) { // cubic bezier: p0, cp1, cp2, p1 const [p0, cp1, cp2, p1] = curve; const mt = 1 - t; x = mt*mt*mt*p0[0] + 3*mt*mt*t*cp1[0] + 3*mt*t*t*cp2[0] + t*t*t*p1[0]; y = mt*mt*mt*p0[1] + 3*mt*mt*t*cp1[1] + 3*mt*t*t*cp2[1] + t*t*t*p1[1]; } else if (curve.length === 3) { // quadratic const [p0, cp, p1] = curve; const mt = 1 - t; x = mt*mt*p0[0] + 2*mt*t*cp[0] + t*t*p1[0]; y = mt*mt*p0[1] + 2*mt*t*cp[1] + t*t*p1[1]; } else { // line const [p0, p1] = curve; x = p0[0] + t * (p1[0] - p0[0]); y = p0[1] + t * (p1[1] - p0[1]); } points.push([x, y]); if (points.length > 1) { const dx = points[points.length-1][0] - points[points.length-2][0]; const dy = points[points.length-1][1] - points[points.length-2][1]; const d = Math.sqrt(dx*dx + dy*dy); totalLen += d; } cumLengths.push(totalLen); } } state.pathPoints = points; state.pathLength = totalLen; state.cumulativeLengths = cumLengths; } function getBatCurves() { // Batman logo defined as cubic Bézier curves in normalized space // Starting from bottom center (chin), going left (counter-clockwise) // Coordinates roughly in range -1 to 1 // Key points of the bat silhouette // Bottom chin const chin = [0, 0.55]; // Left jaw const ljaw1 = [-0.15, 0.35]; const ljaw2 = [-0.35, 0.2]; // Left wing lower scallop const lwing1 = [-0.55, 0.15]; const lwing2 = [-0.7, 0.25]; const lwing3 = [-0.85, 0.1]; // Left wing tip const lwingtip = [-1.0, -0.15]; // Left wing upper const lwingup1 = [-0.75, -0.05]; const lwingup2 = [-0.55, -0.15]; // Left ear base const learbase = [-0.3, -0.2]; // Left ear tip const leartip = [-0.25, -0.65]; // Head center notch const headnotch = [0, -0.35]; // Right ear tip const reartip = [0.25, -0.65]; // Right ear base const rearbase = [0.3, -0.2]; // Right wing upper const rwingup2 = [0.55, -0.15]; const rwingup1 = [0.75, -0.05]; // Right wing tip const rwingtip = [1.0, -0.15]; // Right wing lower scallop const rwing3 = [0.85, 0.1]; const rwing2 = [0.7, 0.25]; const rwing1 = [0.55, 0.15]; // Right jaw const rjaw2 = [0.35, 0.2]; const rjaw1 = [0.15, 0.35]; return [ // Start at chin, go left along jaw [chin, [-0.05, 0.45], [-0.1, 0.38], ljaw1], [ljaw1, [-0.2, 0.32], [-0.28, 0.25], ljaw2], // Left wing lower with scallops [ljaw2, [-0.42, 0.18], [-0.48, 0.18], lwing1], [lwing1, [-0.58, 0.13], [-0.62, 0.28], lwing2], [lwing2, [-0.78, 0.22], [-0.82, 0.15], lwing3], [lwing3, [-0.9, 0.05], [-0.98, -0.05], lwingtip], // Left wing upper edge back inward [lwingtip, [-0.92, -0.1], [-0.82, -0.05], lwingup1], [lwingup1, [-0.68, -0.05], [-0.6, -0.12], lwingup2], [lwingup2, [-0.48, -0.18], [-0.38, -0.2], learbase], // Left ear [learbase, [-0.3, -0.3], [-0.27, -0.5], leartip], // Head notch (between ears) [leartip, [-0.22, -0.5], [-0.1, -0.38], headnotch], // Right ear [headnotch, [0.1, -0.38], [0.22, -0.5], reartip], [reartip, [0.27, -0.5], [0.3, -0.3], rearbase], // Right wing upper [rearbase, [0.38, -0.2], [0.48, -0.18], rwingup2], [rwingup2, [0.6, -0.12], [0.68, -0.05], rwingup1], [rwingup1, [0.82, -0.05], [0.92, -0.1], rwingtip], // Right wing lower with scallops [rwingtip, [0.98, -0.05], [0.9, 0.05], rwing3], [rwing3, [0.82, 0.15], [0.78, 0.22], rwing2], [rwing2, [0.62, 0.28], [0.58, 0.13], rwing1], [rwing1, [0.48, 0.18], [0.42, 0.18], rjaw2], // Right jaw back to chin [rjaw2, [0.28, 0.25], [0.2, 0.32], rjaw1], [rjaw1, [0.1, 0.38], [0.05, 0.45], chin], ]; } function getPointAtProgress(progress) { const pts = state.pathPoints; const cum = state.cumulativeLengths; const targetLen = progress * state.pathLength; for (let i = 1; i < cum.length; i++) { if (cum[i] >= targetLen) { const prevLen = cum[i-1]; const segLen = cum[i] - prevLen; const t = segLen > 0 ? (targetLen - prevLen) / segLen : 0; return [ pts[i-1][0] + t * (pts[i][0] - pts[i-1][0]), pts[i-1][1] + t * (pts[i][1] - pts[i-1][1]) ]; } } return pts[pts.length - 1]; } function spawnEmber(cx, cy, sc, x, y, burst) { const angle = burst ? Math.random() * Math.PI * 2 : (Math.PI * 0.3 + Math.random() * Math.PI * 0.4); const speed = burst ? (1.5 + Math.random() * 3) : (0.3 + Math.random() * 0.8); return { x: cx + x * sc, y: cy + y * sc, vx: Math.cos(angle) * speed * sc * 0.01 * (burst ? 1 : 0.3), vy: burst ? Math.sin(angle) * speed * sc * 0.01 : Math.abs(Math.sin(angle)) * speed * sc * 0.005, size: (1.5 + Math.random() * 3) * sc * 0.007, life: 1.0, decay: 0.003 + Math.random() * 0.008, temp: 1.0, // 1=hot white, 0=cool red-brown swayPhase: Math.random() * Math.PI * 2, swayAmp: (0.2 + Math.random() * 0.5) * sc * 0.003, gravity: (0.5 + Math.random() * 0.5) * sc * 0.00008, trail: [], }; } function hexToRgb(hex) { const r = parseInt(hex.slice(1,3), 16); const g = parseInt(hex.slice(3,5), 16); const b = parseInt(hex.slice(5,7), 16); return [r, g, b]; } function lerpColor(c1, c2, t) { return [ c1[0] + (c2[0] - c1[0]) * t, c1[1] + (c2[1] - c1[1]) * t, c1[2] + (c2[2] - c1[2]) * t, ]; } const COL_WHITE = hexToRgb('#FFFFFF'); const COL_WARM_WHITE = hexToRgb('#FFF5E0'); const COL_ACCENT = hexToRgb('#d4764e'); const COL_ACCENT_BRIGHT = hexToRgb('#E8925F'); const COL_DARK = hexToRgb('#3d2c2c'); const COL_DEEP_RED = hexToRgb('#6B2A1A'); function render(ctx, time, width, height, params, mouse) { ctx.clearRect(0, 0, width, height); const cx = params.SCALE > 0 ? width * (params.CENTER_X ?? 0.5) : width / 2; const cy = params.SCALE > 0 ? height * (params.CENTER_Y ?? 0.5) : height / 2; const sc = params.SCALE > 0 ? params.SCALE : 1.0; const baseSize = Math.min(width, height) * 0.35 * (params.logoSize ?? 1.0) * sc; const traceSpeed = params.traceSpeed ?? 1.0; const glowIntensity = params.glowIntensity ?? 1.0; const emberDensity = params.emberDensity ?? 1.0; const fallSpeed = params.fallSpeed ?? 1.0; const pulseStrength = params.pulseStrength ?? 0.5; const dt = state.lastTime === 0 ? 16 : Math.min(time - state.lastTime, 50); state.lastTime = time; // Update trace progress if (state.phase === 'tracing') { state.traceProgress += dt * 0.0003 * traceSpeed; if (state.traceProgress >= 1.0) { state.traceProgress = 1.0; state.phase = 'burst'; state.burstTime = time; } } if (state.phase === 'burst' && !state.burstTriggered) { state.burstTriggered = true; const burstCount = Math.floor(40 + Math.random() * 20); const laserPt = getPointAtProgress(1.0); for (let i = 0; i < burstCount; i++) { if (state.particles.length < 200) { state.particles.push(spawnEmber(cx, cy, baseSize, laserPt[0], laserPt[1], true)); } } } if (state.phase === 'burst' && time - state.burstTime > 800) { state.phase = 'idle'; } // Continuous ember spawning in idle phase if (state.phase === 'idle' || state.phase === 'burst') { const spawnRate = 0.05 * emberDensity * dt; const spawnCount = Math.floor(spawnRate) + (Math.random() < (spawnRate % 1) ? 1 : 0); for (let i = 0; i < spawnCount; i++) { if (state.particles.length < 150) { const prog = Math.random(); const pt = getPointAtProgress(prog); state.particles.push(spawnEmber(cx, cy, baseSize, pt[0], pt[1], false)); } } } // Update particles for (let i = state.particles.length - 1; i >= 0; i--) { const p = state.particles[i]; p.vy += p.gravity * dt * fallSpeed; p.x += p.vx * dt * 0.5; p.y += p.vy * dt * fallSpeed; p.x += Math.sin(time * 0.002 + p.swayPhase) * p.swayAmp * dt * 0.05; p.life -= p.decay * dt * 0.06; p.temp = Math.max(0, p.temp - 0.001 * dt * 0.06); p.size *= 0.9995; // Mouse interaction if (mouse.x >= 0 && mouse.y >= 0) { const mx = mouse.x * width; const my = mouse.y * height; const dx = p.x - mx; const dy = p.y - my; const dist = Math.sqrt(dx*dx + dy*dy); if (dist < 80 * sc && dist > 0) { p.vx += (dx / dist) * 0.02; p.vy += (dy / dist) * 0.02; } } if (p.life <= 0 || p.y > height + 20 || p.x < -20 || p.x > width + 20) { state.particles.splice(i, 1); } } // === DRAWING === // Draw traced outline if (state.traceProgress > 0) { const pts = state.pathPoints; const cum = state.cumulativeLengths; const drawnLen = state.traceProgress * state.pathLength; // Glow layer (wider, more transparent) ctx.save(); // Pulse effect for completed outline let pulseAlpha = 1.0; let pulseColor = COL_ACCENT; if (state.phase === 'idle') { const pulse = Math.sin(time * 0.003) * 0.5 + 0.5; pulseAlpha = 0.6 + pulse * 0.4 * pulseStrength; pulseColor = lerpColor(COL_ACCENT, COL_ACCENT_BRIGHT, pulse * pulseStrength); } // Outer glow ctx.beginPath(); let firstDrawn = true; for (let i = 0; i < pts.length; i++) { if (cum[i] > drawnLen) break; const px = cx + pts[i][0] * baseSize; const py = cy + pts[i][1] * baseSize; if (firstDrawn) { ctx.moveTo(px, py); firstDrawn = false; } else { ctx.lineTo(px, py); } } // Add partial segment const partialPt = getPointAtProgress(state.traceProgress); ctx.lineTo(cx + partialPt[0] * baseSize, cy + partialPt[1] * baseSize); ctx.strokeStyle = `rgba(${Math.round(pulseColor[0])},${Math.round(pulseColor[1])},${Math.round(pulseColor[2])},${0.3 * pulseAlpha * glowIntensity})`; ctx.lineWidth = 8 * sc * 0.5; ctx.shadowColor = `rgba(${COL_ACCENT[0]},${COL_ACCENT[1]},${COL_ACCENT[2]},${0.5 * glowIntensity})`; ctx.shadowBlur = 20 * glowIntensity * sc * 0.5; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.stroke(); // Main outline ctx.beginPath(); firstDrawn = true; for (let i = 0; i < pts.length; i++) { if (cum[i] > drawnLen) break; const px = cx + pts[i][0] * baseSize; const py = cy + pts[i][1] * baseSize; if (firstDrawn) { ctx.moveTo(px, py); firstDrawn = false; } else { ctx.lineTo(px, py); } } ctx.lineTo(cx + partialPt[0] * baseSize, cy + partialPt[1] * baseSize); ctx.strokeStyle = `rgba(${Math.round(pulseColor[0])},${Math.round(pulseColor[1])},${Math.round(pulseColor[2])},${0.85 * pulseAlpha})`; ctx.lineWidth = 2.5 * sc * 0.5; ctx.shadowColor = `rgba(${COL_ACCENT[0]},${COL_ACCENT[1]},${COL_ACCENT[2]},${0.8 * glowIntensity})`; ctx.shadowBlur = 10 * glowIntensity * sc * 0.5; ctx.stroke(); ctx.restore(); // Draw laser point if (state.phase === 'tracing') { const lx = cx + partialPt[0] * baseSize; const ly = cy + partialPt[1] * baseSize; ctx.save(); ctx.globalCompositeOperation = 'lighter'; // Outer bloom const bloom = ctx.createRadialGradient(lx, ly, 0, lx, ly, 25 * glowIntensity * sc * 0.5); bloom.addColorStop(0, `rgba(255,255,255,${0.9 * glowIntensity})`); bloom.addColorStop(0.2, `rgba(${COL_ACCENT[0]},${COL_ACCENT[1]},${COL_ACCENT[2]},${0.6 * glowIntensity})`); bloom.addColorStop(0.6, `rgba(${COL_ACCENT[0]},${COL_ACCENT[1]},${COL_ACCENT[2]},${0.2 * glowIntensity})`); bloom.addColorStop(1, 'rgba(0,0,0,0)'); ctx.fillStyle = bloom; ctx.beginPath(); ctx.arc(lx, ly, 25 * glowIntensity * sc * 0.5, 0, Math.PI * 2); ctx.fill(); // Core bright point const core = ctx.createRadialGradient(lx, ly, 0, lx, ly, 5 * sc * 0.5); core.addColorStop(0, 'rgba(255,255,255,1)'); core.addColorStop(0.5, `rgba(255,245,224,0.8)`); core.addColorStop(1, 'rgba(255,255,255,0)'); ctx.fillStyle = core; ctx.beginPath(); ctx.arc(lx, ly, 5 * sc * 0.5, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Spawn trace sparks if (Math.random() < 0.4 * emberDensity) { if (state.particles.length < 150) { state.particles.push(spawnEmber(cx, cy, baseSize, partialPt[0], partialPt[1], false)); } } } } // Draw particles ctx.save(); ctx.globalCompositeOperation = 'lighter'; for (let i = 0; i < state.particles.length; i++) { const p = state.particles[i]; const alpha = Math.max(0, p.life); // Color based on temperature let col; if (p.temp > 0.7) { col = lerpColor(COL_ACCENT, COL_WARM_WHITE, (p.temp - 0.7) / 0.3); } else if (p.temp > 0.3) { col = lerpColor(COL_DEEP_RED, COL_ACCENT, (p.temp - 0.3) / 0.4); } else { col = lerpColor([30, 10, 5], COL_DEEP_RED, p.temp / 0.3); } const r = Math.max(0.5, p.size); // Glow if (r > 1 && alpha > 0.2) { const glow = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, r * 3); glow.addColorStop(0, `rgba(${Math.round(col[0])},${Math.round(col[1])},${Math.round(col[2])},${alpha * 0.4 * glowIntensity})`); glow.addColorStop(1, 'rgba(0,0,0,0)'); ctx.fillStyle = glow; ctx.beginPath(); ctx.arc(p.x, p.y, r * 3, 0, Math.PI * 2); ctx.fill(); } // Core ctx.fillStyle = `rgba(${Math.round(col[0])},${Math.round(col[1])},${Math.round(col[2])},${alpha})`; ctx.beginPath(); ctx.arc(p.x, p.y, r, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); } function resize(ctx, width, height, dpr) { // No special resize handling needed; everything is computed per frame }

From the kitchen

Reserve your table