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 94 - Signal Flags

signal-flag-3.png

Today’s sketch revisits one of my favourite pieces I’ve done during the challenge. Gunta was inspired by the textile work of Bahaus artist Gunta Stölzl and used shapes within a grid to create random patterns. I really loved how it turned out but there were a few baffling things with the code I could’t make senes of. Revisiting it today with screen printing in mind, I was able to refine the code to behave more how I wanted it to and am super pleased with the results. If you open the sketch, click anywhere on the canvas to change the pattern - endless possibilities.

Sketch:

https://editor.p5js.org/chelseamwatson/present/5-shQoPGv

Drawings:

Code:

var tileCount = 2;
var actRandomSeed = 0;

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

function draw() {
  background("#EDE9E0");
  randomSeed(actRandomSeed);

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

      let shades = ["#0a41a6", "#eb624d", "#EDE9E0"];
      let shade = random(shades);
      cS = color(shade);
      fill(cS);
      stroke(cS);
      strokeWeight(1);

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

      if (s == 0) {
        //half triangle
        noStroke();
        triangle(posX + width / tileCount, posY, posX + width / tileCount, posY + height / tileCount, posX, posY + height / tileCount);
        let shade = random(shades);
        cS = color(shade);
        fill(cS);

        triangle(posX, posY + height / tileCount, posX, posY, posX + width / tileCount, posY);
      }

      if (s == 1) {
        //horizontal lines
        for (y = posY + 1; y < height; y = y + 4) {
          line(posX, y, width, y);
        }
      }

      if (s == 2) {
        //vertical lines
        for (x = posX; x < width; x = x + 4) {
          line(x, posY, x, height);
        }
      }

      if (s == 3) {
        //quarter triangle
        noStroke();
        triangle(posX, posY + height / tileCount, posX + width / tileCount / 2, posY + width / tileCount / 2, posX + width / tileCount, posY + width / tileCount);

        let shade = random(shades);
        cS = color(shade);
        fill(cS);
        triangle(posX, posY, posX + width / tileCount / 2, posY + width / tileCount / 2, posX + width / tileCount, posY);
      }

      if (s == 4) {
        //horizontal rectangle
        noStroke();
        rect(posX, posY, width, height / tileCount / 2);
        
        let shade = random(shades);
        cS = color(shade);
        fill(cS);
        rect(posX, posY + height / tileCount / 2, width, height / tileCount / 2);
      }

      if (s == 5) {
        //vertical rectangles
        noStroke();
        rect(posX, posY, width / tileCount / 2, height);
        
        let shade = random(shades);
        cS = color(shade);
        fill(cS);
        rect(posX + width / tileCount / 2, posY, width / tileCount / 2, height);
      }

      if (s == 6) {
        //circle
        noStroke();
        ellipse(posX + width / tileCount / 2, posY + height / tileCount / 2, width / tileCount);
      }
    }
  }
}

function mouseReleased() {
  actRandomSeed = random(100000);
  tileCount = int(mouseX / 50);
}
Chelsea Watson