Drawing mandala with JS + canvas

tl;dr I found this neat video and created pure js/canvas implementation of it in in 150 lines of code.

Cick here for interactive demo.

Couple of days ago, while browsing the Internet I came upon this video (which since then went viral)

Even though it says “Microsoft” in the title, its actually iPad and the app in name is Amaziograph, you can see the full video in action here:

Sometimes, you see things like that, and although they look complicated, you somehow “know” they are not, and that there must be some simple trick to it 🙂

So, I started to wonder, how long will it take me to write minimalistic replica of this, surprisingly it was quite easy, i created empty canvas, divided it into 24 “slices” for to make drawing easier, and took the easiest way possible: just rotate everything 24 times.

It worked surprisingly well, after a minutes I was able to draw shapes:

Few iterations later, i added some colors too, and that was it.

It was nothing compared to the original, but I was drawing using my touchpad 😉

The code for the whole thing is quite small, 150 lines of Javascript (if we ignore html for UI elements)

View the code on Gist.

For the whole thing go to the demo page and view the page source.

You can see full demo here:

Click for DEMO

Author: Dragan Bajcic

Twitter: @kodisha

UPDATE:

Some additional pictures I made after drawing with mouse instead of touchpad

Discuss elsewhere:

Reddit | Hackernews