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 14 - Colour Block Sunset

color-block-sunset-1.png

The last few sketches got a little intense - I felt as though I was skipping wayyyyyy too far ahead and missing a lot of fundamental learning opportunities. I also didn’t understand like 70% of what I was coding (though I’ve been assured that’s true of a lot of folks who do this sort of thing). So, back to some basics. Today’s sketch started with a prompt to “generate a canvas where the top half is a random colour and the bottom half is a random dark grey”. I totally did that, but then wanted to push it further and make it a bit more complex. I went into this sketch with a pretty firm idea of what I wanted to create after seeing this design treatment on the header of an article I read this week, which is also a departure from the last few sketches. I think there’s a lot of power here to come up with a design you like and then randomly apply colour palettes to see what works best.

Sketch:

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

  • S: saves and downloads image as a png

  • click: changes the colour of the circles

  • horizontal mouse position: fades the brightness of the background

  • vertical mouse position: fades the saturation or brightness of the circles

Pseudocode:

Fill the canvas with black, allowing the brightness to change based on the horizontal position of the cursor.

Put a circle in the middle of the canvas.

Put a second smaller circle in the middle of the canvas, on top of the first circle.

Cover these circles with a third circle the same size as the first, but cut it in half.

Fill each circle with a different random colour, changing the saturation or brightness based on the vertical position of the cursor.

Change the colours of the circles whenever the canvas is clicked.

Drawings:

Code:

function setup() {
  createCanvas(800, 800);
  noStroke();
  colorMode(HSB);
  x = random(0, 360);
  y = random(0, 100);
  rectMode(CENTER);
}

function draw() {

  let grey = (map(mouseX, 0, width, 0, 100));
  background(0, 0, grey);

  let mod = (map(mouseY, height, 0, 10, 100));

  fill(x, y, mod);
  ellipse(width / 2, height / 2, width / 2, height / 2);

  fill(y, mod, x);
  ellipse(width / 2, height / 2, width / 5, height / 5);

  fill(x, mod, y);
  arc(width / 2, height / 2, width / 2, height / 2, 0, PI);
}

function keyPressed() {
  if (key == 's' || key == 'S') saveCanvas();
}

function mousePressed() {
  x = random(0, 360);
  y = random(0, 100);
  draw();
}
Chelsea Watson