Skip to content

Implementation of the Marching Squares algorithm in javascript for Html5 Canvas

License

Notifications You must be signed in to change notification settings

sakri/MarchingSquaresJS

Repository files navigation

Optimized implementation of the Marching Squares algorithm in Javascript

canvas

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.

Original README

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:https://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.

http:https://htmlpreview.github.io/?https://github.com/sakri/MarchingSquaresJS/blob/master/marchingSquaresTest.html

Here's a few codepen demos using it:

A visualization of the algo as it executes http:https://codepen.io/sakri/full/aIirl

Text Edge Flare http:https://codepen.io/sakri/full/vIKJp

Ghost text http:https://codepen.io/sakri/full/zbqti

He-Man effect http:https://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:https://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!

About

Implementation of the Marching Squares algorithm in javascript for Html5 Canvas

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages