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 16 - Stipple Study

stipple-study-1.png

I had a few missteps in getting this sketch where I wanted. I had a firm idea before I started, and wrote the pseudocode as a guide to keep me focused. I would have liked the circles to decline in radius a little but more slowly, but I like how it turned out otherwise. The fun in getting here though was seeing all the surprising variations take shape through trial and error. They arguably ended up better than this original intent! I remember a couple months ago when I first started at this I complained to Adam about the lack of precision I felt I had when using p5.js. He was surprised to hear this, saying he felt the beauty of generative art is mucking around and seeing what happens. Now, I totally get it. As such, for this week I’ll be sharing the surprise sketches as there’s some really great stuff that came out of getting here.

Sketch:

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

Pseudocode:

  • Draw a random number of circles vertically down the canvas.

  • Decrease the radius of the circles as they get closer to the bottom of the canvas.

  • Randomize the size and spacing of the circles slightly.

  • When the circles get to the bottom of the canvas, stop drawing and go back to the top.

  • Start the next vertical line of circles to the right of the last.

  • When the circles reach the right edge of the canvas, stop.

Drawings:

Code:

x = 10;
y = 10;
let xoff = 0;

function setup() {
  createCanvas(600, 600);
  noStroke();
  rectMode(RADIUS);
  background(250);
}

function draw() {
  xoff = xoff + .5;
  let n = noise(xoff) * 5;
  let r = random(10, 11);
  fill(0);
  ellipse(x + n, y + n, r - y / 60, r - y / 60);
  y = y + (15 - n);

  if (y > height) {
    y = 10;
    x = x + (10 + n);
  }

  if (x > width - 10) {
    noLoop()
  }

}
Chelsea Watson