2c:null 2d:["$","title",null,{"children":"Walk on Spheres — segments edition | Job van der Zwan | Observable"}] 32:T4e1,{ 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(let i = 0; i < segments.length; i += 6) { context.beginPath(); context.moveTo(segments[i+0], segments[i+1]); context.lineTo(segments[i+2], segments[i+3]); context.strokeStyle = colors[Math.round(255 * Math.max(segments[i+4], segments[i+5]))]; context.stroke(); } }33:[] 30:{"id":"b11a37073e21fa89","slug":null,"title":"Walk on Spheres — segments edition","thumbnail":"7500cf514e4e94265c6c36d1c5f9c08e8dae4673c26afbce75cb32470218f279","access_level":"unlisted","create_time":"$D2020-08-29T13:27:24.892Z","update_time":"$D2020-08-29T19:13:28.791Z","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":1,"starred":false,"owner":{"type":"team","id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":"starter_2024"},"version":638,"publish_version":638,"role":null,"authored":false,"authors":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}],"members":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","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","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","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`