Bezier Experiments

var gB, gBRes, cRes;

var requiredFrames = 360;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  imageMode(CENTER);

  gB = createGraphics(gBRes = 2048, gBRes);

  gB.colorMode(HSB, 360);

  background(100);

}

​

function draw() {

  gB.background(360);

  gB.stroke(0, 330);

  gB.strokeCap(SQUARE);

​

  var animationProgress = (frameCount / requiredFrames) % 1;

  gB.push();

  gB.translate(gBRes * 0.5, gBRes * 0.5);

​

  // Display progress

  gB.fill(180);

  gB.noStroke();

  gB.rect(gBRes * -0.5, gBRes * -0.5, gBRes * animationProgress, 32);

​

  var x1 = -400, y1 = -400;

  var x2 = 100, y2 = -100;

  var x3 = 0, y3 = 100;

  var x4 = 400, y4 = 400;

  gB.stroke(0);

  gB.noFill();

  gB.ellipse(x1, y1, 32);

  gB.ellipse(x2, y2, 32);

  gB.ellipse(x3, y3, 32);

  gB.ellipse(x4, y4, 32);

  gB.bezier(x1, y1, x2, y2, x3, y3, x4, y4);

  let t = animationProgress;

  let x = bezierPoint(x1, x2, x3, x4, t);

  let y = bezierPoint(y1, y2, y3, y4, t);

  gB.stroke(0);

  gB.ellipse(x, y, 80);

​

​

  gB.pop();

​

  displayBuffer(gB);

}

​

function displayBuffer(buffer) {

  image(buffer, windowWidth / 2, windowHeight / 2, min(windowWidth, windowHeight), min(windowWidth, windowHeight));

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}