// https://www.youtube.com/watch?v=o9sgjuh-CBM

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(0);

  // rect(50, 50, 100, 50); // (x, y, width, height)

  // you could also write this code using the translate feature, this way, any shape underneath will also be translated by the same amount.

  // For example:

  // just like fill, the translate feature will apply to every shape you add underneath it

    translate (50, 50); // (x,y) will move x coordinates to the right by 50, will move y coordinates up by 50

  rect (0, 0, 100, 50); // this will make the exact same shape as the rectangle above because we removed the x and y coordinates and placed them in the translate section

  rect (100, 100, 50, 30) // so now, this rectangle's coordinates will be translated by (50, 50)

​

}

​

function draw() {

  background (0);

  // this time, the translate feature will move the rectangle according to how your mouse is moving across the canvas

  translate (mouseX, mouseY); // however, the problem with this is that the mouse is too far from the shape, so let's adjust it in the next function draw section below

  rectMode (CENTER);

  rect (200, 200, 100, 60);

}

​

function draw() {

  background (0);

   translate (mouseX-195, mouseY-190); // this will center the mouse on the rectangle so it moves with the mouse instead of being far away from it

  rectMode (CENTER);

  rect (200, 200, 100, 60);

}