2D SDF Functions in JavaScriptRGB in ZdogLch in ZdogRepresentable HCL Colors
Bounding Box of a 2D Ellipse
// c: vec2, the center of the ellipse
// r: vec2, the x and y radii of the ellipse
// theta: number, the x-axis rotation of the ellipse
function getBBox(c, r, theta) {
const [u, v] = getUV(r, theta);
const [exsqr, eysqr] = vec2.add(
vec2.create(),
vec2.mul(vec2.create(), u, u),
vec2.mul(vec2.create(), v, v)
);
const e = vec2.fromValues(Math.sqrt(exsqr), Math.sqrt(eysqr));
const cMinusE = vec2.sub(vec2.create(), c, e);
const cPlusE = vec2.add(vec2.create(), c, e);
return bounds(cMinusE, cPlusE);
}
function getUV(r, theta) {
const origin = vec2.fromValues(0, 0);
const pu = vec2.fromValues(Math.cos(Math.PI / 2), Math.sin(Math.PI / 2));
const pv = vec2.fromValues(Math.cos(0), Math.sin(0));
return [
vec2.rotate(pu, vec2.mul(vec2.create(), r, pu), origin, theta),
vec2.rotate(pv, vec2.mul(vec2.create(), r, pv), origin, theta)
];
}
function bounds([ux, uy], [vx, vy]) {
const low = vec2.fromValues(Math.min(ux, vx), Math.min(uy, vy));
const high = vec2.fromValues(Math.max(ux, vx), Math.max(uy, vy));
const width = high[0] - low[0];
const height = high[1] - low[1];
return {
low,
high,
width,
height
};
}
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.
