?/100

Coding Challenge 166: ASCII Text Images

February 12, 2022848115

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. https://thecodingtrain.com/challenges/166-image-to-ascii p5.js Web Editor Sketches: πŸ•ΉοΈ ASCII video: https://editor.p5js.org/codingtrain/sketches/KTVfEcpWx πŸ•ΉοΈ ASCII image canvas: https://editor.p5js.org/codingtrain/sketches/r4ApYWpH_ πŸ•ΉοΈ ASCII image dom: https://editor.p5js.org/codingtrain/sketches/ytK7J7d5j πŸ•ΉοΈ ASCII text: https://editor.p5js.org/codingtrain/sketches/LNBpdYQHP πŸ•ΉοΈ ASCII weather api: https://editor.p5js.org/codingtrain/sketches/DhdqcoWn4 πŸŽ₯ Previous video: https://youtu.be/PbPUgyql5p4?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH πŸŽ₯ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH Links discussed in this video: πŸ”— ASCII play by ertdfgcvb: https://play.ertdfgcvb.xyz/ πŸ”— HTML Entity: https://developer.mozilla.org/en-US/docs/Glossary/Entity πŸ”— HTML div: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div πŸ”— p5.js loadPixels(): https://p5js.org/reference/#/p5/loadPixels πŸ”— p5.js brightness(): https://p5js.org/reference/#/p5/brightness πŸ”— CodingTrainChooChoo on Twitch: https://www.twitch.tv/codingtrainchoochoo 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/ πŸ‘Ύ Share Your Creation! https://thecodingtrain.com/Guides/community-contribution-guide.html 🚩 Suggest Topics: https://github.com/CodingTrain/Rainbow-Topics πŸ’‘ GitHub: https://github.com/CodingTrain πŸ’¬ Discord: https://discord.gg/hPuGy2g πŸ’– Membership: http://youtube.com/thecodingtrain/join πŸ›’ Store: https://standard.tv/codingtrain πŸ“š Books: https://www.amazon.com/shop/thecodingtrain πŸ–‹οΈ Twitter: https://twitter.com/thecodingtrain πŸ“Έ Instagram: https://www.instagram.com/the.coding.train/ πŸŽ₯ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH πŸŽ₯ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA πŸ”— p5.js: https://p5js.org πŸ”— p5.js Web Editor: https://editor.p5js.org/ πŸ”— Processing: https://processing.org πŸ“„ Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/website/issues/new

Wheatcha