JavaScript Image Animation Tutorial [Pixel Rain]

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.

Related links:
Pixel manipulation for beginners https://youtu.be/alRBeUMMvDM
Image into interactive particles with JavaScript & HTML canvas https://youtu.be/afdHgwn1XCY
Text animation tutorial using pixel array https://youtu.be/XGioNBHrFU4
Check out this awesome Codepen: https://codepen.io/Mamboleoo/pen/GRJKoBw

This tutorial is part of a series, for more animations in JavaScript & HTML5 canvas check out my creative coding playlist:
https://www.youtube.com/playlist?list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh
CSS animations playlist:
https://www.youtube.com/playlist?list=PLYElE_rzEw_t2O2DvfopIoq-diTgefVzV

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.

You can message me on TWITTER https://twitter.com/code_laboratory
Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory

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