Smooth Bezier Curve From Points

'use strict';

​

const count = 5;

const walkUniformScale = 45.0;

​

let curveEntity;

​

// DOM elements.

let closedLoopToggle;

let smoothButton;

let straightButton;

let dampingSlider;

let frMonitor;

​

// Walker world axes.

let walkerWorld;

let walkerTanWorld;

let walkerNormWorld;

​

// Walker local axes.

let walkerLocal;

let walkerTanLocal;

let walkerNormLocal;

​

let walker;

let walkerSize;

let damping = 0.0025;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  ellipseMode(RADIUS);

  smooth();

  const curveScale = min(width, height);

  const curveTr = new Transform2D(

    createVector(width * 0.5, height * 0.5),

    0.0,

    createVector(curveScale, curveScale));

​

  let points = randomPoints(count);

  const curve = Curve2D.fromPoints(points, true);

  const curves = [ curve ];

  curveEntity = new CurveEntity2D('From Points',

                             curveTr,

                             curves);

​

  walkerSize = createVector(walkUniformScale, walkUniformScale);

  const walkTr = new Transform2D(

    createVector(), 0.0, walkerSize);

  const mesh = Mesh2D.arrow();

  const meshes = [ mesh ];

  walker = new MeshEntity2D('Walker',

                            walkTr,

                            meshes);

  // Initialize vectors to store world coordinates

  // of curve walker.

  walkerWorld = createVector();

  walkerTanWorld = createVector();

  walkerNormWorld = createVector();

  // Initialize vectors to store local coordinates

  // of curve walker.

  walkerLocal = createVector();

  walkerTanLocal = createVector();

  walkerNormLocal = createVector();

  // Initialize DOM elements.

  closedLoopToggle = createCheckbox('Closed Loop', true);

  closedLoopToggle.style('font-family', 'sans-serif');

  closedLoopToggle.style('color', 'black');

  closedLoopToggle.position(10, 10);

  // The changed() function in the p5.js reference,

  // http://p5js.org/reference/#/p5/changed ,

  // doesn't seem to work, so a function is assigned

  // via the underlying JavaScript.

  closedLoopToggle.elt.onchange = () => {

    curveEntity

      .getCurve(0)

      .closedLoop = closedLoopToggle.checked();

  };

  // Button to smooth curve.

  smoothButton = createButton('Smooth');

  smoothButton.position(10, 40);

  smoothButton.mousePressed(() => {

    curveEntity

      .getCurve(0)

      .smoothHandles();

  });

  // Button to straighten curve.

  straightButton = createButton('Straighten');

  straightButton.position(10, 70);

  straightButton.mousePressed(() => {

    curveEntity

      .getCurve(0)

      .straightenHandles();

  });

  // Damping slider.

  dampingSlider = createSlider(0.001, 0.01, damping, 0.001);

  dampingSlider.position(10, 100);

  // Frame rate display.

  frMonitor = createDiv('0');

  frMonitor.position(10, 130);

  frMonitor.style('font-family', 'sans-serif');

  frMonitor.style('color', 'black');

}

​

function draw() {

  const curve = curveEntity.getCurve(0);

  // Find step in [0, 1] to update curve walker.

  damping = dampingSlider.value();

  let a = frameCount * damping;

  const b = curve.closedLoop ? a - int(a) : 0.5 + 0.5 * cos(a);

​

  // Evaluate curve at time b;

  curveEntity.evaluate(0, b,

    walkerWorld, walkerTanWorld, walkerNormWorld,

    walkerLocal, walkerTanLocal, walkerNormLocal);

  // Convert data from curve evaluation to a transform.

  const transform = walker.transform;

  Transform2D.fromAxes(walkerNormWorld,

                       walkerTanWorld,

                       walkerWorld,

                       transform);

  transform.scaleBy(walkerSize);

  background('#ffffff');

  curveEntity.draw();

  curveEntity.drawKnots();

  curveEntity.drawLabels();

  walker.draw();

  frMonitor.elt.textContent = frameRate().toFixed(1);

}

​

function cubicBezierPoint(pt0, pt1, pt2, pt3,

                     t = 0.5,

                     out = createVector()) {

  if (t <= 0.0) {

    return out.set(pt0);

  } else if (t >= 1.0) {

    return out.set(pt3);

  }

​

  const u = 1.0 - t;

  let tcb = t * t;

  let ucb = u * u;

  const usq3t = ucb * 3.0 * t;

  const tsq3u = tcb * 3.0 * u;

  ucb *= u;

  tcb *= t;

  out.x = pt0.x * ucb + pt1.x * usq3t + pt2.x * tsq3u + pt3.x * tcb;

  out.y = pt0.y * ucb + pt1.y * usq3t + pt2.y * tsq3u + pt3.y * tcb;

  out.z = pt0.z * ucb + pt1.z * usq3t + pt2.z * tsq3u + pt3.z * tcb;

  return out;

}

​

function cubicBezierTangent(pt0, pt1, pt2, pt3,

                       t = 0.5,

                       out = createVector()) {

  if (t <= 0.0) {

    return p5.Vector.sub(pt1, pt0, out);

  } else if (t >= 1.0) {

    return p5.Vector.sub(pt3, pt2, out);

  }

​

  const u = 1.0 - t;

  const usq3 = u * u * 3.0;

  const tsq3 = t * t * 3.0;

  const ut6 = u * t * 6.0;

​

  return out.set(

    (pt1.x - pt0.x) * usq3 +

    (pt2.x - pt1.x) * ut6 +

    (pt3.x - pt2.x) * tsq3,

​

    (pt1.y - pt0.y) * usq3 +

    (pt2.y - pt1.y) * ut6 +

    (pt3.y - pt2.y) * tsq3,

​

    (pt1.z - pt0.z) * usq3 +

    (pt2.z - pt1.z) * ut6 +

    (pt3.z - pt2.z) * tsq3);

}

​

function floorMod(a, b) {

  if(b === 0.0) {

    return a;

  }

  return a - b * floor(a / b);

}

​

function perpendicular(vec, out = createVector()) {

  out.set(-vec.y, vec.x, 0.0);

}

​

function randomPoints(count = 3,

                      left = -0.5, right = 0.5,

                      bottom = -0.5, top = 0.5) {

  const points = [];

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

    const x = random(left, right);

    const y = random(bottom, top);

    const point = createVector(x, y);

    points.push(point);

  }

  return points;

}