30:T676,dmap = { const distances = Float32Array.from({ length: height * width }).fill( Infinity ), values = Float32Array.from({ length: height * width }); yield { distances, values }; // Delaunay optimisation: instead of going though all the segments for each pixel, // we start by sampling the segments pixel by pixel, and build a delaunay of these sample points. // Then, to look up the (distance, value) of a pixel, we quickly find the segment with the delaunay. const pts = [], seg = [], sampleSize = 1; // sample every x pixels; for (let n = 0; n < segments.length; n++) { const [[ax, ay], [bx, by]] = segments[n]; const l = Math.hypot(ax - bx, ay - by) / sampleSize, m = Math.ceil(l); for (let i = 0; i <= m; i++) { pts.push([ax + (i / m) * (bx - ax), ay + (i / m) * (by - ay)]); seg.push(n); } } const delaunay = d3.Delaunay.from(pts); let c = 0; for (let i = 0; i < values.length; i++) { const x = i % width, y = Math.floor(i / width); c = delaunay.find(x, y, c); const n = seg[c]; const s = segments[n]; const d = distanceToSegment(x, y, s[0][0], s[0][1], s[1][0], s[1][1]); values[i] = d > 0 ? s[3] : s[2]; distances[i] = Math.abs(d); } /* // code without Delaunay optimisation for (let i = 0; i < values.length; i++) { const x = i % width, y = Math.floor(i / width); for (const s of segments) { const d = distanceToSegment(x, y, s[0][0], s[0][1], s[1][0], s[1][1]); if (Math.abs(d) < distances[i]) { values[i] = d > 0 ? s[3] : s[2]; distances[i] = Math.abs(d); } } } */ }31:T493,{ await visibility(); const { floor, ceil } = Math; const context = DOM.context2d(width, height, 2), density = context.canvas.width / width; const data = context.createImageData(width * density, height * density), pixels = data.data; const colors = d3.range(256).map(x => d3.rgb(color(x / 255))); for (let x = 0; x <= width - 1; x += 1 / density) { for (let y = 0; y <= height - 1; y += 1 / density) { const c = colors[ Math.round( (255 * (values[floor(x) + width * floor(y)] + values[ceil(x) + width * ceil(y)])) / 2 ) ]; const i = density * x + density * width * (density * y); pixels[4 * i] = c.r; pixels[4 * i + 1] = c.g; pixels[4 * i + 2] = c.b; pixels[4 * i + 3] = 255; } } context.putImageData(data, 0, 0); yield context.canvas; // cheat to remove aliasing context.lineWidth = 1; for (const s of segments) { context.beginPath(); context.moveTo(...s[0]); context.lineTo(...s[1]); context.strokeStyle = colors[Math.round(255 * Math.max(s[2], s[3]))]; context.stroke(); } }32:[] 2e:{"title":"Walk on Spheres — segments edition","cells":[{"id":0,"value":"md`# Walk on Spheres — segments edition\n\nIn this experiment each segment has one of three values on each of its sides: 0 (red), 0.5 (orange) or 1 (yellow). From each pixel we [walk on spheres](https://observablehq.com/@fil/walk-on-spheres) until we touch one of them, and take an average of the values.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"{\n await visibility();\n const context = DOM.context2d(width, height, 1);\n\n const data = context.createImageData(width, height),\n pixels = data.data;\n\n const colors = d3.range(256).map(x => d3.rgb(color(x / 255)));\n\n for (let x = 0; x < width; x++) {\n for (let y = 0; y < height; y++) {\n const c = colors[Math.round(255 * values[x + width * y])];\n const i = x + width * y;\n pixels[4 * i] = c.r;\n pixels[4 * i + 1] = c.g;\n pixels[4 * i + 2] = c.b;\n pixels[4 * i + 3] = 255;\n }\n }\n context.putImageData(data, 0, 0);\n\n yield context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"viewof replay = html`