Coding Challenge 166: ASCII Text Images
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...
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: • Video
🎥 All videos: • Coding Challenges
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: / codingtrainchoochoo
Other videos mentioned in this video:
🎥 The Pixel Array: • 11.3: The Pixel Array - p5.js Tutorial
🎥 Basics of CSS: • 8.7: The Basics of CSS - p5.js Tutorial
🎥 p5.js Web Editor - Uploading Media Files: • p5.js Web Editor: Uploading Media Fil...
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/com...
🚩 Suggest Topics: https://github.com/CodingTrain/Rainbo...
💡 GitHub: https://github.com/CodingTrain
💬 Discord: / discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
📚 Books: https://www.amazon.com/shop/thecoding...
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 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-o...
This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/websit...
Смотрите видео Coding Challenge 166: ASCII Text Images онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь The Coding Train 12 Февраль 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,166,371 раз и оно понравилось 45 тысяч людям.