Week 4 : Nested For Loops and Random

// global scope !
// var is the old way of declaring variables. it still works !
// the new way: is to use either 1) const - if the variable does not change. it is constant!
// 2) we can also use the keyword let -- we use this if the variable is going to change.

let w = 20; // width of circles
let x = 20; // x value or horizontal placement of circles
let y = 20; // vertical distance between circles
let offset = 20;
let num = 20; // number of circles in my row

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  for (let s = 0; s < num; s = s + 1) {
    for (let i = 0; i < num; i = i + 1) {
      circle(offset + i * x, offset + s * y, w);
    }
  }
}

// global variable control panel
let padding = 10;
let spacing = 2;
let margin = 70; // margin between top and left of marks, bottom and right
let yPadding = 1;
let yJitter = 2; // maximum randomness in the yPadding

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(255);
  // row 1
  stroke(0);
  // row code
  for (let y = margin; y < height - margin; y += yPadding + random(yJitter)) {
    let g = map(y, margin, height - margin, 0, 255); // take y (margin, height - margin) -> (0,255)
    stroke(g);
    // column code
    for (
      let x = margin + y * 0.5;
      x < width - margin - 30 - spacing;
      x += 20 + padding + spacing
    ) {
      line(x, y, x + 10, y + 10);
      line(x + 10 + spacing, y + 10, x + 20 + spacing, y);
    }
  }
}

//

let num = 100; // give a certain number of shapes
// 10 shapes per row, and ten shapes per column

let spacing;

function setup() {
  createCanvas(400, 400);
  noLoop();
  spacing = width / num;
  noFill();
}

function draw() {
  background(255);
  // and adjust the spacing between shapes vertically;
  for (let y = spacing / 2; y < height; y += spacing + 20) {
    // adjust the spacing between shapes horizontally
    for (
      let x = spacing / 2 + random(spacing / 2);
      x < width - spacing / 2;
      x += random(spacing * 2)
    ) {
      // adjust the width of the shape
      circle(x, y, spacing);
    }
  }
}

// global variables
let margin = 150; // number of margin pixels on left and right (top and bottom) of canvas
let radius = 10; // radius of shape
let spacing; // in the global scope so that I can use it in the draw loop later.

function setup() {
  createCanvas(800, 800);

  let w = width - margin * 2;
  let num = w / (radius * 2); // the number of circles insides the margins;
  let rnd = floor(num); // total number of complete circles that fit inside the margins
  let remainder = (num - rnd) * radius * 2;
  spacing = remainder / num + radius * 2;
  noLoop();
  noStroke();
}

function draw() {
  background(255);

  let o = 128; // opacity;
  let g = random(0, 255);
  for (let y = margin + radius; y <= height - (margin + radius); y += spacing) {
    let r = random(100, 255);
    // for loop that changes the x position of this drawing algorithm
    for (
      let x = margin + radius;
      x <= width - (margin + radius);
      x += spacing
    ) {
      let b = random(0, 100);
      o += random(-30, 30);
      o = constrain(o, 0, 255); // keep 1 with bounds min 2 and max 3

      fill(r, g, b, o);
      // draws circles
      circle(x, y, radius * 2 + random(50)); // radius * 2 = diameter
    }
  }
}