Based on translation of Georg Nee's Shotter

from Code as a Creative Medium:

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

​

Original:

http://dada.compart-bremen.de/item/artwork/1

*/

​

let angle = 0;

let size;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  noFill();

  stroke(255);

  strokeWeight(2);

  smooth(); //smooths out the image so it's viewed as a higher quality image

  noLoop(); //stops the constant changing of the rectanlges so it's just a static image

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

}

​

function draw() {

  background(0);

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

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

      push(); //starts the reanslation for just the rectangles

      translate(x + size/2, y + size / 2); //keeps the rectangles in the middle of the screen

      rotateAmount = random(-angle, angle); //sets the rotation amount to a value thats between the negative angle variable and positive variable angle initially set 

      rotate(rotateAmount); //rotates the rectangles to the rotate amount based on the variable above

      square(-size / 2, -size / 2, size); //creates a grid of squares that are centered in the middle of the screen

      pop();

    }

    angle += 0.05; //adds 0.05 to the angle variable after every y loop (or after every line that is created)

    console.log(rotateAmount);

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  angle = 0;

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

}

​