​

default_point_coords = {

  2: [[100, 500], [500, 100]],

  3: [[100, 500], [300, 100], [500, 500]],

  4: [[100, 500], [200, 200], [400, 400], [500, 100]],

  5: [[178, 276], [364, 458], [339, 178], [477, 286], [471, 383]],

  6: [[310, 149], [326, 249], [487, 143], [438, 490], [228, 493], [178, 401]],

  7: [[308, 376], [249, 484], [349, 482], [474, 417], [300, 140], [162, 458], [256, 102]],

  8: [[500, 300], [441, 441], [300, 500], [158, 441], [100, 300], [158, 158], [299, 100], [441, 158]],

  9: [[500, 300], [453, 428], [334, 496], [200, 473], [112, 368], [112, 231], [199, 126], [334, 103], [453, 171]],

  10: [[500, 300], [461, 417], [361, 490], [238, 490], [138, 417], [100, 300], [138, 182], [238, 109], [361, 109], [461, 182]]

}

​

delta = 0.002

​

function setup() {

  createCanvas(600, 600);

  sel = createSelect('No of points');

  random_check = createCheckbox('random points', false);

  restart_button = createButton("Restart")

  setupControls();

  n = sel.value();

  t = 0;

  is_random = false

  curve_points = []

  init_frame = 0

  running = true

  random_points = createRandomPoints(n)

}

​

function setupControls() {

  sel.position(width + 50, 50);

  for (let i=2; i<=10; i++) {

    sel.option(i)

  }

  sel.selected(4)

  sel.changed(restart_loop);

  random_check.position(width + 50, 100)

  random_check.changed(restart_loop);

  restart_button.position(width + 50, 150)

  restart_button.mousePressed(restart_loop)

  para = createP("Number of points")

  para.position(width + 50, 0)

}

​

function restart_loop() {

  n = sel.value();

  t = 0;

  curve_points = []

  init_frame = 0

  running = true

  is_random = random_check.checked()

  random_points = createRandomPoints(n)

  restart_button.html(is_random ? "New points" : "Restart")

}

​

function createRandomPoints(n) {

  l_points = []

  for (let i=0; i<n; i++) {

    l_points.push(

      createVector(random(100, width-100), random(100, height-100))

    )

  }

  return l_points

}

​

function draw() {

  background(0);

  if (is_random) lerpPoints = random_points

  else lerpPoints = default_point_coords[n].map(x => createVector(x[0], x[1]))

  stroke(colors[0])

  drawLinesAndPoints(lerpPoints, 12, 1)

  stroke(colors[n-1])

  strokeWeight(4)

  beginShape()

  for (let bazier_point of curve_points) {

    vertex(bazier_point.x, bazier_point.y)

  }

  endShape()

  if (!running) {

    if (frameCount - init_frame < 200)

      return

    else {

      running = true

      t = 0

      curve_points = []

    }

  }

  else {

    for (let i=1; i < n; i++) {

      lerpPoints = createLerpLines(lerpPoints, t, colors[i])

    }

​

    curve_points.push(lerpPoints[0])

    t += delta

    if (t>=1) {

      running = false

      init_frame = frameCount

    }

  }

}

​

function createLerpLines(l_points, t, color="#000000") {

  next_points = []

  for (let i=0; i < l_points.length-1; i++) {

    lerpPoint = p5.Vector.lerp(l_points[i], l_points[i+1], t)

    next_points.push(lerpPoint)

  }

  stroke(color)

  drawLinesAndPoints(next_points)

  return next_points;

}

​

function drawLinesAndPoints(l_points, point_stroke=10, line_stroke=2) {

  strokeWeight(line_stroke)

  beginShape()

  noFill()

  for (let c_point of l_points) {

    vertex(c_point.x, c_point.y)

  }

  endShape()

  strokeWeight(point_stroke)

  for (let c_point of l_points) {

    point(c_point)

  }

}

​