🧪 Indie software researcher & developer
👾 React game developer
Procedural (stateless, declarative) particles on GPU using geometry instancingDemo of pseudo-continuous generation of stateless particles, interpolated trailInertial solo byproductionExplorative art portfolioEmergent procedural content generationCellular automata navigatorObservable notebook to Cloudflare workerFFT usage and result interpretation / plotting (npm:fft.js)Use rxjs operators for iterableVector Voronoi
Smooth a Svg path with cubic bezier curves
html`
<svg viewBox="0 0 200 50" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg">
<path d="${svgPathD(points, lineCommand)}" fill="none" stroke="lightgrey" />
<path d="${svgPathD(
points,
smoothCommand(smoothing)
)}" fill="none" stroke-width="0.5" stroke="blue" />
</svg>`
// Create the bezier curve command
// I: - point (array) [x,y]: current point coordinates
// - i (integer): index of 'point' in the array 'a'
// - a (array): complete array of points coordinates
// O: - (string) 'C x2,y2 x1,y1 x,y': SVG cubic bezier C command
smoothCommand = smoothing => (_, i, a) => {
const pStart = a[i - 1];
const pEnd = a[i];
const pPrev = a[i - 2] || pStart;
const pNext = a[i + 1] || pEnd;
// start control point
const [cpsX, cpsY] = Vec2.add(
pStart,
Vec2.scale(smoothing, Vec2.sub(pEnd, pPrev))
);
// end control point
const [cpeX, cpeY] = Vec2.add(
pEnd,
Vec2.scale(smoothing, Vec2.sub(pStart, pNext))
);
return `C ${cpsX},${cpsY} ${cpeX},${cpeY} ${pEnd[0]},${pEnd[1]}`;
}
// Svg path line command
// I: - point (array) [x, y]: coordinates
// O: - (string) 'L x,y': svg line command
lineCommand = point => `L ${point[0]} ${point[1]}`
Vec2 = {
const Vec2 = {};
return Object.assign(Vec2, {
add([ax, ay], [bx, by]) {
return [ax + bx, ay + by];
},
sub([ax, ay], [bx, by]) {
return [ax - bx, ay - by];
},
scale(s, [x, y]) {
return [s * x, s * y];
}
});
}
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.
