ASCII Video (Coding Challenge 166)

The Coding Train

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. https://thecodingtrain.com/CodingChal... p5.js Web Editor Sketches: 🕹️ ASCII video: https://editor.p5js.org/codingtrain/s... 🕹️ ASCII image canvas: https://editor.p5js.org/codingtrain/s... 🕹️ ASCII image dom: https://editor.p5js.org/codingtrain/s... 🕹️ ASCII text: https://editor.p5js.org/codingtrain/s... 🕹️ ASCII weather api: https://editor.p5js.org/codingtrain/s... 🎥 Previous video: https://youtu.be/PbPUgyql5p4?list=PLR... 🎥 All videos: https://www.youtube.com/playlist?list... Links discussed in this video: 🔗 ASCII play by ertdfgcvb: https://play.ertdfgcvb.xyz/ 🔗 HTML Entity: https://developer.mozilla.org/en-US/d... 🔗 HTML div: https://developer.mozilla.org/en-US/d... 🔗 p5.js loadPixels(): https://p5js.org/reference/#/p5/loadP... 🔗 p5.js brightness(): https://p5js.org/reference/#/p5/brigh... 🔗 CodingTrainChooChoo on Twitch: https://www.twitch.tv/codingtrainchoo... Other videos mentioned in this video: 🎥 The Pixel Array: https://youtu.be/nMUMZ5YRxHI 🎥 Basics of CSS: https://youtu.be/zGL8q8iQSQw 🎥 p5.js Web Editor - Uploading Media Files: https://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: http://thecodingtrain.com/