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 28 - Circular Rainbows

circular-rainbows-7.png

I know I likely say this too often, but I’m really excited by how today’s sketch turned out. Building off of the explorations from the previous two days, I wanted to play around with colour. The basic idea was super straightforward, as you can see with the pseudocode, but I wanted to add in more control through the origin of the lines as I couldn’t decide which I liked best. I also liked the output from adding multiple different origins, so added that control as well. I encourage you to open the sketch and play around with it, this is one of those sketches that makes you feel like you’re creating. I’m really into it.

Sketch:

https://editor.p5js.org/chelseamwatson/present/wlAEWra-iB

  • DELETE: stops the drawing

  • RETURN/ENTER: starts the drawing

  • ESC: resets the drawing

  • 1-7: changes the coordinates and quantity of shapes being drawn

Pseudocode:

  • Draw a bunch of lines radiating out from a single point to form a circle.

  • Make each line a different colour.

Drawings:

Code:

i = 0;
lines = 1;

function setup() {
  createCanvas(700, 700);
  strokeWeight(1);
  background(248)
}

function draw() {

  translate(width / 2, height / 2);

  rR = random(0, 255);
  rG = random(0, 255);
  rB = random(0, 255);
  stroke(rR, rG, rB);

  var radius = 300;
  var angle = TAU / 100;

  var x = cos(angle * i) * radius;
  var y = sin(angle * i) * radius;
  i = i + 0.1;

  if (lines == 1) {
    line(0, 0, x, y);
  } else if (lines == 2) {
    line(0, 200, x, y);
  } else if (lines == 3) {
    line(200, 50, x, y);
    line(50, 200, x, y);
  } else if (lines == 4) {
    line(100, 100, x, y);
    line(-100, -100, x, y);
  } else if (lines == 5) {
    line(-300, 0, x, y);
    line(300, 0, x, y);
  } else if (lines == 6) {
    line(0, 0, x, y);
    line(50, -150, x, y);
    line(100, -280, x, y);
  } else if (lines == 7) {
    line(-300, 0, x, y);
    line(300, 0, x, y);
    line(0, -300, x, y);
    line(0, 300, x, y);
  }

}

function keyReleased() {
  if (keyCode == DELETE || keyCode == BACKSPACE) noLoop();
  if (keyCode == ENTER || keyCode == RETURN) loop();
  if (keyCode == ESCAPE) background(248);
  if (key == 's' || key == 'S') saveCanvas();
  if (key == '1') lines = 1;
  if (key == '2') lines = 2;
  if (key == '3') lines = 3;
  if (key == '4') lines = 4;
  if (key == '5') lines = 5;
  if (key == '6') lines = 6;
  if (key == '7') lines = 7;
}
Chelsea Watson