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

ok-1.png

Hey everyone, I’m back at it following a week off to recharge after reaching the halfway point in my challenge. This week I’m either playing with type, or creating pieces inspired by the work of Japanese American artist Ruth Asawa - or perhaps both! Still undecided. I really want to explore as many different mediums as possible within generative art, and haven’t done anything with type yet so, for today, I’m starting with that. I only recently started learning about Ruth and her work after a colleague shared the newly released US Postage stamps featuring her wire sculptures. I’m in awe of those pieces, but also love her stamped prints from early in her career. Ruth created this work, including the piece below, while she was in charge of the student-run laundry facility at Black Mountain College, an experimental art school in North Carolina.

Here’s an embarrassing admission, I only JUST learned how to properly code loops. Perhaps even more embarrassingly, I tried that for this program and then scrapped it as I preferred the result I got from the old way I did it. But! Learning!

The pandemic is hard. Isolation is hard. Work is hard. Relationships are hard. Mental health is hard. I have a banner hanging at the foot of my bed that says “It’s OK”, I chose to repeat that mantra here. There’s something about how “KOOK” comes through in the pattern that’s a bit unnerving, but also representative of how I feel most days, balancing somewhere between the two.

Sketch:

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

Ruth Asawa | Untitled (BMC.145, BMC Laundry Stamp) | 1948–49

Ruth Asawa | Untitled (BMC.145, 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 the right edge of the canvas, stop


Drawings:


Code:

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

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

}

function draw() {

  r = random(20, 150);
  fill(0, r);

  off = off + 0.01;
  let nx = noise(off) * 10;
  let ny = noise(off) * 2;

  text("OK", x1 - nx, y1);

  y1 = y1 + (10 * ny);

  push();
  rotate(PI);
  text("OK", x2 - nx, y2);
  pop();

  y2 = y2 - (12 * ny);

  if (y1 >= height - 10) {
    x1 = x1 + 40;
    y1 = 20;
  }
  if (y2 <= -height + 20) {
    x2 = x2 - 40;
    y2 = -10;
  }
  if (x1 >= width - 10) {
    noLoop();
  }
}

Chelsea Watson