25:["$","title",null,{"children":"Fast Distance Transform | inoculate_media | Observable"}] 49:[{"id":"d3a03ee8e65cabcd3ed4b807c01ed7cf72472047498e87d7513554a732a92243c8c15d2b7ecc572a93247c9990f0d1afcc443a0ad7686aa7cc56c3754aa1dd1b","href":"https://static.observableusercontent.com/files/d3a03ee8e65cabcd3ed4b807c01ed7cf72472047498e87d7513554a732a92243c8c15d2b7ecc572a93247c9990f0d1afcc443a0ad7686aa7cc56c3754aa1dd1b","name":"JD_UP_OU_FILLS.svg","type":"image/svg+xml","lastModified":1707095267032.202,"size":238191}] 29:{"id":"45bdfd6239c220bb","slug":null,"title":"Fast Distance Transform","thumbnail":"eba3fe912317665c9509765651a0722b0958af271f5765443ccc836b575f5e8f","access_level":"public","create_time":"$D2024-02-05T01:04:39.529Z","update_time":"$D2024-02-05T01:17:53.802Z","view_time":null,"first_public_time":"$D2024-02-05T01:04:39.529Z","has_unpublished_edits":null,"fork":{"id":"721a4ee910d820aa","slug":"fast-distance-transform","title":"Fast Distance Transform","owner":{"id":"78f29d059906819a","login":"mourner","name":"Volodymyr Agafonkin"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5be65f59a7d4414c","login":"inoculate","name":"inoculate_media","avatar_url":"https://avatars-next.observableusercontent.com/a463960a3665d015e1f951ffefd56c80438990e8ca3c81da33076759d509ec50","tier":"starter_2024","bio":"Video artist and data nerd,","following":false},"version":379,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4a9b2751079d79b6","login":"inoculate23","name":"Craig Ellenwood","avatar_url":"https://avatars-next.observableusercontent.com/655e21a46fb0887d567d2c63550ddebb4fff07e632cf340edf07bac49c519fac","tier":null,"bio":"I make art, code and applications that integrate ai and machine learning for musicians and artists. My own music project is Les Barons | The Barons","following":false}],"members":[{"type":"team","id":"5be65f59a7d4414c","login":"inoculate","name":"inoculate_media","avatar_url":"https://avatars-next.observableusercontent.com/a463960a3665d015e1f951ffefd56c80438990e8ca3c81da33076759d509ec50","tier":"starter_2024","role":"editor"},{"type":"individual","id":"4a9b2751079d79b6","login":"inoculate23","name":"Craig Ellenwood","avatar_url":"https://avatars-next.observableusercontent.com/655e21a46fb0887d567d2c63550ddebb4fff07e632cf340edf07bac49c519fac","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"viewof replay = html`