Learn how to implement pixel effects using JavaScript.
Make your website come to life with interactive animated logos or headers, or just practice fundamental JavaScript coding techniques with me on these fun examples. In this tutorial we will go from basics to advanced and create multiple different pixel effects with vanilla JavaScript and HTML canvas.
The tutorial starts with a simple beginner friendly project, where we analyze image for pixel data and use it to color shift the image and turn it into grayscale. Then we use that basic knowledge in a powerful way to create many different advanced animations with vanilla JavaScript and HTML canvas, completely from scratch.
⭐️ Code ⭐️
🔗Project 1 Smoke:
🔗Project 2 Rainbow:
🔗Project 3 Fire:
🔗Project 4 Particle text with liquid filter applied:
✏️ Course created by Frank Dvorak. Check him out on YouTube and Twitter.
🎥
🐦
⭐️ Course Contents ⭐️
⌨️ (00:00:00) Intro
⌨️ (00:00:55) Project 1 INTRODUCTION to pixel manipulation for beginners
⌨️ (00:02:30) How to bring image into HTML canvas project
⌨️ (00:05:15) How to analyze image for pixel data
⌨️ (00:11:58) How to turn image into grayscale
⌨️ (00:14:55) Project 2 BLACK AND WHITE PIXEL RAIN using image data
⌨️ (00:19:45) Particle system using JavaScript classes
⌨️ (00:25:18) Connect particle movement to pixel data
⌨️ (00:43:50) Project 3 PIXEL FLOW EFFECTS
⌨️ (00:53:12) HTML canvas gradients, filters and other experiments
⌨️ (01:04:48) Project 4 INTERACTIVE PARTICLE TEXT
⌨️ (01:13:50) Creating particles
⌨️ (01:21:33) Particle physics and mouse interactions
⌨️ (01:35:46) How to shape particles as letters
⌨️ (01:49:15) Constellations effect from particles.js with vanilla JavaScript
—
Learn to code for free and get a developer job:
Read hundreds of articles on programming:
And subscribe for new videos on technology every day:
Thank you so much..and I must say You are amazing
Never thought that anything like this is possible with just html and vanilla js
Thanks Shivam. Canvas can do a lot of things. Surprisingly not many people make content on it
Salute to the master of canvas and JavaScript, the creative scientist, the one and only Frank and his Lab 😉😁💙💙 Amazing content Frank thank you!! And of course thanks to freeCodeCamp as well!! 🙂
Thanks man. Very kind of you to say. I like your stuff too as you know. It’s hard to find time in life sometimes to make YouTube videos so its nice to see some feedback. I’m still just a noob:)
@Franks laboratory Heheh!! Maybe noob in the Super Saiyan level 😉💙💙
Amazing! Frank is a legend! Some amazing projects on his channel!
Hi Conor. Thanks man ❤
This guy is finally revealed by freecodecamp. It seems like his channel has been invisible to many people lol. I’m so happy to see a great guy like him get noticed.
Yes , that’s right. He deserves more recognition.
44:50 when selecting a lot inside a string try “shift + alt + right arrow”.
I’ve implemented the text pixel effect in my code and it works beautifully, but how would I go about making the text more responsive in terms of changing the window size on desktop? I’ve used media queries in CSS and conditionals to check for specific window sizes in the JS file but when I change the font size of ctx.font, it doesn’t change. On resize, I tried cancelling the animation, reinitializing, and calling animate again, but that didn’t work either. How would I properly update the font size for resizing the window?
Hi, there are multiple ways to achieve this. With more complex effects like this some hand tweaking is usually required. I would first check screen size with JavaScript and then pass the effect a set of initial values to make it work for certain range of screen sizes. That way you could create let’s say 4 carefully calibrated hand made pre-sets, and then based on what screen size user loads the website on (or when resize event is triggered), it would just choose one of them. I’m sure people with more JS experience can think of even cleaner solutions. I’m self taught so I am not an expert by any means.
1:32:00 when we do dx = mouse.x – this.x, the velocity vector is pointed from the particle to the mouse. This is the reason why particle is moving TO the mouse. I think instead of editing line 53 and line 54, changing line 42 and line 43 makes more sense.
Great point thank you for sharing. You are right
1:51:05 In the second for loop(line 96), I think we should put “for( let b = a + 1; b < ......)", because if b = a, and b fit the condition, we will get distance = 0, which I think will lead to draw a line at same position.
Good point, thank you for sharing I will note that next time, I use this technique a lot
This is good stuff! Once you have that bitmap data, the sky is the limit. 🙂
Indeed, I am working on other effects using pixel data, got some new ideas 😀
The animation you know, but coding you don’t know… Awesome
Hello, Frank, amazing video, do you have any video/class or site where i can learn more abount the sin,cos functions, or the trigonometry basics?
Hi Jesus, I speak a little bit about sin/cos in my latest game animations video, but haven’t made a specific video for this topic yet, i will make one
Really, really great tutorial. Never ventured into canvas, but with your explanations, it made perfect sense. I definitely have new tools to play with now! Thanks!
I’ll pause to comment. The level of explanation is perfect for me. It gives you the advanced and difficult parts like you mention, but being reminded of the basics as I process everything really helps to tie things together because it triggers already existing knowledge and bring those to awaremess.
Hi Girard, thank you for such a nice feedback, glad to see you found my explanations helpful
thanks for everything! . I really pass from beginner to advance(well, i can say that i have an advance level, but i learn how to do some crazy stuff) thank you so much!
10 minutes in and I’m learning how to mathematically turn RGB pixels into grayscale
it’s fascinating even if i’m not a web dev
for particles speed in “Connect particle movement to pixel data”, a better formula for movement is this.velocity * (1 – this.speed/255)**n.
when n = 0+
255 is ’cause the max value of brightness is 255
Love how you made it look like a fire burning FX at 1:03:44
EDIT. ok as soon as i commented you said it yourself 🙂 well goes to show you’re already there
This is a suggestion aimed mainly at more advanced programmers, but your getRelativeBrightness function is a perfect candidate for memoization. At the very least you could have a sort of guard clause for black which returns 0 without the calculations.
This is so cool and you do a great job of keeping it simple, thank you so much!
Hi Frank. Very appreciated your tutorial. You are great.
Do you have some book about topics like that?. Or even developed animation?.
Thanks a lot!