Matrix Rain Experiments in JavaScript (tutorial)

Hi creative coding hackers, do you like retro effects? How about this iconic Unicode rain effect from Matrix movies. It's time to dive deep into the code and have a closer look at object-oriented programming principles in action. Practice makes perfect and every project you create brings you one step closer to becoming Neo of HTML, CSS and JavaScript :D Come and learn new creative coding techniques with me and one day, you will be be the one who bends the rules of code. What's it gonna be, blue pill and play it safe, or red pill to see how deep the rabbit hole of JavaScript goes? :D Have fun! 🐇

Symbols I used in this tutorial:
アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ
♔♕♖♗♘♙CHESS♚♛♜♝♞♟
☀☁❆WEATHER❅❄
♪MUSIC♫

⭐️Tutorial Contents ⭐️
00:00 Matrix rain effect in JavaScript
00:28 HTML5 canvas gradients
01:03 HTML5, CSS3 and HTML canvas setup
01:40 Procedural vs Object-oriented programming
02:00 ES6 Classes explained
02:22 Encapsulation
03:17 JavaScript class constructors explained
03:51 Effect class
04:58 Abstraction
06:21 Symbol class
11:00 Animation loop
14:26 How to control FPS with timestamps and delta time
19:04 How to make HTML canvas effects responsive
20:54 createLinearGradient() explained
22:43 createRadialGradient() explained

Recommended Udemy courses (get solid understanding of the basics and then use it to build projects):

Free good quality courses:

🎵 Music: (YouTube audio library) Dance of the U-boat - Aakash Gandhi
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory

[quickcodingtuts]

I remember creating a matrix effect without canvas, thinking it was something awesome. But this is a whole other level of creativity. Outstanding work man. You make coding so much fun!

[Frankslaboratory]

Do you want to experiment? Try the code with different symbols:

♔♕♖♗♘♙CHESS♚♛♜♝♞♟
☀☁❆WEATHER❅❄
♪MUSIC♫

[config]

This sort of training is simply the benchmark of what a good coding tutorial should be.
Rating 10/10.

[Tukyo]

absolutely incredible tutorial

TIP: If you have a background behind your rain that you want visible, you can add this styling in the CSS to the canvas element: "mix-blend-mode: screen;"

[frankw]

Just recently found your excellent channel. I love that these tutorials start from the ground up. There is nothing hidden in third-party libraries. I've been a developer for 25+ years and doing these are so much fun. Thanks much!

[graydhd]

Okay I've been on a tear learning js/css/html, just a few months ago I'd have totally overwhelmed by this. I hate typing code from a tutorial without actually understanding what every single thing I type means/does. Only 5 minutes in and I feel I'm starting to find a flow state when typing sometimes. Like, I understand what and why the characters I'm typing all are now! And the syntax and all that jazz. This vid so far has been an awesome recap of what I've learned and brought up a few important things I had forgotten about! This feels like my first "real" project, as in something kinda cool that isn't a lame to do list or something lol. Something I'll be proud to show someone "look at this cool thing I made!" I of course will be adapting it into my own thing once I've completed this video. I'll consider that my starting point from a creative standpoint!

[rupturedrhombus]

Frank it amazes me that you still find time to do all these amazing in depth tutorials with your job and other life activities. I appreciate everything you do, thanks for always sharing.

[CristianAlexandruRadu]

this is so awesome ❤️❤️❤️
I saw that effect (as an image) on the news about hackers

[zbajro]

What a great explanation of every single detail of code and so smooth and simple implementation. Excellent work man, wish you all the best!

[KENNY-smmp]

I just found your channel like yesterday, you're so good at teaching things, detail by detail. Thank your for your time doing this.

[caipyear]

This is one of the greatest coding tutorials I've ever watched...

[josephcieplak]

Your skills do not stop to amaze me. I'm building a game on html5 canvas which all the knowledge I've been getting from you. it's a 2d game built on canvas.

[josuealexandericujac]

Wow, I really like how you teach, unlike other programming tutorials where you only watch how a person code, while you are not doing anything. You can teach us how to code a really interesting project and keep it simple for beginner like me to understand it. Thank you so much!

[fransiskus]

i love this. you explain so well even the little things that could get us in trouble, thank you so much!

[axbenitez]

+1. I got amazed by how cool the radial gradient looks, amazing tutorial

[zoranmitrovic]

for a smooth start, i liked initializing the effect this way:
#initialize() {
for (let i = 0; i < this.columns; i++) {
this.symbols[i] = new Symbol(i, this.canvasHeight / Math.random(), this.fontSize, this.canvasHeight)
}
}

[mirjalol_shamsiddinov]

this channel expensive than gold even, bro thank u

[sungvin]

Production of this video is so juicy, thank you very much for real time showcase of what's happening on the site

[LucasPaiva]

This is right there with the best explanations of programming fundamentals, and on top of that, using a really cool example project. Nicely done, mate!

[emausdetiquicia]

Excellent tutorial. Finally learned to create radial gradients in canvas. Thank you for reading the documentation for us 😊.