I had a good idea of what I wanted for today after finding inspiration online. I tried to write in logic to randomize the direction of the diagonals and the darker sections, and it just wasn’t working. Just as I was ready to give up I had a brainwave to use key controls instead and that was just the solution!

Sketch:

https://editor.p5js.org/chelseamwatson/present/7E3XlF08D

ANY KEY: press and hold to make lines grow horizontally, release to go back to default

Pseudocode:

Draw thin diagonal lines originating from the same point in the vertical middle of the canvas.
Create a shape by making each line 1 pixel shorter than the previous.
Vary the weight of the lines from 0.25 to 1.
Create sections within the shape where the diagonal switches directions and each line is 1 pixel longer than the previous.
These sections should also be darker than the others by allowing less space between the lines.
If the shape extends beyond 600 pixels vertically or horizontally, stop drawing.

Drawings:

Code:

let x = 500;
let y = 100;

function setup() {
  createCanvas(700, 700);
  background(230);
  strokeCap(SQUARE);
  frameRate(10);
}

function draw() {

  let stk = random(0.25, 1);
  strokeWeight(stk);
  line(100, height / 2, x, y);

  if (keyIsPressed === true) {
    x = x + 1;
    y = y + 0.5;
  } else {
    x = x - 1, y = y + 3
  };

  if (y > 600) {
    noLoop();
  }
  if (x > 600) {
    noLoop();
  }
}

100x100 Computational Design Challenge

Day 24 - Folding Fans

Sketch:

Pseudocode:

Drawings:

Code: