JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/processing">

/**
 * Convert a Catmull-Rom multipoint curve
 * to a cubic Bezier multipoint curve.
 */

// our points
ArrayList<PVector> points;

// curve tightness
float cmr_tightness;

// cmr-tightness to bezier-control-offset factor
float cmr_to_bezier;

// preamble
void setup() {
  size(800,400);
  points = new ArrayList<PVector>();
  ellipseMode(CENTER);
  noFill();
  stroke(0);
  noLoop();
  setTightness(0);
}

// set catmull-rom tightness, and corresponding
// bezier control point offset factor. These are
// correlated with a relatively simple function.
void setTightness(float v) {
  curveTightness(v);
  cmr_tightness = v;
  cmr_to_bezier = -6/(v-1);
}

// do we have enough points to draw a catmull-rom curve?
boolean allpoints = false;

// draw the points collected so far,
// connecting them as Catmull-Rom interpolation
// curve if there's more than three, and showig
// the corresponding cubic Bezier curve overlayed.
void draw() {
  background(255);
  curveTightness(cmr_tightness);
  
  // Draw the catmull-rom curve.
  strokeWeight(2);
  stroke(0);  
  if(allpoints) { beginShape(); }
  for(PVector p: points) {
    ellipse(p.x, p.y, 5, 5);
    if(allpoints) curveVertex(p.x,p.y);
  }
  if(allpoints) { endShape(); }

  // Then draw its bezier approximation.
  if(allpoints) {
    strokeWeight(1);
    stroke(255,0,0);

    beginShape();
    vertex(points.get(1).x, points.get(1).y);
    for(int i=1, last=points.size()-2; i<last; i++) {
      PVector pT = points.get(i-1);
      PVector p1 = points.get(i);
      PVector p2 = points.get(i+1);
      PVector p3 = points.get(i+2);

      // Every catmull rom point has a tangent
      // equal to dx(p-1,p+1)/dy(p-1,p+1), with
      // the curve tightness determining the
      // strength of the control point, i.e. how
      // far from the on-curve point it lies.

      float dx1 = (p2.x - pT.x)/cmr_to_bezier;
      float dy1 = (p2.y - pT.y)/cmr_to_bezier;

      float dx2 = (p3.x -...