​

let depth = 17;

let th = -0.2;

let path = [];

let w = 300;

let points = [];

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  generateRandomPoints();

}

​

function draw() {

  textFont('Georgia');

  text("Click on the picture!", -width/2, height/2)

  // Reset

  if (th > 1.2) {

    th = -0.2;

    generateRandomPoints();

    path = [];

  }

​

  background(0);

  rotateY(PI / 6 + frameCount / 200);

  //rotateZ(frameCount / 300);

​

  border();

​

  // Calculate the point &

  // Draw the lines which construct the curve

  let dot = myBezier(depth, points, th);

  path.push(dot);

​

  // Draw the Point

  push();

  stroke(255, 0, 0);

  translate(...dot);

​

  sphere(6);

  pop();

​

  // Draw the path

  noFill();

  stroke(255, 0, 0);

  strokeWeight(3);

​

  beginShape();

  for (let p of path) {

    vertex(...p);

  }

  endShape();

​

  th = th + 0.008;

}

​

function mouseClicked() {

  update();

}

​

function generateRandomPoints() {

  let num = depth + 1;

  let z = -depth / 2;

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

    points[i] = [(z + i) / depth * w*2, random(-w, w), random(-w, w)];

  }

}

​

function border() {

  noFill();

  stroke(0, 255, 0);

  strokeWeight(1);

​

  box(2 * w);

}

​

function update() {

  generateRandomPoints();

  th = 0;

  path = [];

}

​