The matrix has you
Posted on 2nd February 2020
It's day 33 of #100DaysOfGatsby and I've decided to put down my tools and stop working on my latest experiment before I go crazy and leave this regular blogging lark in complete abandonment - I missed Friday and Saturday's posts due to being busy, I didn't want to make it three in a row.
So, what did I make this time? The page title or stock image featured above may give you some clue. You can find it on my experiments page under the section "Matrix code rain". It's a work-in-progress component that has broken the layout of that page, it's an attempt to recreate the falling code sequence from the movie "The Matrix".
The original effect was so cool, inspired by Ghost in the Shell and recreated many times. I figured it wouldn't be so hard to do it myself. Well, that was my first mistake. I started it off as a small 800x600 element, and slowly built up and tore down components, logic and styles, hooks and effects, as slowly I figured out exactly what it is that made it work and how to do this in React.
Having a browser tab open with a looped video of the original effect from the film, as well as various 90's electronica to keep me in the right mood I worked on this until I've made enough progress that I don't mind showing it off. It's not finished, I have a to-do list of features/enhancement as well as a long list of code bugs from ES Lint, but those will be things to do another day.
So, head over to my experiments page and hover your mouse over the top-left of the code, you'll see a button appear to make the effect fullscreen. Click that, let it run for a while and wait for your operator to direct you to an exit (or take the red pill and press F11).
Enjoyed this post? Feel free to share it with your audience using the links below:
Don't see your favourite social network on the list? Feel free to let me know and I'll get it added.