Uploaded December 2021 | Updated September 2026, 1 week ago
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...
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) bit.ly/3f4Otu0
โ JavaScript Basics for Beginners (Mosh Hamedani) bit.ly/32Tn5wq
โ Modern JavaScript From The Beginning (Brad Traversy) bit.ly/3fWJgWk
โ JavaScript: Understanding the Weird Parts bit.ly/2WVe0zn
โ Modern HTML & CSS From The Beginning (Including Sass) bit.ly/2Ec6Cch
โ Advanced CSS and Sass: Flexbox, Grid, Animations and More! bit.ly/3g0uqxT
โ JavaScript: The Advanced Concepts (2021) bit.ly/2Uk6Wyk
โ JavaScript - The Complete Guide 2021 (Beginner + Advanced) bit.ly/37Hlxqq
โ The Complete JavaScript Course 2021: From Zero to Expert! bit.ly/3fXGwaZ
โ 20 Web Projects With Vanilla JavaScript bit.ly/3anlCQR
โ HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid bit.ly/3tu9ghD
โ Modern HTML & CSS From The Beginning (Including Sass) bit.ly/2Ec6Cch
โ Advanced CSS and Sass: Flexbox, Grid, Animations and More! bit.ly/3g0uqxT
Free good quality courses:
๐ Object-oriented Programming in JavaScript: Made Super Simple | Mosh youtu.be/PFmuCDHHpwk
๐ JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour youtu.be/W6NZfCO5SIk
๐ JavaScript: Understanding the Weird Parts - The First 3.5 Hours youtu.be/Bv_5Zv5c-Ts
๐ต 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
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...
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) bit.ly/3f4Otu0
โ JavaScript Basics for Beginners (Mosh Hamedani) bit.ly/32Tn5wq
โ Modern JavaScript From The Beginning (Brad Traversy) bit.ly/3fWJgWk
โ JavaScript: Understanding the Weird Parts bit.ly/2WVe0zn
โ Modern HTML & CSS From The Beginning (Including Sass) bit.ly/2Ec6Cch
โ Advanced CSS and Sass: Flexbox, Grid, Animations and More! bit.ly/3g0uqxT
โ JavaScript: The Advanced Concepts (2021) bit.ly/2Uk6Wyk
โ JavaScript - The Complete Guide 2021 (Beginner + Advanced) bit.ly/37Hlxqq
โ The Complete JavaScript Course 2021: From Zero to Expert! bit.ly/3fXGwaZ
โ 20 Web Projects With Vanilla JavaScript bit.ly/3anlCQR
โ HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid bit.ly/3tu9ghD
โ Modern HTML & CSS From The Beginning (Including Sass) bit.ly/2Ec6Cch
โ Advanced CSS and Sass: Flexbox, Grid, Animations and More! bit.ly/3g0uqxT
Free good quality courses:
๐ Object-oriented Programming in JavaScript: Made Super Simple | Mosh youtu.be/PFmuCDHHpwk
๐ JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour youtu.be/W6NZfCO5SIk
๐ JavaScript: Understanding the Weird Parts - The First 3.5 Hours youtu.be/Bv_5Zv5c-Ts
๐ต 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
