How aleebiotec/interactive-particles-canvas-sketch works
This is a small creative-coding sketch: canvas-sketch starts an animated canvas, where concentric particle positions are initialized and then updated and drawn each frame. A mouse drag moves a shared cursor used by the particles’ repulsion; particles also return toward their original positions, with damping, size changes, and distance-based colors. The graph is based on the README and the single sampled source file; these responsibilities are implemented together in that file.
Main entry points: sketch-particles.js Sketch setup
Components 8
Other components
- User
- canvas-sketch runtime
- Sketch setup
sketch-particles.js - Circular layout
sketch-particles.js - Mouse interaction
sketch-particles.js - Particle motion
sketch-particles.js - Particle rendering
sketch-particles.js - Canvas
Connections 8
- canvas-sketch runtime → Sketch setup: starts sketch
sketch-particles.js - Sketch setup → Circular layout: creates particles
sketch-particles.js - Sketch setup → Mouse interaction: registers handler
sketch-particles.js - User → Mouse interaction: drags cursor
README.md - Mouse interaction → Particle motion: updates cursor
sketch-particles.js - Sketch setup → Particle motion: calls update
sketch-particles.js - Sketch setup → Particle rendering: calls draw
sketch-particles.js - Particle rendering → Canvas: draws particles
sketch-particles.js