Matrix Rain Experiments in JavaScript (tutorial)
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- 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 • Object-oriented Progra...
📚 JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour • JavaScript Tutorial fo...
📚 JavaScript: Understanding the Weird Parts - The First 3.5 Hours • JavaScript: Understand...
🎵 Music: (TH-cam 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
![เบิ้ล ปทุมราช - อ้ายกินดอง น้องลาบงัว ft. สแน็ก อัจฉรีย์ [OFFICIAL MV]](http://i.ytimg.com/vi/-OK--KaSPcI/mqdefault.jpg)
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!
Hi, I decided to go with canvas because I wanted to play with colours and gradients and wanted to talk about object-oriented programming. Would be interesting to build something similar with just CSS, hmm, I should do that as well. Thank you for taking the time to leave a comment
@@Frankslaboratory can you make it look green
@@Frankslaboratory do more videos
@@masternobody1896 are you mentally retarted?
What a great explanation of every single detail of code and so smooth and simple implementation. Excellent work man , wish you all the best!
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!
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!
Hi Frank. Nice to hear feedback like this. Its my goal to start from scratch every time and make sure everything is understood. No hidden magic from a library. Glad to see someone notice and appreciate that. I will keep doing tutorials this way. Also nice to see even such an experienced developer like you is interested in my creative coding content ❤
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.
I missed this comment, thank you for your kind feedback, much appreciated ! :)
I just found your channel like yesterday, you're so good at teaching things, detail by detail. Thank your for your time doing this.
i love this. you explain so well even the little things that could get us in trouble, thank you so much!
Thank you Fran, I love getting feedback like this :D I'm trying some new teaching techniques to see which ones make it easier for people to learn, thank you for taking the time to give me your feedback
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!
Hi Josué, nice to meet you, thank you for letting me know you found some value in my course! :)
This sort of training is simply the benchmark of what a good coding tutorial should be.
Rating 10/10.
Thank you, very kind, I appreciate your feedback!
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!
+1. I got amazed by how cool the radial gradient looks, amazing tutorial
Hi Alexander, I don't see radial gradient used very often so this project was an ideal time to show it off! :D
Do you want to experiment? Try the code with different symbols:
アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ
♔♕♖♗♘♙CHESS♚♛♜♝♞♟
☀☁❆WEATHER❅❄
♪MUSIC♫
Is there a way to do everything the same as you, except that there is a limited set of characters, say "ABC" and nothing more?
@@doloressverko9887 Hi Dolores, yes, you can set this.characters to any number of specific Unicode characters you want, some examples in the pinned comment
Production of this video is so juicy, thank you very much for real time showcase of what's happening on the site
Really? I need to focus on making my production like this every time then ! :D
Plus I started following a full js course….but watching what you did here made me realize that I understand and know more than I think I do. Thanks again for putting me back on track. Somehow I always think I dont know enough but I think thats the curse of a programmer.
Hope you manage to stay motivated Elvira, when you reach a certain point, making projects becomes much easier so it feels less like hard work
this is so awesome ❤️❤️❤️
I saw that effect (as an image) on the news about hackers
Hi Cristian. Yea it's a famous visual. The old Ghost in the Shell movie probably did it first before Matrix but I prefer this version
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;"
Great tip, thank you for sharing, I like comments like this
Can't leave without hitting a like button and a comment.
Good work dude, it's amazing
Thank you for your kind feedback :)
Excellent tutorial. Finally learned to create radial gradients in canvas. Thank you for reading the documentation for us 😊.
That's what I'm here for :)
This is one of the greatest coding tutorials I've ever watched...
Thank you Caip!
+1 for sure. I was shouting(by myself lol) wow and wow. Something I was searching for. Thank you so much for the inspiration and the teaching
Hi Elvira, glad you found some value, nice to see you here again
I always wanted to create this effect, thank you for making my wish come true! this was fun
Hi Chris, glad to hear, I really like this effect
Even not realising it Frank, making Symbol and Effect classes share canvasHeight property was an epic hack by you!!! 😍
Congratulations 🎊
Hi, thank you. It's important not to pull global variables directly into classes, so I'm converting global variable into a class property. I'm trying to use good practices :D
It is a good idea to release this video before new Matrix movie. Very helpful and fun :)
This is the first time you comment on my video 😄 yea watching trailer for the new Matrix movie gave me idea to do this project
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.
Hi Joseph, good luck with your game. I'm working on a 2D side scroller tutorial now, been a while since I made a game dev video.
Loving your tutorials. Thanks so much.
Glad you found some value!
this channel expensive than gold even, bro thank u
Sir you're just awesome, explanation of opp with REAL world code is the way to go. Thank you for sharing your knowledge.
Hi Gualdim, glad you found some value
This an extraordinary work 🔥
Thank you Mohamud, glad you like my coding experiments😃🙏
very nice tutorial, I took Russian Azbukha for symbols and fillstyle red :D, the original version looks amazing and I wanted to experiment with lineargradient and with couple of colour options, this is an amazing tutorial, thank you..
Nice, sounds like you found a way to customize the effect, congratulations on completing the project
I know it's going to be an epic video, so I am commenting first before watching.
Hi Isaiah, you have a lot of trust in me :D Hope I can deliver :D
You're insane. Love your tutorials
Hi Suleiman, thank you, glad you found some value ! :)
amazing work professor
Interesting effect!! Good explanation of OOP.
Nice, master coder approves. Thank you Evaristo, I learned a lot of these from you 🙏😀
This video its awesome! ...thanks a lot for sharing this knowledge!!!
I'm here to help :)
Thank you for posting this Frank.
I'm here to help! :)
Excellent, as always.
Thanks Dave 😀🙏
+1, thanks Frank!
Wow! It's a really cool tutorial
Thank you professor calculus
Really great idea to use the gradients!
+1 for giving me new ideas :-)
Thanks Radu, I was going though canvas docs recently and there are some methods I never use, createRadialGradient was one of them.
@@Frankslaboratory I used it in my torch effect (probably)
If the "ghosting" was driving you nuts like it was for me. I solved it by adding a solid square. Code below.
By the way, Frank thank you so much for this video!
I've spent a few hours just learning all I can.
In the draw(context) method add these lines
context.fillStyle = 'black';
context.fillRect((this.x * this.fontSize) - this.fontSize / 2, (this.y * this.fontSize) - this.fontSize / 2 - 750, this.fontSize, this.fontSize);
however, you will need to keep (or add) these two lines
context.fillStyle = 'white'; // Controls font color
context.fillText(this.text, this.x * this.fontSize, this.y * this.fontSize);
This was extremely helpful, thank you! Do you know how to get the strings to start randomly at the top when, instead of all pouring down at once for the first repetition?
@@ManallLockhart Someone shared it in the comments, but you need to change the y argument in the #initialize function to this.canvasHeight/Math.random()
#initialize(){
for(let i=0; i < this.columns; i++){
this.symbols[i] = new Symbol(i, this.canvasHeight/Math.random(), this.fontSize, this.canvasHeight);
}
}
Thanks for sharing @jovan781
Amazing and funny I Love it :3
Frank you are a master! Man you are good!
Benjamin! Thank you 🙏
Awsome! haha i love this :D
Glad you like it Michiel
Very gooooooooood
This is awesome!!
I followed the video and created a component in react(Typescript). It was really fun.
Thanks.
Could you please also make a video adding interactivity to this?
can you make tutorial to show how it is done or able to share source code bro ?
Thank you so much!!
Hi Federico, I'm here to help
Best videos . thank you frank!
Thank you Snoopy 🙏
thank you very much you are the best
Con-struc-tor con constructure 😅 The columns in the Matrix fall at different speeds.
They probably had an array per character column. That is at least how I did it in C++ 25 years ago. And I painfully recreated the characters. First and last time I made a TTF on Intel. And the first char was bright (full value).
In the presence of extraordinary content, consciousness takes the place of imagination.
Jorge, I had to read it twice to understand what you are saying :)
Thank you sir
Super! это то, что мне нужно было:)
Hi Anton, glad you find my coding experiments useful :D
very cool🔥🔥.
This is soooo cool
I love Martix rain effct, it's one of my favourites and quite simple to make
I asked you this once about a year ago, I think this is for me, really like how you teach,Thank you so much!
I want to learn from you from the beginning, do you have courses?
You amaze me.
Hi Turbo, good to know you like this :D
Thank you again for this amazing video. I'm a teacher and I want to build games and eductional web apps for my students. I really appreciate your help.
Nice, I think making visual projects like this will be more fun for your students, at least for me it was when I was learning to code.
Thank you Frank, + 1
I have been trying so hard to make this on blender. Didn't knew that this could be done on JavaScript.
I wouldn't know where to start in Blender, JavaScript is a programming language, it can do any effect you have ever seen, some just take more code, some take less, this particular effect can be written in only 13 lines of code with modern JavaScript :D
An amazing channel.
Thank you!
you are amazing. thanks
Thank you Carlos ❤
Another great vid thanks! :D
edit: I'm confused about line 54: this.#initialize();
should that be: this.#initializer(); or am I missing something?
edit 2: got this working with the cat head emojis and it made my day! 😹 😻
This and pixel manipulation mixed omg. Thank you
Hmm, thanks for an idea, haha, I will do it :D
I will combine them into one effect :D
@@Frankslaboratory I tried to do but I failed. Thanks for this and for share your knowledge
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)
}
}
Hey Frank, really a great tutorial. Really very well explained - great job.
Unfortunately, resizing didn't work for me. After watching and comparing 10 times I gave up. and rewrote the code as follows.
I got rid of the resize method, changed the instance of Effect from const to let and created a new instance of Effect in the event method and gave it the new window width and height. Works great.
let effect = new Effect(canvas.width, canvas.height);
window.addEventListener('resize', function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
effect = new Effect(canvas.width, canvas.height);
});
big thanks
Great!
Thank you!
Knock, knock, Neo 🤩❄️
The Matrix has you ... 😁😆
@@Frankslaboratory 😂😂💥
Nice tutorial bro
Thank you 💪
hello sir, I saw your chennal a year ago when i was learning JavaScript . I lost my phone and account, Finally i found this same video again now. I won't forget the channel name this time 😉😁💐
Glad we found each other again :)
+1 that was fun!
Thanks for letting me know, glad you had fun! :)
@@Frankslaboratory cheers. There’s one little thing tho. Resizing the window does not recentre the gradient cuz it’s initialised at the top but copying the gradient set up into the event listener fixes it. Looking forward to the next one 👍
Hi Frank!, your videos are amazing! I would like to give you a topic of inspiration. Can you do futuristic sci-fi hud ui?
Hi Berk, I like the idea, I think I will start with UI for games, I will add this on my list
That's really cool, I'm currently stuck on mine as i'm only a lowly beginner and did it in a way more difficult way. Also can I ask what is that program you're using since I'm writing in notepad++
Hi, I'm using VS code editor, because it has the best intelisense and plugins I think.
+ONE!!
太棒了，厉害厉害，学习
Happy to hear, thank you :)
Are there any decent examples with functions of the matrix rain code, where I can actually change stuff, speed, size etc...
wonderful lucid explanation.. loved it. thank you so much. Is its possible to create CSS cards with this MAtrix rain in the background ?
Hi Anand, glad you found some value, thank you for letting me know. You can place animated canvas effects on any element, just align canvas over it with CSS, you can have multiple canvas elements on the page at the same time. At some point optimisation will become a challenge probably, depends on what exactly you want to achieve.
Frank great video. I was wondering if I could get your thoughts on a requestAnimationFrame question or maybe it is more about how to best set up an animation loop. In a previous video you called requestAnimationFrame inside of a class and passed a "this.animate.bind(this)" into the function. Is there any benefit to having a class that handles the animation loop and then calls an update(deltatime) and draw(ctx) function of different classes (like: Particle). Or should the animation loop stay outside of a class and kind of work inside a "main" function. Thanks again for putting together these great videos. You keep coding fun and interesting!
In most cases I think animation loop should stay outside of a class, unless you want to have multiple animation loops running independently, which might be needed to achieve specific effects and generative art patterns. If you want to have just one main animation loop, there is no need to have it inside a class. I was just experimenting in that video, I wouldn't do that normally.
best!
Dope!
Thanks Lionel
@@Frankslaboratory man each of your vids a great. Creations are cool and explanations very clear 👍
can you share a git for matrix green final version before starting to customize the colors and that circle thingy please
Make a graph tutorial please. It is needed. Bar and Line graph specifically. Please make one, you are amazing at canvas, it is hard to do tbh. I already finished mine but rather see your version. Lol.
Hi Jay, I never tried to build graphs with just JavaScript and canvas, at work we usually use tools like Power BI for data visualisations, but it's definitely an interesting topic and something I want to look into
quick questions how do you have the code and at you're right the result, second questopn my formater changes ' to ", does this make a different
Pretty nice really. nice voice nice way of explain it. a course series in your own plataform
Hi Ruben. Glad you like my course. I'm still learning how to be a better teacher
how do you get the website to appear at the right of your screen?
At 20:05 you’ll notice that your resize method is exactly the same as your constructor. To avoid code duplication you can just assign effect to a new instance of Effect in the event listener
One more thing, you'll notice that the first time the characters fall they are all in sync. This is because you initialize the Y to 0 in line 38. Instead if you change it to Math.random()*-50 then the first pass through will also be jagged.
Other than that, great work Frank! Love how creative these effects are
@@timhold2016 Hi Tim, thank you for the tips, you are right that the code is the same. I'm not sure what it would be like performance wise calling the new keyword on every tick of resize event. Will test. Y coordinate can be randomised indeed, it's more up to everyones creative taste, some people might like the initial wave. I should have mentioned this while recording. Thank you for taking the time to let me know your thoughts! Much appreciated
Really impressed with your JavaScript knowledge. How did you get to where you are now? Great work Frank!
Hi Johan, thank you, very kind. I just did a few complete well structured JavaScript courses for beginners to make sure I understand all basic JS concepts and then I started building my own projects, making them more complex as I improved my skills. I'm completely self taught from the internet :D
@@Frankslaboratory Awesome! What's one or two JavaScript courses you especially liked? What's something you wish you had done sooner?
Thanks for another cool lesson, I have one small question. Please tell me how to change the size of the characters?
The easiest way would be using canvas font property, ctx.font = '50px Helvetica' for example
Fantastic. I have one question - how do I make the start flow randomly at the top instead of them all pouring down in each column at once for the first repetition?
You can randomize the vertical position on the first page load, I see someone also answered this for you in another comment
Hi, How to random the typo like the intro of the video?
someone have the SFX of matrix's rain char to download plz ?
I don't under stand why drawing semi-transparent rect in each animation frame would result in the fading out effect.
Say you fillRect with opacity of 0.05 each time, why would the text in the latest frame is clear and it slowly blur out the text in the old frame. I hope my question makes sense. TIA
Hi>
The Matrix effect created by you is super cool, but I'm not good at Javascript and I added a navigation bar with links to the index page where I also have the Matrix effect, but the navigation bar with links doesn't appear, can you help me with what I have to do it, if I'm not asking too much. Thank you!
Hi, I assume the navigation bar is a separate element and you didn't somehow draw it on canvas. If it's separate element then you just need to position canvas and that navbar in relation to each other with CSS using positioning, z-index etc. It's a CSS problem, not JavaScript, if I understand you correctly.
How do I use this image as a background?
Woah, you know Kung Fu! 👓
Yea, just plugged the code for Kung Fu directly into my brain, it was written in JavaScript of course :D
Hey , I have got this all right ! thanks
But i gotta ask
Is there any way you could get the colors from an image ?
So the matrix characters would be drawing an actual image .
Please if you got any video explaining this let me know, Thanks !
I do that in a couple of videos but not with letters, just with particle shapes. I called the video image particle rain or something like that, it has two parts
Thank you Franks I followed your tutorial and it worked flawlessly. However, I would like to put a short white text statically overlaying the raining effect - wondering how would I achieve that? Thanks.
Hi Sonny. Well done on completing the project. There are many ways to do that. The best way is to use CSS and position some or element over canvas. If you want the text to have some kind of interactions with the animation you can also use ctx.fillText method and draw it on canvas.
@Franks laboratory yes i did it with the css method but it wasn't successful at first, text did not show up, changed from class to id and it worked! Also i tried z-index. I'm grateful for your expertise Franks. Can't wait to watch your new video.
How to use this code as background
could you make other kind of effects like laser light，lightning，explosion？
Hi. Yes I want to make all of these
The first iteration does not create the column effect, how can that be fixed?
Hi Stuart, sounds like a typo somewhere in your code, I can't help you without seeing your code.
Is Frank the One? Can he just... see code O_O;; Suspicions rising. This one looks like some fun. I'll tackle it tomorrow morning with some coffee! Thanks man!
I took a red pill :D Hope you have fun during your Saturday morning ritual :D
@@Frankslaboratory Morning Ritual: watch your vid. (Sometimes) Nighttime ritual: tribute. th-cam.com/video/-X4HSxnXXN4/w-d-xo.html
Hahaha. I think this one is your best. You are getting more and more creative. That was funny lol. You should do voice-overs for something 😄😁 glad to see that not only you finished it but also added extra features. It looks like you randomised colour for each column separately. Awesome 😎😎😎
@@Frankslaboratory These videos can be pretty fun to make. I've decided I don't want to make a TH-cam channel, but I wouldn't mind the occasional outlet of just making a video for fun. This led me to think about a collaboration idea between you and me. Concerning the topic it covers: Javascript and APIs. The story context around it could be a proper re-introduction of my 'joke' where I'm trying to be cooler than you, and this sparks a competition that I send your way. I'll make it funny. Then I'll have a game where you build a ship via API and then it runs through a level (it'll be simple). Then your viewers can build a ship via API and try to beat your score. It'll be something like a physics based game. If you are interested let me know and I'll hammer out more details. And seriously: absolutely no worries if you aren't interested.
Sure. Let's do it. Sounds like fun. I guess its better to discuss this on Twitter kr somewhere