The second iteration playing with the base code from Generative Design’s lesson on patterns made from a grid. Added some controls into this one, allowing you to change the the stroke weight and coordinates. Also really leaning into Wes Anderson-esque colour palettes the last few days.

Sketch:

https://editor.p5js.org/chelseamwatson/present/Dtq4fM4Si

1-4: changes the line values
mouse position: stroke gets heavier as the cursor moves right, lighter as the cursor moves left
left mouse click: generates a new pattern

Drawings:

Code:

var actRandomSeed = 0;
n = 0;

function setup() {
  createCanvas(700, 700);
  strokeCap(ROUND);
}

function draw() {
  clear();
  background(238, 232, 220);
  strokeWeight(mouseX / 22);
  randomSeed(actRandomSeed);
  tileCount = 20;

  for (var gridY = 0; gridY < tileCount; gridY++) {
    for (var gridX = -20; gridX < tileCount; gridX++) {

      var posX = width / tileCount * gridX;
      var posY = height / tileCount * gridY;
      var toggle = int(random(0, 2));

      if (toggle == 0) {
        stroke(224, 100, 77);
        line(posX, posY, posX + (width / tileCount) / n, posY + height / tileCount);
        stroke(156, 218, 199);
        line(posX + (width / tileCount) / n, posY, posX + (width / tileCount), posY + height / tileCount);

      }

      if (toggle == 1) {
        stroke(237, 201, 68);
        line(posX, posY + width / tileCount, posX + (height / tileCount) / n, posY);
        stroke(70, 51, 72);
        line(posX + (height / tileCount) / n, posY + width / tileCount, posX + (height / tileCount), posY);

      }
    }
  }
}

function mousePressed() {
  actRandomSeed = random(100000);
}

function keyReleased() {
  if (key == '1') {
    n = 0;
  }
  if (key == '2') {
    n = 1;
  }
  if (key == '3') {
    n = 2;
  }
  if (key == '4') {
    n = 7;
  }
}

100x100 Computational Design Challenge

Day 34 - Random Grid

Sketch:

Drawings:

Code: