Code 1 Week 4 assignment 3 solution

code_1_week_4_assignment_3.js

// p5 adaptation of: https://massmoca.org/event/walldrawing160/
let angle = 0;
let x = 50;
let y = 50;
let step = 0; // you were missing this variable so the sketch didn't run

function setup() {
  createCanvas(800, 800);
  angleMode(DEGREES)
  frameRate(10);
}

function draw() {
  // draw the frame
  background("#E6E0E2");

  drawBox(width / 2, height / 2, width * 0.86, height * 0.86);
  step = step + 0.5; // angle and step both change each frame
  angle = angle + 10; // I made this bigger so it spins more obviously

  // this angle and step changing every frame stuff can be pretty confusing
  // it can help to print(step) or print(angle) to have a sense of what is going on
}

function drawBox(x, y, w, h) {
  // in general, you should either use
  // push() and pop() OR applyMatrix() and resetMatrix()
  // not both. It gets very confusing for you and for p5.js
  // I removed the push()'s and pop()'s
  // and got rid of the arguments for applyMatrix()
  applyMatrix();

  // draw the box
  translate(x, y)
  rotate(angle);
  scale(1 / step);
  stroke("#887987");
  noFill();
  rectMode(CENTER);
  rect(0, 0, w, h);

  // this should look familiar from:
  // https://github.com/mimetaur/code-1-fall-2019/blob/master/week05/homework-review/homework_assignment_04_number_02.js

  // draw the X
  stroke("#9D2D35");

  scale(1.68);
  rotate(45);

  line(0, -100, 0, 100);
  line(-100, 0, 100, 0);

  resetMatrix();
}