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...
Watch video Coding Challenge 166: ASCII Text Images online without registration, duration hours minute second in high quality. This video was added by user The Coding Train 12 February 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,166,371 once and liked it 45 thousand people.