Vanilla JavaScript Pixel Rain Tutorial

Take any image and turn in into rain of pixels with this JavaScript image animation tutorial. Make logos, loaders, website headers or interactive cards with it and get one step closet to becoming a master of web animation. Or just put it on your coding portfolio if you are looking to impress potential employers. Let me show you how to use plain vanilla JavaScript and HTML canvas element to create pixel rain effect by converting points in image into interactive particles. Happy coding, hope you have fun :D

Learn how to easily animate images and manipulate pixels with drawImage and getImageData canvas methods and create awesome fluid image effect with me.

More vanilla JavaScript pixel manipulation tutorials:

Related links:

This tutorial is part of a series, for more animations in JavaScript & HTML5 canvas check out my creative coding playlist:
CSS animations playlist:

Today we will build a vanilla JavaScript algorithm that can take any image of your choice, it will scan that image for pixel data and it will create a brightness and colour map that represents that image. When we have the data we delete the image, create a very simple particle system and we make these particles flow over the canvas at different speeds depending on brightness of that area in the original image, recreating that image as particle pixel rain.

Music: (YouTube audio library) Vacay In Fiji Riddim - Konrad OldMoney, World Map - Jason Farnham, 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

[guerreirito]

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

[AleksPopovic]

Wow, this is an awesome effect! I've been considering reworking my landing page and I had a similar effect in mind. Have you considered creating a library out of this? It might be pretty popular.

[creativemind]

Can you please show how to set up software? I don’t know how to link code to web

[ssk]

Hey I'm not able to access canvas.getContext('2d');
do you have any solution for this?

[djudsod]

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

[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.

[yellemonster]

You're a wizard among mere mortals

[benjamin_kang]

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

[irauldf]

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

[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?

[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...👍

[mayank_singh_]

I copied the same, but it's not working .
Can't we use Jpg image for pixel?

[CodingJourney]

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

[sonoftroy]

Who in the heck gave 4 dislikes... they must be jealous haters

[CreativeDeveloper]

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

[unknown-bxmy]

Hello again Mr.Frank
I am studying js 1.5 years ago and i am from lebanon. you are awesome and you love pure js like me.
I have a problem: i dont know how to calculate fps for my games.
I try to make the variables(time, frames, fps) and i increase the time every 10 milleseconds and and the frames when the loop/animate function run and the fps=frames/time. But i think its a bad idea. Can you help me?☺❤

[ShinBetSharp]

Amazing. i'll take your course after i'm ending current basic programming course. Israel. Expirience in programming - 6 mouth of IT school 😁... And i'm 38 years old🤣

[Darthvanger]

16:29 - "It also says Clamped, because this numbers are limited to a range between 0 and 255".
Actually Uint8 says it is 8-bit, so 8 bits unsigned is 0 to 255. God knows what Clamped means :)
There is also a Uint8Array in JS (without the Clamped word), which is also from 0 to 255.

[cprpgjez]

I have been learning for about 3 years starting this month. I have made a few things but main ones are Jay's Trump Jump and covpan.com for COVID-19 stats. In the next two months my next website will make me own this website game. Please check out any of my project if interested. How good can I be in 3 years right? lol

[Mr__Altair]

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