Matrix Rain Experiments in JavaScript (tutorial)

Опубликовано: 04 Январь 2025
на канале: Franks laboratory

56,125

2.5k

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

🏆 CHALLENGE: Want to try your own experiments? Try to replace this.characters string with some of these Unicode symbols, mix symbols with letters, give them different colours, different font size...
https://unicode-table.com/en/

Recommended Udemy courses (get solid understanding of the basics and then use it to build projects):
☕ Object-oriented Programming in JavaScript (Mosh Hamedani) https://bit.ly/3f4Otu0
☕ JavaScript Basics for Beginners (Mosh Hamedani) https://bit.ly/32Tn5wq
☕ Modern JavaScript From The Beginning (Brad Traversy) https://bit.ly/3fWJgWk
☕ JavaScript: Understanding the Weird Parts https://bit.ly/2WVe0zn
☕ Modern HTML & CSS From The Beginning (Including Sass) https://bit.ly/2Ec6Cch
☕ Advanced CSS and Sass: Flexbox, Grid, Animations and More! https://bit.ly/3g0uqxT
☕ JavaScript: The Advanced Concepts (2021) https://bit.ly/2Uk6Wyk
☕ JavaScript - The Complete Guide 2021 (Beginner + Advanced) https://bit.ly/37Hlxqq
☕ The Complete JavaScript Course 2021: From Zero to Expert! https://bit.ly/3fXGwaZ
☕ 20 Web Projects With Vanilla JavaScript https://bit.ly/3anlCQR
☕ HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid https://bit.ly/3tu9ghD
☕ Modern HTML & CSS From The Beginning (Including Sass) https://bit.ly/2Ec6Cch
☕ Advanced CSS and Sass: Flexbox, Grid, Animations and More! https://bit.ly/3g0uqxT

Free good quality courses:
📚 Object-oriented Programming in JavaScript: Made Super Simple | Mosh    • Object-oriented Programming in JavaSc...
📚 JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour    • JavaScript Course for Beginners – You...
📚 JavaScript: Understanding the Weird Parts - The First 3.5 Hours    • JavaScript: Understanding the Weird P...

🎵 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