The Coding Train | Coding Challenge 166: ASCII Text Images @TheCodingTrain | Uploaded 2 years ago | Updated 10 minutes ago
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/challenges/166-image-to-ascii
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: https://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: http://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: http://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
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/challenges/166-image-to-ascii
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: https://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: http://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: http://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
