You can go to the website to see the animation on (almost) any device, or ⬇download this branch as a .zip file. If you downloaded the zip, then extract it. Open src/index.html in your 🌐browser of choice (it also works on Chrome for Android!), and enjoy the real-time animation!
If you don't believe me, the "official" name is "Digital Rain", even though the standard-de-facto is "falling code".
Everything started when a family member (I haven't asked permission to reveal their identity, yet) sent me a link to this article, and I was interested in learning how it worked, because the code was so simple yet the result was so cool and complete! I also wanted to learn because I always wanted to make a canvas/image processing in some programming lang, specially if it involved animations.
I downloaded the source, started editing in VS-Code to make some minor improvements, and realized I could update the font color for each individual char being displayed, so I decided to implement the feature using a color table sorted like a 🌈rainbow (like those RGB gaming PC setups, lol). I searched on the web to see if someone has done the exact same thing and only found this video, which is similar but not the same idea, because it has a limited color palette. So I decided to post my little project on GH for anyone to see and give me feedback.
Later I realized GH allowed anyone to create web{page/site}s, so I started setting everything up, while also breaking my head trying to understand exactly what I had to do, lol. Some parts of the docs said I had to install 3 different packages, other parts told me to do other things. But in the end I realized it was much simpler than I thought.
- Original source code by 👤Ganesh Prasad: https://codepen.io/gnsp/pen/vYBQZJm
- My family member for sending me the article.
- Inspiration by RGB PC setups like this one which looks similar to my animation.