Have you seen polyrthmics animation before? If not check this video first.
Once I had tried to wet my feet with Canvas API but that did not work, and I did not try.
But looking at this detailed explanation, I felt it doable and would love to see it running.
So I went through a lot of steps and concepts, with the reference code modified a lot it was difficul to verify if I had missed some minor detail.
Finally after spending around half a day of working on it, I soon had a working version and the understanding of how it worked.
It was a lot of fun working on and learning these concepts. Most of what we see out there are made with some abstract framework, but
I thought of capturing a 20 minute video of this and uploading to YouTube just to share with the others.
In kind of a couple of days, it had crossed 1000 views and a lot of engagement via comments - a viral video from my standards where the 2nd one has 80 views in a month and uploaded a couple of months ago.
I never expected a lot of engagement, hence I did not even add any detail or explanation about what the video was.
A lot of people were confused, that I had to create another video with a proper intro and explanation.
The source code is linked below, as well as proper attribution given to Hyperplexed here as well as in the YouTube videos.
- Video from Hyperplexed
- Source Code
- Try it