Decode 1, Annotated, Modified

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  rectMode(CENTER);
  noFill();
  stroke(255);
  strokeWeight(2);
  
  let minSize = min(width, height);
  let amount = minSize / 30;

  for (let i = 1; i < amount; i++) {
    let x = random(width / 2 - amount, width / 2 + amount);
    let y = random(height / 2 - amount, height / 2 + amount);
    square(x, y, amount * i);
  }
}

My prediction is that this piece of code will output a bunch of white-outlined rectangles on the canvas until it hits ‘amount’. These rectangles will overlap and be randomly layered.

Result - Mostly what I predicted except they are much more centered than I expected. I will point out why in my annotation.

Decode 2, Annotated, Modified

let x;
let y;
let w;
let h;

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

function draw() {
  background(0);

  for (let i = 0; i < 400; i++) {
    
    if (random(10) < 8) {
      w = random(5, 25);
      h = random(50, 150);
    } else {
      w = random(50, 150);
      h = random(5, 25);
    }
    
    x = random(w, width - w);
    y = random(h, height - h);
    
    rect(x, y, w, h);
  }
  
  noLoop();
}

function mousePressed() {
  loop();
}

I think this code will generate random coordinates thru a system where it forks between two other random generators for coordinate values in order to draw more white random sometimes overlapping squares.

Decode 3, Annotated, Modified

let startX;
let startY;
let endX;
let endY;

let seed = 1;

function setup() {
  createCanvas(windowWidth, windowHeight);
  stroke(255);
  strokeWeight(2);
}

function draw() {
  background(0);
  randomSeed(seed)
  
  for (let i = 0; i < 100; i++) {
    
    startX = random(20, width - 20);
    startY = random(20, height - 20);

    if (random(10) < 1) {
      let amount = random(5, 20);
      endX += amount;
      endY = startY + amount;
    } else {
      let amount = random(5, 20);
      endY += amount;
      endX = startX + amount;
    }
    
    line(startX, startY, endX, endY);
  }
}

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

This code will draw 100 lines with start and end points. The beginning points are generated with one layer of randomness while the second set have a fork similar to #2.

Decode 4, Annotated, Modified

let startX;
let startY;
let endX;
let endY;

let num = 0;
let total = 40;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  stroke(255);
  strokeWeight(2);
  getStartPoint();
  getEndPoint();
}

function draw() {
  while (num < total) {  
    line(startX, startY, endX, endY);
    startX = endX;
    startY = endY;
    getEndPoint();
    num++;
  }
}

function getStartPoint() {
  startX = random(10, width - 10);
  startY = random(10, height - 10);
}

function getEndPoint() {
  endX = random(10, width - 10);
  endY = random(10, height - 10);
}

I know that this will draw more randomly generated lines but I am getting caught up on the getEndpoint function. Mostly why is it getting called in draw not getStartPoint.

This did not draw lines , I was very wrong (well sort of, it does but they are connected to each other).

My Re/Code

I actually enjoyed using random and noise in ICM, so the concepts felt pretty familiar to me. What really caught my attention was the layers of random gates flipping between different sets of possible random numbers. I am also in Electronics for Inventors and it reminded me a lot of the comparators in the 555 timer we are using. It uses binary logic to make multiple complicated outcomes out of a relatively simple setup.

I did use chatGPT in sections of my recode as I did not want to create the smiley’s by myself, and also was not totally sure on the logic to keep the faces resized properly,.