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 11 - Stalactites

stalactites-7.png

As I’d been playing with patterns and shapes the last while, I really hadn’t spent anytime experimenting with lines. So, that was really my prompt today - do something with lines. Heh. This sketch had been sitting in my folder for a few days, and I just wasn’t super happy with it. I kept going back and forth about what the size the lines should be and the number of times it should loop - hardcoding combinations to no end. But then, I had a bit of a breakthrough when I discovered how to use the keyPressed function! I’ve been working my way through Generative Design and noticed them using this functionality to save work and load different variables. Arguably not the main point of their lessons, but such a small thing to learn that will go such a long way in my work. Now I’ve got these drippy overlapping shapes made up of random vertical lines, that you can change the length of, and save anytime once you like what you’ve got. Also, you can start over without having to refresh the program! I encourage you to follow the link below and play around with it.

SKETCH:

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

  • S: saves and downloads image as a png

  • DELETE: resets the canvas

  • 1-5: changes the length of the lines

DRAWINGS:

Code:

x = -1;
y = 0;
let xoff = 0;
let count = 0;
let aKey = 1;

function setup() {
  createCanvas(700, 700);
  background(50);
  strokeWeight(1);
  stroke(250, 50);
}

function draw() {

  xoff = xoff + 0.02;
  let n = noise(xoff) * 200;
  x = x + 2;
  line(x, 0, x, n * aKey);
  if (x > width + 20) {
    x = -21;
    count = count + 1;
  }

}

function keyPressed() {
  if (keyCode == DELETE || keyCode == BACKSPACE) background(50);
  x = -21;
  if (key == 's' || key == 'S') saveCanvas();
  if (key == '1') aKey = 1;
  if (key == '2') aKey = 2;
  if (key == '3') aKey = 3;
  if (key == '4') aKey = 4;
  if (key == '5') aKey = 5;
}
Chelsea Watson