I’ve been staring at my bookshelves in my living room “office” for the last three months straight during lockdown so thought I’d do a simple homage to my little space. My bookshelves don’t look like this (see below), but I did go through a colour organizational phase at some point. I tried to make this a bit more complex but kept coming back to just this simple version I started with. Is this a metaphor for life? PROBABLY.

I’m taking a few days off work next week to coincide with Canada Day and will be getting out of Toronto for a couple nights during that time. I plan to spend lots of time outside, and may or may not be pausing the challenge for a few days to unplug and prioritize time away from my laptop. After all it’s my challenge so I get to make the rules, right?

Sketch:

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

Pseudocode:

Draw three rows of tall, skinny rectangles with slightly rounded corners.
Make the rectangles varying heights, widths and colours, but from within a defined array of values.
Have the rows of rectangles sit on horizontal lines that extend just beyond where the rectangles start and end.
Change the background hue every time the program runs.

Drawings:

Code:

let bookHeight;
let bookWidth;
let bookSpace = 100;
let y = 250;

function setup() {
  colorMode(HSB);
  createCanvas(700, 700);
  let bg = random(0, 250);
  background(bg, 10, bg);
  strokeCap(PROJECT);

}

function draw() {

  let hue = random(0, 50);
  let sat = random(0, 50);
  fill(hue, sat, 100);
  strokeWeight(1);
  stroke(30);

  bookHeight = random(100, 130);
  bookWidth = random(10, 30);
  rect(bookSpace, y - bookHeight, bookWidth, bookHeight, 3);
  bookSpace = bookSpace + bookWidth;

  push();
  strokeWeight(5);
  line(80, y, 620, y);
  pop();

  if (bookSpace > 590) {
    bookSpace = 100;
    y = y + 160;
  }
  if (y > 600) {
    noLoop();
  }

}

100x100 Computational Design Challenge

Day 25 - Bookshelves

Sketch:

Pseudocode:

Drawings:

Code: