A big takeaway, both from today and from throughout the week, is that you can write some base code and tweak it slightly for entirely different results. I think I’m going to keep that going in the challenge as building on the same code also helped me learn more about it and explore it deeper than I would have otherwise. Also, it’s waaaaaay easier to tweak a thing rather than start from scratch every day!

That said, I’m not really sure I love today’s sketch, but I think I need to get more comfortable with not loving every sketch all the time. There are two variations of drawings from the exact same code, which is kind of neat. Spinning lines and growing opacity and mouse controlled radiuses - oh my! Anyway, some good and some meh in this one.

Sketch:

https://editor.p5js.org/chelseamwatson/present/0WqnFXPb5

DELETE: stops the drawing
RETURN/ENTER: starts the drawing
ESC: resets the drawing
1-3: changes the colour of the lines
mouse position: radius gets larger as the cursor moves right, smaller as the cursor moves left

Drawings:

Code:

i = 0;
lines = 1;

function setup() {
  createCanvas(700, 700);
  background(255, 249, 245);
}

function draw() {

  translate(width / 2, height / 2);

  var radius = 400;
  var angle = TAU / 100;
  var x = cos(angle * i) * mouseX / 3;
  var y = sin(angle * i) * mouseX / 3;
  i = i + 0.1;

  line(0, 0, x, y);

  if (lines == 1) {
    stroke(143, 27, 0, frameCount / 50);

  } else if (lines == 2) {
    stroke(130, 146, 13, frameCount / 50);

  } else if (lines == 3) {
    stroke(192, 169, 83, frameCount / 50);

  }

}

function keyReleased() {
  if (keyCode == DELETE || keyCode == BACKSPACE) noLoop();
  if (keyCode == ENTER || keyCode == RETURN) loop();
  if (keyCode == ESCAPE) background(255, 249, 245);
  frameCount = 0;
  if (key == '1') lines = 1;
  frameCount = 0;
  if (key == '2') lines = 2;
  frameCount = 0;
  if (key == '3') lines = 3;
  frameCount = 0
}

100x100 Computational Design Challenge

Day 30 - Watercolour Stains

Sketch:

Drawings:

Code: