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/enUS/d...
HTML div: https://developer.mozilla.org/enUS/d...
p5.js loadPixels(): https://p5js.org/reference/#/p5/loadP...'>https://p5js.org/reference/#/p5/loadP...
p5.js brightness(): https://p5js.org/reference/#/p5/brigh...'>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 Realtime 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/Codeo...

This description was autogenerated. If you see a problem, please open an issue: https://github.com/CodingTrain/websit...