let canvas;

let makeGif = false;

let isGifExported = false;

let radius = 6;

let Point = function(x, y) {

  this.x = x;

  this.y = y;

}

​

let p1, p2, p3, p4;

​

function setupGif() {

    recordedFrames = 0;

​

    gif = new GIF({

        workers: 2,

        quality: 10,

        workerScript: 'gif.worker.js'

    });

​

    const aNumber = parseInt(Math.random()*1000000);

    gif.on('finished', function(blob) {

        print('GIT: finished')

        rendering = false;

        window.open(URL.createObjectURL(blob));

        saveAs(blob, `bezier-${aNumber}@2x.gif`);

        setupGif();

        recordedFrames = 0;

    });

}

​

let padding = 0.20; // %

​

function setup() {  

  canvas = createCanvas(400, 400);

  strokeWeight(10);

  setAttributes('antialias', true);

  mouseX = width*(1 - padding)

  mouseY = height*(padding)

​

  // Override initial control point

  p1 = new Point(width*(padding),height*(padding))

  p2 = p1;

  p3 = new Point(0,0)

  p4 = new Point(width*(1 - padding),height*(1 - padding))

​

  setupGif();  

}

​

function draw() {

  background(255);

  // if(frameCount == 1){

    p3.x = mouseX  

    p3.y = mouseY

  // }

​

  // Display convex hull

  strokeWeight(0.5);

  stroke(13, 70, 168, 19)

  line(p1.x, p1.y, p3.x, p3.y)

  line(p3.x, p3.y, p4.x, p4.y)

  // Animate sampling line

  let t_sample = Math.cos(0.025*(frameCount-1)-PI)*0.5 + 0.5;

  let t_sample_half = Math.cos(0.0125*(frameCount-1)-PI)*0.5 + 0.5;  

  let v1 = createVector(p1.x, p1.y)

  let v3 = createVector(p3.x, p3.y)

  let v4 = createVector(p4.x, p4.y)  

    // Point at parameter t at edges

    let t1 = v1.copy().lerp(v3.x, v3.y, 0, t_sample)

    let t2 = v3.copy().lerp(v4.x, v4.y, 0, t_sample)

    // Point at parameter t in joining line

    let t3 = p5.Vector.lerp(t1, t2, t_sample)  

    // Display parameter lines

    stroke(13, 70, 168, 100);

    line(t1.x, t1.y, t2.x, t2.y)    

      noStroke()

    fill(13, 70, 168, 255);

    circle(t3.x, t3.y,radius*0.6);

  // Draw quadratic Bézier curve

  // by sampling points

  let steps = 150

  beginShape();

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

    let t = i/steps;

    // print(t)

    let v1 = createVector(p1.x, p1.y)

    let v3 = createVector(p3.x, p3.y)

    let v4 = createVector(p4.x, p4.y)

    // Point at parameter t at edges

    let t1 = v1.copy().lerp(v3.x, v3.y, 0, t)

    let t2 = v3.copy().lerp(v4.x, v4.y, 0, t)

    // Point at parameter t in joining line

    let t3 = p5.Vector.lerp(t1, t2, t)

    // Display parameter lines

    stroke(13, 70, 168, 25)

    // line(t1.x, t1.y, t2.x, t2.y)

    if (t <= t_sample) {

      vertex(t3.x, t3.y);

      // noStroke();

      // fill(13, 70, 168, 25);

      // circle(t1.x, t1.y,radius*0.25);

      // circle(t2.x, t2.y,radius*0.25);

    }

​

    // noStroke()

    // fill(235, 64, 52, 50);

    // circle(t3.x, t3.y,radius*0.4);

  }

  stroke(13, 70, 168, 255);

  strokeWeight(1.2);

  noFill();

  endShape()

  // Display quadratic Bézier curve

  // strokeWeight(1.5);

  // stroke(0);

  // noFill();

  // beginShape();

  // vertex(p1.x, p1.y);

  // bezierVertex(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);

  // endShape();

  // Display control points

  strokeWeight(1.2);

  stroke(10);

  fill(255);

  circle(p1.x, p1.y,radius);

  circle(p2.x, p2.y,radius);

  circle(p3.x, p3.y,radius);

  circle(p4.x, p4.y,radius);

  // Add frame

  if (makeGif && !isGifExported &&

      ((frameCount - 1) % 5 == 0 || frameCount == 1)) {

    console.log(`Add frame ${frameCount} - ${t_sample} - ${t_sample_half}`)

    gif.addFrame(canvas.elt, { delay: 30, copy: true });

  }

  // Render if finished

  if (makeGif && t_sample_half >= 0.9999 && !isGifExported) {

    gif.render();

    print('Exporting GIF...');

    isGifExported = true;

  }

}