import { useEffect, useRef } from "react"; import * as PIXI from "pixi.js"; export default function BoidsSimulation() { const containerRef = useRef(null); // ✅ Removed TypeScript type useEffect(() => { // Initialize Pixi Application const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, backgroundColor: 0x000000 // Black background }); // ✅ Ensure containerRef.current is not null before appending if (containerRef.current) { containerRef.current.appendChild(app.view); } else { console.warn("Container ref is null, Pixi.js canvas not appended"); } // Boids Array const boids = []; const numBoids = 50; for (let i = 0; i < numBoids; i++) { const boid = new PIXI.Graphics(); // Draw Triangle Shape boid.beginFill(0xffffff); // White color boid.moveTo(0, -5); // Top point boid.lineTo(5, 5); // Bottom right boid.lineTo(-5, 5); // Bottom left boid.lineTo(0, -5); // Close path boid.endFill(); boid.x = Math.random() * app.screen.width; boid.y = Math.random() * app.screen.height; boid.rotation = Math.random() * Math.PI * 2; boids.push(boid); app.stage.addChild(boid); } // Boids Movement const updateBoids = () => { boids.forEach(boid => { // Simple random movement boid.x += Math.random() * 2 - 1; boid.y += Math.random() * 2 - 1; }); }; app.ticker.add(updateBoids); // Mouse Interaction (Click & Drag) let isDragging = false; app.view.addEventListener("mousedown", () => (isDragging = true)); app.view.addEventListener("mouseup", () => (isDragging = false)); app.view.addEventListener("mousemove", (event) => { if (isDragging) { boids.forEach(boid => { const dx = event.clientX - boid.x; const dy = event.clientY - boid.y; boid.x += dx * 0.05; boid.y += dy * 0.05; }); } }); return () => { app.destroy(true); }; }, []); return (
{/* PixiJS canvas will be injected here */}
); }