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 10 - Strings of Beads

beads - 1.png

Apologies for the aggressive colour combinations happening this week! I’m generally an all black everything kind of person but felt like this week could use a little brightness. For today’s pattern I wanted to play with more consistency, but still include some randomness. I initially approached it thinking of strings of beads my nieces make - the beads all coming from the same set so they go together, but ultimately there’s no reason to the order of them. I looked up how to write an if/then statement to apply different styling to every other shape and, though I still don’t totally understand the logic, it worked! I wanted to play around a bit with inputs here and try to figure out how I could tweak the output based on mouse controls or buttons, but it’s been a long week. So, for now, this sketch produces a very consistent pattern but next week I think I’ll try to nudge things back to being a bit more loose.

PSEUDOCODE:

Draw a series of ellipses on the canvas from top to bottom.

The shape of the ellipses should vary depending on if the ellipse is even or odd.

Have the ellipses overlap slightly vertically but leave a bit of space between the columns.

Fill every ellipse with a different random colour, from a controlled RGB set.

When the ellipses span the entire height of the window, stop and move right horizontally, starting back at the top of the canvas.

When the ellipses span the entire width of the window, stop drawing.

Code:

x = -20;
y = 20;
var oddOrEven;
var shape

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  rectMode(RADIUS);
}

function draw() {

  oddOrEven = (frameCount % 2);
  if (oddOrEven == 1) {
    shape = 5;
  } else {
    shape = 30;
  }

  let colorR = random(50, 250);
  let colorG = random(50, 250);
  let colorB = random(50, 250);
  fill(colorR, colorG, colorB);
  ellipse(x, y, shape, 30);
  y = y + 10;

  if (y > height + 20) {
    y = -5;
    x = x + 32;
  }

  if (y > width + 20) {
    noLoop()
  }

}
Chelsea Watson