Even if you haven't seen [The Matrix (1999)](https://www.imdb.com/title/tt0133093/) you've surely at least heard of it. The simulation, Neo, Morpheus. The decision to take the blue pill: the story ends and you wake up in your bed and believe whatever you want. Or the red pill: you stay in wonderland and learn how deep the rabbit hole goes :rabbit: ## Webpage I remade The Matrix's rain animation using basic `HTML 5`, `CSS`, and `JavaScript` back in `2016` between the hours of `2:37 AM` and `3:40 AM`. The source code and evidence of when I wrote it (or at least pushed it) can be found on [my GitHub here](https://github.com/mic-max/matrix.js). I was fairly new to JavaScript at the time and most of my webpages were either static HTML or server rendered using a language such as PHP. Although it wasn't ## Code Deep Dive The animation is rendered to an HTML canvas element. The JavaScript code will update the canvas's contents every forever in a loop, sleeping `60 ms` between updates. The data is organized as an array of drops. There is a drop for every column of text wide the canvas is. For example, a `1920 x 1080` monitor would have `240` drops using an `8px` wide font. These will all be initialized with a starting row numbers. To make the animation start with random positions I set their row to anywhere between `-8` and `0` to begin. Each frame begins by rendering a `10%` opacity black rectangle over the entire screen, effectively fading out the text that was drawn several frames ago. Then it loops through all the drops and renders them in their column and current row. I am only using alphanumeric lowercase characters, but there's nothing preventing this alphabet from being modified. Finally, we move all drops down a row and reset any move any drops back to the top that fell out the bottom. ## Results This makes a nice simple animation that I think looks pretty cool for how simple the code is. I condensed the code from 3 files into a single file to simplify my website. ==TODO Make a gif or webp==  ==%% TODO insert html into this markdown page. %%== ==[Matrix HTML webpage](/assets/files/matrix.html)== ## Improvements Some fun ideas you could modify this animation to do is to make each drop more unique by each one having different colours, movement speed, use the font from the movie, allow the characters to overlap each other, have the rain drops be affected by the mouse position (similar to the infamous [particle.js](https://vincentgarreau.com/particles.js/)). Some of these changes will be easier to make than others, but what else are you going to spend your time on whilst being trapped in The Matrix. ## Conclusion I think I might have to rewatch The Matrix now. The scene I remember most vividly was when [Neo wakes up at his computer desk with music playing and all types of programs running on his monitor](https://youtu.be/8wU8k2kDaTo). Such an exciting and glamorous snippet of what being a hackerman in the `90's` must have felt like and it gives me a surge of adrenaline in the best kind of way. Other people might just see a dark and gloomy apartment filled with e-waste. It's fitting that here I am 8 years later at nearly `3 AM` publishing this.