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

​

// designate variable to use for rotation and movement

let angle = 0;

let x = 50;

let y = 50;

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

}

function draw() {

  background(0);

​

  // TO ROTATE SHAPE ONCE

​

  rotate(45); // will rotate shape by 45 degrees

  fill(255);

  rect(50, 50, 100, 50);

}

​

function draw() {

  background(0);

​

  // TO CONTINOUSLY ROTATE SHAPE AROUND ORIGIN (0, 0)

​

  // rectangle will start to rotate by 1 degree every second from 0 (which is the angle), rectangle is rotating from the origin-- which we decided is 0

  rotate(angle); // references angle variable we wrote in the beginning, the rotate feature always rotates according to the origin (0,0)

  fill(255);

  rect(50, 50, 100, 50);

  angle = angle + 1; // like x = x + 1, or x++

}

​

function draw() {

  background(0);

​

  // TO CONTINOUSLY ROTATE SHAPE AROUND CENTER OF CANVAS

​

  translate(200, 200); // NEW reference point, which is the middle of the canvas in this case

  rotate(angle);

  fill(255);

  rect(0, 0, 100, 50); // x and y coordinates are 0 because the translation adds 200 to both, meaning they will move in the center of the canvas

  angle = angle + 1; // will move angle by 1 degree each frame when its rotating

}

​

function draw() {

  background(0);

​

  // TO CONTINOUSLY ROTATE SHAPE AROUND CENTER OF CANVAS ACCORDING TO THE SHAPE'S CENTER COORDINATES

​

  translate(200, 200); // NEW reference point, which is the middle of the canvas in this case

  rotate(angle);

  fill(255);

  rectMode(CENTER);

  rect(0, 0, 100, 50); // x and y coordinates are 0 because the translation adds 200 to both, meaning they will move in the center of the canvas

  angle = angle + 1; // will move angle by 1 degree each frame while its rotating, the bigger the value, the faster it'll move so 'angle = angle + 5' will move faster

}

​

function draw() {

  background(0);

​

  // TO CONTINOUSLY ROTATE THE SHAPE WHILE MOVING IT AROUND THE CANVAS

​

  translate(x, y); // NEW reference point, which is the left corner of the canvas in this case (check designated variables above function setup) x = 50, y = 50

  rotate(angle);

  fill(255);

  rectMode(CENTER);

  rect(0, 0, 100, 50); // x and y coordinates are 0 because the translation adds 50 to both

  x = x + 2; // x coordinate for translation will move by 2 each frame

  angle = angle + 1; // will move angle by 1 degree each frame while its rotating, the bigger the value, the faster it'll move so 'angle = angle + 5' will move faster

}

​

function draw() {

  background(0);

​

  // PUSH AND POP FEATURE:

  // TO CONTAIN CODE WITHOUT IT AFFECTING SOMETHING ELSE BELOW IT

​

  // PUSH AND POP CONTAIN CODE WITHOUT IT AFFECTING ANYTHING ELSE OUTSIDE IT

  push();

  translate(x, y);

  rotate(angle);

  fill(255);

  rectMode(CENTER);

  rect(0, 0, 100, 50);

  x = x + 2;

  angle = angle + 1;

  pop();

​

  // FOR EXAMPLE, THIS RED RECTANGLE NOW WON'T BE AFFECTED BY THE TRANSLATION AND ROTATION FEATURES ETC ABOVE BECAUSE IT IS NOT WITHIN PUSH AND POP:

​

  fill(255, 0, 0);

  rectMode(CENTER);

  rect(300, 250, 50, 70);

​

  // SEE HOW IT DOESN'T MOVE?

}

​