p5: Vectors, particles, complexity

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:

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);

//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


function draw() {
background(50, 89, 100);

//update them
for (var i = 0; i < particles.length; i++) {


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

// Particle class
function Particle(x,y) {

//store position and velocity in
//two dimensional vectors

this.position = createVector(x,y);
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
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?