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 45 - Coat of Many Colours

colour-coat-1.png

It’s the last day in my series of creating patterns inspired by the textiles of the Gee’s Bend Quiltmakers. It’s been a great opportunity to explore these tactile, functional works of art and reflect on the history of the artists - nearly all of whom descended directly from people enslaved by the former owner of the land they currently inhabit. I’ve been trying to better educate myself over the last few months with the Black Lives Matter movement reaching a tipping point over the murders of George Floyd, Breonna Taylor and countless others. One thing that’s really hit me is just how recent slavery was abolished. Like, I knew when it ended, but I had ever really done the math to consider how few generations removed from it we really are. I have so much to learn and so much to unlearn. I’m making my way through a long list of resources, but so far I’ve personally found these really helpful in building my understanding of the system we live in today and the system it was built upon:

I’m ending the week with one of my favourite quilts, Coat of Many Colours by Addie Pearl Nicholson. It’s optimistic. It’s hopeful. It’s beautiful in its simplicity, yet surprising in its irregularities. I’m very grateful to have learned about Addie and her work, and to have had the opportunity to explore the art and the stories of the women of Gee’s Bend.

If you’ve been following along this series, please consider donating to Souls Grown Deep, an Atlanta based foundation dedicated to promoting the work of Black artists in the Southern United States, and supporting their communities.

Sketch:

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

  • Keys 0-9: resets the pattern and changes the size of the blocks

“Coat of Many Colours” by Addie Pearl Nicholson

“Coat of Many Colours” by Addie Pearl Nicholson


Pseudocode:

  • Draw a quadrilateral block that’s tall and rectangular in shape and slants to the left

  • Draw another quadrilateral block that’s the same shape but slants to the right

  • The first point on the second block should be the same as the second point on the first block

  • Repeat these blocks down the screen

  • When the blocks reach the bottom of the canvas, shift over horizontally and start drawing down again from the top


Drawings:


Code:

x = -75;
y = -40;
m = 0;

function setup() {
  createCanvas(700, 700);
  background(200);
  stroke(150);
  strokeWeight(0.1);
}

function draw() {

  let shades = ["#F5F5F5", "#E7CFD2", "#F5F5F5", "#F5F5F5", "#E7E2D6", "#E7E2D6", "#E7CFD2", "#E7E2D6", "#E7E2D6", "#E7E2D6", "#FFB5D5", "#F50000", "#F06456", "#E67400", "#EEBB2B", "#EEBB2B", "#00B643", "#99D6C9", "#81C7E1", "#0463A0", "#2D375C", "#CFB08F"];

  let shade = random(shades);
  c = color(shade);
  fill(c)

  quad(x, y, x + 10 + m, y + 10 + m, x - 30 + m, y + 50 + m, x - 40, y + 40);

  let tones = ["#E7E2D6", "#E7E2D6", "#E7E2D6", "#E7E2D6", "#E7E2D6", "#E7CFD2", "#FFB5D5", "#F5F5F5", "#F5F5F5", "#E7CFD2", "#F50000", "#F06456", "#E67400", "#EEBB2B", "#EEBB2B", "#00B643", "#99D6C9", "#81C7E1", "#0463A0", "#2D375C", "#CFB08F"];

  let tone = random(tones);
  c = color(tone);
  fill(c)

  quad(x + 10 + m, y + 10 + m, x + 50 + m, y + 50 + m, x + 40, y + 60 + (m * 2), x, y + 20 + (m * 2));
  y = y + 20 + (m * 2);

  if (y > 700) {
    y = -40;
    x = x + 80;
  }
}

function keyReleased() {
  if (key == '1') {
    background(200);
    x = -75;
    y = -40;
    m = 0;
  }
  if (key == '2') {
    background(200);
    x = -75;
    y = -40;
    m = 5;
  }
  if (key == '3') {
    background(200);
    x = -75;
    y = -40;
    m = 10;
  }
  if (key == '4') {
    background(200);
    x = -75;
    y = -40;
    m = 20;
  }
  if (key == '5') {
    background(200);
    x = -75;
    y = -40;
    m = 30;
  }
  if (key == '6') {
    background(200);
    x = -75;
    y = -40;
    m = 40;
  }
  if (key == '7') {
    background(200);
    x = -75;
    y = -40;
    m = 50;
  }
  if (key == '8') {
    background(200);
    x = -75;
    y = -40;
    m = 70;
  }
  if (key == '9') {
    background(200);
    x = -75;
    y = -40;
    m = 90;
  }
  if (key == '0') {
    background(200);
    x = -75;
    y = -40;
    m = 100;
  }
}

Chelsea Watson