How to create splines, bezier curves etc.?

[nextlevelshit]

I was wondering how you made these curves so smooth: https://stardustjs.github.io/examples/parametric-functions/

And later I've found out you are just generating a bunch of (to be exact 100000) circles with a radius of 1. And the smooth shapes of the curves coming most probably from the parametric functions inside Stardust.scale.custom().

I used to work with D3js and there you're already getting all this wonderfull helpers to adjust any line to a bezier curve: https://github.com/d3/d3-shape/blob/master/src/curve/basis.js#L12

Now I'd try to build this up for my guilloche application. I am having some randomly spread points on and off the canvas, connecting them and adding this bezier curve flavour to them. I think I will figure it out, but is it really the best approach to increase the density of the points on the graph till it looks like a line?

The main objection, that I've got is, what are doing if the length of a line is not predictable? Would you add a "risk" factor to never run out of points and avoid getting gaps?

[nextlevelshit]

I am going to test one of these packages:

https://www.npmjs.com/package/bezier-spline
https://www.npmjs.com/package/bezier-js
https://www.npmjs.com/package/@thi.ng/geom-splines

EDIT:
These above did not work out for me, so I've sticked to this module:

https://www.npmjs.com/package/nurbs

import * as Nurbs from 'nurbs';
import * as d3 from 'd3';

const points = [
  { x: 120, y: 35 },
  { /* and many more of these */ }
];

const curve = Nurbs({
  points: points.map(p => [p.x, p.y]),
  boundary: 'clamped',
  degree
});

const domain = curve.domain[0];
const steps = 600;

const interpolate = d3.interpolateNumber(domain[0], domain[1]);

return d3.range(steps + 1).map((v, i, a) => {
  const position = i / steps;
  const point =  curve.evaluate([], interpolate(position));

  return {
    x: point[0],
    y: point[1]
  };
});

[donghaoren]

Yes, it's just a large number of points. You can use the polyline mark though, but it is not very efficient. Line rendering is a difficult problem for the GPU in general... Stardust doesn't handle smooth curves yet. One way is to write a bezier curve mark (basically it's going to yield a number of small line segments). This way we don't have to do the interpolation in JS.

In terms of your interpolation, are you looking for a smooth curve that passes all your points? Catmull-rom splines might be a way to go: https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Catmull%E2%80%93Rom_spline
Regarding the Nurbs, as far as I know they are more general purpose curves, that might be slower to compute than cubic splines.