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…
In plain words
This WebGL app reconstructs images using circles arranged to trace edges rather than replicate the original. The maker built it after exploring similar visualization techniques, ultimately developing a custom edge-detection approach in Rust and WebAssembly to overcome limitations in existing vectorization tools. The app is for anyone interested in experimental image rendering and geometric art.
written from the facts on this page · September 2026
From the sources
In the maker’s words, at launch
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/
More life & fun this month
the category →- TL
Life & fun · 10d ago · louisabraham.github.io
Photosynthesis fires two of your iPhone
Life & fun · 28d ago · photosynthesis.camera
SoloUno▲310Take control of hair pulling, nail biting & skin picking
Life & fun · 28d ago · solouno.io
Scroll through all 43,252,003,274,489,856,000 reachable Rubik's Cube permutations.
Life & fun · 26d ago · everycube.alen.is
Hi HN, I built Eigendrum, a web tool that solves the 2D wave equation for arbitrary shapes so you can hear what they sound like as drums. How it works: * Solves -∇²u = λu using finite element analysis (Kφ = λMφ) on a triangle mesh. * Validated to <0.1% error against closed-form solutions for circles (Bessel zeros) and rectangles. * Sound model factors in strike location, Rayleigh damping, and mallet width. * Includes Kac drums I & II to demonstrate identical sound spectra from different geometries. * No frameworks, build steps, or dependencies. Repo and tests:…
Life & fun · 27d ago · baselashraf81.github.io
Launched alongside, March 2022
the whole month →- IM
Hi HN! I made many small web games in the past with Unity or Phaser. But this time I wanted to make something completely on my own. So I coded a basic game framework in plain JavaScript, and used it to make Almost Pong. This was a really fun project that taught me a lot about JavaScript, and I plan to make more minimalist games with this framework. Interesting fact: Almost Pong doesn't load any assets, all sprites and sounds are generated with code. Happy to answer questions, and please let me know if you have any feedback on the game. Thanks!
Dev tools · 2022 · lessmilk.com
- IM
Life & fun · 2022 · networksfromscratch.com
- HA
Paste the following into the console of any HN page - for annotated avatars on all HN comments. (self contained code) for(u of document.querySelectorAll('.hnuser'))for(u.prepend(c=document.createElement('canvas')),x=c.getContext('2d'),c.width=18,c.height=14,s=u.innerText,r=1,i=28+s.length;i--;i>>29>X*X/3+Y/2&&x.fillRect(6+2*X,2*Y,2,2)&x.fillRect(6-2*X,2*Y,2,2):r+=s.charCodeAt(i-28,x.fillStyle='#'+(r>>8&0xFFFFFF).toString(16)))r^=r>>17,r^=r>2
Dev tools · 2022
- AG
Life & fun · 2022 · backofyourhand.com