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 52 - It's Still OK

still-ok-1.png

I decided to keep going on a Ruth Asawa inspired theme for this week. I think there’s a lesson in how she creates such complex work with such simple and surprising materials - in this case, a rubber stamp, some ink and a bedsheet. I attempted to replicate the flowing columns of Ruth’s piece below, along with the diversion near the end. Otherwise, I stuck to a very similar pattern as yesterday. I did get to play around with && statements though, which are new to me!

Sketch:

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

Ruth Asawa, Untitled (BMC.76, BMC laundry stamp), 1948-49


Pseudocode:

  • Type ‘OK’ in the top left corner of the canvas

  • Type ‘OK’ to the right of the first ‘OK’, but type it backwards

  • Repeat both ‘OK’s vertically down the canvas

  • Vary the opacity and vertical spacing of the ‘OK’s

  • When the ‘OK’s reach the bottom of the canvas, start again from the top

  • Vary the horizontal spacing of the ‘OK’ columns

  • When the ‘OK’ columns reach about 2/3 of the way across and 1/3 of the way down the canvas, leave a blank horizontal space

  • Make the amount of horizontal blank space increase as you go down the canvas

  • When the ‘OK’ columns reach the right edge of the canvas, stop


Drawings:


Code:

off = 0;
y1 = 10;
x1 = 20;
y2 = -10;
x2 = -60;

function setup() {
  createCanvas(700, 700);
  background(248);
  textFont('futura');
  textStyle(BOLD);
  textSize(12);

}

function draw() {

  off = off + 0.1;
  let n = noise(off) * 20;

  r = random(50, 150)
  fill(171, 0, 17, r);

  text("OK", x1 - n, y1 + n);
  y1 = y1 + 10;
  
  r = random(150, 250);
  fill(171, 0, 17, r);
  
  push();
  rotate(PI);  
  text("OK", x2 + n, y2);
  pop();
  y2 = y2 - 10;

  if (x1 > 600 && y1 > 200 && y1 < height - 10) {
    x1 = x1 + (y1 / 200);
    x2 = x2 - (y1 / 200);
  }

  if (y1 >= height - 10 && x1 > 600) {
    x1 = x1 - 70;
    y1 = 10;
  }

  if (y2 <= -height + 10 && x1 > 600) {
    x2 = x2 + 70;
    y2 = -10;
  }

  if (y1 >= height - 10) {
    x1 = x1 + 35;
    y1 = 10;
  }

  if (y2 <= -height + 10) {
    x2 = x2 - 35;
    y2 = -10;
  }

  if (x1 > width - 20 && y1 < 200) {
    noLoop()
  }

}

Chelsea Watson