Computer Graphics & Visualization @ufrj.br
//
// Cox-de Boor recursion
//
function B(k, d, nodes) {
if (d == 0) return (u) => (nodes[k] <= u && u < nodes[k + 1] ? 1 : 0);
let Bk0 = B(k, d - 1, nodes);
let Bk1 = B(k + 1, d - 1, nodes);
return (u) =>
((u - nodes[k]) / (nodes[k + d] - nodes[k])) * Bk0(u) +
((nodes[k + d + 1] - u) / (nodes[k + d + 1] - nodes[k + 1])) * Bk1(u);
}
//
// The nodes. Modify this to get non-uniform b-splines
//
nodes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
//
// A sampling of the k'th B-spline basis function of degree d
//
points = {
let d = parms.d;
let b = B(parms.k, d, nodes);
let points = [];
for (let u = -1; u <= 10; u += 0.05) points.push({ u, b: b(u) });
return points;
}
//
// An array of 6 points on a 800x600 canvas
//
controlPoints = {
const width = 800;
const height = 600;
let pts = [];
for (let i = 0; i < 6; i++) {
let x = 100 + ((width - 200) / 5) * i;
let y = height / 2 + (Math.random() - 0.5) * (height - 200);
pts.push([x, y]);
}
return pts;
}
//
// Samples a B-Spline curve passing through points q
//
function sampleCurve(pts, step = 0.01) {
let n = pts.length;
let b = pts.map((p, k) => B(k, parms.d, nodes));
let sample = [];
for (let u = parms.d; u <= n; u += step) {
let sum = [0, 0];
pts.forEach((p, k) => {
let w = b[k](u);
for (let i = 0; i < 2; i++) sum[i] += w * p[i];
});
sample.push(sum);
}
return sample;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
