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 31 - Yardhouse

yardhouse-1.png

Last week I was listening to the 99% Invisible episode Instant Gramification on the insta-famous Yardhouse (see below). I had never heard of it before but it’s a fascinating study architecture and design - is it for the humans experiencing it in real life or on the internet? I challenged myself to recreate the wall for today, going to see if there are any other insta-famous designs I can try to do recreate throughout the week.

Sketch:

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

instagram-yardhouse.png

Drawings:


Code:

x = 0;
y = 725;
count = 1;
hor = 0;
coff = 0;

function setup() {
  createCanvas(700, 690);
  colorMode(HSB);
  noStroke();
}

function draw() {

  coff = coff + 2;
  let n = noise(coff) * 15;

  let hues = [0, 50, 360, 360, 360, 360, 189]
  let sats = [15, 15, 15, 15, 15, 15, 15, 15, 30]
  let brights = [90, 90, 90, 90, 90, 90, 70]

  rH = random(hues);
  rS = random(sats);
  rB = random(brights);

  oddOrEven = (count % 2);
  if (oddOrEven == 1) {
    hor = 0;
  } else {
    hor = -20;
  }
  
  fill(50);
  quad(x, y+2, x + 25, y + 25, x, y + 51, x - 25, y + 25);
  
  fill(rH - n, rS - n, rB + n);
  quad(x, y, x + 25, y + 25, x, y + 50, x - 25, y + 25);

  x = x + 40;
  if (x > width) {
    x = hor;
    y = y - 30;
    count = count + 1;
  }

  if (y < -50) {
    noLoop();
  }

}

Chelsea Watson