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 12 - Pressed Flowers

paper-flowers-5.png

Alright, I know I said I’d be including pseudocode in my posts from now on but…my sketches lately have stemmed from playing around with various prompts from Adam and from the Generative Design exercises I’ve been doing. I’ll be working on a sketch to teach myself some basics and then suddenly I have drawings that look like they could be crepe paper flower petals and have no idea how I got there! So, I’ll include pseudocode when I approach a sketch with a bit of a plan, this is not one of those sketches. But, I can tell you a bit of my process in arriving here.

I was working through the first Shape exercise in Generative Design and started messing around with some of the numbers in the code when the shapes on the canvas started looking like flower petals. I took the stroke weight and opacity of the lines way down down to create an overlapping transparent effect. Relying on the trick I learned yesterday regarding the keyPressed function, I added the ability to change colours while you draw and save/reset as required. I encourage you to open and play around with this sketch, it’s really nice to move the cursor on the screen and watch it come together.

Transparently, I don’t fully understand a lot of the math that goes into this one (it’s been more years than I care to admit since high school math classes) and how it all comes together. Which, I don’t know how I feel about. I know so much of this is copying and pasting and manipulating code, but want to make sure I’m understanding the logic and the concepts. To that point, I might take a bit of step back to the basics and work my way up to these exercises.

Sketch:

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

  • S: saves and downloads image as a png

  • DELETE: resets the canvas

  • 1-3: changes the colour of the lines

Drawings:

Code:

function setup() {
  createCanvas(700, 700);
  background(247, 241, 219);
  stroke(242, 186, 170, 50);
}

function draw() {
  translate(width / 2, height / 2);
  var circleResolution = map(mouseY, 0, height, 2, 5, true);
  var radius = mouseX - width / 2;
  var angle = TWO_PI / circleResolution;
  
  beginShape();
  for (var i = 0; i <= circleResolution; i++) {
    var x = cos(angle * i) * radius;
    var y = sin(angle * i) * radius;
    line(0, 0, x, y)
  }
  endShape(CLOSE);
}

function keyReleased() {
  if (keyCode == DELETE || keyCode == BACKSPACE) background(247, 241, 219);
  stroke(242, 186, 170, 50);
  if (key == 's' || key == 'S') saveCanvas();
  if (key == '1') stroke(242, 186, 170, 50);
  if (key == '2') stroke(100, 100, 100, 10);
  if (key == '3') stroke(197, 196, 128, 25);
}
Chelsea Watson