https://github.com/caed0/particle-playground
https://github.com/caed0/particle-playground
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/caed0/particle-playground
- Owner: caed0
- Created: 2025-07-30T09:17:37.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-30T21:57:59.000Z (11 months ago)
- Last Synced: 2025-07-31T00:20:35.859Z (11 months ago)
- Language: JavaScript
- Size: 22.5 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Particle Playground
A customizable particle system with interactive particles, connections, and various visual effects.
## Settings Guide
### System Settings
#### Initial Setup
- **initialParticles**: How many particles to create when starting (default: 150)
- **initialSpawnPositions**: Where particles first appear (options: 'random', 'center', 'top', 'bottom', etc.)
- **clearCanvas**: Whether to clear the screen each frame (true/false)
- **showDebugInfo**: Show FPS and particle count on screen (true/false)
#### Dynamic Adjustment
- **autoSpawn**: Automatically create new particles (true/false)
- **autoDestroy**: Automatically remove excess particles (true/false)
- **minParticles**: Minimum number of particles to maintain
- **maxParticles**: Maximum number of particles allowed
- **adjustmentInterval**: How often to check particle count (in milliseconds)
#### Background
- **type**: Background style ('color' or 'gradient')
- **color**: Solid background color (hex code like '#111111')
- **gradient**: Gradient settings with colors and direction
### Particle Settings
#### Appearance
- **size**: Particle size range (min/max values)
- **color**: Particle color (hex code like '#00ff40')
- **opacity**: How transparent particles are (0-1)
- **shape**: Particle shape ('circle', 'square', 'triangle', 'star', 'diamond', 'plus', 'hexagon', 'pentagon', 'char')
- **shadow**: Drop shadow effect with color and radius
- **fading**: Fade in/out effects with timing
#### Movement Behavior
- **enabled**: Whether particles move (true/false)
- **speed**: How fast particles move (min/max values)
- **direction**: Movement direction ('random', 'up', 'down', 'left', 'right', 'center', 'edge', etc.)
#### Spawning
- **spawnPositions**: Where new particles appear
- **spawningOffset**: Distance from edges when spawning
- **spawnGrid**: Grid-based spawning (columns/rows)
- **respawn**: Whether particles respawn after dying (true/false)
#### Life & Death
- **ttl** (Time To Live): How long particles live before dying
- **enabled**: Whether particles have limited lifespan (true/false)
- **min/max**: Lifespan range in seconds
#### Physics
- **bounceOffEdges**: Particles bounce off screen edges (true/false)
- **bounceOffParticles**: Particles bounce off each other (true/false)
### Connection Settings
- **enabled**: Show lines between nearby particles (true/false)
- **distance**: Maximum distance for connections
- **maxConnections**: Maximum connections per particle
- **color**: Connection line color
- **opacity**: Connection line transparency
- **lineWidth**: Connection line thickness
- **lineStyle**: Line style ('solid', 'dashed', 'dotted', 'double')
### Particle Interactions
- **enabled**: Particles attract/repel each other (true/false)
- **attraction**: Pull particles together (force/radius)
- **repulsion**: Push particles apart (force/radius)
- **mode**: Interaction type ('attract', 'repel', 'both')
### Mouse Interactions
- **spawn**: Click/drag to create particles
- **enabled**: Allow mouse spawning (true/false)
- **amount**: Particles created per click
- **continuous**: Keep spawning while dragging (true/false)
- **delay**: Time between spawns when dragging (milliseconds)
## Spawn Position Options
- `random` - Anywhere on screen
- `center` - Screen center
- `top/bottom/left/right` - Screen edges
- `top-left/top-right/bottom-left/bottom-right` - Corners
- `random-edge` - Random edge
- `random-corner` - Random corner
## Shape Options
- `circle` - Round particles
- `square` - Square particles
- `triangle` - Triangle particles
- `diamond` - Diamond particles
- `star` - Star particles
- `plus` - Plus sign particles
- `hexagon` - Six-sided particles
- `pentagon` - Five-sided particles
- `char` - Random letter/number particles
## Usage
1. Open `demo/index.html` in a web browser
2. Modify settings in the JavaScript files
3. Refresh to see changes
4. Click and drag to spawn particles with mouse
## Files
- `ParticleSystem.js` - Main system controller
- `Particle.js` - Individual particle behavior
- `Connections.js` - Particle connection lines
- `demo/` - Example implementation