[HN Gopher] Show HN: I made a WebGL-based app that traces images... ___________________________________________________________________ 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 [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/ Author : phqb Score : 41 points Date : 2022-03-02 17:56 UTC (5 hours ago) (HTM) web link (phqb.github.io) (TXT) w3m dump (phqb.github.io) | Bieberfan2003 wrote: | Need UI sliders for animation speed, # of arrows, hiding arrows! | This is sick. | ch33zer wrote: | 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 | gus_massa wrote: | 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 wrote: | Very cool. I would suggest adding a default photo for folks who | don't want to / can't upload a photo. | nomel wrote: | It's local. There's no upload. You can also clone it and open | index.html. | hombre_fatal wrote: | 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. | croes wrote: | Nice | nomel wrote: | > The details of this step can be found in the source code. | | This beautiful phrase will drastically reduce my documentation | workload. | idrios wrote: | I really do love that the author's source code is unminified | and extremely readable. | nextaccountic wrote: | But where is the source for the wasm part (written in Rust)? In | the page itself there's only an oneliner_bg.wasm file ___________________________________________________________________ (page generated 2022-03-02 23:00 UTC)