31:Tf42,chart = { const context = DOM.context2d(width, height), projection = d3.geoIdentity().scale(scale), path = d3.geoPath(projection).context(context); // Compute contours const contours = d3 .contours() .size([w, h]) .thresholds(thresholds)(data.values); // Draw the solid background for (const contour of contours) { const threshold = contour.value; context.beginPath(), (context.fillStyle = show.indexOf("colors") > -1 ? color(threshold) : "#556e27"), path(contour), context.fill(); } // Apply hillshading if (show.indexOf("hillshade") > -1) { const alpha = context.globalAlpha, co = context.globalCompositeOperation; context.globalAlpha = compositeAlpha; context.globalCompositeOperation = compositeOperation; context.drawImage(hillshade_mask, 0, 0, width, height); context.globalAlpha = alpha; context.globalCompositeOperation = co; } // Labels { for (const contour of contours) { const threshold = contour.value, labels = []; if (show.indexOf("labels") > -1) { if (threshold % 10 === 0) { contour.coordinates.forEach(polygon => polygon.forEach((ring, j) => { const p = ring.slice(1, Infinity), // best number of steps to divide ring.length possibilities = d3.range(steps, steps * 1.4), scores = possibilities.map(d => -((p.length - 1) % d)), n = possibilities[d3.scan(scores)], // best starting point: bottom for first rings, top for holes start = 1 + (d3.scan(p.map(xy => (j === 0 ? -1 : 1) * xy[1])) % n), margin = 2; p.forEach((xy, i) => { if ( i % n === start && xy[0] > margin && xy[0] < w - margin && xy[1] > margin && xy[1] < h - margin ) { const a = (i - 2 + p.length) % p.length, b = (i + 2) % p.length, dx = p[b][0] - p[a][0], dy = p[b][1] - p[a][1]; if (dx === 0 && dy === 0) return; labels.push({ threshold, // value xy: xy.map(d => scale * d), angle: Math.atan2(dy, dx), text: `${threshold}` }); } }); }) ); } } // create the mask for this threshold: // the full rectangle minus a rectangle around each label context.save(); context.beginPath(); context.moveTo(0, 0), context.lineTo(width, 0), context.lineTo(width, height), context.lineTo(0, height), context.lineTo(0, 0); const arc = d3.arc(); for (const label of labels) { for (let i = 0; i < 2 * Math.PI; i += 0.2) { const pos = [Math.cos(i) * 13, -Math.sin(i) * 10], c = Math.cos(label.angle), s = Math.sin(label.angle); context[i === 0 ? "moveTo" : "lineTo"]( label.xy[0] + pos[0] * c - pos[1] * s, label.xy[1] + pos[1] * c + pos[0] * s ); } } // context.stroke(); // uncomment to see the mask context.clip(); // draw white contour for this threshold if (show.indexOf("contours") > -1) { context.beginPath(), (context.strokeStyle = "white"), (context.lineWidth = threshold % 10 === 0 ? 0.75 : threshold % 5 === 0 ? 0.25 : 0.1), path(contour), context.stroke(); } // draw labels for this threshold context.restore(); for (const label of labels) { addlabel(context, label); } } } return context.canvas; }32:T61f,// For the basic computation refer to hillshade_vector1 // this adds a bilinear interpolator, for supersampling function hillshade_vector(data, n) { function bili(a, b, i, v, w) { return ( (1 - b) * ((1 - a) * v[i] + a * v[i + 1]) + b * ((1 - a) * v[i + w] + a * v[i + w + 1]) ); } const N = n * data.width * n * data.height; const value = new Float32Array(N), slope = new Float32Array(N), aspect = new Float32Array(N), dx = new Float32Array(N), dy = new Float32Array(N); data.dx = data.values.map( (d, i) => ((data.values[i + 1] || d) - (data.values[i - 1] || d)) / 2 ); data.dy = data.values.map( (d, i) => ((data.values[i + data.width] || d) - (data.values[i - data.width] || d)) / 2 ); data.slope = data.values.map((d, i) => Math.atan(Math.sqrt(data.dx[i] ** 2 + data.dy[i] ** 2)) ); for (let x = 0; x < data.width - 1; x++) { for (let y = 0; y < data.height - 1; y++) { const i = x + y * data.width; for (let a = 0; a < n; a++) { for (let b = 0; b < n; b++) { const j = x * n + a + (y * n + b) * data.width * n; value[j] = bili(a / n, b / n, i, data.values, w); dx[j] = bili(a / n, b / n, i, data.dx, w); dy[j] = bili(a / n, b / n, i, data.dy, w); slope[j] = bili(a / n, b / n, i, data.slope, w); aspect[j] = Math.atan2(dx[j], dy[j]); } } } } return { value, dx, dy, slope, aspect, width: data.width * n, height: data.height * n }; }33:T443,function create_hillshade_mask(width, height, data) { const hs = hillshade_vector(data, supersampling_factor); const hswidth = hs.width, phase = direction * radians, mask = DOM.context2d(width, height, 1), imdata = mask.getImageData(0, 0, width, height); for (let j = 0; j < hs.aspect.length; j++) { const aspect = hs.aspect[j], dx = hs.dx[j], dy = hs.dy[j], slope = hs.slope[j]; let x = (j % hswidth) - 0.5, y = Math.floor(j / hswidth) - 0.5; let scale = width / hswidth, step = 1 / scale - 0.001; let boost = 255 * (0.65 + 0.25 * slope * Math.sin(aspect - phase)); for (let a = 0; a < 1; a += step) { for (let b = 0; b < 1; b += step) { let i = Math.floor(scale * (x + a)) + width * Math.floor(scale * (y + b)); if (imdata.data[4 * i + 3] === 0) { imdata.data[4 * i] = imdata.data[4 * i + 1] = imdata.data[ 4 * i + 2 ] = boost; imdata.data[4 * i + 3] = 255; } } } } mask.putImageData(imdata, 0, 0); return mask.canvas; }34:[] 2f:{"title":"Hillshading & supersampling","cells":[{"id":0,"value":"md`# Hillshading & supersampling\n\nSimple CPU-based version (this notebook is probably unfinished but it's been sleeping for almost a year).\n\nRef.: https://observablehq.com/@mbostock/volcano-contours`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"viewof direction = Inputs.range([-180, 180], {\n value: -45,\n step: 5,\n label: \"Light source (direction)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1292,"value":"viewof compositeAlpha = Inputs.range([0, 1], {\n value: 0.5,\n label: \"Drama\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1274,"value":"viewof compositeOperation = Inputs.select(\n [\n \"luminosity\",\n \"source-over\",\n //\"source-in\",\n //\"source-out\",\n \"source-atop\",\n //\"destination-over\",\n //\"destination-in\",\n //\"destination-out\",\n //\"destination-atop\",\n \"lighter\",\n \"copy\",\n //\"xor\",\n \"multiply\",\n \"screen\",\n \"overlay\",\n \"darken\",\n //\"color-dodge\",\n \"color-burn\",\n \"hard-light\",\n \"soft-light\",\n \"difference\",\n \"exclusion\"\n //\"hue\",\n //\"saturation\",\n //\"color\"\n ],\n {\n value: \"luminosity\", // lovely\n label: \"Composite operation\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1175,"value":"// 1 = no supersampling; 7 = high-resolution\nviewof supersampling_factor = Inputs.range([1, 7], {\n value: 7,\n step: 1,\n label: \"Supersampling factor\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1193,"value":"viewof show = Inputs.checkbox([\"hillshade\", \"colors\", \"contours\", \"labels\"], {\n value: [\"hillshade\", \"colors\", \"contours\", \"labels\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1268,"value":"hillshade_mask = create_hillshade_mask(width, height, data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1323,"value":"// Unused -- equivalent to hillshade_vector with no supersampling\nfunction hillshade_vector1(data) {\n const N = data.width * data.height;\n const value = new Float32Array(N),\n slope = new Float32Array(N),\n aspect = new Float32Array(N),\n dx = new Float32Array(N),\n dy = new Float32Array(N);\n\n for (let x = 0; x < data.width - 1; x++) {\n for (let y = 0; y < data.height - 1; y++) {\n const i = x + y * data.width;\n value[i] = data.values[i];\n dx[i] =\n ((data.values[i + 1] || value[i]) - (data.values[i - 1] || value[i])) /\n 2;\n dy[i] =\n ((data.values[i + data.width] || value[i]) -\n (data.values[i - data.width] || value[i])) /\n 2;\n slope[i] = Math.atan(Math.sqrt(dx[i] ** 2 + dy[i] ** 2));\n aspect[i] = Math.atan2(dx[i], dy[i]);\n }\n }\n\n return {\n value,\n dx,\n dy,\n slope,\n aspect,\n width: data.width,\n height: data.height\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1220,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"scale = width / w","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"height = h * scale","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"viewof steps = Inputs.range([3, 150], { value: 35, step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"viewof ticks = Inputs.select([10, 20, 40], {\n value: 20,\n label: \"# of thresholds\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"function addlabel(context, label) {\n context.save();\n context.translate(...label.xy);\n context.rotate(label.angle + (Math.cos(label.angle) < 0 ? Math.PI : 0));\n context.textAlign = \"center\";\n context.fillStyle = \"white\";\n context.font = \"12px Arial\";\n context.fillText(label.text, -1, 4);\n context.restore();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"w = data.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"h = data.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"wide = Generators.observe(notify => {\n let wide;\n function resized() {\n let w = window.innerWidth > 640;\n if (w !== wide) notify(wide = w);\n }\n resized();\n window.addEventListener(\"resize\", resized);\n return () => window.removeEventListener(\"resize\", resized);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"color = d3\n .scaleSequential(interpolateTerrain)\n .domain(d3.extent(data.values))\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"thresholds = color.ticks(ticks)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"rawdata = d3.json(\"https://gist.githubusercontent.com/mbostock/4241134/raw/ee3244eaf405667623241b3d5e1477424623d12b/volcano.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"data = wide ? rawdata : flip(rawdata)","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"function flip(data) {\n const flip = {\n width: data.height,\n height: data.width,\n values: Array.from(data.values)\n };\n for (let i = 0, l = data.values.length; i < l; i++) {\n flip.values[(i % data.width) * flip.width + Math.floor(i / data.width)] =\n data.values[i];\n }\n\n return flip;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"interpolateTerrain = {\n const i0 = d3.interpolateHsvLong(d3.hsv(120, 1, 0.65), d3.hsv(60, 1, 0.9));\n const i1 = d3.interpolateHsvLong(d3.hsv(60, 1, 0.9), d3.hsv(0, 0, 0.95));\n return t => (t < 0.5 ? i0(t * 2) : i1((t - 0.5) * 2));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\", \"d3-hsv@0.1.0/build/d3-hsv.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"import { degrees, radians } from \"@fil/math\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}