45:["$","title",null,{"children":"Non-planimetric hachures | Visionscarto | Observable"}] 4d:T502,// The three "Blender" renders (cf. the article's Figures 4, 6 and 20) const renderPreviews = (() => { const {width, height, depth, shade, ux, uy} = terrainView; const finite = depth.filter((d) => d < Infinity); const [d0, d1] = d3.extent(finite); const toCanvas = (rgb) => { const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; canvas.style.width = "100%"; const ctx = canvas.getContext("2d"), img = ctx.createImageData(width, height); for (let k = 0; k < width * height; ++k) { const [r, g, b] = depth[k] === Infinity ? [255, 255, 255] : rgb(k); img.data.set([r, g, b, 255], 4 * k); } ctx.putImageData(img, 0, 0); return canvas; }; const panel = (title, canvas) => html`

${title}

${canvas}`; return html`

${[ panel("Shading", toCanvas((k) => Array(3).fill(255 * shade[k]))), panel("Uphill (R = x, G = y, camera space)", toCanvas((k) => [127.5 * (ux[k] + 1), 127.5 * (uy[k] + 1), 128])), panel("Depth", toCanvas((k) => Array(3).fill(255 * (depth[k] - d0) / (d1 - d0)))) ]}

`; })(); display(renderPreviews);4e:T587,**Pipeline** 1. **3D render (replaces Blender):** `renderTerrainView` draws the DEM mesh from a perspective camera, using a z-buffer (depth test) to keep the nearest surface. It outputs: - **Shading:** Lambert lighting. - **Uphill:** the uphill direction along the surface, N × (N × ẑ), moved into camera space. - **Depth:** distance from the camera. 2. **Break lines (article, Figure 21):** `extractBreaks` finds sudden depth jumps in a 3×3 window and applies a threshold. It then thins them to 1-px lines (Zhang–Suen, like `r.thin`) and converts them to vector lines (like `r.to.vect`). Hachures are cleared in a band around each break. 3. **Hachures (the QGIS script):** `generateHachures` is a function-by-function port and runs in image space. - Phase 0 sweeps horizontal check lines and draws mostly-vertical hachures. - Phase 1 sweeps vertical check lines, fills in mostly-horizontal ones, and keeps Phase 0 lines and breaks fixed. **Differences from the original:** - The light setup is a single directional light with ambient fill, not a full Blender scene. - Smoothing is an arc-length Gaussian (σ = 5, then 1) instead of SAGA `linesmoothing`. - An optional "stop below slope" filter is added, similar in spirit to the article's hachure filtering. Elevation data: [AWS Terrain Tiles](https://registry.opendata.aws/terrain-tiles/) (Terrarium), Mount St. Helens, zoom 12 (~26 m/px).4f:T20d2,// ── Stand-in for the Blender step ────────────────────────────────────────────── // Software-rasterizes the DEM mesh from a perspective camera (z-buffered) and outputs, per image pixel: // shade – Lambert lighting, 0 (dark → dense hachures) … 1 (the "Shading" render) // ux, uy – uphill vector N × (N × ẑ) transformed to camera space: x → right, y → up (the "Uphill" render) // depth – camera-space z (distance from the viewing plane), Infinity for background (the "Depth" render) // slope – terrain slope in degrees (for optional filtering) function renderTerrainView({ z, cols, rows, cellSize, exaggeration = 1, width = 960, height = 640, azimuth = 0, // compass direction from the target to the camera (0 = camera north of terrain, looking south) viewAngle = 30, // viewpoint angle above the horizon (90 = straight down) distanceFactor = 1.6, fov = 30, lightAzimuth = -45, // light direction relative to the view: 0 = far side, −90 = from the left, 180 = from behind the camera lightAltitude = 40, ambient = 0.1 }) { const rad = Math.PI / 180; const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2]; const cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]]; const norm = (a) => { const l = Math.hypot(...a); return [a[0] / l, a[1] / l, a[2] / l]; }; const Z = (r, c) => z[Math.max(0, Math.min(rows - 1, r)) * cols + Math.max(0, Math.min(cols - 1, c))] * exaggeration; // Camera const size = Math.max(cols, rows) * cellSize; const target = [0, 0, d3.mean(z) * exaggeration]; const el = Math.min(89.5, viewAngle) * rad, az = azimuth * rad, dist = distanceFactor * size; const eye = [target[0] + dist * Math.cos(el) * Math.sin(az), target[1] + dist * Math.cos(el) * Math.cos(az), target[2] + dist * Math.sin(el)]; const f = norm([target[0] - eye[0], target[1] - eye[1], target[2] - eye[2]]); const r = norm(cross(f, [0, 0, 1])); const u = cross(r, f); const focal = (height / 2) / Math.tan(fov * rad / 2); // Light, defined relative to the view heading const heading = Math.atan2(f[0], f[1]) + lightAzimuth * rad, la = lightAltitude * rad; const L = [Math.cos(la) * Math.sin(heading), Math.cos(la) * Math.cos(heading), Math.sin(la)]; // Per-vertex attributes const n = cols * rows; const vx = new Float32Array(n), vy = new Float32Array(n), vd = new Float32Array(n); const vShade = new Float32Array(n), vUx = new Float32Array(n), vUy = new Float32Array(n), vSlope = new Float32Array(n); for (let row = 0; row < rows; ++row) for (let col = 0; col < cols; ++col) { const k = row * cols + col; const p = [(col - (cols - 1) / 2) * cellSize - eye[0], ((rows - 1) / 2 - row) * cellSize - eye[1], Z(row, col) - eye[2]]; const cz = dot(p, f); vd[k] = cz; vx[k] = cz > 1 ? width / 2 + focal * dot(p, r) / cz : NaN; vy[k] = cz > 1 ? height / 2 - focal * dot(p, u) / cz : NaN; const gx = (Z(row, col + 1) - Z(row, col - 1)) / (2 * cellSize); // dz/d(east) const gy = (Z(row - 1, col) - Z(row + 1, col)) / (2 * cellSize); // dz/d(north) const N = norm([-gx, -gy, 1]); vShade[k] = ambient + (1 - ambient) * Math.max(0, dot(N, L)); vSlope[k] = Math.atan(Math.hypot(gx, gy)) / rad; // Uphill = N × (N × ẑ) direction, i.e. (gx, gy, gx² + gy²) along the surface const g2 = gx * gx + gy * gy; if (g2 > 0) { const U = norm([gx, gy, g2]); vUx[k] = dot(U, r); vUy[k] = dot(U, u); } } // Rasterize two triangles per DEM cell, with a z-buffer const depth = new Float32Array(width * height).fill(Infinity); const shade = new Float32Array(width * height).fill(1); const ux = new Float32Array(width * height), uy = new Float32Array(width * height), slope = new Float32Array(width * height); const attrs = [[vShade, shade], [vUx, ux], [vUy, uy], [vSlope, slope]]; function tri(a, b, c) { const ax = vx[a], ay = vy[a], bx = vx[b], by = vy[b], cx = vx[c], cy = vy[c]; if (!(ax === ax && bx === bx && cx === cx)) return; const area = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax); if (Math.abs(area) < 1e-9) return; const x0 = Math.max(0, Math.floor(Math.min(ax, bx, cx))), x1 = Math.min(width - 1, Math.ceil(Math.max(ax, bx, cx))); const y0 = Math.max(0, Math.floor(Math.min(ay, by, cy))), y1 = Math.min(height - 1, Math.ceil(Math.max(ay, by, cy))); for (let py = y0; py <= y1; ++py) for (let px = x0; px <= x1; ++px) { const x = px + 0.5, y = py + 0.5; const w0 = ((bx - x) * (cy - y) - (by - y) * (cx - x)) / area; const w1 = ((cx - x) * (ay - y) - (cy - y) * (ax - x)) / area; const w2 = 1 - w0 - w1; if (w0 < 0 || w1 < 0 || w2 < 0) continue; const d = w0 * vd[a] + w1 * vd[b] + w2 * vd[c], k = py * width + px; if (d >= depth[k]) continue; depth[k] = d; for (const [src, dst] of attrs) dst[k] = w0 * src[a] + w1 * src[b] + w2 * src[c]; } } for (let row = 0; row < rows - 1; ++row) for (let col = 0; col < cols - 1; ++col) { const a = row * cols + col, b = a + 1, c = a + cols, d = c + 1; tri(a, b, c); tri(b, d, c); } return {width, height, depth, shade, ux, uy, slope}; } // ── Break lines from the depth map (article, Figure 21) ─────────────────────── // 1. 3×3 neighborhood: mark near-side pixels where depth jumps by more than `threshold` (relative) // 2. thin to 1-px lines (Zhang–Suen, like r.thin) 3. vectorize by chain-following (like r.to.vect) function extractBreaks({depth, width, height}, {threshold = 0.03, minLength = 15, skyline = true} = {}) { const edge = new Uint8Array(width * height); for (let y = 0; y < height; ++y) for (let x = 0; x < width; ++x) { const k = y * width + x, d = depth[k]; if (d === Infinity) continue; for (let dy = -1; dy <= 1 && !edge[k]; ++dy) for (let dx = -1; dx <= 1; ++dx) { const xx = x + dx, yy = y + dy; if (xx < 0 || yy < 0 || xx >= width || yy >= height) continue; const dn = depth[yy * width + xx]; if (dn === Infinity ? skyline : dn > d * (1 + threshold)) { edge[k] = 1; break; } } } // Zhang–Suen thinning const P = (x, y) => (x < 0 || y < 0 || x >= width || y >= height) ? 0 : edge[y * width + x]; for (let changed = true; changed;) { changed = false; for (const step of [0, 1]) { const del = []; for (let y = 0; y < height; ++y) for (let x = 0; x < width; ++x) { if (!edge[y * width + x]) continue; const p = [P(x, y - 1), P(x + 1, y - 1), P(x + 1, y), P(x + 1, y + 1), P(x, y + 1), P(x - 1, y + 1), P(x - 1, y), P(x - 1, y - 1)]; const B = d3.sum(p); if (B < 2 || B > 6) continue; let A = 0; for (let i = 0; i < 8; ++i) if (!p[i] && p[(i + 1) % 8]) ++A; if (A !== 1) continue; const [p2, , p4, , p6, , p8] = p; if (step === 0 ? (p2 && p4 && p6) || (p4 && p6 && p8) : (p2 && p4 && p8) || (p2 && p6 && p8)) continue; del.push(y * width + x); } for (const k of del) edge[k] = 0; if (del.length) changed = true; } } // Chain-following vectorization (orthogonal neighbors first) const offsets = [[1, 0], [-1, 0], [0, 1], [0, -1], [1, 1], [-1, 1], [1, -1], [-1, -1]]; const visited = new Uint8Array(width * height); const neighbors = (k) => { const x = k % width, y = (k - x) / width, out = []; for (const [dx, dy] of offsets) { const xx = x + dx, yy = y + dy; if (xx >= 0 && yy >= 0 && xx < width && yy < height && edge[yy * width + xx]) out.push(yy * width + xx); } return out; }; const follow = (start) => { const chain = [start]; visited[start] = 1; for (let cur = start; ;) { const next = neighbors(cur).find((q) => !visited[q]); if (next === undefined) break; visited[next] = 1; chain.push(next); cur = next; } return chain; }; const chains = []; for (let k = 0; k < edge.length; ++k) if (edge[k] && !visited[k] && neighbors(k).length === 1) chains.push(follow(k)); for (let k = 0; k < edge.length; ++k) if (edge[k] && !visited[k]) chains.push(follow(k)); return chains .filter((c) => c.length >= minLength) .map((c) => smoothHachure(c.map((k) => [k % width + 0.5, Math.floor(k / width) + 0.5]), 1.5)); }50:T26c6,// JavaScript port of Daniel Huffman's "Non Planimetric Hachures Generator.py" // https://github.com/pinakographos/non-planimetric-hachures // Coordinates are in pixel units (x right, y down); hachures are arrays of [x, y]. function generateHachures({ width, height, upslopeX, upslopeY, // uphill x/y components per pixel (−1…1), row-major shading, // 0 (dark → dense) … 1 (light → sparse), row-major minSpacing = 3, // min_hachure_spacing maxSpacing = 9, // max_hachure_spacing stubFilter = maxSpacing, // drop hachures shorter than this breaks = null, // optional break lines (arrays of [x, y]) to work around stop = null, // optional mask: truthy pixels halt hachures (not in original) jumpScale = 3, // jump_distance = average_pixel_size * 3 random = Math.random }) { // STEP 2: basic input errors if (maxSpacing - minSpacing < 0) throw new Error("min_hachure_spacing must not be more than max_hachure_spacing."); if (minSpacing <= 0) throw new Error("min_hachure_spacing must be greater than 0"); if (maxSpacing <= 0) throw new Error("max_hachure_spacing must be greater than 0"); // STEP 1/3: useful variables const spacingRange = maxSpacing - minSpacing; const averagePixelSize = 1; const jumpDistance = averagePixelSize * jumpScale; let phase = 0; // 0: mostly-vertical hachures (horizontal check lines); 1: mostly-horizontal const makeHachure = (points) => { let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity; for (const [x, y] of points) { if (x < x0) x0 = x; if (x > x1) x1 = x; if (y < y0) y0 = y; if (y > y1) y1 = y; } return {points, x0, x1, y0, y1}; }; const lineLength = (pts) => { let s = 0; for (let i = 1; i < pts.length; ++i) s += Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]); return s; }; const breakHachures = breaks ? breaks.map(makeHachure) : []; let startHachures = new Set(breakHachures); let currentHachures = [...breakHachures]; // xy_to_rc + sample_raster const index = (x, y) => { const col = Math.floor(x), row = Math.floor(y); return (row >= height || col >= width || row < 0 || col < 0) ? -1 : row * width + col; }; const sampleShading = (x, y) => { const k = index(x, y); return k < 0 ? 0 : shading[k]; }; // jump_calculator: next step along the hachure, or null (== -1) on failure function jumpCalculator(x, y) { const k = index(x, y); if (k < 0 || (stop && stop[k])) return null; let dx = upslopeX[k], dy = upslopeY[k]; const h = Math.hypot(dx, dy); if (!(h > 0)) return null; dx *= jumpDistance / h; dy *= jumpDistance / h; if ((dx < 0 && phase === 1) || (dy < 0 && phase === 0)) dx = -dx, dy = -dy; return [dx, dy]; } // A check line is axis-aligned: phase 0 → y = fixed, t runs along x; phase 1 → x = fixed, t along y const pointAt = (fixed, t) => phase === 0 ? [t, fixed] : [fixed, t]; // Segment: piece [a, b] of a check line function makeSegment(fixed, a, b, hachures = []) { const length = b - a; const n = Math.max(1, Math.ceil(length / averagePixelSize)); // densifyByDistance let sx = 0, sy = 0, nj = 0, shade = 0; for (let i = 0; i <= n; ++i) { const [x, y] = pointAt(fixed, a + length * i / n); const jump = jumpCalculator(x, y); if (jump) sx += jump[0] / jumpDistance, sy += jump[1] / jumpDistance, ++nj; shade += sampleShading(x, y); } const avgX = nj ? Math.abs(sx / nj) : 0, avgY = nj ? Math.abs(sy / nj) : 0; const spacing = minSpacing + spacingRange * (shade / (n + 1)); // ideal_spacing const component = phase === 0 ? avgY : avgX; const factorMin = 0.7; const s = (1 - factorMin) * component + factorMin; const status = length * s < spacing * 0.9 ? 1 : length * s > spacing * 2.2 ? 2 : null; return {fixed, a, b, length, spacing, status, hachures}; } // Check_Line.split_by_hachures + cutpoint_splitter function splitByHachures(fixed, length) { const cuts = []; for (const h of currentHachures) { if (phase === 0 ? (fixed < h.y0 || fixed > h.y1) : (fixed < h.x0 || fixed > h.x1)) continue; const pts = h.points, found = []; for (let i = 1; i < pts.length; ++i) { const [px, py] = pts[i - 1], [qx, qy] = pts[i]; const [pu, pv, qu, qv] = phase === 0 ? [px, py, qx, qy] : [py, px, qy, qx]; if (pv === qv || (pv - fixed) * (qv - fixed) > 0) continue; const t = pu + (fixed - pv) / (qv - pv) * (qu - pu); if (t < 0 || t > length || found.some((f) => Math.abs(f - t) < 1e-9)) continue; found.push(t); } for (const t of found) cuts.push({t, hachure: h}); } if (!cuts.length) return [makeSegment(fixed, 0, length)]; cuts.sort((p, q) => p.t - q.t); const segments = [makeSegment(fixed, 0, cuts[0].t)]; for (let i = 0; i < cuts.length; ++i) { const last = i === cuts.length - 1; const end = last ? length : cuts[i + 1].t; segments.push(makeSegment(fixed, cuts[i].t, end, last ? [] : [cuts[i].hachure, cuts[i + 1].hachure])); } return segments; } // dash_maker: split segments into evenly spaced dashes; return dash midpoints function dashMaker(segments) { const mids = []; for (const seg of segments) { const totalUnits = Math.round(seg.length / (seg.spacing * 2)); if (totalUnits === 0) continue; const dashGap = seg.length / totalUnits, dash = dashGap / 2, gap = dash / 2; let start = gap, end = dash + gap; while (true) { mids.push(pointAt(seg.fixed, seg.a + (start + end) / 2)); start += dashGap; end += dashGap; if (end > seg.length) break; } } return mids; } // hachure_generator: trace a hachure uphill from each start point function hachureGenerator(startPoints) { const out = []; for (const start of startPoints) { const coords = [start]; for (let i = 0; i < 150; ++i) { const [x, y] = coords[coords.length - 1]; const jump = jumpCalculator(x, y); if (!jump) break; const [dx, dy] = jump; if (phase === 0 && Math.abs(dy) < Math.abs(dx)) break; if (phase === 1 && Math.abs(dy) >= Math.abs(dx)) break; if (coords.length > 3) { const [ax, ay] = coords[coords.length - 1], [bx, by] = coords[coords.length - 3]; if (Math.hypot(ax - bx, ay - by) < jumpDistance * 1.5) { coords.splice(-2); break; } } coords.push([x + dx, y + dy]); } if (coords.length > 1) out.push(makeHachure(coords)); } return out; } // haircut: trim hachures so they stop at this check line function haircut(fixed, list) { const out = []; for (const h of list) { const pts = []; for (const p of h.points) { if ((phase === 0 ? p[1] : p[0]) <= fixed) pts.push(p); else break; } if (pts.length > 1) out.push(makeHachure(pts)); } return out; } // subsequent_line function subsequentLine(fixed, length) { const split = splitByHachures(fixed, length); const tooShort = split.filter((s) => s.status === 1); const tooLong = split.filter((s) => s.status === 2); const toClip = new Set(); for (const seg of tooShort) { if (seg.hachures.length !== 2) continue; const thinned = startHachures.size ? seg.hachures.filter((h) => !startHachures.has(h)) : seg.hachures; if (thinned.length === 1) toClip.add(thinned[0]); else if (thinned.length === 2) toClip.add(seg.hachures[random() < 0.5 ? 0 : 1]); } if (toClip.size) { currentHachures = currentHachures.filter((h) => !toClip.has(h)); currentHachures.push(...haircut(fixed, toClip)); } if (tooLong.length) { const dashes = dashMaker(tooLong); if (dashes.length) currentHachures.push(...hachureGenerator(dashes)); } } // first_line function firstLine(fixed, length) { const spacing = maxSpacing * 3; const cuts = []; for (let i = spacing; i < length; i += spacing) cuts.push(i); cuts.push(length); const segments = []; let start = 0; for (const c of cuts) segments.push(makeSegment(fixed, start, c)), start = c; const dashes = dashMaker(segments); if (dashes.length) currentHachures = hachureGenerator(dashes); } const notStub = (h) => lineLength(h.points) > stubFilter; // MAIN LOOP — Phase 0: horizontal check lines, one per pixel row for (let y = 0; y < height; ++y) currentHachures.length ? subsequentLine(y, width) : firstLine(y, width); currentHachures = [...new Set(currentHachures)].filter(notStub); const phase0Count = currentHachures.length; // Phase 1: lock in Phase 0 hachures (plus breaks); vertical check lines, one per pixel column startHachures = new Set(currentHachures); phase = 1; for (let x = 0; x < width; ++x) currentHachures.length ? subsequentLine(x, height) : firstLine(x, height); const breakSet = new Set(breakHachures); const hachures = [...new Set(currentHachures)].filter(notStub).filter((h) => !breakSet.has(h)); return {hachures: hachures.map((h) => h.points), phase0Count}; } // Replaces the two SAGA "linesmoothing" (Gaussian) passes: arc-length Gaussian smoothing, endpoints fixed function smoothHachure(points, sigma) { if (points.length < 3 || !(sigma > 0)) return points; const s = [0]; for (let i = 1; i < points.length; ++i) s.push(s[i - 1] + Math.hypot(points[i][0] - points[i - 1][0], points[i][1] - points[i - 1][1])); return points.map((p, i) => { if (i === 0 || i === points.length - 1) return p; let wx = 0, wy = 0, ws = 0; for (let j = 0; j < points.length; ++j) { const d = s[j] - s[i]; if (Math.abs(d) > 3 * sigma) continue; const w = Math.exp(-d * d / (2 * sigma * sigma)); wx += w * points[j][0]; wy += w * points[j][1]; ws += w; } return [wx / ws, wy / ws]; }); }51:T630,const hachureSettings = view(Inputs.form({ azimuth: Inputs.range([0, 359], {label: "Camera azimuth (° from N)", step: 1, value: 20}), viewAngle: Inputs.range([2, 89], {label: "Viewpoint angle (°)", step: 1, value: 30}), distanceFactor: Inputs.range([0.6, 4], {label: "Camera distance (× terrain size)", step: 0.05, value: 1.5}), fov: Inputs.range([10, 70], {label: "Field of view (°)", step: 1, value: 30}), exaggeration: Inputs.range([1, 3], {label: "Vertical exaggeration", step: 0.1, value: 1}), lightAzimuth: Inputs.range([-180, 180], {label: "Light azimuth (° rel. to view)", step: 5, value: -60}), lightAltitude: Inputs.range([5, 90], {label: "Light altitude (°)", step: 1, value: 35}), min: Inputs.range([1, 10], {label: "Min hachure spacing (px)", step: 0.5, value: 2.5}), max: Inputs.range([2, 20], {label: "Max hachure spacing (px)", step: 0.5, value: 8}), minSlope: Inputs.range([0, 15], {label: "Stop hachures below slope (°)", step: 0.5, value: 3}), breaks: Inputs.toggle({label: "Break lines from depth", value: true}), breakThreshold: Inputs.range([0.005, 0.1], {label: "Break depth jump (relative)", step: 0.005, value: 0.02}), breakMinLength: Inputs.range([10, 300], {label: "Min break length (px)", step: 5, value: 50}), breakWidth: Inputs.range([0.5, 3], {label: "Break stroke width", step: 0.1, value: 1.4}), breakClear: Inputs.range([0, 6], {label: "Clear around breaks (px)", step: 0.5, value: 2}), smoothing: Inputs.toggle({label: "Smooth hachures (σ 5 then 1)", value: true}) }, {submit: "Render & generate hachures"}));52:T902,// 1. "Blender" render const terrainView = (() => { const s = hachureSettings, t0 = performance.now(); const v = renderTerrainView({ z: elevation, cols: demW, rows: demH, cellSize: demPixelMeters, exaggeration: s.exaggeration, width: 960, height: 640, azimuth: s.azimuth, viewAngle: s.viewAngle, distanceFactor: s.distanceFactor, fov: s.fov, lightAzimuth: s.lightAzimuth, lightAltitude: s.lightAltitude }); return {...v, ms: Math.round(performance.now() - t0)}; })(); // 2. Break lines from depth, then 3. hachures in image space const hachureResult = (() => { const s = hachureSettings, {width, height, depth, shade, ux, uy, slope} = terrainView; const t0 = performance.now(); const breaks = s.breaks ? extractBreaks(terrainView, {threshold: s.breakThreshold, minLength: s.breakMinLength}) : []; // Stop mask: background, flat ground, and a cleared band around break lines const stop = Uint8Array.from(depth, (d, k) => d === Infinity || slope[k] < s.minSlope ? 1 : 0); const rc = Math.ceil(s.breakClear); if (s.breakClear > 0) for (const line of breaks) for (const [x, y] of line) { for (let dy = -rc; dy <= rc; ++dy) for (let dx = -rc; dx <= rc; ++dx) { if (dx * dx + dy * dy > s.breakClear * s.breakClear) continue; const xx = Math.floor(x) + dx, yy = Math.floor(y) + dy; if (xx >= 0 && yy >= 0 && xx < width && yy < height) stop[yy * width + xx] = 1; } } const tBreaks = performance.now(); // Image y points down, camera y points up → flip uy const upslopeY = Float32Array.from(uy, (v) => -v); const result = generateHachures({ width, height, upslopeX: ux, upslopeY, shading: shade, stop, breaks, minSpacing: s.min, maxSpacing: s.max, random: d3.randomLcg(42) }); return {...result, breaks, breaksMs: Math.round(tBreaks - t0), hachuresMs: Math.round(performance.now() - tBreaks)}; })(); const hachureLines = hachureSettings.smoothing ? hachureResult.hachures.map((h) => smoothHachure(smoothHachure(h, 5), 1)) : hachureResult.hachures; display({ renderMs: terrainView.ms, breaksMs: hachureResult.breaksMs, hachuresMs: hachureResult.hachuresMs, coverage: d3.mean(terrainView.depth, (d) => d < Infinity), breaks: hachureResult.breaks.length, hachures: hachureLines.length, phase0: hachureResult.phase0Count });53:[] 49:{"id":"4b746838c446a5b7","slug":"non-planimetric-hachures","title":"Non-planimetric hachures","thumbnail":"8640d120d540c35dfa65b59a863da9ef9341bada7f53027ae1a18a5f95bfdd14","access_level":"public","create_time":"$D2026-10-22T09:27:45.799Z","update_time":"$D2026-11-07T13:48:11.963Z","view_time":null,"first_public_time":"$D2026-11-07T13:48:24.114Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"166c5a16a7264bea","login":"visionscarto","name":"Visionscarto","avatar_url":"https://avatars-next.observableusercontent.com/9946d22004b9d0eaf6a5bfda50b0a32ca1003656c403106c7b54f8dd5cf784b7","tier":"starter_2024","bio":"Maps — and other representations of the world.","followed_by_you":false,"follows_you":false},"version":101,"publish_version":101,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"bio":"Vocateur.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"958a492ccf138cc7","slug":"30daymapchallenge","title":"#30DayMapChallenge","owner":{"id":"166c5a16a7264bea","login":"visionscarto","name":"Visionscarto"}},"type":"notebook","body":{"titling":"auto","title":"Non-planimetric hachures","cells":[{"id":19,"value":"# Non-planimetric hachures","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"*Day 05: Sight.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"*Note:* this is a one-shot port **by Observable's Agent** of Daniel Huffman & Andrew Tyrrell's [non-planimetric hachure method](https://github.com/pinakographos/non-planimetric-hachures). I haven't looked at the code. I have learned nothing.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"Plot.plot({\n title: \"Mount St. Helens in oblique hachures\",\n width: terrainView.width,\n height: terrainView.height,\n projection: {type: \"identity\", domain: {type: \"MultiPoint\", coordinates: [[0, 0], [terrainView.width, terrainView.height]]}},\n marks: [\n Plot.geo({type: \"MultiLineString\", coordinates: hachureLines}, {stroke: \"#222\", strokeWidth: 0.7}),\n Plot.geo({type: \"MultiLineString\", coordinates: hachureResult.breaks}, {stroke: \"#000\", strokeWidth: hachureSettings.breakWidth})\n ]\n})","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"---\n\n*code*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$4d","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"// Load a 2×2 block of AWS Terrarium elevation tiles (zoom 12) around Mount St. Helens, WA\nconst demZoom = 12, demX0 = 657, demY0 = 1453, demTiles = 2;\nconst demTileImages = await Promise.all(\n d3.cross(d3.range(demTiles), d3.range(demTiles)).map(([j, i]) => new Promise((resolve, reject) => {\n const img = new Image();\n img.crossOrigin = \"anonymous\";\n img.onload = () => resolve({i, j, img});\n img.onerror = reject;\n img.src = `https://s3.amazonaws.com/elevation-tiles-prod/terrarium/${demZoom}/${demX0 + i}/${demY0 + j}.png`;\n }))\n);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"// Decode Terrarium RGB → meters\nconst demW = 256 * demTiles, demH = 256 * demTiles;\nconst elevation = (() => {\n const ctx = new OffscreenCanvas(demW, demH).getContext(\"2d\");\n for (const {i, j, img} of demTileImages) ctx.drawImage(img, i * 256, j * 256);\n const px = ctx.getImageData(0, 0, demW, demH).data;\n const z = new Float64Array(demW * demH);\n for (let k = 0; k < z.length; ++k) z[k] = px[4 * k] * 256 + px[4 * k + 1] + px[4 * k + 2] / 256 - 32768;\n d3.blur2({data: z, width: demW}, 1.5); // light smoothing of the DEM (the article recommends experimenting with this)\n return z;\n})();\n\n// Ground size of a DEM pixel (Web Mercator, at the tile block's center latitude)\nconst demLat = (() => {\n const n = Math.PI - 2 * Math.PI * (demY0 + demTiles / 2) / 2 ** demZoom;\n return Math.atan(Math.sinh(n)) * 180 / Math.PI;\n})();\nconst demPixelMeters = 40075016.686 * Math.cos(demLat * Math.PI / 180) / (256 * 2 ** demZoom);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$4f","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$50","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$51","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$52","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W53","stdlib":"2"}} 44:null