/* ======================================================================== LUMINA — Custom FX Studio (floating) Write JS effects, save to library, export/import, push to FX chain. ======================================================================== */ (function () { const { useState, useEffect, useRef } = React; const STARTERS = { "Tint": "// (ctx, w, h, fx, audio) =>\nconst hue = (audio.bass || 0) * 360;\nctx.fillStyle = `hsla(${hue}, 80%, 50%, 0.18)`;\nctx.fillRect(0, 0, w, h);", "Bass Vignette": "// pulses a vignette with bass\nconst v = (audio.bass || 0) * 0.7;\nconst g = ctx.createRadialGradient(w/2, h/2, Math.min(w,h)*0.3, w/2, h/2, Math.max(w,h)*0.7);\ng.addColorStop(0, 'rgba(0,0,0,0)');\ng.addColorStop(1, `rgba(0,0,0,${v})`);\nctx.fillStyle = g;\nctx.fillRect(0, 0, w, h);", "Scanlines": "// CRT scanlines\nctx.save();\nctx.globalAlpha = 0.25;\nctx.fillStyle = '#000';\nfor (let y = 0; y < h; y += 3) ctx.fillRect(0, y, w, 1);\nctx.restore();", "Beat Flash": "// flash on beat\nif ((audio.beat || 0) > 0.5) {\n ctx.save();\n ctx.fillStyle = 'rgba(255,255,255,' + (audio.beat * 0.4) + ')';\n ctx.fillRect(0, 0, w, h);\n ctx.restore();\n}", "Border Glow": "// audio-reactive border\nconst t = 4 + (audio.energy || 0) * 24;\nctx.save();\nctx.strokeStyle = `hsl(${(audio.high || 0) * 360}, 100%, 60%)`;\nctx.lineWidth = t;\nctx.shadowColor = ctx.strokeStyle;\nctx.shadowBlur = 24;\nctx.strokeRect(t/2, t/2, w - t, h - t);\nctx.restore();", "Time Lines": "// scrolling diagonal lines\nconst t = performance.now() / 1000;\nctx.save();\nctx.globalAlpha = 0.18;\nctx.strokeStyle = '#fff';\nctx.lineWidth = 1;\nfor (let x = -h; x < w + h; x += 20) {\n const o = (x + t * 80) % (w + h);\n ctx.beginPath();\n ctx.moveTo(o, 0); ctx.lineTo(o - h, h);\n ctx.stroke();\n}\nctx.restore();", }; const STORE = "lumina_custom_fx_library_v1"; function loadLib() { try { return JSON.parse(localStorage.getItem(STORE) || "[]"); } catch (e) { return []; } } function saveLib(lib) { localStorage.setItem(STORE, JSON.stringify(lib)); } function CustomFXStudio() { const [open, setOpen] = useState(false); const [pos, setPos] = useState({ x: 380, y: 90 }); const [size, setSize] = useState({ w: 720, h: 480 }); const [code, setCode] = useState(STARTERS["Tint"]); const [name, setName] = useState("My FX"); const [error, setError] = useState(null); const [library, setLibrary] = useState(loadLib()); const [, tick] = useState(0); const previewRef = useRef(null); const stageRef = useRef(null); const fileInput = useRef(null); useEffect(() => { saveLib(library); }, [library]); // Preview loop useEffect(() => { if (!open || !previewRef.current) return; const cnv = previewRef.current; const ctx = cnv.getContext("2d"); let fn = null, fnErr = null; try { fn = new Function("ctx", "w", "h", "fx", "audio", code); } catch (e) { fnErr = e.message; } setError(fnErr); let raf; const tickFn = () => { const W = cnv.width = cnv.clientWidth * 2; const H = cnv.height = cnv.clientHeight * 2; // demo background — drifting gradient const t = performance.now() / 1000; const g = ctx.createLinearGradient(0, 0, W, H); g.addColorStop(0, `hsl(${(t * 20) % 360}, 70%, 30%)`); g.addColorStop(1, `hsl(${(t * 20 + 180) % 360}, 70%, 30%)`); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H); // shapes ctx.fillStyle = "rgba(255,255,255,0.2)"; for (let i = 0; i < 8; i++) { ctx.beginPath(); ctx.arc(W/2 + Math.cos(t + i) * W * 0.3, H/2 + Math.sin(t * 0.7 + i) * H * 0.3, 60, 0, Math.PI * 2); ctx.fill(); } // run user FX const audio = window.AudioEngine || { bass: 0, mid: 0, high: 0, energy: 0, beat: 0 }; if (fn) { try { fn(ctx, W, H, { code }, audio); setError(null); } catch (e) { setError(e.message); } } raf = requestAnimationFrame(tickFn); }; raf = requestAnimationFrame(tickFn); return () => cancelAnimationFrame(raf); }, [code, open]); const startDrag = (e) => { if (["BUTTON","INPUT","SELECT","TEXTAREA"].includes(e.target.tagName)) return; const start = { x: e.clientX, y: e.clientY }; const sp = { ...pos }; const onMove = (m) => setPos({ x: sp.x + (m.clientX - start.x), y: sp.y + (m.clientY - start.y) }); const onUp = () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); }; window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); }; const saveToLib = () => { const id = "cfx-" + Date.now(); setLibrary(arr => [...arr, { id, name, code, created: Date.now() }]); }; const loadFromLib = (item) => { setName(item.name); setCode(item.code); }; const deleteLib = (id) => { setLibrary(arr => arr.filter(it => it.id !== id)); }; const addToFxChain = () => { window.Prog?.addFX("customScript"); const fx = window.Prog.fxChain[window.Prog.fxChain.length - 1]; if (fx) { fx.code = code; fx._fn = null; fx._customName = name; window.Prog.emit(); } }; const exportLib = () => { const blob = new Blob([JSON.stringify(library, null, 2)], { type: "application/json" }); const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = `lumina-custom-fx.${Date.now()}.json`; a.click(); }; const importLib = (e) => { const f = e.target.files[0]; if (!f) return; const r = new FileReader(); r.onload = () => { try { const data = JSON.parse(r.result); if (Array.isArray(data)) { setLibrary(arr => [...arr, ...data.map(d => ({ ...d, id: "cfx-" + Date.now() + Math.random() }))]); } } catch (err) { alert("Invalid JSON: " + err.message); } }; r.readAsText(f); e.target.value = ""; }; if (!open) { return ( ); } return (
{/* Header */}
✦ Custom FX Studio setName(e.target.value)} style={{ padding: "4px 8px", borderRadius: 4, border: "none", background: "linear-gradient(180deg,#0a0a0c,#14141a)", color: "var(--accent)", fontFamily: "var(--font-mono)", fontSize: 11, boxShadow: "var(--nshadow-in-sm)", outline: "none", textShadow: "0 0 3px var(--accent-glow)", }} />
{/* Code editor */}
Code · (ctx, w, h, fx, audio)