p5: 2D Transformations

Let’s play with this code:

function setup() {
  createCanvas(800, 800);
  rectMode(CENTER);
}

function draw() {
  background(240);
    
  translate(400, 400);
  rect(0, 0, 400, 400);
  
  //rotate(radians(45));
  //translate(40, 40);
  //rect(0, 0, 400, 400);

}

What happened?

Example of transformation + scale + rotation.
More info here.

Here’s an example with a grid

Push/Pop

function setup() {
  createCanvas(800, 800);
  rectMode(CENTER);
}

function draw() {
  background(240);
  
  push();
  translate(400, 400);
  rotate(radians(45));
  scale(0.3);
  rect(0, 0, 400, 400);
  pop();
  
  rect(0, 0, 400, 400);
  

}