Optimized implementation of the Marching Squares algorithm in Javascript
Computation times for 20 iterations:
| old | new | optimized | |
|---|---|---|---|
| time in ms | 3876 | 443 | 20 |
| time in % | 873 | 100 | 4 |
The optimized version is approximately 217 times faster than the "old version" and 24 times faster than the "new version" implemented by sakri.
ES2015 features like TypedArrays, const and local scoping are used to gain this speed up.
Test it yourself with this online benchmark / demo.
Marching squares outlines blobs of non-transparent pixels inside a bitmap.
This is a straight forward port from this excellent implementation by Phill Spiess:
http://devblog.phillipspiess.com/2010/02/23/better-know-an-algorithm-1-marching-squares/
This is a Javascript implementation designed to be used with Html5 Canvas.
Check out the code in marchingSquaresTest.html for usage example.
Here's a few codepen demos using it:
A visualization of the algo as it executes http://codepen.io/sakri/full/aIirl
Text Edge Flare http://codepen.io/sakri/full/vIKJp
Ghost text http://codepen.io/sakri/full/zbqti
He-Man effect http://codepen.io/sakri/full/wsiLC
Here's a demo that tackles "blobs with holes" as in getting the outline for characters such as "O" "8" "&" etc. http://codepen.io/sakri/pen/LCrDe
If there is interest, I can include the required code in this repo (floodFill, basic threshold etc.)
Have a good day!