[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)