Channel: The Coding Train

Category: Education

Description: Let's make ASCII art in p5.js together! In this video, I demonstrate a variety of techniques for translating the pixels of an image into text and finish with rendering video as text ASCII characters in a DOM. thecodingtrain.com/CodingChallenges/166-ascii-image.html p5.js Web Editor Sketches: 🕹️ ASCII video: editor.p5js.org/codingtrain/sketches/KTVfEcpWx 🕹️ ASCII image canvas: editor.p5js.org/codingtrain/sketches/r4ApYWpH_ 🕹️ ASCII image dom: editor.p5js.org/codingtrain/sketches/ytK7J7d5j 🕹️ ASCII text: editor.p5js.org/codingtrain/sketches/LNBpdYQHP 🕹️ ASCII weather api: editor.p5js.org/codingtrain/sketches/DhdqcoWn4 🎥 Previous video: youtu.be/PbPUgyql5p4?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All videos: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH Links discussed in this video: 🔗 ASCII play by ertdfgcvb: play.ertdfgcvb.xyz 🔗 HTML Entity: developer.mozilla.org/en-US/docs/Glossary/Entity 🔗 HTML div: developer.mozilla.org/en-US/docs/Web/HTML/Element/div 🔗 p5.js loadPixels(): p5js.org/reference/#/p5/loadPixels 🔗 p5.js brightness(): p5js.org/reference/#/p5/brightness 🔗 CodingTrainChooChoo on Twitch: twitch.tv/codingtrainchoochoo Other videos mentioned in this video: 🎥 The Pixel Array: youtu.be/nMUMZ5YRxHI 🎥 Basics of CSS: youtu.be/zGL8q8iQSQw 🎥 p5.js Web Editor - Uploading Media Files: youtu.be/rO6M5hj0V-o Timestamps: 0:00 Welcome! Choo choo! 0:28 Introducing Today’s Topic 1:39 Pixel to ASCII 4:52 Pixelating an image 7:03 Pixel Array Explanation 8:40 Back to the code 10:18 Adding Text 11:04 Mapping Brightness to Characters 13:26 Switching from canvas to DOM 18:10 Real-time ASCII video 20:10 Some refinemens 21:29 See you next time! 🚂 Website: thecodingtrain.com 👾 Share Your Creation! thecodingtrain.com/Guides/community-contribution-guide.html 🚩 Suggest Topics: github.com/CodingTrain/Rainbow-Topics 💡 GitHub: github.com/CodingTrain 💬 Discord: discord.gg/hPuGy2g 💖 Membership: youtube.com/thecodingtrain/join 🛒 Store: standard.tv/codingtrain 📚 Books: amazon.com/shop/thecodingtrain 🖋️ Twitter: twitter.com/thecodingtrain 📸 Instagram: instagram.com/the.coding.train 🎥 Coding Challenges: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Intro to Programming: youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: p5js.org 🔗 p5.js Web Editor: editor.p5js.org 🔗 Processing: processing.org 📄 Code of Conduct: github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/website/issues/new