p5.js script, made with Claude 3.7
Create a p5.js interactive art piece with the following features:
1. Visual Elements:
Create a swarm of triangle-based insect entities –
Each insect should have:
Triangle body with flapping wing animations
Randomized colors (blues/greens with semi-transparency)
Size variation between insects
Optional antennae that appear when close to touch point
2. Movement Behavior:
Implement swarm intelligence with:
Steering behaviors (attraction to touch points)
Separation to avoid overcrowding
Wandering motion when no touch is active
Subtle random movements for organic feel
Bouncing/wrapping at screen edges
Optimize for mobile performance (120 insects maximum, 30fps)
3. Interactive Elements:
Touch/click tracking that attracts the swarm
Visual feedback when touching (circular indicator) – Enhanced attraction force near touch points
Insects change color/brightness when near touch points
Faster wing flapping animation when excited by touch
4. UI Design:
Full-screen canvas with black background
Glitching title text using the Syncopate Google font with:
« Insect Swarm » title with cyan/magenta glitch effect
CSS animations for clip-path glitching
Pulsing instruction text using Space Mono font:
« TOUCH ANYWHERE TO ATTRACT THE SWARM »
Letter-spacing and uppercase styling – Clean, minimalist aesthetic with gradient header
5. Technical Implementation:
Responsive design that adapts to any screen size – Mobile-optimized touch handling
Proper Google Fonts integration
Background trailing effect for insect movement
Performance optimization for mobile devices
Window resize handling
6. Page Structure:
HTML skeleton with canvas container
CSS styling with glitch effects and animations
p5.js for the insect swarm simulation
Auto-hiding instructions that appear on load
The final result should be a single HTML file that runs entirely in the browser with proper Google Font integration.
