Engineer at Mapbox, creator of Leaflet, algorithms geek, open source enthusiast, musician, father of twin girls, Ukrainian. 🇺🇦
When Does the Barbell Tip Over?One-Rep Max Formulas ShowdownKinematics of Reverse Angle Parking3D planets with Three.jsUV-mapping an icosphereFast Icosphere MeshCollatz conjecture (3x + 1)Hilbert Curve PackingDrawing logarithmic spiralsApproximating Geometric SlerpPixelmatch DemoMARTINI: Real-Time RTIN Terrain MeshRobust Arithmetic in Computational Geometry
Chroma Key Compositing
chromaBlend = (fgC, bgC, keyC, mask) => Math.max(fgC - mask * keyC, 0) + mask * bgC
chromaKeyMask = (r, g, b, keyCb, keyCr, tolA, tolB) => {
const cb = rgb2cb(r, g, b);
const cr = rgb2cr(r, g, b);
const d = Math.hypot(keyCb - cb, keyCr - cr);
return 1 - (d < tolA ? 0 : d > tolB ? 1 : (d - tolA) / (tolB - tolA));
}
rgb2cb = (r, g, b) => Math.round(128 - 0.168736 * r - 0.331264 * g + 0.5 * b)
rgb2cr = (r, g, b) => Math.round(128 + 0.5 * r - 0.418688 * g - 0.081312 * b)
keyColor = {
const k = 4 * (30 * foregroundImg.naturalWidth + 30); // fetch foreground pixel at [30, 30]
return fg.slice(k, k + 3);
}
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.
