import React, { useState, useEffect, useRef, useCallback } from "react"; export default function App() { const canvasRef = useRef(null); const overlayRef = useRef(null); const animFrameRef = useRef(null); const particlesRef = useRef([]); const isDrawingRef = useRef(false); const lastPosRef = useRef(null); const timeRef = useRef(0); const hueShiftRef = useRef(0); const [brushShape, setBrushShape] = useState("splatter"); const [colorMode, setColorMode] = useState("rainbow"); const [randomness, setRandomness] = useState(60); const [brushSize, setBrushSize] = useState(30); const [showPanel, setShowPanel] = useState(true); const [particleCount, setParticleCount] = useState(0); const [baseHue, setBaseHue] = useState(200); const brushShapes = [ { id: "splatter", label: "💦 Splatter" }, { id: "spiral", label: "🌀 Spiral" }, { id: "star", label: "⭐ Star" }, { id: "pulse", label: "💓 Pulse" }, { id: "crystal", label: "💎 Crystal" }, { id: "smoke", label: "💨 Smoke" }, ]; const colorModes = [ { id: "rainbow", label: "🌈 Rainbow" }, { id: "fire", label: "🔥 Fire" }, { id: "ocean", label: "🌊 Ocean" }, { id: "neon", label: "⚡ Neon" }, { id: "mono", label: "🖤 Mono" }, { id: "custom", label: "🎨 Custom" }, ]; const getColor = useCallback((index, total, x, y) => { const t = timeRef.current; const r = randomness / 100; const rand = (Math.random() - 0.5) * r * 120; switch (colorMode) { case "rainbow": { const h = (hueShiftRef.current + (index / total) * 360 + rand) % 360; return `hsla(${h},90%,60%,${0.7 + Math.random() * 0.3})`; } case "fire": { const h = 10 + Math.random() * 50 + rand * 0.3; const l = 50 + Math.random() * 30; return `hsla(${h},100%,${l}%,${0.6 + Math.random() * 0.4})`; } case "ocean": { const h = 180 + Math.random() * 60 + rand * 0.3; const l = 40 + Math.random() * 40; return `hsla(${h},80%,${l}%,${0.5 + Math.random() * 0.5})`; } case "neon": { const choices = [290, 320, 180, 120, 60]; const h = choices[Math.floor(Math.random() * choices.length)] + rand * 0.5; return `hsla(${h},100%,65%,${0.7 + Math.random() * 0.3})`; } case "mono": { const v = Math.floor(60 + Math.random() * 40); return `hsla(0,0%,${v}%,${0.5 + Math.random() * 0.5})`; } case "custom": { const h = (baseHue + rand * 0.8 + (index / total) * 60) % 360; return `hsla(${h},85%,60%,${0.6 + Math.random() * 0.4})`; } default: return "white"; } }, [colorMode, randomness, baseHue]); const spawnParticles = useCallback((x, y) => { const count = Math.floor(8 + (randomness / 100) * 20); const r = randomness / 100; const newParticles = []; for (let i = 0; i < count; i++) { const angle = (i / count) * Math.PI * 2 + Math.random() * r * Math.PI; const speed = (1 + Math.random() * 4) * (0.5 + r); const size = brushSize * (0.1 + Math.random() * 0.9); const color = getColor(i, count, x, y); const life = 0.6 + Math.random() * 0.8; let vx = Math.cos(angle) * speed; let vy = Math.sin(angle) * speed; if (brushShape === "spiral") { const spiralAngle = angle + timeRef.current * 2; vx = Math.cos(spiralAngle) * speed * (1 + i * 0.1); vy = Math.sin(spiralAngle) * speed * (1 + i * 0.1); } else if (brushShape === "star") { const starAngle = (Math.round(angle / (Math.PI / 5)) * (Math.PI / 5)); vx = Math.cos(starAngle) * speed * (1 + Math.random() * r); vy = Math.sin(starAngle) * speed * (1 + Math.random() * r); } else if (brushShape === "pulse") { const pulseScale = 1 + Math.sin(timeRef.current * 3 + i) * 0.5; vx = Math.cos(angle) * speed * pulseScale; vy = Math.sin(angle) * speed * pulseScale; } else if (brushShape === "crystal") { const snapAngle = Math.round(angle / (Math.PI / 3)) * (Math.PI / 3); vx = Math.cos(snapAngle) * speed; vy = Math.sin(snapAngle) * speed; } else if (brushShape === "smoke") { vx = (Math.random() - 0.5) * speed * 2; vy = -Math.abs(Math.random() * speed * 2); } newParticles.push({ x, y, vx, vy, size, color, life, maxLife: life, rotation: Math.random() * Math.PI * 2, rotSpeed: (Math.random() - 0.5) * 0.2, shape: brushShape, wobble: Math.random() * Math.PI * 2, wobbleSpeed: 0.05 + Math.random() * 0.1, trail: [], }); } particlesRef.current = [...particlesRef.current, ...newParticles].slice(-800); }, [brushShape, brushSize, randomness, getColor]); const drawParticle = useCallback((ctx, p) => { const alpha = Math.max(0, p.life / p.maxLife); const size = p.size * (0.3 + alpha * 0.7); if (size < 0.5) return; ctx.save(); ctx.globalAlpha = alpha; ctx.translate(p.x, p.y); ctx.rotate(p.rotation); const colorWithAlpha = p.color.replace(/,[\d.]+\)$/, `,${alpha})`); ctx.fillStyle = colorWithAlpha; ctx.strokeStyle = colorWithAlpha; if (p.shape === "splatter") { ctx.beginPath(); ctx.ellipse(0, 0, size, size * (0.4 + Math.sin(p.wobble) * 0.3), 0, 0, Math.PI * 2); ctx.fill(); if (size > 8) { ctx.beginPath(); ctx.ellipse(size * 0.4, -size * 0.3, size * 0.25, size * 0.15, Math.random(), 0, Math.PI * 2); ctx.fill(); } } else if (p.shape === "spiral") { ctx.beginPath(); for (let t = 0; t < Math.PI * 4; t += 0.2) { const r = size * 0.08 * t; const sx = Math.cos(t + p.wobble) * r; const sy = Math.sin(t + p.wobble) * r; if (t === 0) ctx.moveTo(sx, sy); else ctx.lineTo(sx, sy); } ctx.lineWidth = size * 0.12; ctx.stroke(); } else if (p.shape === "star") { ctx.beginPath(); for (let k = 0; k < 10; k++) { const r2 = k % 2 === 0 ? size : size * 0.45; const a = (k / 10) * Math.PI * 2 - Math.PI / 2; if (k === 0) ctx.moveTo(Math.cos(a) * r2, Math.sin(a) * r2); else ctx.lineTo(Math.cos(a) * r2, Math.sin(a) * r2); } ctx.closePath(); ctx.fill(); } else if (p.shape === "pulse") { const rings = 3; for (let k = 0; k < rings; k++) { ctx.globalAlpha = alpha * (1 - k / rings) * 0.8; ctx.beginPath(); ctx.arc(0, 0, size * (1 + k * 0.5), 0, Math.PI * 2); ctx.lineWidth = size * 0.2; ctx.stroke(); } } else if (p.shape === "crystal") { ctx.beginPath(); const sides = 6; for (let k = 0; k < sides; k++) { const a = (k / sides) * Math.PI * 2; if (k === 0) ctx.moveTo(Math.cos(a) * size, Math.sin(a) * size); else ctx.lineTo(Math.cos(a) * size, Math.sin(a) * size); } ctx.closePath(); ctx.fill(); ctx.globalAlpha = alpha * 0.4; ctx.lineWidth = 1; ctx.strokeStyle = "white"; ctx.stroke(); } else if (p.shape === "smoke") { const grad = ctx.createRadialGradient(0, 0, 0, 0, 0, size); grad.addColorStop(0, colorWithAlpha); grad.addColorStop(1, "transparent"); ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(0, 0, size, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); }, []); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; }; resize(); window.addEventListener("resize", resize); const animate = () => { timeRef.current += 0.016; hueShiftRef.current = (hueShiftRef.current + 0.5) % 360; ctx.fillStyle = "rgba(9,9,11,0.15)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = "screen"; particlesRef.current = particlesRef.current.filter(p => p.life > 0); setParticleCount(particlesRef.current.length); for (const p of particlesRef.current) { p.wobble += p.wobbleSpeed; p.rotation += p.rotSpeed; if (p.shape === "smoke") { p.vx += (Math.random() - 0.5) * 0.1; p.vy *= 0.99; p.size *= 1.01; } else if (p.shape === "pulse") { p.vx *= 0.96; p.vy *= 0.96; } else { p.vx *= 0.97; p.vy *= 0.97; p.vy += 0.03; } p.x += p.vx; p.y += p.vy; p.life -= 0.012 + (1 - randomness / 100) * 0.01; drawParticle(ctx, p); } ctx.globalCompositeOperation = "source-over"; animFrameRef.current = requestAnimationFrame(animate); }; animFrameRef.current = requestAnimationFrame(animate); return () => { cancelAnimationFrame(animFrameRef.current); window.removeEventListener("resize", resize); }; }, [drawParticle, randomness]); const getPos = (e, canvas) => { const rect = canvas.getBoundingClientRect(); if (e.touches) { return { x: e.touches[0].clientX - rect.left, y: e.touches[0].clientY - rect.top }; } return { x: e.clientX - rect.left, y: e.clientY - rect.top }; }; const handleStart = useCallback((e) => { e.preventDefault(); isDrawingRef.current = true; const pos = getPos(e, canvasRef.current); lastPosRef.current = pos; spawnParticles(pos.x, pos.y); }, [spawnParticles]); const handleMove = useCallback((e) => { e.preventDefault(); if (!isDrawingRef.current) return; const pos = getPos(e, canvasRef.current); spawnParticles(pos.x, pos.y); const last = lastPosRef.current; if (last) { const dx = pos.x - last.x; const dy = pos.y - last.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist > 15) { const steps = Math.floor(dist / 10); for (let i = 1; i < steps; i++) { spawnParticles(last.x + (dx * i) / steps, last.y + (dy * i) / steps); } } } lastPosRef.current = pos; }, [spawnParticles]); const handleEnd = useCallback(() => { isDrawingRef.current = false; lastPosRef.current = null; }, []); const clearCanvas = () => { particlesRef.current = []; const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#09090b"; ctx.fillRect(0, 0, canvas.width, canvas.height); }; const downloadCanvas = () => { const canvas = canvasRef.current; const link = document.createElement("a"); link.download = `magic-art-${Date.now()}.png`; link.href = canvas.toDataURL(); link.click(); }; return (

{/* Canvas */}