@zakkster/lite-scratch-fx 1.0.0

package/src/ScratchRecipes2.js

@@ -0,0 +1,642 @@
+/**
+ * ScratchRecipes2 — 10 New Reveal Effects
+ *
+ * All implement the ScratchController recipe interface:
+ *   { count, init(ctx, capacity, w, h),
+ *     spawn(idx, rng, w, h, spot),
+ *     tick(dt, elapsedMs, engine, ctx, sourceCanvas, w, h) → boolean,
+ *     destroy() }
+ *
+ * Bugs fixed vs proposal:
+ *   - glitchReveal: Added onload guard for toDataURL image decode
+ *   - goldDust/cosmicDust: globalCompositeOperation reset after every frame
+ *   - pixelShatter: Stores ORIGINAL position for source crop (was using animated pos)
+ *   - laserScan: shadowBlur reset after draw; clipPath cleaned on destroy
+ *   - confettiBlast: Dedicated parallel arrays instead of repurposing size/decay
+ *   - liquidMelt: Replaced roundRect() with fillRect (Safari < 17.4 compat)
+ *   - neonPulse: Transform cleaned up on completion
+ *   - All: Use rng param instead of Math.random() for deterministic replay
+ *   - All: Proper globalCompositeOperation/globalAlpha reset on every frame
+ *
+ * Uses: @zakkster/lite-lerp (easeIn, easeOut, easeInOut, clamp, lerp)
+ *
+ * IMPORTANT CONTRACT: The ScratchController calls ctx.clearRect() before
+ * every tick(). Recipes must NOT clear the canvas themselves. If a recipe
+ * needs persistent state (e.g. motion trails), it must use an offscreen
+ * canvas internally and drawImage() the result onto the provided ctx.
+ */
+
+import {easeIn, easeOut, easeInOut, clamp, lerp} from '@zakkster/lite-lerp';
+import {resolvePalette} from './Palette.js';
+
+
+// ═══════════════════════════════════════════════════════════
+//  1. GLITCH REVEAL — CRT slicing + RGB channel split
+// ═══════════════════════════════════════════════════════════
+
+export function GlitchRevealRecipe({duration = 800} = {}) {
+    let img = null;
+    let imgReady = false;
+    let sliceSeeds = null; // Pre-generated random values for deterministic slicing
+
+    return {
+        count: 0,
+        init(ctx, capacity, w, h) {
+            // Pre-generate slice randomness so tick() is deterministic
+            sliceSeeds = new Float32Array(200); // 20 slices × 10 values per slice
+        },
+        spawn(idx, rng, w, h, spot) {
+            // Populate slice seeds during spawn phase (has rng access)
+            for (let i = 0; i < sliceSeeds.length; i++) sliceSeeds[i] = rng.next();
+            return {x: 0, y: 0, vx: 0, vy: 0, life: 0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            // Lazy capture with onload guard
+            if (!img) {
+                img = new Image();
+                img.onload = () => {
+                    imgReady = true;
+                };
+                img.src = src.toDataURL();
+                src.style.opacity = '0';
+                return false;
+            }
+            if (!imgReady) return false;
+
+            const raw = clamp(elapsed / duration, 0, 1);
+
+            if (raw > 0.9) return raw >= 1;
+
+            const intensity = 1 - easeIn(raw);
+            const sliceCount = 10 + (sliceSeeds[0] * 20) | 0;
+
+            ctx.globalAlpha = 1 - raw;
+            for (let i = 0; i < sliceCount; i++) {
+                const si = (i * 4) % sliceSeeds.length;
+                const sliceY = sliceSeeds[si] * h;
+                const sliceH = sliceSeeds[si + 1] * (h / 4);
+                const offsetX = (sliceSeeds[si + 2] - 0.5) * 100 * intensity;
+                const rgbShift = 5 * intensity;
+
+                // Red channel
+                ctx.globalCompositeOperation = 'screen';
+                ctx.drawImage(img, 0, sliceY, w, sliceH, offsetX - rgbShift, sliceY, w, sliceH);
+                // Cyan channel
+                ctx.drawImage(img, 0, sliceY, w, sliceH, offsetX + rgbShift, sliceY, w, sliceH);
+            }
+
+            ctx.globalCompositeOperation = 'source-over';
+            ctx.globalAlpha = 1;
+            return raw >= 1;
+        },
+        destroy() {
+            img = null;
+            imgReady = false;
+            sliceSeeds = null;
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  2. MATRIX DECAY — Digital rain characters falling
+// ═══════════════════════════════════════════════════════════
+
+export function MatrixDecayRecipe({count = 200, duration = 1500, colors, theme} = {}) {
+    let pCharSeed; // Pre-computed char index per particle
+    const palette = resolvePalette(colors, theme, ['#00ff41']);
+    const CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789$+-*/=%#&_(),.;:?!\\|{}<>[]^~';
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pCharSeed = new Float32Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            pCharSeed[idx] = rng.next(); // Deterministic char offset
+            return {
+                x: spot.x * w,
+                y: spot.y * h,
+                vx: 0,
+                vy: rng.range(5, 10),
+                life: 1.0,
+            };
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const {x, y, vx, vy, life, data, max} = engine;
+            const ds = dt * 60;
+            let alive = 0;
+
+            // Fade source
+            src.style.opacity = 1 - clamp(elapsed / (duration * 0.4), 0, 1);
+
+            // NOTE: No trail fillRect here. The ScratchController clears the canvas
+            // every frame before calling tick(). Crisp falling text over the fading
+            // scratch layer is cleaner for a reveal effect — no persistent black box
+            // obscuring the prize underneath.
+
+            ctx.font = '14px monospace';
+            ctx.textAlign = 'center';
+
+            for (let i = 0; i < max; i++) {
+                if (life[i] <= 0) continue;
+                const p = data[i];
+                y[i] += vy[i] * ds;
+                life[i] -= 0.015 * ds;
+                if (life[i] <= 0 || y[i] > h + 20) {
+                    life[i] = 0;
+                    continue;
+                }
+                alive++;
+
+                // Cycle through chars using seed + elapsed time
+                const charIdx = ((pCharSeed[p] * CHARS.length + elapsed * 0.03) | 0) % CHARS.length;
+                ctx.globalAlpha = life[i];
+                ctx.fillStyle = palette[0];
+                ctx.fillText(CHARS[charIdx], x[i], y[i]);
+            }
+
+            ctx.globalAlpha = 1;
+            ctx.textAlign = 'start';
+            return alive === 0 && elapsed >= duration;
+        },
+        destroy() {
+            pCharSeed = null;
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  3. GOLD DUST — Shimmering gold particles floating up
+// ═══════════════════════════════════════════════════════════
+
+export function GoldDustRecipe({count = 150, duration = 2000, colors, theme} = {}) {
+    let pSize, pPhase; // pPhase drives twinkle, not rotation
+    const palette = resolvePalette(colors, theme, ['#FFD700']);
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pSize = new Float32Array(capacity);
+            pPhase = new Float32Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            pSize[idx] = rng.range(1, 4);
+            pPhase[idx] = rng.range(0, Math.PI * 2);
+            return {
+                x: spot.x * w,
+                y: spot.y * h,
+                vx: rng.range(-1, 1),
+                vy: rng.range(-0.5, -2.5),
+                life: 1.0,
+            };
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const {x, y, vx, vy, life, data, max} = engine;
+            const ds = dt * 60;
+            let alive = 0;
+
+            src.style.opacity = 1 - easeOut(clamp(elapsed / (duration * 0.5), 0, 1));
+
+            ctx.globalCompositeOperation = 'lighter';
+
+            for (let i = 0; i < max; i++) {
+                if (life[i] <= 0) continue;
+                const p = data[i];
+                x[i] += vx[i] * ds;
+                y[i] += vy[i] * ds;
+                pPhase[p] += 0.1 * ds;
+                life[i] -= 0.008 * ds;
+                if (life[i] <= 0) continue;
+                alive++;
+
+                const twinkle = (Math.sin(pPhase[p]) + 1) / 2;
+                ctx.globalAlpha = life[i] * twinkle;
+                ctx.fillStyle = palette[0];
+                ctx.beginPath();
+                ctx.arc(x[i], y[i], pSize[p], 0, Math.PI * 2);
+                ctx.fill();
+            }
+
+            // ← FIX: Reset composite operation every frame
+            ctx.globalCompositeOperation = 'source-over';
+            ctx.globalAlpha = 1;
+            return alive === 0 && elapsed >= duration;
+        },
+        destroy() {
+            pSize = pPhase = null;
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  4. PIXEL SHATTER — Voxel blocks exploding outward
+// ═══════════════════════════════════════════════════════════
+
+export function PixelShatterRecipe({count = 60, duration = 1200} = {}) {
+    let pRot, pRotSpd, pSz, pOrigX, pOrigY; // ← FIX: Store ORIGINAL positions
+    let img = null, imgReady = false;
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pRot = new Float32Array(capacity);
+            pRotSpd = new Float32Array(capacity);
+            pSz = new Float32Array(capacity);
+            pOrigX = new Float32Array(capacity);
+            pOrigY = new Float32Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            const sx = spot.x * w, sy = spot.y * h;
+            pRot[idx] = rng.range(0, Math.PI);
+            pRotSpd[idx] = rng.range(-0.3, 0.3);
+            pSz[idx] = rng.range(5, 15);
+            pOrigX[idx] = sx; // ← FIX: Store spawn position for source crop
+            pOrigY[idx] = sy;
+
+            const angle = rng.range(0, Math.PI * 2);
+            const spd = rng.range(5, 15);
+            return {x: sx, y: sy, vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd, life: 1.0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            if (!img) {
+                img = new Image();
+                img.onload = () => {
+                    imgReady = true;
+                };
+                img.src = src.toDataURL();
+                src.style.opacity = '0';
+                return false;
+            }
+            if (!imgReady) return false;
+
+            const {x, y, vx, vy, life, data, max} = engine;
+            const ds = dt * 60;
+            const progress = clamp(elapsed / duration, 0, 1);
+            let alive = 0;
+
+
+            for (let i = 0; i < max; i++) {
+                if (life[i] <= 0) continue;
+                const p = data[i];
+                x[i] += vx[i] * ds;
+                y[i] += vy[i] * ds;
+                vx[i] *= 0.95;
+                vy[i] *= 0.95; // Drag
+                pRot[p] += pRotSpd[p];
+                life[i] -= 0.02 * ds;
+                if (life[i] <= 0) continue;
+                alive++;
+
+                const sz = pSz[p];
+                ctx.save();
+                ctx.globalAlpha = life[i];
+                ctx.translate(x[i], y[i]);
+                ctx.rotate(pRot[p]);
+                // ← FIX: Source crop uses ORIGINAL position, not current animated position
+                ctx.drawImage(img, pOrigX[p], pOrigY[p], sz, sz, -sz / 2, -sz / 2, sz, sz);
+                ctx.restore();
+            }
+            return alive === 0;
+        },
+        destroy() {
+            pRot = pRotSpd = pSz = pOrigX = pOrigY = null;
+            img = null;
+            imgReady = false;
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  5. IMPLOSION — Spin + shrink + speed lines
+// ═══════════════════════════════════════════════════════════
+
+
+// ═══════════════════════════════════════════════════════════
+//  6. LASER SCAN — Horizontal sweeping line burns the canvas
+// ═══════════════════════════════════════════════════════════
+
+export function LaserScanRecipe({duration = 1000, colors, theme} = {}) {
+    let sparkSeeds = null;
+    const palette = resolvePalette(colors, theme, ['#00ffff']);
+
+    return {
+        count: 0,
+        init(ctx, capacity, w, h) {
+            sparkSeeds = new Float32Array(20); // Pre-computed spark X positions
+        },
+        spawn(idx, rng) {
+            for (let i = 0; i < sparkSeeds.length; i++) sparkSeeds[i] = rng.next();
+            return {x: 0, y: 0, vx: 0, vy: 0, life: 0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const raw = clamp(elapsed / duration, 0, 1);
+            const scanY = raw * h;
+
+            // Clip source canvas to only show below the scan line
+            src.style.clipPath = `polygon(0 ${scanY}px, 100% ${scanY}px, 100% 100%, 0 100%)`;
+
+
+            if (raw < 0.98) {
+                ctx.globalCompositeOperation = 'lighter';
+
+                // Laser line core (themed) with a hot white centre
+                ctx.fillStyle = palette[0];
+                ctx.fillRect(0, scanY - 2, w, 4);
+                ctx.fillStyle = '#ffffff';
+                ctx.fillRect(0, scanY - 1, w, 2);
+
+                // Glow
+                ctx.shadowBlur = 15;
+                ctx.shadowColor = palette[0];
+
+                // Sparks (deterministic positions)
+                for (let i = 0; i < 5; i++) {
+                    ctx.beginPath();
+                    ctx.arc(sparkSeeds[i * 2] * w, scanY - sparkSeeds[i * 2 + 1] * 20, sparkSeeds[i * 2] * 2, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+
+                // ← FIX: Reset shadow + composite every frame
+                ctx.shadowBlur = 0;
+                ctx.shadowColor = 'transparent';
+                ctx.globalCompositeOperation = 'source-over';
+            }
+
+            if (raw >= 1) {
+                // ← FIX: Clean up clipPath on completion
+                src.style.clipPath = '';
+                return true;
+            }
+            return false;
+        },
+        destroy() {
+            sparkSeeds = null;
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  7. CONFETTI BLAST — 3D-tumbling rectangles from center
+// ═══════════════════════════════════════════════════════════
+
+export function ConfettiBlastRecipe({count = 80, duration = 1500, colors, theme} = {}) {
+    // ← FIX: Dedicated parallel arrays instead of repurposing size/decay
+    let pWobblePhase, pWobbleSpeed, pColorIdx;
+    const palette = resolvePalette(colors, theme, ['#ff0055', '#00ffcc', '#ffcc00', '#aa00ff', '#ff6600', '#00aaff']);
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pWobblePhase = new Float32Array(capacity);
+            pWobbleSpeed = new Float32Array(capacity);
+            pColorIdx = new Uint8Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            pWobblePhase[idx] = rng.range(0, Math.PI * 2);
+            pWobbleSpeed[idx] = rng.range(0.1, 0.3);
+            pColorIdx[idx] = rng.int(0, palette.length - 1);
+
+            const angle = rng.range(0, Math.PI * 2);
+            const spd = rng.range(5, 20);
+            return {x: w / 2, y: h / 2, vx: Math.cos(angle) * spd, vy: Math.sin(angle) * spd, life: 1.0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const {x, y, vx, vy, life, data, max} = engine;
+            const ds = dt * 60;
+            let alive = 0;
+
+            src.style.opacity = 1 - easeOut(clamp(elapsed / (duration * 0.3), 0, 1));
+
+            for (let i = 0; i < max; i++) {
+                if (life[i] <= 0) continue;
+                const p = data[i];
+
+                vy[i] += 0.5; // Gravity
+                x[i] += vx[i] * ds;
+                y[i] += vy[i] * ds;
+                pWobblePhase[p] += pWobbleSpeed[p] * ds;
+                life[i] -= 0.015 * ds;
+                if (life[i] <= 0) continue;
+                alive++;
+
+                ctx.save();
+                ctx.globalAlpha = life[i];
+                ctx.translate(x[i], y[i]);
+                ctx.rotate(pWobblePhase[p]); // Spin
+                ctx.scale(1, Math.cos(pWobblePhase[p] * 1.7)); // 3D tumble
+                ctx.fillStyle = palette[pColorIdx[p]];
+                ctx.fillRect(-6, -4, 12, 8);
+                ctx.restore();
+            }
+            return alive === 0 && elapsed >= duration;
+        },
+        destroy() {
+            pWobblePhase = pWobbleSpeed = pColorIdx = null;
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  8. LIQUID MELT — Pixels stretch and drip downward
+// ═══════════════════════════════════════════════════════════
+
+export function LiquidMeltRecipe({count = 100, duration = 1200, colors, theme} = {}) {
+    let pSize, pOriginY; // pOriginY = where the drip started (top of the streak)
+    const palette = resolvePalette(colors, theme, ['#1e293b']);
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pSize = new Float32Array(capacity);
+            pOriginY = new Float32Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            const sy = spot.y * h;
+            pSize[idx] = rng.range(2, 8);
+            pOriginY[idx] = sy;
+            return {x: spot.x * w, y: sy, vx: 0, vy: rng.range(0, 2), life: 1.0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const {x, y, vy, life, data, max} = engine;
+            const ds = dt * 60;
+            let alive = 0;
+
+            src.style.opacity = 1 - clamp(elapsed / (duration * 0.2), 0, 1);
+
+            for (let i = 0; i < max; i++) {
+                if (life[i] <= 0) continue;
+                const p = data[i];
+
+                vy[i] += 0.4; // Heavy gravity
+                y[i] += vy[i] * ds;
+                life[i] -= 0.015 * ds;
+                if (life[i] <= 0 || y[i] > h + 30) {
+                    life[i] = 0;
+                    continue;
+                }
+                alive++;
+
+                const sz = pSize[p];
+                const streakHeight = y[i] - pOriginY[p] + sz;
+
+                ctx.globalAlpha = life[i];
+                ctx.fillStyle = palette[0];
+                // ← FIX: Use fillRect instead of roundRect for Safari < 17.4 compat
+                ctx.fillRect(x[i] - sz / 2, pOriginY[p], sz, streakHeight);
+                // Rounded tip at bottom
+                ctx.beginPath();
+                ctx.arc(x[i], y[i], sz / 2, 0, Math.PI * 2);
+                ctx.fill();
+            }
+            ctx.globalAlpha = 1;
+            return alive === 0 && elapsed >= duration;
+        },
+        destroy() {
+            pSize = pOriginY = null;
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  9. NEON PULSE — Expanding concentric rings from center
+// ═══════════════════════════════════════════════════════════
+
+export function NeonPulseRecipe({duration = 800, colors, theme} = {}) {
+    const palette = resolvePalette(colors, theme, ['#00ffcc']);
+    return {
+        count: 0,
+        init() {
+        },
+        spawn() {
+            return {x: 0, y: 0, vx: 0, vy: 0, life: 0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const raw = clamp(elapsed / duration, 0, 1);
+            const t = easeOut(raw);
+            const cx = w / 2, cy = h / 2;
+
+            src.style.opacity = 1 - t;
+            // ← FIX: Clamp scale to prevent overflow; clean up on completion
+            src.style.transform = `scale(${1 + t * 0.3})`;
+            src.style.transformOrigin = 'center';
+
+            ctx.globalCompositeOperation = 'lighter';
+
+            for (let i = 0; i < 3; i++) {
+                const r = t * Math.max(w, h) * 0.8 * (1 - i * 0.2);
+                if (r < 1) continue;
+                ctx.beginPath();
+                ctx.arc(cx, cy, r, 0, Math.PI * 2);
+                ctx.globalAlpha = (1 - t) * (0.8 - i * 0.2);
+                ctx.strokeStyle = palette[0];
+                ctx.lineWidth = 10 - i * 3;
+                ctx.stroke();
+            }
+
+            // ← FIX: Reset composite operation
+            ctx.globalCompositeOperation = 'source-over';
+            ctx.globalAlpha = 1;
+
+            if (raw >= 1) {
+                src.style.transform = '';
+                return true;
+            }
+            return false;
+        },
+        destroy() {
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  10. COSMIC DUST — Spiral vortex consuming particles
+// ═══════════════════════════════════════════════════════════
+
+export function CosmicDustRecipe({count = 200, duration = 1800, colors, theme} = {}) {
+    let pAngle, pRadius, pColorIdx;
+    const palette = resolvePalette(colors, theme, ['#a78bfa', '#38bdf8', '#c084fc', '#6ee7b6']);
+
+    return {
+        count,
+        init(ctx, capacity) {
+            pAngle = new Float32Array(capacity);
+            pRadius = new Float32Array(capacity);
+            pColorIdx = new Uint8Array(capacity);
+        },
+        spawn(idx, rng, w, h, spot) {
+            const cx = w / 2, cy = h / 2;
+            const sx = spot.x * w, sy = spot.y * h;
+            pAngle[idx] = Math.atan2(sy - cy, sx - cx);
+            pRadius[idx] = Math.hypot(sx - cx, sy - cy);
+            pColorIdx[idx] = rng.int(0, palette.length - 1);
+            return {x: sx, y: sy, vx: 0, vy: 0, life: 1.0};
+        },
+        tick(dt, elapsed, engine, ctx, src, w, h) {
+            const {x, y, life, data, max} = engine;
+            const ds = dt * 60;
+            let alive = 0;
+            const cx = w / 2, cy = h / 2;
+
+            src.style.opacity = 1 - clamp(elapsed / (duration * 0.15), 0, 1);
+            ctx.globalCompositeOperation = 'lighter';
+
+            for (let i = 0; i < max; i++) {
+                if (life[i] <= 0) continue;
+                const p = data[i];
+
+                pRadius[p] *= 0.95; // Spiral inward
+                pAngle[p] += 0.2 * ds; // Spin
+                x[i] = cx + Math.cos(pAngle[p]) * pRadius[p];
+                y[i] = cy + Math.sin(pAngle[p]) * pRadius[p];
+                life[i] -= 0.01 * ds;
+
+                if (life[i] <= 0 || pRadius[p] < 2) {
+                    life[i] = 0;
+                    continue;
+                }
+                alive++;
+
+                ctx.globalAlpha = life[i];
+                ctx.fillStyle = palette[pColorIdx[p]];
+                ctx.beginPath();
+                ctx.arc(x[i], y[i], 2 + life[i] * 2, 0, Math.PI * 2);
+                ctx.fill();
+            }
+
+            // ← FIX: Reset composite operation every frame
+            ctx.globalCompositeOperation = 'source-over';
+            ctx.globalAlpha = 1;
+            return alive === 0 && elapsed >= duration;
+        },
+        destroy() {
+            pAngle = pRadius = pColorIdx = null;
+        },
+    };
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  ALL RECIPES MAP
+// ═══════════════════════════════════════════════════════════
+
+export const ScratchRecipes2 = {
+    GlitchRevealRecipe,
+    MatrixDecayRecipe,
+    GoldDustRecipe,
+    PixelShatterRecipe,
+    LaserScanRecipe,
+    ConfettiBlastRecipe,
+    LiquidMeltRecipe,
+    NeonPulseRecipe,
+    CosmicDustRecipe,
+};
+
+export default ScratchRecipes2;