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/
Show HN: I made a WebGL-based app that traces images using circles
phqb.github.io