Chelsea Watson
0

100x100 Computational Design Challenge

Throughout 2020 I created 100 computational designs in 100 days as a way to learn creative coding and explore generative art

Day 33 - Dots & Lines

dots-lines-1.png

I’ve been working my way through Generative Design, using their code to try to learn some new techniques. This week, I’ve been learning about pattern making by using a grid. It gets out of hand pretty quickly, you can get some wild results! Playing it safe to start with some dots and lines in a random repeating pattern.

Sketch:

https://editor.p5js.org/chelseamwatson/present/z-k8ISoKk

Drawings:

Code:

var tileCount = 20;
var actRandomSeed = 0;

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

function draw() {
  clear();
  background(255,255,251);
  randomSeed(actRandomSeed);

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

      var posX = width / tileCount * gridX;
      var posY = height / tileCount * gridY;

      var toggle = int(random(0, 2));

      if (toggle == 0) {
        stroke(116,143,135, 50);
        strokeWeight(20);
        line(posX, posY, posX + 40, posY + 40);

        stroke(205,197,138,50);
        strokeWeight(20);
        line(posY, posX, posY + 12, posX + 12);

        stroke(205,197,138);
        strokeWeight(1);
        line(posX, posY, posX + width / tileCount, posY + height / tileCount);
      }

      if (toggle == 1) {
        stroke(205,197,138);
        line(posX, posY + width / tileCount, posX + height / tileCount, posY);

        noStroke();
        fill(205,122,35);
        ellipse(posX, posY + width / tileCount, 10, 10);
      }
    }
  }
}

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