The sketch below uses objects containing vectors to keep track of their position and velocity.

Vectors are just other object with x and y properties and some specific functions:

https://p5js.org/reference/#/p5.Vector

Vectors can be both 2D and 3D (x,y,z) and they are widely used in simulations and games.

Vectors are use to represent either points (x,y) or velocity components, they are very convenient for simulating physics in a cartesian plane like the one we use.

var particles = []; function setup() { createCanvas(800, 800); noStroke(); //start with some particles for (var i = 0; i < 10; i++) { //create new instance of Particle store it in a temporary variable var newParticle = new Particle(random(0, width),random(0, height)); //use a method of the particle to push them in one direction newParticle.addForce(45, 2); // add it to an array of objects particles.push(newParticle); } } function draw() { background(50, 89, 100); //update them for (var i = 0; i < particles.length; i++) { particles[i].update(); } } function mousePressed() { //create new instance of Particle store it in a temporary variable var newParticle = new Particle(mouseX, mouseY); newParticle.addForce(135, 2); // add it to an array of objects particles.push(newParticle); } // Particle class function Particle(x,y) { //store position and velocity in //two dimensional vectors //position this.position = createVector(x,y); //velocity this.velocity = createVector(0,0); this.diameter = 10; //updating and visualizing the particle this.update = function() { //move the position according to the velocity //on the two axis this.position.x += this.velocity.x; this.position.y += this.velocity.y; //series of checks to wrap around the screen if (this.position.x > width + this.diameter) { this.position.x = -this.diameter; } if (this.position.x < -this.diameter) { this.position.x = width + this.diameter; } if (this.position.y > height + this.diameter) { this.position.y = -this.diameter; } if (this.position.y < -this.diameter) { this.position.y = height + this.diameter; } //finally draw the particle noStroke(); ellipse(this.position.x, this.position.y, this.diameter, this.diameter); }; this.addForce = function(angle, force) { //using basic trigonometry I can make these particle move //according to a direction and force this.velocity.x += cos(radians(angle)) * force; this.velocity.y += sin(radians(angle)) * force; } }

*Can you make them steer in a more “interesting” manner? (e.g. adding randomness or player input)*

*Can you add inertia?*

*Advanced: try to add forces based on a 2D noise field*

**Making objects interact with each other**

Example here

*Can you make them “merge” when they get close to each other?
Agar.io like*

**Simulating forces
**We won’t get into physics simulation through Vectors, you can find plenty of resources online, but you can see a very simple attraction/repulsion method here:

Example here

*Can you make them repel each other?
Solution here*

Can you create another class of objects behaving differently?