Unscrambled Code

let cellSize;
function setup() {
  createCanvas(windowWidth, windowHeight); 
  background(255);
  noFill();
  strokeWeight(2);
  cellSize = min(width / 10, height / 10);
  for (let x = 0; x < width; x += cellSize) {
    for (let y = 0; y < height; y += cellSize) {
      let shapeGate = random([1, 2]);
      if (shapeGate === 1) {
        square(x, y, cellSize);
      } else {
        circle(x + cellSize / 2, y + cellSize / 2, cellSize);
      }
    }
  }
}

function draw() {}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

//noFill();

//let cellSize;

//square(x, y, cellSize);

//resizeCanvas(windowWidth, windowHeight);

//createCanvas(windowWidth, windowHeight);

//strokeWeight(2);

//for (let y = 0; y < height; y += cellSize) {}

//background(255);

//function setup() {}

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

//for (let x = 0; x < width; x += cellSize) {}

Encode 1, annotated, changed

Pseudocode
Set  up the canvas so it resizes w the window
draw a grid using for loops
	add a random black or white fill based on a random in each interaction of the loop

I was not that far off! I wasn’t super descriptive but it was letting random decide between the black and while fills within a for loop.

Encode 2, annotated, changed

Pseudocode 
Resize window canvas 
3 separate for loops in which all of them: draw triangles of the same width and length however their starting coordinates have a confined range they can randomly start in
	each loop differs in that they each exists in a different third of the canvas 

I was wrong about the pseudocode in that its actually very similar to the grid, the main different being is that the row heights take up a third of the canvas each.

Decode 1, annotated, changed

let cellSize;
let sign;
let seed = 2;

function setup() {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  angleMode(DEGREES);
  noFill();
  stroke(0);
  strokeWeight(2);
}

function draw() {
  background(255);
  randomSeed(seed);

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

  for (let x = cellSize / 2; x < width; x += cellSize) {
    for (let y = cellSize / 2; y < height; y += cellSize) {
        
      push();
      translate(x, y);

      let chance = random(1);
      if (chance < 0.5) {
        sign = 1;
      } else {
        sign = -1;
      }

      let angle = random(0, -60 * sign);
      rotate(angle);

      if (angle < 0) {
        square(0, 0, cellSize * random(0.5, 1));
      } else {
        square(0, 0, cellSize);
      }

      pop();
    }
  }
}

function mousePressed() {
  seed = random(50000);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

I think this will draw a grid with squares that randomly end up rotated differently from one another. My reasoning is that the angle = random then being fed into rotate looks very conspicuous.

I was mostly right, except that I missed out on the corners overlapping creating the illusion of more shapes. I want to mess with the fill on this one to see how big an effect filling in some of these squares would have.

Decode 2, annotated, changed

let cellSize;
let pg;
let seed = 100;

function setup() {
  createCanvas(windowWidth, windowHeight);
  imageMode(CENTER);
  makeTileDesign();
}

function draw() {
  background(255);
  randomSeed(seed);
  
  for (let x = cellSize/2; x <= width; x += cellSize) {
    for (let y = cellSize/2; y <= height; y += cellSize) {
      push();
      translate(x, y);
      let angle = (TWO_PI * round(random(1, 5))) / 4;
      rotate(angle);
      // draw the off-screen pixel graphics onto the canvas
      // just like an image file
      image(pg, 0, 0);
      pop();
    }
  }
}

function makeTileDesign() {
  cellSize = min(width / 5, height / 5);
  
  // create an extra buffer of pixels "off screen"
  // on which to draw shapes (just like drawing on the canvas)
  // it needs a width and height (just like the canvas)
  pg = createGraphics(cellSize, cellSize);
  // draw a shape on it
  pg.noFill(0);
  pg.strokeWeight(2)
  pg.square(0, 0, cellSize);
  // draw another shape on it
  pg.fill(0);
  pg.circle(0, pg.height / 2, pg.width);

}

function mousePressed() {
  seed = random(50000);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  makeTileDesign();
}

I believe this code will draw some sort of tessellating pattern based off the grids from the for loops. The off screen graphics become visible with window resizing.

Ok, what is actually happening is that each tile design and position in the grid gets decided by the loops. The tile itself gets assembled in the makeTileDesign function (which now feels very self-explanatory)

Re/Code

let cellSize;

function setup() {
  createCanvas(windowWidth, windowHeight);
  noFill();
  drawGrid();
}

function draw() {}

function mousePressed() {
  drawGrid();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  drawGrid();
}

function drawGrid() {
  background(150);
  cellSize = min(width / 10, height / 10);
  for (let x = 0; x < width; x += cellSize) {
    for (let y = 0; y < height; y += cellSize) {
      let colorPicker = random(1, 3);
      if (colorPicker < 2) {
        stroke(255, 165, 0); 
      } else {
        stroke(0, 0, 255); 
      }
      strokeWeight(random(1, 10));
      let roundy = random(1, 15);
      square(x, y, cellSize, roundy);
    }
  }
}