2c:null 2d:["$","title",null,{"children":"Walk on Spheres — segments edition // Delaunay optimization | Fil | Observable"}] 32:T508,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); } yield { distances, values }; }33: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(); } }34:[] 30:{"id":"6c34e1b506410991","slug":null,"title":"Walk on Spheres — segments edition // Delaunay optimization","thumbnail":"720c0e7c1bc8ab31bd92d4417e65b6c3cc09eb29ef4850600b5452cc162ebf68","access_level":"unlisted","create_time":"$D2020-08-30T08:40:58.738Z","update_time":"$D2020-08-30T09:09:58.917Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"0ffd70554d6247cb","slug":"wos-segments","title":"Walk on Spheres — segments edition","owner":{"id":"da2a32154638c457","login":"fil","name":"Fil"}},"stars":0,"starred":false,"owner":{"type":"team","id":"da2a32154638c457","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":"starter_2024"},"version":621,"publish_version":621,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"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":null,"type":"notebook","body":{"title":"Walk on Spheres — segments edition // Delaunay optimization","cells":[{"id":0,"value":"md`# Walk on Spheres — segments edition // Delaunay optimization\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\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"viewof replay = html`