link:https://editor.p5js.org/StonesGate604/sketches/U4TjLWSZm

let A, B;
let state = 1;
let startAnimation = true;

function setup() {
  colorMode(HSB);
  createCanvas(windowWidth, windowHeight);
  background(255);
  strokeCap(SQUARE);

  A = {
    x1: width / 2,
    y1: height / 2,
    x2: width / 2 + random(-5, 5),
    y2: height / 2 - 12,
    angle: random(-0.1,0.1),
    volume: 70,
  };
  B = {
    x1: width / 2,
    y1: height / 2,
    x2: width / 2 + random(-5, 5),
    y2: height / 2 + 10,
    angle: random(-0.1, 0.1),
    volume: 70,
  };
}

function mousePressed() {
  if (dist(mouseX, mouseY, A.x2, A.y2) <= 100) {
    state = 2;
  }
  if (dist(mouseX, mouseY, B.x2, B.y2) <= 100) {
    state = 3;
  }
}

function draw() {
  if (startAnimation == true) {
    if (A.volume >= 30) {
      A = branch(A.x1, A.y1, A.x2, A.y2, random(20, 30), A.angle, A.volume);
    } else {
      startAnimation = false;
    }
    if (B.volume >= 30) {
      B = branch(B.x1, B.y1, B.x2, B.y2, random(20, 30), B.angle, B.volume);
    }
    if (A.volume % 14 == 0) {
      A.angle = random(-0.08, 0.08);
      B.angle = random(-0.08, 0.08);
    }
  } else {
    noStroke();
    fill(70);
    circle(A.x2, A.y2, 100);

    circle(B.x2, B.y2, 100);
  }
  if (state == 2) {
    background(0);
    //second reslut put your code here
  }
  if (state == 3) {
    //first result put your code here
  }
}

function branch(x1R, y1R, x2R, y2R, weightR, angleR, volumeR) {
  if (volumeR < 30)
    return {
      x1: x1R,
      y1: y1R,
      x2: x2R,
      y2: y2R,
      weight: weightR,
      angle: angleR,
    };

  const startP = createVector(x1R, y1R);
  const endP = createVector(x2R, y2R);
  const vec = p5.Vector.sub(endP, startP);

  stroke(25, 0, map(weightR, 30, 20, 50, 100));
  strokeWeight(weightR);
  line(x1R, y1R, x2R, y2R);

  const nextStart = endP.copy();
  const nextVec = vec.copy().rotate(angleR);
  const nextEnd = p5.Vector.add(nextStart, nextVec);

  return {
    x1: nextStart.x,
    y1: nextStart.y,
    x2: nextEnd.x,
    y2: nextEnd.y,
    weight: weightR,
    angle: angleR,
    volume: volumeR - 1,
  };
}

Division of work

In this assignment, I was mainly responsible for designing and writing the user selection page. My responsibility was to provide two options for users to choose from and create a relatively friendly interface.

Ideation

My initial idea is quite simple, there will be two path expanded form the central point of the screen or we can call it canvas( I use the windowWidth and windowHeight), and create two button which the user or audiences can interact with in the end points of the paths.

Reference

I actually don’t know how to achieve that effect at beginning, I found a reference from the open-processing website, which I will post the link below, but didn’t put that link in my code, because it’s a group work and there some introduction on the // now.

https://openprocessing.org/sketch/2354159

Reference analysis

there are two things that I found quite useful for my own work, one is vector and another is recursion.

Vector