Engineer at Mapbox, creator of Leaflet, algorithms geek, open source enthusiast, musician, father of twin girls, Ukrainian. 🇺🇦
canvas = {
const height = width / 2;
const ctx = DOM.context2d(width, height);
const p = 5; const w = width - p * 2; const h = height - p * 2;
const {vertices, triangles} = icomesh(order);
// calculate naive uv values first
const uv = new Float32Array(vertices.length / 3 * 2);
for (let i = 0; i < vertices.length / 3; i++) {
uv[2 * i + 0] = Math.atan2(vertices[3 * i + 2], vertices[3 * i]) / (2 * Math.PI) + 0.5;
uv[2 * i + 1] = Math.asin(vertices[3 * i + 1]) / Math.PI + 0.5;
}
ctx.beginPath();
for (let i = 0; i < triangles.length; i += 3) {
const a = 2 * triangles[i], b = 2 * triangles[i + 1], c = 2 * triangles[i + 2];
const ay = uv[a + 1], by = uv[b + 1], cy = uv[c + 1];
let ax = uv[a], bx = uv[b], cx = uv[c];
if (fixUV) { // uv fixing code; don't ask me how I got here
if (bx - ax >= 0.5 && ay !== 1) bx -= 1;
if (cx - bx > 0.5) cx -= 1;
if (ax > 0.5 && ax - cx > 0.5 || ax === 1 && cy === 0) ax -= 1;
if (bx > 0.5 && bx - ax > 0.5) bx -= 1;
if (ay === 0 || ay === 1) ax = (bx + cx) / 2;
if (by === 0 || by === 1) bx = (ax + cx) / 2;
if (cy === 0 || cy === 1) cx = (ax + bx) / 2;
}
ctx.moveTo(p + ax * w, p + ay * h); ctx.lineTo(p + bx * w, p + by * h);
ctx.lineTo(p + cx * w, p + cy * h); ctx.closePath();
}
ctx.fillStyle = 'palegreen'; ctx.fill();
ctx.strokeStyle = 'black'; ctx.lineWidth = 0.5; ctx.lineJoin = 'bevel'; ctx.stroke();
return ctx.canvas;
}
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.
