ASCII Art with Vanilla JavaScript

Image processing and converting pixel data into creative coding effects is easier than you think. Let's go over it step by step in this HTML5 canvas tutorial and learn how to use vanilla JavaScript to play around with images, text & pixels to create text based visual art, also called ASCII art effect. Have fun ❤

⭐️TABLE OF CONTENT ⭐️
00:00 Creative coding examples
01:35 HTML, CSS and canvas setup
03:54 Image loading, drawing and analysis
08:04 ASCII art and private class fields
12:57 How to use getImageData method
15:16 ImageData object explained
17:57 HTML canvas grid and pixel coordinates
28:06 How to convert colors to symbols
30:57 Cell class
32:22 Public draw() method
36:21 User controls with addEventListener()
39:25 Dynamic font size, shadows

❤ Related Links ❤
This video is collaboration with my friend Evaristo, who refactored the code and helped me choose the right coding practices to show you. You can check out some of his GitHub projects. He's currently working on really cool animation library that uses multiple pixel effects based on getImageData() technique we will learn about today. Check it out, inspect his code, and maybe after watching this video and learning about encapsulation and pixel manipulation, you might even be able to fork his GitHub repository and contribute with some of your own improvements or even add new effects to it. Employers love to see CVs of candidates that contribute to open source projects like this:

My other tutorials that use the same pixel manipulation technique:

🔥 I really like these FRONT END WEB DEVELOPMENT courses on Udemy 🔥
Learn modern advanced JavaScript practices and be in the top 10% of JavaScript developers. (Andrei Neagoie)
Modern JavaScript from the beginning - all the way up to JS expert level! THE must-have JavaScript resource in 2021. (Maximilian Schwarzmuller)
The modern JavaScript course for everyone! Master JavaScript with projects, challenges and theory. Many courses in one! (Jonas Schmedtmann)
Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries, Brad Traversy)

🎮 HTML5 canvas and JavaScript game tutorials:

If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:

Let's be friends

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

[evaristocuesta]

It's a pleasure to collaborate with a great programmer and teacher like you!!

[Frankslaboratory]

Hi creative people, do you want more tutorials on pixel particle effects?

[nicklansbury]

Another Fun Friday! Thanks, as always

[chefbennyj]

Wow! Frank and other top shelf tutorial! You're one of the best there is!

[MaximusRGZ]

I have to say that this is an amazing channel, thanks for all your work Frank

[jeenitprajapati]

Wow! Pixel effect is great, Thanks so much Sir Frank.

[frankie_goestohollywood]

Your tutorials are the best!!!! Thank you so much 🙂

[adrn]

Love your channel! I am working on HTML5 game and in some cases i feel like i need to improve my skills, and your tutorials are perfect for me! Thanks for sharing your experience with canvas :)

[StarkRaveness]

Hi Frank, thank so much for these tutorials, not only are they awesome but you are able to articulate what is going on very well. Thanks from New Zealand :)

[ayanluap]

Finally!! found a great channel that teaches great stuff. Keep creating this type of amazing content sir!!!

[Mainman]

Oo nice improvement on the code structure man, great stuffs! :)

[sagar-ttub]

You're back with another great tutorial, Frank. Sorry, I have been busy with work, lately. But I've always loved your channel, Frank. I always learn new stuff. Keep up with the good work

[worldofstrings]

Thanks a lot Frank for enlarging the text. Now I can watch your teachings on my cellphone device. No one can simplify it any better.

[jeesjans]

Also, i’ve been following you for the last year and you’ve been improving extremely well, great job. I need to pick up my motivation back been taking a break for the last few months…

[peoplearecool]

Hi Frank, nice tutorial as always.. keep up the good work.

[kautukdwivedi]

Wait is over
Here he comes again with another great content.

[piersonlippard]

Happy Friday Frank, OMG....this effect takes me back to my childhood. Great tutorial, thanks Frank. Have a fantastic weekend.

[ragames]

I like this video so much! Thank you for your content :)

[kevintremerel]

Hi Franks, you make my skill grow up and i really appriciate all your works ! ! So i really wanna thanks you ;)

From Sout- France !

[boristherin]

nice nice nice ^^ am full of idea with that tuto