https://github.com/rudxain/rgb-digital-rain

The Matrix "falling code/letter rain" animation but RGB. No more monochromatic green!
https://github.com/rudxain/rgb-digital-rain

animation canvas-api code-rain digital-rain falling-code html interactive jsdoc matrix-rain pwa rgb rygcbm the-matrix ts-check

Last synced: about 5 hours ago
JSON representation

The Matrix "falling code/letter rain" animation but RGB. No more monochromatic green!

• Host: GitHub
• URL: https://github.com/rudxain/rgb-digital-rain
• Owner: Rudxain
• License: agpl-3.0
• Created: 2022-02-16T19:13:18.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-07-17T03:26:32.000Z (4 months ago)
• Last Synced: 2024-07-18T04:41:51.398Z (4 months ago)
• Topics: animation, canvas-api, code-rain, digital-rain, falling-code, html, interactive, jsdoc, matrix-rain, pwa, rgb, rygcbm, the-matrix, ts-check
• Language: JavaScript
• Homepage: https://rudxain.github.io/RGB-digital-rain/
• Size: 3.27 MB
• Stars: 14
• Watchers: 2
• Forks: 3
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# RGB-DR







## ▶️Demo

![](res/demo.png)

## ⚙️Features

- ⚡️Real-time auto 🔆light/🌙dark theme switching, with _transitioning_ ✨️

- 👆Interactive: droplet spawning on 🖱click/touch

- 💻Responsive: efficient resizing, and native full-screen resolution

## ℹUsage

You can [go to the website](https://Rudxain.github.io/RGB-digital-rain) (minified), or [⬇download](https://github.com/Rudxain/RGB-digital-rain/archive/refs/heads/main.zip) this branch (cutting-edge). If you downloaded the branch, then extract it, then open `src/index.html` on any 🌐browser.

## Naming?

If you don't believe me, the "official" name is ["Digital Rain"](https://en.wikipedia.org/wiki/Matrix_digital_rain), even though the standard-de-facto is "falling code".

## Why I did this

Everything started when a family member (I haven't asked permission to reveal their identity, yet) sent me a link to [this article](https://dev.to/gnsp/making-the-matrix-effect-in-javascript-din), 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](https://en.wikipedia.org/wiki/Visual_Studio_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](https://redtech.lk/file/2020/01/Omega_3.png), lol). I searched on the web to see if someone has done the exact same thing and only found [this video](https://youtu.be/CccQcYzsvI4), which is similar but not the *same* idea, because it has a limited color palette (update: found [this app](https://play.google.com/store/apps/details?id=com.screensavers_store.matrixlivewallpaper)). 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.

## ⭐Credits

0. Original source code by 👤Ganesh Prasad: https://codepen.io/gnsp/pen/vYBQZJm

1. My family member for sending me the article.

2. Inspiration by RGB PC setups like [this one](https://reddit.com/r/pcmasterrace/comments/rhzb6i/i_built_an_rgb_side_panel_with_the_matrix_digital) which looks similar to my animation.