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 9 - Rainbow Quilt

rainbow-quilt-1.png

The string of patterns continues, now with a whole lot more colour! A few years ago I thought I wanted to learn how to quilt - I’d still love to learn - and my gracious and talented quilting friend Kathleen took it upon herself to try and teach me. To be fair, at the time I lived in a teeny tiny bachelor suite and didn’t even have a table so…I never really caught on. However, when I was thinking about the types of quilts I wanted to make, I was always drawn to these scrappy patchwork patterns. Turns out it’s waaaaay easier to code than to quilt! This one turned out almost how I wanted it to, though I couldn’t figure out how to stagger the rectangles vertically as they are horizontally, I don’t mind the effect though.

I’ve recently started reading Computational Drawing by Carl Lostritto. In it, he urges folks to first consider the pseudocode of their drawing, to think about what they want the code to do in plain english. Adam’s also been encouraging me to do the same. Honestly, a lot of my sketches so far have been the creation of a happy accident or me just playing around with inputs, but they generally do start with some nugget of an idea. So, with that in mind, I’m going to try writing and including the pseudocode with my sketches from now on, if for no other reason than to practice doing so.


Pseudocode:

Draw a random number of rectangles on the canvas from left to right.

Vary the width and height of the rectangles.

Fill each rectangle with a random colour from the entire RGB spectrum.

When the rectangles span the entire width of the window, stop and move down vertically, starting back at the left side of the canvas.

When the rectangles span the entire height of the window, stop drawing.



Code:

x = -2;
y = -2;

function setup() {
  createCanvas(windowWidth, windowHeight);

}

function draw() {
  let rColorR = random(0, 250);
  let rColorG = random(0, 250);
  let rColorB = random(0, 250);
  let rShape = random(5, 50);
  fill(rColorR, rColorG, rColorB);
  rect(x, y, rShape, 50);
  x = x + rShape;
  if (x > width) {
    x = -2;
    y = y + rShape;
  }

  if (y > height) {
    noLoop()
  }

}

Chelsea Watson