import React, { useRef, useState, useEffect } from "react"; import anime from "animejs"; const BRUSHES = [ { name: "Splash", shape: "splash" }, { name: "Waves", shape: "wave" }, { name: "Spiral", shape: "spiral" }, { name: "Flare", shape: "flare" }, { name: "Poisson", shape: "dots" }, ]; const DEFAULT_COLORS = [ "#ff7c43", // orange "#1ecbe1", // cyan "#f825ae", // magenta "#fffb00", // yellow "#71ff0f", // green "#3448d6", // blue ]; function randomBetween(a, b) { return a + Math.random() * (b - a); } function lerp(a, b, t) { return a + (b - a) * t; } export default function App() { const canvasRef = useRef(null); const [brush, setBrush] = useState(BRUSHES[0].shape); const [colors, setColors] = useState(DEFAULT_COLORS); const [colorPick, setColorPick] = useState("multi"); const [brushSize, setBrushSize] = useState(60); const [randomness, setRandomness] = useState(0.6); const [trails, setTrails] = useState(true); const [isPainting, setIsPainting] = useState(false); const [lastPos, setLastPos] = useState(null); const [showUI, setShowUI] = useState(true); // Responsive canvas sizing useEffect(() => { function handleResize() { const canvas = canvasRef.current; if (canvas) { const dpr = window.devicePixelRatio || 1; canvas.width = canvas.offsetWidth * dpr; canvas.height = canvas.offsetHeight * dpr; } } handleResize(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); // Fade effect for real-time morphing useEffect(() => { let rafId; const fadeAndRender = () => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (trails) { ctx.save(); ctx.globalAlpha = 0.11; ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.restore(); } rafId = requestAnimationFrame(fadeAndRender); }; fadeAndRender(); return () => cancelAnimationFrame(rafId); }, [trails]); // Brush rendering logic function paintAt(x, y) { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); const dpr = window.devicePixelRatio || 1; const size = brushSize * dpr; const mainColor = colorPick === "multi" ? colors[Math.floor(Math.random() * colors.length)] : colorPick; switch (brush) { case "splash": { for (let i = 0; i < lerp(12, 34, randomness); ++i) { const angle = randomBetween(0, Math.PI * 2); const r = randomBetween(size * 0.15, size * lerp(0.6, 1.2, randomness)); ctx.beginPath(); ctx.arc( x * dpr + Math.cos(angle) * r, y * dpr + Math.sin(angle) * r, randomBetween(lerp(8, 15, randomness), lerp(size / 6, size / 3, randomness)), 0, 2 * Math.PI ); ctx.fillStyle = mainColor; ctx.globalAlpha = lerp(0.4, 0.85, Math.random()); ctx.filter = `blur(${lerp(0, 8, Math.random() * randomness)}px)`; ctx.fill(); } ctx.globalAlpha = 1; ctx.filter = "none"; break; } case "wave": { const waves = 10 + Math.floor(lerp(3, 12, randomness)); for (let i = 0; i < waves; ++i) { ctx.save(); ctx.beginPath(); ctx.moveTo(x * dpr, y * dpr); for (let t = 0; t < 1; t += 0.08) { const theta = lerp(0, 2 * Math.PI, t) + i; const r = lerp(size * 0.3, size, t) * lerp(0.8, 1.3, Math.random()); ctx.lineTo( x * dpr + Math.cos(theta + i) * r * Math.sin(t * Math.PI * (randomness + 1)), y * dpr + Math.sin(theta) * r ); } ctx.strokeStyle = mainColor; ctx.globalAlpha = lerp(0.3, 0.72, Math.random()); ctx.lineWidth = lerp(1.5, 4.5, Math.random()); ctx.filter = `blur(${lerp(0, 4, Math.random() * randomness)}px)`; ctx.stroke(); ctx.restore(); } ctx.globalAlpha = 1; ctx.filter = "none"; break; } case "spiral": { ctx.save(); const steps = 22 + Math.floor(lerp(10, 22, randomness)); ctx.beginPath(); for (let i = 0; i < steps; ++i) { const angle = i * Math.PI * 0.18 * lerp(0.92, 1.5, randomness); const radius = lerp(size * 0.1, size * 0.96, i / steps); const xx = x * dpr + Math.cos(angle) * radius; const yy = y * dpr + Math.sin(angle) * radius; ctx.lineTo(xx, yy); } ctx.strokeStyle = mainColor; ctx.globalAlpha = 0.75; ctx.lineWidth = lerp(2, 7, randomness); ctx.filter = `blur(${lerp(0, 6, Math.random() * randomness)}px)`; ctx.stroke(); ctx.restore(); ctx.globalAlpha = 1; ctx.filter = "none"; break; } case "flare": { for (let i = 0; i < 9 + Math.floor(8 * randomness); ++i) { ctx.save(); ctx.beginPath(); ctx.moveTo(x * dpr, y * dpr); const len = lerp(size * 0.6, size * 1.4, randomness); const angle = Math.PI * 2 * i / 14 + Math.random() * Math.PI * randomness; ctx.lineTo( x * dpr + Math.cos(angle) * len, y * dpr + Math.sin(angle) * len ); ctx.strokeStyle = mainColor; ctx.globalAlpha = 0.5 + Math.random() * 0.3; ctx.lineWidth = lerp(1, 7, Math.random() * randomness); ctx.filter = `blur(${lerp(0, 10, Math.random() * randomness)}px)`; ctx.stroke(); ctx.restore(); } ctx.globalAlpha = 1; ctx.filter = "none"; break; } case "dots": { const dots = 18 + Math.floor(lerp(2, 14, randomness) * 5); for (let i = 0; i < dots; ++i) { const r = size * Math.sqrt(Math.random() * randomness * 0.8) * lerp(0.8, 1.5, Math.random()); const theta = Math.random() * Math.PI * 2; const cx = x * dpr + Math.cos(theta) * r; const cy = y * dpr + Math.sin(theta) * r; ctx.beginPath(); ctx.arc(cx, cy, lerp(5, size * 0.18, Math.random()), 0, 2 * Math.PI); ctx.fillStyle = mainColor; ctx.globalAlpha = lerp(0.35, 0.92, Math.random()); ctx.filter = `blur(${lerp(0, 5, Math.random() * randomness)}px)`; ctx.fill(); } ctx.globalAlpha = 1; ctx.filter = "none"; break; } default: break; } } function handlePointerDown(e) { setIsPainting(true); setShowUI(false); const rect = canvasRef.current.getBoundingClientRect(); const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left; const y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top; setLastPos({ x, y }); paintAt(x, y); } function handlePointerMove(e) { if (!isPainting) return; e.preventDefault(); const rect = canvasRef.current.getBoundingClientRect(); const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left; const y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top; setLastPos({ x, y }); paintAt(x, y); } function handlePointerUp() { setIsPainting(false); setShowUI(true); setLastPos(null); } // Keyboard shortcut: Space to show/hide UI useEffect(() => { const handler = (e) => { if (e.code === "Space") setShowUI((prev) => !prev); }; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, []); // Animation morphing: randomly jitter color palette every 12s useEffect(() => { let id; function morphColors() { setColors((cs) => cs.map((c) => { // Slightly vary hue try { const hsl = anime.color(c).hsl; const h = (hsl[0] + randomBetween(-10, 12)) % 360; return `hsl(${h < 0 ? h + 360 : h}, ${hsl[1]}%, ${hsl[2]}%)`; } catch (e) { return c; } }) ); id = setTimeout(morphColors, 12000); } id = setTimeout(morphColors, 12000); return () => clearTimeout(id); }, []); // Clear canvas function handleClear() { const canvas = canvasRef.current; if (canvas) { const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); } } // Color selector function ColorSelector({ value, onChange }) { return (

{colors.map((col, i) => (

); } // Brush selector function BrushSelector({ value, onChange }) { return (

{BRUSHES.map((b) => ( ))}

); } return (

Magic Generative Painting

Click or swipe to splash vibrant, multipatterned art. Adjust shape, color, and chaos to create mesmerizing, morphing paintings. Spacebar toggles UI. Tap Clear to start fresh.

{/* Canvas */}

{/* Controls UI */} {showUI && (

Brush Shape

Brush Color

Size {brushSize}px setBrushSize(+e.target.value)} className="w-full accent-[var(--ds-primary)]" />

Chaos {Math.round(randomness * 100)}% setRandomness(parseFloat(e.target.value))} className="w-full accent-[var(--ds-primary)]" />

setTrails(v => !v)} className="accent-[var(--ds-primary)] mr-2" /> Fading Trails

)} {!showUI && ( )}

Tip: Spacebar toggles controls ⚙️

); }