[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":21,"_26":27,"_28":27,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","692588df79a88191991a304710d0d33e","versionInt","title","Feu D’artifice 60s - Simulation React","type","code/react","content","import React, { useRef, useEffect } from \"react\";\n\n// Pyro-Architecte IA — Simulation de feu d’artifice 60s\n// -----------------------------------------------------\n// - Canvas pleine page, fond nuit\n// - 60 secondes de show orchestré avec différents \"tableaux\"\n// - Variété : bombes sphériques, palmiers, anneaux, comètes, gerbes au sol, final bouquet\n// - Code en React + Canvas, sans dépendances externes\n\nconst PALETTE = [\n \"#ffdd55\",\n \"#ff6b6b\",\n \"#ff9f1c\",\n \"#4ecdc4\",\n \"#5f5fff\",\n \"#c77dff\",\n \"#ffffff\",\n];\n\nfunction rand(min, max) {\n return Math.random() * (max - min) + min;\n}\n\nfunction choice(arr) {\n return arr[Math.floor(Math.random() * arr.length)];\n}\n\nclass Particle {\n constructor(x, y, options = {}) {\n this.x = x;\n this.y = y;\n this.vx = options.vx ?? rand(-2, 2);\n this.vy = options.vy ?? rand(-2, 2);\n this.size = options.size ?? rand(1.2, 2.6);\n this.color = options.color ?? choice(PALETTE);\n this.life = options.life ?? rand(0.9, 1.4);\n this.alpha = 1;\n this.decay = rand(0.015, 0.035);\n this.glitter = options.glitter ?? false;\n this.gravity = options.gravity ?? 0.02;\n this.drag = options.drag ?? 0.99;\n this.blink = options.blink ?? false;\n }\n\n update(dt) {\n this.vx *= this.drag;\n this.vy = this.vy * this.drag + this.gravity;\n this.x += this.vx * dt;\n this.y += this.vy * dt;\n\n if (this.blink && Math.random() < 0.1) {\n this.alpha = Math.random();\n } else {\n this.alpha -= this.decay * dt;\n }\n if (this.glitter && Math.random() < 0.2) {\n this.size = rand(1, 3);\n }\n }\n\n get alive() {\n return this.alpha > 0;\n }\n\n draw(ctx) {\n ctx.save();\n ctx.globalAlpha = Math.max(this.alpha, 0);\n const g = ctx.createRadialGradient(\n this.x,\n this.y,\n 0,\n this.x,\n this.y,\n this.size * 3\n );\n g.addColorStop(0, \"#ffffff\");\n g.addColorStop(0.1, this.color);\n g.addColorStop(1, \"rgba(0,0,0,0)\");\n\n ctx.fillStyle = g;\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size * 3, 0, Math.PI * 2);\n ctx.fill();\n ctx.restore();\n }\n}\n\nclass Rocket {\n constructor(width, height, options = {}) {\n this.x = options.x ?? rand(width * 0.2, width * 0.8);\n this.y = height + 10;\n const targetY = options.targetY ?? rand(height * 0.15, height * 0.45);\n const heightTravel = this.y - targetY;\n\n this.vx = options.vx ?? rand(-0.4, 0.4);\n this.vy = options.vy ?? -rand(6.5, 8.5);\n this.color = options.color ?? choice(PALETTE);\n this.size = 3;\n this.exploded = false;\n this.life = 0;\n this.maxLife = rand(1.1, 1.6);\n this.targetY = targetY;\n this.pattern = options.pattern ?? choice([\"sphere\", \"ring\", \"palm\", \"spark\", \"willow\", \"heart\"]);\n this.ground = options.ground ?? false;\n this.heightTravel = heightTravel;\n }\n\n update(dt, height) {\n this.life += dt * 0.016;\n\n if (!this.ground) {\n this.vy += 0.04;\n this.x += this.vx * dt;\n this.y += this.vy * dt;\n } else {\n this.y -= 0.1 * dt; // légère montée pour les gerbes au sol\n }\n\n if (!this.exploded && (this.y <= this.targetY || this.life > this.maxLife)) {\n this.exploded = true;\n }\n }\n\n drawTrail(ctx) {\n ctx.save();\n ctx.globalCompositeOperation = \"lighter\";\n ctx.fillStyle = this.color;\n ctx.globalAlpha = 0.9;\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n ctx.fill();\n\n const gradient = ctx.createLinearGradient(\n this.x,\n this.y + 20,\n this.x,\n this.y\n );\n gradient.addColorStop(0, \"rgba(255,255,255,0)\");\n gradient.addColorStop(1, this.color + \"aa\");\n ctx.strokeStyle = gradient;\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.moveTo(this.x, this.y + 18);\n ctx.lineTo(this.x, this.y + 2);\n ctx.stroke();\n ctx.restore();\n }\n\n explode() {\n const particles = [];\n const baseColor = this.color;\n const baseCount = 120;\n\n const createSphere = (spread = 2.6) => {\n for (let i = 0; i < baseCount; i++) {\n const angle = (Math.PI * 2 * i) / baseCount + rand(-0.1, 0.1);\n const speed = rand(1.4, spread);\n particles.push(\n new Particle(this.x, this.y, {\n vx: Math.cos(angle) * speed,\n vy: Math.sin(angle) * speed,\n color: baseColor,\n glitter: true,\n life: rand(1.1, 1.6),\n })\n );\n }\n };\n\n const createRing = () => {\n const ringCount = 90;\n for (let i = 0; i < ringCount; i++) {\n const angle = (Math.PI * 2 * i) / ringCount;\n const speed = 2.4;\n particles.push(\n new Particle(this.x, this.y, {\n vx: Math.cos(angle) * speed,\n vy: Math.sin(angle) * speed,\n color: baseColor,\n glitter: true,\n life: rand(1.0, 1.5),\n drag: 0.985,\n })\n );\n }\n };\n\n const createPalm = () => {\n const fronds = 12;\n for (let i = 0; i < fronds; i++) {\n const angle = (Math.PI * 2 * i) / fronds;\n for (let j = 0; j < 14; j++) {\n const speed = rand(2.0, 4.1);\n particles.push(\n new Particle(this.x, this.y, {\n vx: Math.cos(angle) * speed,\n vy: Math.sin(angle) * speed * 0.6,\n color: baseColor,\n gravity: 0.03,\n life: rand(1.1, 1.8),\n })\n );\n }\n }\n };\n\n const createSpark = () => {\n const count = 180;\n for (let i = 0; i < count; i++) {\n const angle = rand(0, Math.PI * 2);\n const speed = rand(2.3, 4.6);\n particles.push(\n new Particle(this.x, this.y, {\n vx: Math.cos(angle) * speed,\n vy: Math.sin(angle) * speed,\n color: choice(PALETTE),\n glitter: true,\n blink: true,\n life: rand(0.9, 1.4),\n drag: 0.96,\n })\n );\n }\n };\n\n const createWillow = () => {\n const count = 150;\n for (let i = 0; i < count; i++) {\n const angle = rand(0, Math.PI * 2);\n const speed = rand(1.7, 2.4);\n particles.push(\n new Particle(this.x, this.y, {\n vx: Math.cos(angle) * speed,\n vy: Math.sin(angle) * speed * 0.4,\n color: baseColor,\n gravity: 0.03,\n life: rand(1.6, 2.2),\n drag: 0.99,\n })\n );\n }\n };\n\n const createHeart = () => {\n const count = 180;\n const scale = 7;\n for (let i = 0; i < count; i++) {\n const t = (Math.PI * 2 * i) / count;\n const x = 16 * Math.sin(t) ** 3;\n const y =\n 13 * Math.cos(t) -\n 5 * Math.cos(2 * t) -\n 2 * Math.cos(3 * t) -\n Math.cos(4 * t);\n const vx = (x / scale) * 0.22;\n const vy = (-y / scale) * 0.22;\n particles.push(\n new Particle(this.x, this.y, {\n vx,\n vy,\n color: baseColor,\n life: rand(1.2, 1.7),\n drag: 0.985,\n glitter: true,\n })\n );\n }\n };\n\n switch (this.pattern) {\n case \"sphere\":\n createSphere();\n break;\n case \"ring\":\n createRing();\n break;\n case \"palm\":\n createPalm();\n break;\n case \"spark\":\n createSpark();\n break;\n case \"willow\":\n createWillow();\n break;\n case \"heart\":\n createHeart();\n break;\n default:\n createSphere();\n }\n\n // Quelques micro-particules au centre pour l'effet flash\n for (let i = 0; i < 30; i++) {\n particles.push(\n new Particle(this.x, this.y, {\n vx: rand(-0.8, 0.8),\n vy: rand(-0.8, 0.8),\n color: \"#ffffff\",\n life: 0.5,\n drag: 0.9,\n glitter: true,\n })\n );\n }\n\n return particles;\n }\n}\n\nconst FireworksShow = () => {\n const canvasRef = useRef(null);\n const animationRef = useRef(null);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\");\n let width = canvas.clientWidth;\n let height = canvas.clientHeight;\n\n const resize = () => {\n const rect = canvas.getBoundingClientRect();\n width = rect.width;\n height = rect.height;\n const ratio = window.devicePixelRatio || 1;\n canvas.width = width * ratio;\n canvas.height = height * ratio;\n ctx.setTransform(ratio, 0, 0, ratio, 0, 0);\n };\n\n resize();\n window.addEventListener(\"resize\", resize);\n\n let rockets = [];\n let particles = [];\n let lastTime = performance.now();\n const showStart = lastTime;\n const showDuration = 60000; // 60s\n\n const scheduleLaunches = (elapsed) => {\n const t = elapsed / 1000; // en secondes\n\n let rate = 0;\n let groundRate = 0;\n\n if (t < 8) {\n // Ouverture lente : bombes isolées\n rate = 0.6;\n } else if (t < 20) {\n // Montée en puissance : plus de tirs et quelques gerbes au sol\n rate = 1.2;\n groundRate = 0.5;\n } else if (t < 35) {\n // Tableau central : grands motifs variés\n rate = 1.6;\n groundRate = 0.8;\n } else if (t < 50) {\n // Phase poétique : moins de tirs mais effets Willow / coeur\n rate = 1.0;\n } else if (t < 60) {\n // Final : rafale de tirs\n rate = 3.0;\n groundRate = 1.2;\n }\n\n const dtSec = (performance.now() - lastTime) / 1000;\n const rocketsToLaunch = rate * dtSec;\n const groundToLaunch = groundRate * dtSec;\n\n for (let i = 0; i < rocketsToLaunch; i++) {\n const patternPool = t < 10\n ? [\"sphere\", \"ring\"]\n : t < 25\n ? [\"sphere\", \"ring\", \"palm\", \"spark\"]\n : t < 45\n ? [\"palm\", \"willow\", \"heart\", \"ring\"]\n : [\"sphere\", \"ring\", \"palm\", \"spark\", \"willow\", \"heart\"];\n\n rockets.push(\n new Rocket(width, height, {\n x: rand(width * 0.15, width * 0.85),\n targetY: rand(height * 0.15, height * 0.5),\n color: choice(PALETTE),\n pattern: choice(patternPool),\n })\n );\n }\n\n for (let i = 0; i < groundToLaunch; i++) {\n rockets.push(\n new Rocket(width, height, {\n x: rand(width * 0.1, width * 0.9),\n targetY: rand(height * 0.75, height * 0.9),\n color: choice(PALETTE),\n pattern: choice([\"spark\", \"palm\", \"sphere\"]),\n ground: true,\n })\n );\n }\n };\n\n const animate = (time) => {\n const dt = Math.min(time - lastTime, 50);\n const elapsed = time - showStart;\n lastTime = time;\n\n ctx.fillStyle = \"rgba(5, 8, 20, 0.35)\";\n ctx.fillRect(0, 0, width, height);\n\n // léger halo de ville en bas\n const horizon = ctx.createLinearGradient(0, height * 0.7, 0, height);\n horizon.addColorStop(0, \"rgba(10,10,30,0)\");\n horizon.addColorStop(1, \"rgba(60,60,90,0.35)\");\n ctx.fillStyle = horizon;\n ctx.fillRect(0, height * 0.7, width, height * 0.3);\n\n if (elapsed < showDuration) {\n scheduleLaunches(elapsed);\n }\n\n rockets = rockets.filter((r) => {\n r.update(dt * 0.06, height);\n if (!r.exploded && !r.ground) {\n r.drawTrail(ctx);\n }\n\n if (r.exploded) {\n const newParticles = r.explode();\n particles.push(...newParticles);\n return false;\n }\n\n if (r.y < -50 || r.y > height + 80) return false;\n return true;\n });\n\n particles = particles.filter((p) => {\n p.update(dt * 0.06);\n if (p.alive) p.draw(ctx);\n return p.alive;\n });\n\n // Légendes du show\n ctx.save();\n ctx.fillStyle = \"rgba(255,255,255,0.8)\";\n ctx.font = \"14px system-ui, -apple-system, BlinkMacSystemFont, sans-serif\";\n ctx.textAlign = \"left\";\n ctx.fillText(\"Pyro-Architecte IA — Spectacle 60s\", 16, 24);\n\n const remaining = Math.max(0, 60 - Math.floor(elapsed / 1000));\n ctx.textAlign = \"right\";\n ctx.fillText(`${remaining}s`, width - 16, 24);\n ctx.restore();\n\n animationRef.current = requestAnimationFrame(animate);\n };\n\n animationRef.current = requestAnimationFrame(animate);\n\n return () => {\n window.removeEventListener(\"resize\", resize);\n if (animationRef.current) cancelAnimationFrame(animationRef.current);\n };\n }, []);\n\n return (\n

\n );\n};\n\nexport default FireworksShow;\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch","shouldPrefetchAccount",true,"shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","13720907685558716088","traceTime",1776508944196]