const pts = [];

​

​

function setup() {

  createCanvas(400, 400)

  noFill();

  p1 = createVector(random()*width, random()*height)

  p2 = createVector(random(max(0,p1.x-100),min(p1.x+100, width)),

                    random(max(0,p1.y-100),min(p1.y+100, height)))

  c1 = createVector(

    random(min(p1.x, p2.x),max(p1.x,p2.x)),

    random(min(p1.y, p2.y),max(p1.y,p2.y))

  )

  c2 = createVector(

    random(min(p1.x, p2.x),max(p1.x,p2.x)),

    random(min(p1.y, p2.y),max(p1.y,p2.y))

  )

  pts.push(p1)

  pts.push(c1)

  pts.push(c2)

  pts.push(p2)

}

​

function mouseClicked() {

  if (!(mouseX > 0  && mouseX < width && mouseY > 0 && mouseY < height)){

    return

  }

  p1 = pts[pts.length-1]

  p2 = createVector(mouseX, mouseY)

  c1 = createVector(

    random(min(p1.x, p2.x),max(p1.x,p2.x)),

    random(min(p1.y, p2.y),max(p1.y,p2.y))

  )

  c2 = createVector(

    random(min(p1.x, p2.x),max(p1.x,p2.x)),

    random(min(p1.y, p2.y),max(p1.y,p2.y))

  )

  pts.push(c1)

  pts.push(c2)

  pts.push(p2)

}

​

  t = 0;

  dt = 0.05;

​

function draw() {

  background(220);

  t+= dt;

  push()

  for (const [i,p] of pts.entries()){

    if ( i % 3 == 0){

      p.x+= map(noise(p.x,t),0,1,-2,2);

    p.y+= map(noise(p.y,t),0,1,-2,2);

      fill(100,100,100,50);

      stroke(100,100,100,50);

    }else {

       fill(100,255,100,50);

      stroke(255,255,255,10);

    }

    circle(p.x, p.y ,5)

  }

  pop()

  i = 0;

  while (i < pts.length-3){

    a = pts[i]

    b = pts[i+1]

    c = pts[i+2]

    d = pts[i+3]

    bezier(a.x, a.y, b.x, b.y, c.x, c.y, d.x, d.y)

    i+=3

  }

}