* What elements will appear? What will they look like, and how will they behave?

* How many are there? Are they related to one another? How?

* What's the logic or flow structure?

* If it helps, draw what you think the output will be.

​

Decode 1:

- [ ] A white background

- [ ] Shapes will have a black outline with a width of 2

- a grid of squares, one square less than the windowsize will be generated on the canvas

- the squares will be progressively more angled as they get closer to the end of their generation

*/

​

​

/*

Inspired by Georg Nees' Schotter

​

Based on a translation from Code as a Creative Medium:

https://github.com/CodeAsCreativeMedium/exercises/blob/main/02_iteration/15_recoding_schotter/schotter_js/schotter_js.js

*/

​

​

//declare angle to 0

let angle = 0;

//declare cellSize

let cellSize;

​

//define setup function

function setup() {

  //create canvas with set to width and height of the window

  createCanvas(windowWidth, windowHeight);

  //don't fill shapes with color

  noFill();

  //set outline width to 2

  strokeWeight(2);

}

​

//start draw loop

function draw() {

  //set background to white

  background(255);

  //define cellsize as 1/10th of width or height, whichever is smaller

  cellSize = min(width / 10, height / 10);

  //define for loop, y def, if y is less than sketch height - 1/10 of the cellsize, add cellSize to Y.

  for (let y = cellSize; y < height - cellSize; y += cellSize) {

    //define for loop, x def, if x is less than sketch width - 1/10 of the cellsize, add cellSize to x.

    for (let x = cellSize; x < width - cellSize; x += cellSize) {

      //start transformation

      push();

      //move shapes to x(cellsize) + half of cellsize and same for y

      translate(x + cellSize / 2, y + cellSize / 2);

      //define rotateAmount as angle but randomly turn it left or right

      rotateAmount = random(-angle, angle);

      //rotate the shape by rotateAmount

      rotate(rotateAmount);

      //make a square at negative cellSize x and y coordinates with the size of cellSize

      square(-cellSize / 2, -cellSize / 2, cellSize);

      //stop tranformation

      pop();

    }

    //increase angle by 0.05 to increasingly tilt the squares for each for loop generaton

    angle += 0.05;

  }

  //only run once

  noLoop();

}

​

//define function for resizing window

function windowResized() {

  //resize the canvas to the current window Width and Height

  resizeCanvas(windowWidth, windowHeight);

  //reset angle to 0;

  angle = 0;

}