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 43 - Housetop

housetop-3.png

This week I’m drawing inspiration from the incredible textiles of Gee’s Bend Quiltmakers. Today’s design is inspired by the many Housetop quilts made by artists like Lucy T. Pettway, Malissia Pettway and Nancy Pettway, among many others. The Housetop pattern is one of the favourites of the quiltmakers as its simplicity allows for a great deal of experimentation.

Conceived broadly, the "Housetop" is an attitude, an approach toward form and construction. It begins with a medallion of solid cloth, or one of an endless number of pieced motifs, to anchor the quilt. After that, "Housetops" share the technique of joining rectangular strips of cloth so that the end of a strip's long side connects to one short side of a neighboring strip, eventually forming a kind of frame surrounding the central patch; increasingly larger frames or borders are added until a block is declared complete.

(https://www.soulsgrowndeep.org/quilt-categories/housetop-bricklayer)

There are many variations on the Housetop pattern but I was drawn to the quilts below, with their thin multicolour strips and bits of surprise throughout. I struggled with this sketch, despite its simplicity. I’m just not sure how to program colour variations properly yet and that really tripped me up as I was hoping for a more random assortment, without it looking like a mess of colour. Instead, I went with the primary colours of corduroy the quilters salvaged from their Sears pillowcases: gold, avocado leaf, tangerine and cherry red.

Sketch:

https://editor.p5js.org/chelseamwatson/present/6bM0u8K-5

Pseudocode:

  • Put a square at the centre of the canvas, make the size random

  • Draw four thin rectangles, outlining the sides of the square

  • Have the rectangles join in the corners to form a square

  • Move out from there, drawing rectangles until you reach the edge of the canvas

  • Place two small rectangles of random sizes in random places on top of the bottom rectangle

Drawings:

Code:

x1 = 0;
y1 = 0;
x2 = 800;
y2 = 20;
l1 = 820;
l2 = 800;
count = 0;
coff = 0;

function setup() {
  createCanvas(820, 820);
  background(216, 205, 205);
  noStroke();
  frameRate(30);
  r2 = random(20, 100);
  rectMode(RADIUS);
  fill(147, 0, 27);
  rect(width / 2, height / 2, r2, r2);
}

function draw() {
  rectMode(CORNER);
  r = random(0, 800);

  coff = coff + 0.4;
  let n = noise(coff) * 2;

  if (x1 > 200) {
    fill(60 * n, 60 * n, 58 * n);
  }
  if (x1 < 220) {
    fill(100 * n, 108 * n, 86 * n);
  }
  if (x1 < 100) {
    fill(230 * n, 150 * n, 6 * n);
  }
  if (x1 > 400) {
    fill(147, 0, 27);
  }

  if (x2 < 220) {
    fill(64 * n, 64 * n, 63 * n);
  }
  if (x2 < 200) {
    fill(100 * n, 108 * n, 86 * n);
  }
  if (x2 < 100) {
    fill(230 * n, 150 * n, 6 * n);
  }

  rect(x1, y1, l1, 20);
  x1 = x1 + 40;
  y1 = y1 + 40;
  l1 = l1 - 80;
  count = count + 1

  rect(x2, y2, 20, l2);
  x2 = x2 - 40;
  y2 = y2 + 40;
  l2 = l2 - 80

  fill(64, 64, 63);
  rect(r, 800, r, 20);

  fill(147, 0, 27);
  rect(r / 2, 800, r / 2, 20);

  if (x2 < 0) {
    noLoop();
  }
}
Chelsea Watson