p5.js

let x = 100; // x location
let y = 100; // y location
let xspeed = 1; // x speed (change the speed to see difference)
let yspeed = 3.3; // y speed (change the speed to see difference)

function setup() { 
  // setup() execute once when the skecth starts
  createCanvas(560,390);
}

function draw() {
  // draw() loops forever until you quit
  background(220);

  // add speed to the position.
  x = x + xspeed;
  y = y + yspeed;
  
	// testing if the circle has reached the edge of the window
  if ((x > width) || (x < 0)) {
    xspeed = xspeed * -1;
  }
  if ((y > height) || (y < 0)) {
    yspeed = yspeed * -1;
  }

  stroke(0);
  strokeWeight(2);
  fill(63,63,147);
  ellipse(x, y, 48, 48); // display circle at location(x,y)
}
							

p5.js

let ball;

function setup() {
  createCanvas(640, 360);
  ball = new Ball();
}

function draw() {
  background(255);
  ball.update();
  ball.display();
}

class Ball {
  constructor() {
    // createVector(x,y,z)
  	// https://p5js.org/reference/#/p5/createVector
    this.position = new createVector(100, 100);
    this.velocity = new createVector(2.5, 5);
  }

  update() {
    // testing if the circle has reached the edge of the window
    this.position.add(this.velocity);
    if ((this.position.x > width) || (this.position.x < 0)) {
      this.velocity.x = this.velocity.x * -1;
    }
    if ((this.position.y > height) || (this.position.y < 0)) {
      this.velocity.y = this.velocity.y * -1;
    }
  }
  display() {
    // display circle at x position
  	stroke(0);
  	strokeWeight(2);
  	fill(63,63,147);
  	ellipse(this.position.x, this.position.y, 48, 48);
  }
}
							

Move mouse to interact with   p5.js

function setup() {
  createCanvas(560,390);
}

function draw() {
  background(220);
	
  // create two vectors, one for mouse location, one for the center of window
  let mouse = createVector(mouseX,mouseY);
  let center = createVector(width/2,height/2);
  mouse.sub(center); // subtract vectors
	
  // translate(), specifies an amount to displace objects within the display window
  // the x parameter specifies left/right translation
  // the y parameter specifies up/down translation
  // https://p5js.org/reference/#/p5/translate
  translate(width/2,height/2);
  strokeWeight(2);
  stroke(63,63,147);
  line(0,0,mouse.x,mouse.y); // draw a line to screen, line(x1, y1, x2, y2)
}
							

Move mouse to interact with (vector is half its original size)   p5.js

function setup() {
  createCanvas(560,390);
}

function draw() {
  background(220);
	
  // create two vectors, one for mouse location, one for the center of window
  let mouse = createVector(mouseX,mouseY);
  let center = createVector(width/2,height/2);
  mouse.sub(center); // subtract vectors
  
  // multiplying a vector, now the vector is half its original size (multiplied by 0.5)
  mouse.mult(0.5);
	
  translate(width/2,height/2);
  strokeWeight(2);
  stroke(63,63,147);
  line(0,0,mouse.x,mouse.y);
}
							

Move mouse to interact with (magnitude is the width of rectangle)   p5.js

function setup() {
  createCanvas(560,390);
}

function draw() {
  background(220);
	
  // create two vectors, one for mouse location, one for the center of window
  let mouse = createVector(mouseX,mouseY);
  let center = createVector(width/2,height/2);
  mouse.sub(center); // subtract vectors
  
  // mag() is to calculate the magnitude of a vector
  // the magnitude of a vector can be accessed via the mag() function
  let magnitude = mouse.mag();
  fill(63,63,147);
  stroke(0);
  rect(0,0,magnitude,10); //we use magnitude as width of a rectangle drawn at the top window
	
  translate(width/2,height/2);
  strokeWeight(2);
  stroke(63,63,147);
  line(0,0,mouse.x,mouse.y);
}
							

Move mouse to interact with   p5.js

function setup() {
  createCanvas(560,390);
}

function draw() {
  background(220);
	
  let mouse = createVector(mouseX,mouseY); // vector which points to mouse position
  let center = createVector(width/2,height/2); // vector which points to center of the window
  mouse.sub(center); // subtract center from mouse, vector which points from center to mouse
  
  // after vector is normalized, it is multiplied by 50 so that it is viewable onscreen
  // note that no matter where the mouse is, the vector will have the same length (50) due to the normalization process
  mouse.normalize(); // normalize the vector to a unit length of 1
  mouse.mult(150); // multiply length by 50
  
  translate(width/2,height/2);
  strokeWeight(2);
  stroke(63,63,147);
  line(0,0,mouse.x,mouse.y);
}
							

p5.js

let mover; // declare Mover object

function setup() {
  createCanvas(560,390);
  mover = new Mover(); // create Mover object
}

function draw() {
  background(220);
	// call functions to Mover object
  mover.update();
  mover.checkEdges();
  mover.display();
}

class Mover {
  constructor(){
    // Mover object has two data, position and velocity
    // initialize Mover object with a random location and a random velocity
    this.location = createVector(random(width), random(height));
    this.velocity = createVector(random(-2, 2), random(-2, 2));
  }

  update() {
    // location changes by velocity
    this.location.add(this.velocity);
  }

  display() {
    stroke(0);
    strokeWeight(2);
    fill(63,63,147);
    ellipse(this.location.x, this.location.y, 48, 48);
  }

  checkEdges() {
		// when object reach the edge of window, set location to the other
    if (this.location.x > width) {
      this.location.x = 0;
    }
    else if (this.location.x < 0) {
      this.location.x = width;
    }

    if (this.location.y > height) {
      this.location.y = 0;
    }
    else if (this.location.y < 0) {
      this.location.y = height;
    }
  }
}
							

p5.js

let mover; // declare Mover object

function setup() {
  createCanvas(560,390);
  mover = new Mover(); // create Mover object
}

function draw() {
  background(220);
	// call functions to Mover object
  mover.update();
  mover.checkEdges();
  mover.display();
}

class Mover {
  constructor(){
    this.location = createVector(width/2,height/2);
    this.velocity = createVector();
    this.acceleration = createVector(-0.001, 0.01);
    this.topspeed = 10; // limit the magnitude of velocity
  }

  update() {
    // velocity changes by acceleration and is limited by topspeed
    this.velocity.add(this.acceleration);
    this.velocity.limit(this.topspeed);
    this.location.add(this.velocity);
  }

  display() {
    stroke(0);
    strokeWeight(2);
    fill(63,63,147);
    ellipse(this.location.x, this.location.y, 48, 48);
  }

  checkEdges() {
		// when object reach the edge of window, set location to the other
    if (this.location.x > width) {
      this.location.x = 0;
    }
    else if (this.location.x < 0) {
      this.location.x = width;
    }

    if (this.location.y > height) {
      this.location.y = 0;
    }
    else if (this.location.y < 0) {
      this.location.y = height;
    }
  }
}
							

p5.js

let mover; // declare Mover object

function setup() {
  createCanvas(560,390);
  mover = new Mover(); // create Mover object
}

function draw() {
  background(220);
	// call functions to Mover object
  mover.update();
  mover.checkEdges();
  mover.display();
}

class Mover {
  constructor(){
    this.location = createVector(width/2,height/2);
    this.velocity = createVector();
    this.acceleration = createVector();
    this.topspeed = 5; // limit the magnitude of velocity
  }

  update() {
    // random2D() gives a Vector of length 1 pointing in a random direction
    this.acceleration = p5.Vector.random2D();
    // scaling acceleration to a constant value: 
    // this.acceleration.mult(0.5)
    // scaling acceleration to a random value:
    this.acceleration.mult(random(2));
    this.velocity.add(this.acceleration);
    this.velocity.limit(this.topspeed);
    this.location.add(this.velocity);
  }

  display() {
    stroke(0);
    strokeWeight(2);
    fill(63,63,147);
    ellipse(this.location.x, this.location.y, 48, 48);
  }

  checkEdges() {
		// when object reach the edge of window, set location to the other
    if (this.location.x > width) {
      this.location.x = 0;
    }
    else if (this.location.x < 0) {
      this.location.x = width;
    }

    if (this.location.y > height) {
      this.location.y = 0;
    }
    else if (this.location.y < 0) {
      this.location.y = height;
    }
  }
}
							

Move mouse to interact with (the closer the object is to the mouse, the faster it accelerates)   p5.js

let mover; // declare Mover object

function setup() {
  createCanvas(560,390);
  mover = new Mover(); // create Mover object
}

function draw() {
  background(220);
	// call functions to Mover object
  mover.update();
  mover.display();
}

class Mover {
  constructor(){
    this.location = createVector(width/2,height/2);
    this.velocity = createVector();
    this.acceleration = createVector();
    this.topspeed = 5; // limit the magnitude of velocity
  }

  update() {
    let mouse = createVector(mouseX,mouseY);
    // compute direction (points from location to mouse)
    this.acceleration = p5.Vector.sub(mouse,this.location);
    // set magnitude of acceleration
    this.acceleration.setMag(0.2);
    this.velocity.add(this.acceleration);
    this.velocity.limit(this.topspeed);
    this.location.add(this.velocity);
  }

  display() {
    stroke(0);
    strokeWeight(2);
    fill(63,63,147);
    ellipse(this.location.x, this.location.y, 48, 48);
  }
}
							

Move mouse to interact with (the closer the object is to the mouse, the faster it accelerates)   p5.js

let movers = []; // declare an array of objects

function setup() {
  createCanvas(560,390);
  for (let i = 0; i < 20; i++) {
     movers[i] = new Mover(); //initialize each objects in array
  }
}

function draw() {
  background(220);
	for (let i = 0; i < movers.length; i++) {
    movers[i].update();
    //movers[i].checkEdges();
    movers[i].display();
  }
}

class Mover {
  constructor(){
    this.location = createVector(random(width),random(height));
    this.velocity = createVector();
    this.acceleration = createVector();
    this.topspeed = 5;
  }

  update() {
    let mouse = createVector(mouseX,mouseY);
    // compute direction (points from location to mouse)
    this.acceleration = p5.Vector.sub(mouse,this.location);
    // set magnitude of acceleration
    this.acceleration.setMag(0.2);
    this.velocity.add(this.acceleration);
    this.velocity.limit(this.topspeed);
    this.location.add(this.velocity);
  }

  display() {
    stroke(0);
    strokeWeight(2);
    fill(63,63,147,150);
    ellipse(this.location.x, this.location.y, 48, 48);
  }
  
  checkEdges() {
		// when object reach the edge of window, set location to the other
    if (this.location.x > width) {
      this.location.x = 0;
    }
    else if (this.location.x < 0) {
      this.location.x = width;
    }

    if (this.location.y > height) {
      this.location.y = 0;
    }
    else if (this.location.y < 0) {
      this.location.y = height;
    }
  }
}