Show HN: I made a WebGL-based app that traces images using circles
phqb.github.ioI 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/
I built something similar after watching the same video! Here's my implementation: 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
Very cool. I would suggest adding a default photo for folks who don't want to / can't upload a photo.
It's local. There's no upload. You can also clone it and open index.html.
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.
It should also send someone to your house to open the file for you.
If they do come to my house, please tell them to bring pizza
Didn't work for my android firefox. Would have appreciated some sample results, at least in github readme.
If you are not in for the maths, you might also like this: https://github.com/fogleman/primitive
It redraws images with shape primitives and allows verctorization with a cool art style.
Here'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
Detailed source code: 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
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?
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.
The best computations are in powers of 2 [citation needed].
Need UI sliders for animation speed, # of arrows, hiding arrows! This is sick.
I added number of circles sliders.
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".
Could you please add some way to save/extract the Fourier coordinates produced by this?
Thanks so much for adding the sample pictures.
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?
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.
Trippy, don't forget to learn Python next. ; )
Nice
> The details of this step can be found in the source code.
This beautiful phrase will drastically reduce my documentation workload.
I really do love that the author's source code is unminified and extremely readable.
But where is the source for the wasm part (written in Rust)? In the page itself there's only an oneliner_bg.wasm file
The link to it is in the readme in the same directory: https://github.com/phqb/oneliner