2b:null 2c:["$","title",null,{"children":"Fast Distance Transform | Volodymyr Agafonkin | Observable"}] 31:[] 2f:{"id":"721a4ee910d820aa","slug":"fast-distance-transform","title":"Fast Distance Transform","thumbnail":"d7ba7937e59b235689ca59c25c363741645fde9e32dc6b4b0032fdccb34cea97","access_level":"public","create_time":"$D2019-03-19T19:33:02.401Z","update_time":"$D2019-03-20T11:56:14.895Z","view_time":null,"first_public_time":"$D2019-03-20T10:18:34.987Z","fork":false,"stars":38,"starred":false,"owner":{"type":"team","id":"78f29d059906819a","login":"mourner","name":"Volodymyr Agafonkin","avatar_url":"https://avatars-next.observableusercontent.com/02cfd655debb6fc593dfe4bcacd9520f73e6b33cedef382248d08ecc40822a1b","tier":"starter_2024"},"version":357,"publish_version":357,"role":null,"authored":false,"authors":[{"type":"individual","id":"3954cddf6608132f","login":"mourner","name":"Volodymyr Agafonkin","avatar_url":"https://avatars-next.observableusercontent.com/02cfd655debb6fc593dfe4bcacd9520f73e6b33cedef382248d08ecc40822a1b","tier":null}],"members":[{"type":"individual","id":"3954cddf6608132f","login":"mourner","name":"Volodymyr Agafonkin","avatar_url":"https://avatars-next.observableusercontent.com/02cfd655debb6fc593dfe4bcacd9520f73e6b33cedef382248d08ecc40822a1b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"6aaf02cd1aea775c","slug":"algorithms","title":"Algorithms & Math","owner":{"id":"78f29d059906819a","login":"mourner","name":"Volodymyr Agafonkin"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"viewof replay = html`