Heykuki News

TopNewBestAskShowJobs
TopNewBestAskShowJobs
Show HN: I made a WebGL-based app that traces images using circles
phqb.github.io
93 points
phqb
4 years ago
I was fascinated by this [0] and this video [1]. After many struggles, I finally built this app that traces images using circles similar to what these videos had shown.

The most challenging part (to me) is to find a way to convert images to vector lines. I had tried Potrace, but its output is not suitable for my use case: too many small elements share the same border. Potrace's goal is to represent the original image faithfully using vector lines. But I want to trace the image edges.

After searching and trying some Potrace alternatives in vain, I finally found my keyword. Surprisingly (to me), it lies at the end of the wiki page of the very topic [2]. Then I found a paper [3] that has nice pseudocode and a C implementation. I rewrote the pseudocode in Rust because I wanted to experiment with rustwasm. Honestly, I didn't care much about the math behind it.

From then, I could continue to finish the app and show it to the world.

This app is also my chance to learn about rustwasm and WebGL.

FYI: this app is offline-only; your images never leave your browser

[0] https://www.youtube.com/watch?v=r6sGWTCMz2k

[1] https://www.youtube.com/watch?v=-qgreAUpPwM

[2] https://en.wikipedia.org/wiki/Edge_detection#Subpixel

[3] https://www.ipol.im/pub/art/2017/216/

24 comments