Title | : | Matrix Rain Experiments in JavaScript (tutorial) |
Duration | : | 24:51 |
Viewed | : | 51,596 |
Published | : | 10-12-2021 |
Source | : | Youtube |
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 https://youtu.be/PFmuCDHHpwk ๐ JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour https://youtu.be/W6NZfCO5SIk ๐ JavaScript: Understanding the Weird Parts - The First 3.5 Hours https://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
Learn Creative Coding: Fractals 54:57 - 49,995 |
HTML Canvas DEEP DIVE 49:43 - 94,720 |
Why is this number everywhere? 23:51 - 1,479,787 |
HTML5 Canvas CRASH COURSE for Beginners 51:26 - 203,348 |
ASCII Art with Vanilla JavaScript 41:25 - 47,721 |
Build this JS calculator in 15 minutes! ๐ฉ 15:20 - 226,747 |
Learn Creative Coding: Image Effects 39:10 - 10,940 |
Build 8 Creative Coding Projects (vanilla JavaS... 53:24 - 8,482 |