31:[] 2f:{"title":"Fast Distance Transform","cells":[{"id":0,"value":"md`# Fast Distance Transform\n\nA visualization of a simple, fast and elegant distance transform algorithm by *Pedro Felzenszwalb* and *Daniel Huttenlocher*, presented in the paper [Distance Transforms of Sampled Functions (2012)](http://cs.brown.edu/people/pfelzens/papers/dt-final.pdf).\n\nGiven a binary image, a distance transform calculates the distance from each pixel to the nearest \"drawn\" pixel, which has many useful applications. In particular, [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) mapping library uses it to convert Chinese, Japanese and Korean glyphs into [Signed Distance Field textures for rendering with WebGL](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817). The implementation was extracted as an open source library called [TinySDF](https://mapbox.github.io/tiny-sdf/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"{\n const ctx = DOM.context2d(width, height, 1);\n const imageData = ctx.createImageData(width, height);\n \n for (let i = 0; i < transformedGrid.length; i++) {\n imageData.data[4 * i + 3] = Math.round(Math.sqrt(transformedGrid[i]) * 2);\n }\n ctx.putImageData(imageData, 0, 0); \n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"viewof replay = html`