Vanilla JavaScript Pixel Rain Tutorial

[@OnlineTutorialsYT]

Wow... Next Level bro

[@Frankslaboratory]

Thanks bro, means a lot coming from an experienced coder like you! Happy New Year!! :)

[@olygood]

@@Frankslaboratory and Online Tutorials in the same place as happiness

[@Frankslaboratory]

@@olygood I watch all his videos, Online Tutorials is one of my favourite learning resources.

[@DeepakMeena-uj9fs]

you are also in the next level league bro...

[@Marcusbrincat]

Been kind of stuck in the grind of working as a developer just solving business problems. This channel is rekindling my love of getting creative with code not for work but for myself. Thanks, this is an awesome channel.

[@Frankslaboratory]

Hi Marcus, nice to meet you. Thank you for taking the time to let me know, reading this feedback makes me happy. There are so many cool things we can do with code, glad to see someone appreciates that

[@Endrit719]

agree

[@laurentsoria1528]

So do I

[@Frankslaboratory]

In PART 2 I turn the final effect into 'Pixel fire', 'Pixel rainbow' and many other effects kzbin.info/www/bejne/rWOQYZWEi9WNi9U Click the LIKE please if you like this project :)

[@tarun7617]

Resolution for 2021 : post a ton of projects on codepen ... And give them nice name .... Make ton of 2d games and finish a big project => a big game with three.js and make it fun to play , learn about multiplayer , and watch all the videos from Frank's laboratory , and keep pushing my limit to learn more stuff from JavaScript

[@piersonlippard2911]

Happy New Year Frank, I hope 2021 brings you plenty of good health, great wealth and an abundance of happiness throughout the year. I am really looking forward to continuing my JavaScript studies with your fantastic tutorials.

[@Frankslaboratory]

@@tarun7617 your 2021 sounds like a lot of fun Tarun, will you put your three.js game on codepen as well? I'm working on simple tower defense game for next tutorial, just to cover the basics, not sure how far I'll get with it, wrote some code for it today

[@Frankslaboratory]

@@piersonlippard2911 Thank you so much Pierson, same to you, all the best in 2021, always nice to see your comment, looking forward to see what new year brings to us :)

[@JM-de2gh]

Another tribute: kzbin.info/www/bejne/Z6nbqXSor9Wporc Thanks for the great content!

[@JM-de2gh]

Timestamps: 0:00 - Cool particle effects 1:03 - Frank drinks coffee, takes off his jacket, and realizes you're there 1:14 - Frank notices the desperate emptiness in your soul - specifically, your not knowing how he did this particle effect. He feels some compassion [...end] - Frank proceeds to teach you the cool particle effect. Your previous video doing a similar particle effect was already cool, but this is very nicely polished. Inspired! I'm gonna get to work hard and fast this morning. Thanks Frank!

[@Frankslaboratory]

Lol, I see different initials, but my first guess is that this is Jon :D Hahahaha your commentary lol, have you ever thought about doing stand-up comedy? :D I teased this effect for too long, it was time to fill that emptiness and give people what they wanted ha. Hope you had great end of 2020, happy New Year to you and all the best in 2020 😍

[@JM-de2gh]

@@Frankslaboratory You got it. I made a lot of these accounts when I was young and used my real name and such -- for over a decade I have slowly been undoing that, lol. I'm gonna change it once more cause I'm moving my accounts over to a final 'fake' name that I hope to build some 'fame' with. (I guess like some book authors do). Yes, some have told me to consider stand-up comedy. I have knocked multiple people to the floor laughing. I made you another tribute: kzbin.info/www/bejne/Z6nbqXSor9Wporc Enjoy.

[@Frankslaboratory]

@@JM-de2gh I should also maybe start being more anonymous, maybe I'll make a faceless channel eventually and keep this one just as a hobby. LOL that video, ahahaha, I spilled my coffee while watching that. I love your tribute videos :D I'm getting Sith vibes from that picture. Are you considering doing entertainment channel or something coding related?

[@JM-de2gh]

I've noticed I get a lot of burst energy when I decide to make you a tribute video. Glad you liked it. Concerning animosity, I feel you have a charismatic presence so in your case faceless doesn't sound right. If I was a content creator, it would surely be mixed with nonsensical silliness, and I feel my content would be better served being faceless -- it creates a certain kind of feel for the channel. There are several channels on KZbin that I just liked NOT knowing what the face looked like behind the voice. Don't know why. If I made a channel, it would be about programming -- very close to what you are doing. I might make some sub-series like to-the-point tutorials that just go over one basic ES6 JavaScript principle in 2min (no jokes, no distractions). Mainly I would want to help people overcome the natural tendency to perfectionism and just accomplish something. I feel your channel does this well, btw. It feels good to finish something, even if it's not 'perfect' or even if it doesn't have a 'point'. The more simple things I accomplish, the more confident and inspired I get to complete bigger things. Anyway, I don't think I can match your quality productions as I've noticed you do lighting, camera, mic, and pacing really well; but I've definitely learned a thing or two by watching your vids.

[@Frankslaboratory]

You come across as someone who has a lot of energy all the time ha. Being faceless has some advantages, but I feel like people started responding to my videos in a more personal way after I showed what I look like. It also depends on type of content and many other things, I'm thinking about making a secondary channel about science where I will just present stories without showing myself. One of the things I like about creative coding is rapid prototyping. It doesn't take long to make something visually interesting that feels at least partially complete. I think it also fits well with coding challenges like 100 days of code, I have people sending me emails with what they did with my tutorials, just like you just did. I love these, thinking about making a video about creative projects people made with help from my tutorials. I think you will be much more natural delivering information to people, for me it was and still is long and hard process to speak English and be on camera :D Looking forward to your future projects :D

[@benjamin_kang]

You’re going to accumulate subscribers in no time. Love your content, please keep it up sir!

[@Frankslaboratory]

Hi Ben, thank you so much, this channel has grown a lot in 2020, let's see what happens in 2021 :)

[@djudsod959]

I completed your flappy bird tutorial. Please keep making more vanilla JavaScript. I hate using Libraries.

[@Frankslaboratory]

I do everything with vanilla JavaScript, don't plan to use libraries

[@erickesquilin2769]

Hello from South Florida! Started JavaScript in 2017. This content is awesome!!!!

[@marciliosantoslima31]

One of the best contend web!!! I’m self studying JavaScript. Here you have a great contend in JavaScript ! Congratulations Frank!!

[@guerreirito]

I'm amazed at how many things we can do with Javascript!

[@peryMimon]

one of the beautiful as simple effects I saw. I amazed . of course I'm split the code the bit and make it more structed but the base idea are simple and elegant.

[@josephlang2586]

You are by far my favorite programming tutor on YT!!

[@josephlang2586]

Also to answer you're questions I am from Mississippi and I've been learning javascript for a week :)

[@MrBurnandPlay]

Thanks God I searched particle js and landed on your channel. This is going to be awesome

[@Frankslaboratory]

We do a lot of stuff with particles here, glad you found me Syed :D

[@thegamingchannel8229]

This channel deserves more subscribers. Great content

[@Frankslaboratory]

Glad you think so!

[@Fatbober]

Watched this video at 0.5 speed and coded along and it took me 2-3hrs still, lol. Some parts are definitely hard to follow, but you do your best at explaining and don't stress so much if you think we don't get it (you did your best and it's up to us to do our homework), it's just hard because it's the first time seeing these new things. I like that after making a bunch of these games following you, it's much more clearer and I'm starting to understand what I'm doing, but still I could not code a whole game by myself lol, but I hope I can get there some day! Thank you for a great video!

[@Frankslaboratory]

Hi Karolis, congratulations of finishing the projects, awesome. I was trying to set the expectations by mentioning this is not the best project for beginners. There is a lot going on here for someone who just started with JavaScript, but I am happy to hear that you after watching some of my other tutorials were able to complete this. Thank you for taking the time to let me know. Happy New Year to you :)

[@Fatbober]

@@Frankslaboratory Thank you for taking the time to reply, Happy New Year to you as well!

[@ViktorSarge]

I love stuff like this and your channel is one of those I watch for fun. Front end developer from Sweden living in Finland. I'm mostly here for generative art but also since it's good to see others code. You always learn some new stuff.

[@Frankslaboratory]

Hi Viktor, nice to meet you, I also had a try at generative art in some of my videos, but usually I keep it very basic since the end result needs to fit a coding tutorial for beginners. Happy New Year to Finland, thank you for a nice comment.

[@BibleTechNutt]

Hello From Winter Springs Florida! I started watching your tutorials on games but naturally found my way to this...In love with javaScript and canvas and animating and manipulating elements and images. Thanks for teaching and inspiring. You are really good.

[@Frankslaboratory]

Hi Jason, nice to meet you. Glad to hear you are inspired, thank you for letting me know

[@Mr__Altair]

Hi Frank, I am a coder from California. Nice to meet you. KZbin algorithm recommended this video and I sub''d!

[@jfirestorm44]

I can't get enough of these tutorials. This was by far the most advanced I've done yet. So much to learn...

[@Frankslaboratory]

This one is quite advanced. Great to hear you liked it. Thank you for letting me know ❤

[@KeyBoardWarriorz310]

Dude I came across your Masterpiece on TikTok, I’m learning front end and your an inspiration I’m making a website/App that’s going to change the way us humans communicate with each other hopefully if I make it big I would love for you to be part of the project to get your skill and knowledge and visionary on board. Thanks again for everything much love from Los Angeles Ca keep prospering and remember Don’t Dream it, Be it

[@ajayrathod7438]

Your work is amazing. You are one of those youtuber whose video i just like it the moment i open because i have never doubt on your content it is always amazing.

[@FernandoOlivera-e1t]

This is pure gold! Very well explained. Thank you! Just noticed a minor bug: in line 55 when you define "movement". cellBrightness value can go up to 2.55 (not just 2.5). So when you do "(2.5 - this.speed) + this.velocity" to define movement you can end up with a negative value in "this.y". In that case when you define position1 based on "this.y" you won't be able to access that position in mappedImage matrix. I noticed that when trying it with images containing white pixels. Thank you again. New subscriber!

[@Frankslaboratory]

Hi, thank you for this input, I like comments like that. this is an older video. I need to remake this, there are many things that can be refactored and simplified here.

[@deepak3dart]

It was 1997 when I was learning C language and I was very happy when I drew a circle using pixels and polar coordinates. I felt as if I had performed a miracle. I realized that day that programming is not just for databases and apps. And now I am feeling the same experience again.

[@Frankslaboratory]

Hi Deepak, sounds like you have had many years of experience. It's a great thing about creative coding, always more new things to discover

[@jaygarricktheflash]

I'm hanging out in Canada. Doing Javascript for about a year... self taught too. Thank you for sharing!

[@nerofear12]

I’ve watched some of your videos. Usually I just skip until the part I’m looking for… but you’re a master in canvas; so I just watched the whole length video. I’ll be watching all of them. I already watched the visualizer video and I loved it. You got a new subscriber!!! 👍👍👍

[@marcelajaklova6560]

Zdravím z Čech. U tvých tutoriálů mám vždycky pocit, že se ten JavaScript jednou opravdu naučím ovládat:) Díky!

[@Frankslaboratory]

Ahoooj, jestli si zvladla tohle video tak se rozhodne naucis. Stastny Novy rok Marcelo

[@marcelajaklova6560]

@@Frankslaboratory Taky přeju šťastný nový rok. Můj plán pro letošek je najít první práci jako frontendak, tak snad se zadaří. :-)

[@Frankslaboratory]

Urcite se neco najde, kdyz budes hledat, dej mi vedet jak to pokracuje, hodne stesti :D

[@bashitiqbal5358]

I cannot wait to try this. This is amazing. Happy new year Frank!

[@Frankslaboratory]

Happy New Year Bashit, all the best in 2021!

[@AddMotionLeb]

Great Content. I've been watching your videos for the past two days and I would like to thank you for the effort that you put in these videos.

[@Frankslaboratory]

Hi, nice to meet you, thank you for letting me know, I appreciate it

[@pluscday2]

from Taipei, your vids in youtube are awesome. Thanks for all your hard works.

[@Frankslaboratory]

Nice to meet you Alex, greetings to Taipei ❤

[@elad3958]

I became an instant fan and student. Thank you Frank.

[@thembasishuba9545]

Awesome tutorial...I am from Johannesburg South Africa, I've been coding javascript for a year now

[@Frankslaboratory]

Hi. My flatmate here is London was from Johannesburg, nice. Greetings to South Africa and thank you for your feedback Themba ❤

[@jarmolehto5341]

Was looking for some cool stuff to use. THIS is cool! Greetings from Sweden!

[@Frankslaboratory]

Hi Jarmo, greetings to Sweden, glad you like it

[@frankheagerty7339]

Been busy because of the holidays so ive slacked a little but jeez man your tutorials are usually good, but this is absolutely insane. As always, thank you for sharing your knowledge!!!

[@Frankslaboratory]

Frank! Good to see you here again. Hope you enjoyed your holidays and are ready to take on 2021. All the best man, thanks for a nice comment

[@CodingJourney]

Pixel rain...more like Perfection rain 🙂😉 That was beautiful Frank! Stunning project but also quite impressive editing 👍💯 Doing marvelous mate, keep it up!!! 💙

[@Frankslaboratory]

You always leave the best comments, glad that you're back. I'm sure you know as a creator, these videos take so long to make, your last video is 1 hour, I can only imagine how long that took. That's why we have to keep the projects fun, it makes it easier 💪❤

[@CodingJourney]

@@Frankslaboratory Omg do I know 😁😉 True, makes is easier both for the creator and the viewer 🙂 Your latest 2D Tower Defense video looks insanely cool, can't wait to watch it 🙂 Keep inspiring!!! 🔥

[@Web-Dev-Codi]

I am in love with this channel! Very fresh!

[@Frankslaboratory]

Thanks Brian, good to have you here

[@alexeypetrov8543]

I am from Russia. Your tutorials is best that i've seen.

[@Naval_Vanguard]

That's awesome ! I love image processing, but I never did it with vanilla JavaScript ! Thanks a lot for this tutorial

[@Frankslaboratory]

Hi Dylan, nice to meet you, there are many things that can be done with images using this technique. Glad you found some value

[@creativemind8201]

Thank you for this tutorial. Very useful. I finally finished this. I am new to creative coding and don't know basically anything. But your video was so comprehensive. Hope for more awesome tutorials

[@Bengadeer]

John Wolf - San Diego, CA. Love the use case for JavaScript. I completely ignored the canvas feature of HTML5 until I saw your videos. Big thanks for opening the door. B.T.W, I remember with fondness a beer hunt I did in 1998 through the Czech Republic - walked the caves of Pilsner Urquell and smooth tastes of Budweiser Budvar!

[@Frankslaboratory]

Hi John. Nice to meet you. HTML canvas is now well supported and optimised. Its a good time to use it a bit more 😊 nice to hear you visited my small country. We do drink a lot of beer its what we are known for ahaha

[@carlosleoncode]

Mann!!! this's awesome!. It's so hard this topic. But I like it. I was a little confused in some parts but the general idea is clear. Thanks for this kind of videos!.

[@Frankslaboratory]

Hi Carlos, this is one of my most advanced tutorials, you are doing great if you managed to follow at least some of it. It will make more sense if you spend more time doing JavaScript and canvas projects

[@dabzbmg3197]

The intro and your complete explanations are very valuable to my learning process, thank you.

[@Frankslaboratory]

Yay. that's so nice to hear, thank you for taking the time to let me know ❤

[@mdkawsarislamyeasin4040]

OMG, I'm been searching for this kind of animation tutorial for a long time. Thanks a lot. 💗

[@Frankslaboratory]

Hi MD, thank you. I will release an updated version soon, I learned a lot about pixel effects since I released this :D

[@reynaldorobles]

I am from Texas in the USA. I can't wait to finish this tutorial and create some cool web animations.

[@Frankslaboratory]

Hi Reynaldo. Greetings to Texas. Hope your project goes well :)

[@diofaro]

Here from Argentina! Thanks for this amazing videos!

[@Frankslaboratory]

Hi Facundo. Greeting to Argentina. Thank you for leaving a comment letting me know know you found some value

[@justmede]

I really enjoy your tutorials, and you really motivate me to not only do something, but also to create and develop myself !!!

[@Frankslaboratory]

Hi. Thank you for letting me know you found some value. I hope you manage to keep yourself motivated. It becomes easier and more fun as you develop your skills further

[@afzalmahmudd8365]

you are vanilla master. I am happy to find you on youtube.I am from Bangladesh 🇧🇩

[@Frankslaboratory]

Hi Afzal, nice to meet you, I'm happy you found me :D

[@k.haydenbuell5866]

Frank you are my new inspiration - thank you for these tutorials

[@Frankslaboratory]

Hi Hayden, nice to meet you. Glad you found something interesting here, thank you for letting me know, it's nice to see a feedback like this ❤

[@abhaychauhan5158]

was waiting for an advanced tutorial. Thank you.

[@Frankslaboratory]

Hi Abhay, is this advanced enough for you? Because if not there will be a game next, at this point I don't even know how I will explain all that's going on there, more advanced stuff coming :D

[@abhaychauhan5158]

@@Frankslaboratory nah bro i meant i am at a point where i do not learn anything from beginner stuff coz i know that already. i learn from advanced stuff. if i was a beginner i wouldn't even knew what you talking about. i am ready for the next game tutorial and i know you will nail it.

[@Frankslaboratory]

Great to hear that you moved past the beginner phase already, now at this stage this is the best part

[@carldiamond4234]

Hi Frank, greetings from Los Angeles, California, USA. I've been studying HTML, JAVASCRIPT, AND CSS for less than a year.

[@Frankslaboratory]

Hi Carl, nice to meet you. Los Angeles, ah, you are living the life :D Happy new year!

[@markovracaricic9913]

I learn JS just a couple of months, but I'm very passionate about these canvas effects.

[@markovracaricic9913]

It works, but the velocity isn't the same, it looks much better at your screen. Can you suggest me why is like that? Thanks in advance.

[@bdgroup574]

Thanks. We recommending your channel to our small team. South Africa.

[@Frankslaboratory]

Hi, I have friends from South Africa, Johannesburg. What kind of work does your team do

[@bdgroup574]

@@Frankslaboratory IT management. Yes we are also in Johannesburg, Rivonia.

[@Frankslaboratory]

I hope to visit someday, they promise they would take me, both Johannesburg and Cape town

[@partygrouppl]

Hi Frank thanks for all your videos. Greatings from Poland!

[@Frankslaboratory]

Hi Jewgienij, nice to meet you. I visited Poland recently for the first time, Warsaw and Krakow. Had a lot of nice food there :)

[@bdgroup574]

Happy New Year. Keep the great content rolling!

[@Frankslaboratory]

Happy new year :D I will do my best

[@StarkRaveness]

Awesome channel, already a subscriber thanks for you lessons. All the way from New Zealand! ❤

[@Frankslaboratory]

Hi Jeremy, greetings to New Zealand ❤

[@StarkRaveness]

@@Frankslaboratory Thanks Frank. Just a question with the code im getting an error with the cellBrightness attribute saying "could not find name "cellBrightness" do I mean brightness? Any ideas?

[@Frankslaboratory]

@@StarkRaveness I would need to see your code. I improved this particular effect a lot since I recorded this video. Will release a new version of this tutorial soon. You can find some versions of this codebase on my Codepen if you want to compare your code.

[@PixelatedBrain7]

didnt know you're also a motivational speaker. thanks

[@Frankslaboratory]

Haha, sometimes I try but some people just want me to get straight to coding so I don't always do a speech :D

[@sakibcoder]

3:05 to 3:30 such a great motivation. thank you soooo much.

[@Frankslaboratory]

Hi Xavon, good to hear you felt inspired! That was my goal

[@RobertWildling]

Awesome! Again truly awesome! - But this time I am also very confused... At 24:58, why does your editor not throw an error? const cell = [ cellBrightness = brightness, ] In my case VSCode tells me that "cellBrightness" is not defined. By the rules of JS it is - as far as i know - not allowed to defined vars on array instantiation, and array don't have var assignment at all - that would be an object then, right? Sth like `{ cellBrightness: brightness }`. Maybe this happens, because I have TypeScript turned on? Do you know why this works in your case?

[@humano2246]

I have the same issue, could you find a solution?

[@quirkcore564]

Frank you are an amazing teacher and these tutorials are excellent! This is now the third one I've followed through to the end. This one though - wow! Amazing stuff. I thought I had a code error but turns out the image I was testing was just not good for these purposes (it was mostly white, way too light perhaps without crisp details?) - copied in the same data64 string you were using and wah-lah, it all turns to magic. Lots to understand here, can't wait to dig deeper. Thank you for what you're doing!

[@marcgold424]

Thanks for this Frank. Great work. I made a bunch of mistakes, but stuck with it, and actually came out with something really nice! You Rock!

[@Frankslaboratory]

Hi Marc, happy to hear that. Patience is very important when learning coding, we all get frustrated when we don't see the bug, I know the pain. It becomes easier and easier as you spend more time with code.

[@BrianOConnor-ps5bu]

You're such a cool person Frank! Thank you for doing these videos. I absolutely love them

[@Frankslaboratory]

Hi BO. Thank you so much, very kind :)

[@eugeniogonzato]

I’m from Italy and I love your videos

[@Frankslaboratory]

Nice to meet you Eugenio, greetings to Italy

[@VijayDev]

How does Frank create these amazing tutorials? Well, he takes a walk around the city. Reach home and start recording. Easy peasy.

[@suwedo8677]

Thank you frank your videos are clearly the best, you should get more recognition clearly for the work you put here ! Happy new Year !!!

[@Frankslaboratory]

Hi Suwedo, thank you very kind to say that. Happy New Year ! :D

[@HoldenTudiks81]

Thank so much for taking the time to make these videos and you explanations really help a lot.

[@Frankslaboratory]

Glad you found some value Curtis

[@bman1914]

Sick tutorial! Such a cool and fun concept, thanks for the work!

[@Frankslaboratory]

Thanks Bryan, happy you like it

[@Darthvanger]

Me from Ukraine, Kyiv :) 7 years of JS experience :) Your videos blow my mind! And inspire :) Thank you, Frank!

[@Goloso333]

Hello! Frank....thank you for these videos. I like your teaching style. I am from Ecuador, but I live in Iowa City, IA in the USA. We are citizens of the world.

[@Frankslaboratory]

Hi Lenin, greetings to Iowa. I definitely consider myself an international citizen. Thank you for such a great feedback, very kind of you. Nice to meet you.

[@munbee_]

From India bro and wanna let you know that you're awesome ❤️

[@Frankslaboratory]

Hi Muhammed. Thank you. Greetings to India

[@d2d65]

Hi bro, i come frome tik tok, ur channel is a treasure ! new suscriber

[@Frankslaboratory]

Hi. Welcome. Good to have you here :)

[@tolsty78]

thank you Frank for a great example of working with canvas ! I don't know english well and I learn only from the examples you have! your videos are unique and in russian segment there is no such thing ... Happy New Year and thank you.. health good to you

[@Frankslaboratory]

Hi Maxim, thank you so much for a nice comment, happy New Year and all the best in 2021 :) Actually one of my favourite creative coding channels is in Russian, do you know this one? kzbin.info/door/QV9r8ZugNYZWD7ihUm2tpg

[@tolsty78]

@@Frankslaboratory Oh yes! That's right... I subscribed to his channel.. but your example is the best

[@Frankslaboratory]

I keep asking him to make collaboration with me, maybe one day he will :D

[@tolsty78]

@@Frankslaboratory Wow... He must be a busy man! Do you understand what I'm writing?

[@OneAndOnlyMe]

Excellent video. Just wanted to point out that passing the animate() function to requestAnimationFrame() is not actually recursion because animate() function will terminate as normal. What is happening here is that requestAnimationFrame() is placing a new event in the JS event loop with a reference to the function to invoke when the event loop processes the event. So, when your graphics card gets to a point where it is painting a new frame of the display, and the JS event loop is notified of this by the operating system, and it finds an event for requestAnimationFrame(), it then calls the animate() function.

[@Frankslaboratory]

Hi, thank you for pointing that out and providing such a good explanation, you are right, it's not recursion, thank you for sharing with us

[@dirmina5381]

Hi happy new year to you too ! thx for this tutorial, this is really nice, and the challenge is great ! color is done that was much more easier than expected =D you won a subscriber =D

[@Frankslaboratory]

Hi Dirmina, very happy to have you here. So you managed to add colours? Awesome. There is more than one way to do it. The effect looks much better with colours, especially for some specific images.

[@sebastianhabiger8379]

Nice tutorials, the only thing I would like to mention. You always call your call to requestAnimationFrame, recutsion, to be precise this is not a recursion. A recursion means that a function calls itselfe. When calling requestAnimationFrame this will not call animation, it only schedules another call to animation. This call will happen after the current call to animation already returned. But after all great tutorial. Keep on.

[@Frankslaboratory]

Hi Sebastian, thank you for your feedback, other people already told me, not sure if the discussion is under this video or somewhere else. I like how you worded it, great explanation!

[@mohitpopli8368]

After watching this tutorial, I have one word WOW!! I'll do this kind of stuff in my portfolio. Also if I'll create some library I'll seek your permission to release it :)

[@Frankslaboratory]

Hi Mohit, my content is free for people to learn JavaScript, so feel free to include this code in your library if you want to. This effect will make great logo on top of your portfolio, have fun with it :)

[@nitinsoni9956]

I'm glad to found such an amazing channel and more amazing tutor who is very humble, helpful and knowledgeable. Respect and sub to you Frank :)

[@Frankslaboratory]

Hi Nitin, nice to connect with you on here. I'm happy you found me as well. Looking forward to see what projects you come up with on your coding journey :)

[@akankshyabarua2477]

I found this on reddit and it so helpful, thank you

[@Frankslaboratory]

Hi Akankshya, happy you found me :)

[@alwynjohn597]

Man you are just awesome. Love from India. JavaScript -2 years but nowhere near to your skills

[@Frankslaboratory]

Hi Alwyn, good to see you here again. I'm sure you can do quite a lot with JS, hope to see some of your projects one day

[@SynapseNervosa]

Thank You for making this!!! his was a huge help in a project im working on.

[@patrickc.6183]

I love it Frank! Happy New Year everyone :)!

[@Frankslaboratory]

Thank you Patrick, Happy New Year to you :)

[@Prakhar281993]

Hi Frank, here from India. This channel is like a breeze which refreshes your mind. The best thing is every time we see a new creative thing. I would like to know if you are active in LinkedIn.

[@Frankslaboratory]

Hi Prakhar, very happy to hear that, thank you for letting me know. I don't use LinkedIn right now, just Twitter and TikTok to show some animations I'm working on. It's hard to keep up with all the social networks :D

[@coltonaallen]

Wake up in 2021 to THIS! Oh yeah, it's gonna be a great year! Thanks for another great tutorial, Frank. Reporting in from not-so-sunny Southern California, U.S.

[@Frankslaboratory]

Thanks Arthur haha, let's see what 2021 brings us. London is sunny but freezing cold, I wish I was in California right now :D

[@coltonaallen]

@@Frankslaboratory Yes, I'm looking forward to a good year and many more awesome tutorials from you to learn from. And holy moly, this effect is so cool! I just finished a couple variants on it (just minor things like colors, etc.) but I made this Matrix Pikachu: codepen.io/Colt4D5/pen/vYXdoQW I'm really excited to experiment what else I can do with this.

[@Frankslaboratory]

Never thought I would say Martix and Pikachu in the same sentence but your Martix Pikachu looks awesome!! I'm trying some new variants as well, now you gave me idea to replace arc method with fillText, hmm, will try that now :D

[@coltonaallen]

@@Frankslaboratory I follow you on codepen, so hopefully I will get a chance to see it! And Matrix Pikachu is all I think about. Lol

[@Frankslaboratory]

And now I can't stop thinking about it. Martix Pikachu :D :D

[@ManontheBroadcast]

It is hard to find tutorials that do not 'npm install' some package for every line of code... I am very happy i discovered your channel, thanks to @ freeCodeCamp ... Keep on...👍

[@Frankslaboratory]

Hi, thank you. I like to keep my code clean without additional dependencies, and creative effects like this are great for that kinda stuff. Nice self contained piece of logic which is fully exposed with no hidden magic coming from a library

[@irauldf]

OMG ! I love this. Thanks for sharing ! Oh btw, tiktok brought me here 😀

[@Frankslaboratory]

Hi Raul, welcome! so posting my effects on TikTok actually makes someone come on KZbin, thanks for letting me know :)

[@indrakhatiwada9860]

after a long time seeing you frank, Hope you are healthy. Happy new Year

[@Frankslaboratory]

Hi Indra, yes it's been a while since we spoke. I took it easy for a while but now back to coding. Happy new year and all the best in 2021 !!:)

[@derbicalderon6900]

Thank you again for another awesome video! Really love these :)

[@Frankslaboratory]

Hi Derbi, i'm happy to see a comment like this, thank you for letting me know :)

[@ssikarim]

I watch you from Morocco. I learn js 2 years

[@LardiyoX]

You freaking genius! new subscriber here!

[@Frankslaboratory]

Thank you Lucas, good to have you here, welcome

[@LardiyoX]

​@@Frankslaboratory No. Thanks to you, for a newbie in the JS world and other tecnologies like me, this it's pure gold. I'm in middle of a bootcamp and this video opened my mind like no other youtube channel . Cheers from Argentina.

[@tulasireddy6557]

Hi bro, your tutorials are amazing and I from India 🇮🇳...

[@Frankslaboratory]

Hi Tulasi, thank you for letting me know, nice to read a comment like this, greetings to India :)

[@fragileglass9622]

Ohhh wow! What a way to bring in New Year. This is such a beautiful effect. I love what goes on in your mad laboratory! New Year resolution: To focus all my attention on UI and UI Animation and effect animation. As a full stack dev. It’s not my passion. Visual programming is.

[@Frankslaboratory]

I love visual programming and UI work as well, I appreciate back end but the most inspiration for me always came from creative coding projects. I don't know much about back end but need to learn some bit, I have some multiplayer browser game ideas :D

[@Hermit393]

Hey man. there are the coolest effects i've seen in js. You are awesome. I just wanted to say that since i tried making this effect 4 times without success. i don't know what i am doing wrong

[@Frankslaboratory]

Hi, sometimes a small typo can break the entire codebase, that is the nature of programming. if you need more help send me your code on Twitter and I will tell you where the problem is.

[@RedEyedJedi]

Please tell me that you have a course on Udemy? You are such an amazing teacher, I'm getting real value from these videos, thank you very much for taking the time and effort to make them.

[@MuSic-kl3pd]

Love your content, please keep it up sir!

[@Frankslaboratory]

Thank you :D

[@chefbennyj]

Yep! Next level! From Canada

[@Frankslaboratory]

Hi Benjamin, happy New Year to Canada! :)

[@aravindvv2276]

cool 🤩 happy new year

[@Frankslaboratory]

Happy New Yeae Aravind

[@johnadriandodge]

So amazing! Thank you Jedi!

[@Frankslaboratory]

JavaScript Jedi? I should have named my channel like that ahahaha

[@johnadriandodge]

@@Frankslaboratory Definitely! The JS Jedi, a Mad (definitely sane) Scientific approach! Remember, the mad hatter was not mad enough to code it right!

[@CreativeDeveloper]

Javascript synchronous. By default image will load first and then below code. Is it required load function? I enjoyed your video.

[@Frankslaboratory]

It depends, image file will not be loaded in a synchronous way, if you break the image into a base64 string and put that into your JavaScript file then yes, it will by loaded synchronously. Image loading is complicated that way :)

[@JustMyTwoCentz]

i love your tutorials Frank ! I did many already, always achieving nice results ! one question , since i cant make this effect work... at minute @28:23 when u declare this.speed and take the arrays, this.position1, this.position.2 and 0, i get an error telling me that i cant access the property, since mappedImage[this.position1] is undefined. can you tell me what the error might be ?

[@hmmmmmDidYouKnow]

Have you found a solution yet? I am also getting that same error.

[@theman7050]

Genius! Vanilla JS babyy!! :D

[@piotrl7618]

dobrý den! Thank you for what you're doing! Syberia is watching you!)) Everything turns very easy when you explain!

[@Frankslaboratory]

Hi Peter, your Czech is perfect ha :D It makes me happy to get feedback like this, I try to explain things well but also I am still learning how to approach these more complex codebases and make them beginner friendly. Greetings to Siberia :)

[@gopinathkrm58]

This looks amazing

[@Frankslaboratory]

Gopinath! Thanks bro, happy New Year! :)

[@gopinathkrm58]

@@Frankslaboratory happy New Year Frank

[@naolchala4354]

1st Comment after Frank From Ethiopia You're the best

[@Frankslaboratory]

Congratulations Naol :) oh Ethiopia, lovely