This example uses two custom classes. The Particle class stores a position, velocity, and hue. It renders a circle using the current position and hue, and it updates the position using the current velocity. The Path class stores an array of objects created from the Particle class. It renders lines connecting each of the particles. When the user clicks the mouse, the sketch creates a new instance of the Path class. When the user drags the mouse, the sketch adds a new instance of the Particle class to the current path.
Connected Particles by p5.js Contributors and the Processing Foundation is licensed under CC BY-NC-SA 4.0.
Related Examples
Snowflakes falling on a black background.
Snowflakes
Animate snowfall.
Twenty white circles on a black background.
Shake Ball Bounce
Animate ball movement based on mobile device motion.
A pattern of multicolored circles connected by white lines, on a black background.
Connected Particles
Draw circles and connecting lines using the mouse.
A group of bird-like objects, represented by rainbow triangles, modeling flocking behavior.
Flocking
Simulate bird flocking behavior.