I’m kicking off a few days of patterns. This starting sketch took me a minute to master, working through the logic of how to fill the canvas with a repeating shape. But, once I got it, it was fun to manipulate. I set the colour to change based on the x and y coordinates of each diamond, creating a nice gradient effect, especially on the sketches with a smaller horizontal spacing. I tried (and gave up on trying) to change the spacing based on keyboard inputs. I think it’s something about how I’m drawing the sketch, placing each shape on the canvas one at a time rather than all at once. I’m going to try playing with it but, in the meantime, I’m sharing a series of sketches where the horizontal spacing goes up by 10 for each iteration.

A note that I’m not going to be sharing my sketches on social media for the time being in solidarity with the Blackout movement. There are a number of resources online to learn, participate and donate, but please reach out if you’d like me to send you a list I’ve compiled.

Sketches:

https://editor.p5js.org/chelseamwatson/present/xxH-H5q8c

Code:

x = -20;
y = -40;

function setup() {
  createCanvas(650, 640);
}

function draw() {
  fill(x / 3, 100, y / 4, y / 2);
  x = x + 30; //change number this to manipulate horizontal spacing
  quad(x, y, x + 20, y + 40, x, y + 80, x - 20, y + 40);
  if (x > 700) {
    x = -20;
    y = y + 40;
  }

  if (y > 550) {
    noLoop();
  }

}

100x100 Computational Design Challenge

Day 7 - Diamond Patterns

Sketches:

Code: