"use client"; import { useRef, useEffect, useState } from "react"; import { type Sketch } from "@p5-wrapper/react"; import { NextReactP5Wrapper } from "@p5-wrapper/next"; import p5Types from "p5"; type ParticleOptions = { density?: number; // Number of particles generated per frame (default: 6) speed?: [number, number]; // Range of initial particle speed (min, max) (default: [1.5, 3.0]) lifespan?: [number, number]; // Range of particle lifespan in frames (min, max) (default: [80, 120]) size?: [number, number]; // Range of particle size in pixels (min, max) (default: [16, 32]) hue?: [number, number]; // Hue color transition range (from → to) (default: [60, 0], yellow to red) saturation?: number; // Fixed color saturation (0–255) (default: 255) brightness?: number; // Fixed color brightness (0–255) (default: 255) }; type Props = { children: React.ReactNode; options?: ParticleOptions; }; export function ParticleWrapper({ children, options }: Props) { const wrapperRef = useRef(null); const [origin, setOrigin] = useState({ x: 0, y: 0, w: 0, h: 0 }); useEffect(() => { const updateOrigin = () => { const rect = wrapperRef.current?.getBoundingClientRect(); if (rect) { setOrigin({ x: rect.left, y: rect.top, w: rect.width, h: rect.height, }); } }; updateOrigin(); window.addEventListener("resize", updateOrigin); return () => window.removeEventListener("resize", updateOrigin); }, []); return (

{children}

); } function makeSketch( origin: { x: number; y: number; w: number; h: number }, options?: ParticleOptions ): Sketch { return (p: p5Types) => { let particles: Particle[] = []; const density = options?.density ?? 6; const [minSpeed, maxSpeed] = options?.speed ?? [1.5, 3.0]; const [minLife, maxLife] = options?.lifespan ?? [80, 120]; const [minSize, maxSize] = options?.size ?? [16, 32]; const hueRange = options?.hue ?? [60, 0]; const saturation = options?.saturation ?? 255; const brightness = options?.brightness ?? 255; p.setup = () => { p.createCanvas(p.windowWidth, p.windowHeight); p.colorMode(p.HSB); }; p.draw = () => { if (origin.w === 0 || origin.h === 0) return; p.clear(); for (let i = 0; i < density; i++) { const px = p.random(origin.x, origin.x + origin.w); const py = p.random(origin.y, origin.y + origin.h); particles.push( new Particle(p.createVector(px, py), p, minSpeed, maxSpeed, minLife, maxLife, minSize, maxSize) ); } for (let i = particles.length - 1; i >= 0; i--) { const pt = particles[i]; pt.update(); pt.render(p); if (pt.isDead()) particles.splice(i, 1); } }; class Particle { loc: p5Types.Vector; velocity: p5Types.Vector; acceleration: p5Types.Vector; lifespan: number; maxLifespan: number; size: number; noiseSeed: number; constructor( pos: p5Types.Vector, p: p5Types, minSpeed: number, maxSpeed: number, minLife: number, maxLife: number, minSize: number, maxSize: number ) { this.loc = pos.copy(); const angle = p.radians(p.random(-1, 1)); const base = p.createVector(0, -1).rotate(angle); const speed = p.random(minSpeed, maxSpeed); this.velocity = base.mult(speed); this.acceleration = p.createVector(); this.maxLifespan = p.random(minLife, maxLife); this.lifespan = this.maxLifespan; this.size = p.random(minSize, maxSize); this.noiseSeed = p.random(1000); } update() { this.velocity.add(this.acceleration); this.loc.add(this.velocity); this.lifespan -= 2; this.acceleration.mult(0); } render(p: p5Types) { const lifeRatio = this.lifespan / this.maxLifespan; const hue = p.lerp(hueRange[0], hueRange[1], 1 - lifeRatio); const alpha = p.lerp(255, 0, 1 - lifeRatio); const size = p.lerp(this.size, 2, 1 - lifeRatio); const n = p.noise(this.noiseSeed + p.frameCount * 0.02); const xJitter = (n - 0.5) * 32; const renderX = this.loc.x + xJitter; p.noStroke(); p.fill(hue, saturation, brightness, alpha); p.circle(renderX, this.loc.y, size); } isDead() { return this.lifespan <= 0; } } }; }