function sdCircle(p, r) {
return vecMag(p) - r;
}
function sdRoundedBox(p, b, [topLeft, topRight, bottomRight, bottomLeft]) {
const radius =
p[0] > 0
? p[1] > 0
? bottomRight
: topRight
: p[1] > 0
? bottomLeft
: topLeft;
const [qx, qy] = vecSub(vecAbs(p), vecSub(b, [radius, radius]));
return Math.min(Math.max(qx, qy), 0) + vecMag(vecMax([qx, qy], 0)) - radius;
}
function sdBox(p, b) {
const [dx, dy] = vecSub(vecAbs(p), b);
return Math.min(Math.max(dx, dy), 0) + vecMag(vecMax([dx, dy], 0));
}
// I have no idea what these parameters correspond to!
function sdOrientedBox(p, a, b, th) {
const ba = vecSub(b, a);
const l = vecMag(ba);
const [dx, dy] = vecScale(ba, 1 / l);
let q = vecSub(p, vecScale(vecAdd(a, b), 0.5));
q = mat2DotVec2([dx, dy, -dy, dx], q);
q = vecScale(vecSub(vecAbs(q), [l, th]), 0.5);
return vecMag(vecMax(q, 0.0)) + Math.min(Math.max(q[0], q[1]), 0.0);
}
drawField(p => sdSegment(p, [-width / 8, -width / 8], [width / 8, width / 8]))
function sdSegment(p, a, b) {
const pa = vecSub(p, a);
const ba = vecSub(b, a);
const h = clamp(vecDot(pa, ba) / vecDot(ba, ba), 0.0, 1.0);
return vecMag(vecSub(pa, vecScale(ba, h)));
}
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.
