[V0_FILE]typescriptreact:file="page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" 'use client' import { useState } from 'react' import NodeDisplay from './components/NodeDisplay' import ControlButtons from './components/ControlButtons' export default function Home() { const [currentPattern, setCurrentPattern] = useState('freeflight') const handleSetPattern = (pattern: string) => { setCurrentPattern(pattern) } return (

Advanced Drone Swarm Simulation

Observe complex drone formations with various predefined patterns

) } [V0_FILE]typescriptreact:file="components/ControlButtons.tsx" isEdit="true" isMerged="true" import React from 'react'; import { Zap, Orbit, Grid, VibrateIcon as Vortex, WavesIcon as Wave, Circle, Heart, Star, Triangle, Square, Hexagon, Infinity, Flower } from 'lucide-react'; interface ControlButtonsProps { setPattern: (pattern: string) => void } const ControlButtons: React.FC = ({ setPattern }) => { const patterns = [ { name: 'Free Flight', icon: Zap, color: 'yellow' }, { name: 'Spiral', icon: Orbit, color: 'blue' }, { name: 'Grid', icon: Grid, color: 'green' }, { name: 'Vortex', icon: Vortex, color: 'purple' }, { name: 'Wave', icon: Wave, color: 'cyan' }, { name: 'Circle', icon: Circle, color: 'pink' }, { name: 'Heart', icon: Heart, color: 'red' }, { name: 'Star', icon: Star, color: 'yellow' }, { name: 'Triangle', icon: Triangle, color: 'orange' }, { name: 'Square', icon: Square, color: 'indigo' }, { name: 'Hexagon', icon: Hexagon, color: 'teal' }, { name: 'Infinity', icon: Infinity, color: 'blue' }, { name: 'Flower', icon: Flower, color: 'pink' }, ]; return (

{patterns.map((pattern) => ( ))}

) } export default ControlButtons [V0_FILE]typescriptreact:file="components/NodeDisplay.tsx" isEdit="true" isQuickEdit="true" 'use client' import { useEffect, useState, useRef } from 'react' interface Drone { x: number y: number color: string targetX: number targetY: number } interface NodeDisplayProps { pattern: string } const NodeDisplay: React.FC = ({ pattern }) => { const [drones, setDrones] = useState([]) const animationRef = useRef() const canvasRef = useRef(null) const dronesRef = useRef([]) const transitionProgress = useRef(0) const prevPattern = useRef('') useEffect(() => { const newDrones: Drone[] = [] const droneCount = 150 const displaySize = 600 const generateColor = () => { const hue = Math.random() * 360 return `hsl(${hue}, 100%, 70%)` } for (let i = 0; i < droneCount; i++) { newDrones.push({ x: Math.random() * displaySize, y: Math.random() * displaySize, color: generateColor(), targetX: 0, targetY: 0 }) } setDrones(newDrones) dronesRef.current = newDrones setPattern(pattern) }, []) useEffect(() => { if (prevPattern.current !== pattern) { transitionProgress.current = 0 prevPattern.current = pattern setPattern(pattern) } }, [pattern]) const setPattern = (currentPattern: string) => { const displaySize = 600 const centerX = displaySize / 2 const centerY = displaySize / 2 const calculateTargets = (index: number, total: number) => { switch (currentPattern) { case 'freeflight': return { targetX: Math.random() * displaySize, targetY: Math.random() * displaySize } case 'spiral': const angle = (index / total) * Math.PI * 20 const radius = 10 + (index / total) * 280 return { targetX: centerX + Math.cos(angle) * radius, targetY: centerY + Math.sin(angle) * radius } case 'grid': const gridSize = Math.ceil(Math.sqrt(total)) const cellSize = displaySize / gridSize const row = Math.floor(index / gridSize) const col = index % gridSize return { targetX: col * cellSize + cellSize / 2, targetY: row * cellSize + cellSize / 2 } case 'vortex': const vortexAngle = (index / total) * Math.PI * 2 const vortexRadius = 100 + (index / total) * 150 return { targetX: centerX + Math.cos(vortexAngle) * vortexRadius, targetY: centerY + Math.sin(vortexAngle) * vortexRadius } case 'wave': const waveX = (index / total) * displaySize const waveY = centerY + Math.sin(waveX * 0.05) * 100 return { targetX: waveX, targetY: waveY } case 'circle': const circleAngle = (index / total) * Math.PI * 2 const circleRadius = 250 return { targetX: centerX + Math.cos(circleAngle) * circleRadius, targetY: centerY + Math.sin(circleAngle) * circleRadius } case 'heart': const t = (index / total) * Math.PI * 2 const heartX = 16 * Math.pow(Math.sin(t), 3) const heartY = 13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t) return { targetX: centerX + heartX * 15, targetY: centerY - heartY * 15 } case 'star': const starPoints = 5; const starAngle = (Math.PI * 2 / starPoints); const starOuterRadius = 240; const starInnerRadius = starOuterRadius * 0.4; // Calculate which line of the star this drone belongs to const lineIndex = Math.floor((index / total) * starPoints * 2); const lineProgress = (index % (total / (starPoints * 2))) / (total / (starPoints * 2)); let fromX, fromY, toX, toY; if (lineIndex % 2 === 0) { // Outer point to inner point const fromAngle = (lineIndex / 2) * starAngle - Math.PI / 2; const toAngle = ((lineIndex / 2 + 2) % starPoints) * starAngle - Math.PI / 2; fromX = centerX + Math.cos(fromAngle) * starOuterRadius; fromY = centerY + Math.sin(fromAngle) * starOuterRadius; toX = centerX + Math.cos(toAngle) * starInnerRadius; toY = centerY + Math.sin(toAngle) * starInnerRadius; } else { // Inner point to outer point const fromAngle = ((lineIndex - 1) / 2) * starAngle - Math.PI / 2; const toAngle = (((lineIndex - 1) / 2 + 1) % starPoints) * starAngle - Math.PI / 2; fromX = centerX + Math.cos(fromAngle) * starInnerRadius; fromY = centerY + Math.sin(fromAngle) * starInnerRadius; toX = centerX + Math.cos(toAngle) * starOuterRadius; toY = centerY + Math.sin(toAngle) * starOuterRadius; } return { targetX: fromX + (toX - fromX) * lineProgress, targetY: fromY + (toY - fromY) * lineProgress }; case 'triangle': const side = Math.floor((index / total) * 3) const progress = (index / total) * 3 % 1 const triangleRadius = 250 const x1 = centerX + Math.cos((side * 2 * Math.PI / 3) + Math.PI / 6) * triangleRadius const y1 = centerY + Math.sin((side * 2 * Math.PI / 3) + Math.PI / 6) * triangleRadius const x2 = centerX + Math.cos(((side + 1) % 3 * 2 * Math.PI / 3) + Math.PI / 6) * triangleRadius const y2 = centerY + Math.sin(((side + 1) % 3 * 2 * Math.PI / 3) + Math.PI / 6) * triangleRadius return { targetX: x1 + (x2 - x1) * progress, targetY: y1 + (y2 - y1) * progress } case 'square': const squareSide = Math.floor((index / total) * 4) const squareProgress = (index / total) * 4 % 1 const squareSize = 400 let squareX, squareY switch (squareSide) { case 0: // top squareX = centerX - squareSize / 2 + squareSize * squareProgress squareY = centerY - squareSize / 2 break case 1: // right squareX = centerX + squareSize / 2 squareY = centerY - squareSize / 2 + squareSize * squareProgress break case 2: // bottom squareX = centerX + squareSize / 2 - squareSize * squareProgress squareY = centerY + squareSize / 2 break case 3: // left squareX = centerX - squareSize / 2 squareY = centerY + squareSize / 2 - squareSize * squareProgress break } return { targetX: squareX, targetY: squareY } case 'hexagon': const hexAngle = (index / total) * Math.PI * 2 const hexRadius = 250 const hexSide = Math.floor(hexAngle / (Math.PI / 3)) const hexProgress = (hexAngle % (Math.PI / 3)) / (Math.PI / 3) const hexX1 = centerX + Math.cos(hexSide * Math.PI / 3) * hexRadius const hexY1 = centerY + Math.sin(hexSide * Math.PI / 3) * hexRadius const hexX2 = centerX + Math.cos((hexSide + 1) * Math.PI / 3) * hexRadius const hexY2 = centerY + Math.sin((hexSide + 1) * Math.PI / 3) * hexRadius return { targetX: hexX1 + (hexX2 - hexX1) * hexProgress, targetY: hexY1 + (hexY2 - hexY1) * hexProgress } case 'infinity': const infT = (index / total) * Math.PI * 2 const infScale = 200 return { targetX: centerX + infScale * Math.sin(infT) / (1 + Math.pow(Math.cos(infT), 2)), targetY: centerY + infScale * Math.sin(infT) * Math.cos(infT) / (1 + Math.pow(Math.cos(infT), 2)) } case 'flower': const flowerAngle = (index / total) * Math.PI * 2 const flowerPetals = 5 const flowerInnerRadius = 50 const flowerOuterRadius = 200 const flowerRadius = flowerInnerRadius + (flowerOuterRadius - flowerInnerRadius) * (1 + Math.cos(flowerAngle * flowerPetals)) / 2 return { targetX: centerX + Math.cos(flowerAngle) * flowerRadius, targetY: centerY + Math.sin(flowerAngle) * flowerRadius } default: return { targetX: Math.random() * displaySize, targetY: Math.random() * displaySize } } } dronesRef.current = dronesRef.current.map((drone, index) => { const { targetX, targetY } = calculateTargets(index, dronesRef.current.length) return { ...drone, targetX, targetY } }) } useEffect(() => { const canvas = canvasRef.current const ctx = canvas?.getContext('2d') if (!canvas || !ctx) return const displaySize = 600 const updateDrones = () => { ctx.clearRect(0, 0, displaySize, displaySize) transitionProgress.current = Math.min(transitionProgress.current + 0.02, 1) const updatedDrones = dronesRef.current.map((drone) => { // Move towards target with easing const dx = drone.targetX - drone.x const dy = drone.targetY - drone.y if (Math.abs(dx) < 0.1 && Math.abs(dy) < 0.1) { // Snap to exact position if very close drone.x = drone.targetX drone.y = drone.targetY } else { // Smooth transition drone.x += dx * 0.05 * transitionProgress.current drone.y += dy * 0.05 * transitionProgress.current } // Draw drone ctx.beginPath() ctx.arc(drone.x, drone.y, 3, 0, Math.PI * 2) ctx.fillStyle = drone.color ctx.fill() return drone }) dronesRef.current = updatedDrones animationRef.current = requestAnimationFrame(updateDrones) } updateDrones() return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, []) return (

) } export default NodeDisplay