4: Basics

Line and Rect

setup() {
    createCanvas(100, 100);

    line(25, 25, 50, 50);
}
copy

setup() {
    createCanvas(100, 100);

    rect(25, 25, 50, 50);
}
copy

Rotation

setup() {
    createCanvas(100, 100);

    rotate(PI / 4);
    rect(25, 25, 50, 50);
}
copy

Matrix: Push and pop

push and pop help to reset the transformation matrix.

setup() {
    createCanvas(100, 100);

    push();
    rotate(PI / 4);
    rect(25, 25, 50, 50);
    pop();
}
copy

This will still draw things as the currently are.

If we wanted to make things more centered, we could do the following:

setup = () => {
  createCanvas(400, 400)
  background(230, 230, 230)

  angleMode(DEGREES)
  rectMode(CENTER)

  push()
  translate(width / 2, height / 2)
  rotate(45)
  rect(0, 0, 100, 100)
  push()
}
copy

Rotation + Color

setup = () => {
  createCanvas(400, 400)
  background(230, 230, 230)

  angleMode(DEGREES)
  rectMode(CENTER)

  push()
  translate(width / 2, height / 2)
  rotate(45)
  rect(0, 0, 100, 100)
  push()
}
copy