HN Explorer

Show HN: I made a WebGL-based app that traces images using circles (phqb.github.io)

93 points by phqb ↗ HN
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

[ 3.1 ms ] story [ 72.0 ms ] thread
gus_massa
I was going to ask for an online demo, but this is an online demo.

Perhaps above "Choose a picture" you should add a title that says "Try it now with your picture".

dlivingston
Very cool. I would suggest adding a default photo for folks who don't want to / can't upload a photo.
nomel
It's local. There's no upload. You can also clone it and open index.html.
hombre_fatal
Either way, after all that work, it would be smart to provide some preloaded images that work well with it so people can try it without fishing around in their filesystem for what might be a good candidate.

I don't even have any on my new laptop, just some screenshots of Wordle.

alar44
It should also send someone to your house to open the file for you.
paskozdilar
If they do come to my house, please tell them to bring pizza
ui4jd73bdj
Didn't work for my android firefox. Would have appreciated some sample results, at least in github readme.
nomel
> The details of this step can be found in the source code.

This beautiful phrase will drastically reduce my documentation workload.

idrios
I really do love that the author's source code is unminified and extremely readable.
Bieberfan2003
Need UI sliders for animation speed, # of arrows, hiding arrows! This is sick.
phqb
I added number of circles sliders.
mleonhard
A complex number contains two components: a real number and a complex part which is a coefficient multiplied by sqrt(-1).

Quaternions have four components [0].

Has anyone discovered a kind of number that contains three components?

[0] https://en.wikipedia.org/wiki/Quaternion

mxkopy
The best computations are in powers of 2 [citation needed].
programmer_dude
There is no reason why you'd have to restrict yourself to just three components. Data-science regularly uses "numbers" with more than 1000 components.
foxhop
Trippy, don't forget to learn Python next. ; )
mikewarot
I fed it a picture of St Javelina of Ukraine, and the output was amazing.

Is there any way to save/load the Fourier coefficients?

phqb
I added JSON import & export. Btw you can get a sharable link. But the details of the drawing will reduce because of URL length limitation.
mikewarot
Could you please add some way to save/extract the Fourier coordinates produced by this?

Thanks so much for adding the sample pictures.