ASCII Art with Vanilla JavaScript

Опубликовано: 02 Декабрь 2024
на канале: Franks laboratory

55,434

2.2k

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:
📚 Pict2pix library: https://evaristocuesta.github.io/pict...
🚀 https://github.com/evaristocuesta
🚀 https://www.evaristocuesta.com/

My other tutorials that use the same pixel manipulation technique:
   • JavaScript Pixel Effects
Beginner playlist:    • Front End Web Development Projects fo...

🔥 I really like these FRONT END WEB DEVELOPMENT courses on Udemy 🔥
☕ JavaScript: The Advanced Concepts (2021) https://bit.ly/2Uk6Wyk
Learn modern advanced JavaScript practices and be in the top 10% of JavaScript developers. (Andrei Neagoie)
☕ JavaScript - The Complete Guide 2021 (Beginner + Advanced) https://bit.ly/37Hlxqq
Modern JavaScript from the beginning - all the way up to JS expert level! THE must-have JavaScript resource in 2021. (Maximilian Schwarzmuller)
☕ The Complete JavaScript Course 2021: From Zero to Expert! https://bit.ly/3fXGwaZ
The modern JavaScript course for everyone! Master JavaScript with projects, challenges and theory. Many courses in one! (Jonas Schmedtmann)
☕ 20 Web Projects With Vanilla JavaScript https://bit.ly/3anlCQR
Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries, Brad Traversy)
☕ HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid https://bit.ly/3tu9ghD
☕ JavaScript Basics for Beginners (Mosh Hamedani) https://bit.ly/32Tn5wq
☕ Modern JavaScript From The Beginning (Brad Traversy) https://bit.ly/3fWJgWk

🔥 One Month FREE Trial of Skillshare Premium! 🔥 (access to all courses, cancel anytime) https://skillshare.eqcm.net/c/2793559...
🔥 My favourite computer screen for coding https://amzn.to/3xccARd

🎮 HTML5 canvas and JavaScript game tutorials:
   • Game Development with Vanilla JavaScript

If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:
   • Creative Coding with Vanilla JavaScri...

Let's be friends
👍 You can message me on TWITTER   / 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
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