5 ms·
Show HN: I made a WebGL-based app that traces images using circles
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 https://www.youtube.com/watch?v=r6sGWTCMz2k
[1] https://www.youtube.com/watch?v=-qgreAUpPwM https://www.youtube.com/watch?v=-qgreAUpPwM
[2] https://en.wikipedia.org/wiki/Edge_detection#Subpixel https://en.wikipedia.org/wiki/Edge_detection#Subpixel
[3] https://www.ipol.im/pub/art/2017/216/ https://www.ipol.im/pub/art/2017/216/
- mikewarot 5y agoCould you please add some way to save/extract the Fourier coordinates produced by this? Thanks so much for adding the sample pictures.
- xem 5y agoHere's my implementation, also inspired by these videos It was made in 1kb for the JS1K demo competition: https://js1k.com/2018-coins/demo/3124 https://js1k.com/2018-coins/demo/3124 Detailed source code: https://github.com/xem/epicycles/blob/gh-pages/index.html https://github.com/xem/epicycles/blob/gh-pages/index.html Controls: - Arrow keys: up / down to change the number of gears, left to toggle intermediate paths, right to clear the scene. - Mouse: click to add points to the path
- gus_massa 5y agoI 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 5y agoVery cool. I would suggest adding a default photo for folks who don't want to / can't upload a photo.
- nomel 5y agoIt's local. There's no upload. You can also clone it and open index.html.
- hombre_fatal 5y agoEither 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 5y agoIt should also send someone to your house to open the file for you.
- paskozdilar 5y agoIf they do come to my house, please tell them to bring pizza
- ui4jd73bdj 5y agoDidn't work for my android firefox. Would have appreciated some sample results, at least in github readme.
- nomel 5y ago> The details of this step can be found in the source code. This beautiful phrase will drastically reduce my documentation workload.
- nextaccountic 5y agoBut where is the source for the wasm part (written in Rust)? In the page itself there's only an oneliner_bg.wasm file
- ppier 5y agoThe link to it is in the readme in the same directory: https://github.com/phqb/oneliner https://github.com/phqb/oneliner
- idrios 5y agoI really do love that the author's source code is unminified and extremely readable.
- croes 5y agoNice
- Bieberfan2003 5y agoNeed UI sliders for animation speed, # of arrows, hiding arrows! This is sick.
- phqb 5y agoI added number of circles sliders.
- sour-taste 5y agoI built something similar after watching the same video! Here's my implementation: https://blaise.gg/fourier_playground/fourier.html https://blaise.gg/fourier_playground/fourier.html I like that you took the step of doing edge detection. For what it's worth opencv supports edge detection and has a web assembly implementation: https://docs.opencv.org/4.x/d4/da1/tutorial_js_setup.html https://docs.opencv.org/4.x/d4/da1/tutorial_js_setup.html
- mleonhard 5y agoA 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 https://en.wikipedia.org/wiki/Quaternion
- programmer_dude 5y agoThere is no reason why you'd have to restrict yourself to just three components. Data-science regularly uses "numbers" with more than 1000 components.
- mxkopy 5y agoThe best computations are in powers of 2 [citation needed].
- foxhop 5y agoTrippy, don't forget to learn Python next. ; )
- asimops 5y agoIf you are not in for the maths, you might also like this: https://github.com/fogleman/primitive https://github.com/fogleman/primitive It redraws images with shape primitives and allows verctorization with a cool art style.
- mikewarot 5y agoI 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 5y agoI added JSON import & export. Btw you can get a sharable link. But the details of the drawing will reduce because of URL length limitation.