166-ascii-image.md

title	video_number	date	video_id	repository	variations	links	videos	contributions	topics
Image to Ascii	166	2022-02-11	55iwMYv8tGI	CC_166_Ascii_Image	name lang folder web_editor ASCII video p5js ascii-video KTVfEcpWx name lang folder web_editor ASCII image canvas p5js ascii-image-canvas r4ApYWpH_ name lang folder web_editor ASCII image dom p5js ascii-image-dom ytK7J7d5j name lang folder web_editor ASCII text p5js ascii-text LNBpdYQHP name lang folder web_editor ASCII weather api p5js ascii-weather-api DhdqcoWn4	title url ASCII play by ertdfgcvb https://play.ertdfgcvb.xyz/ title url HTML Entity https://developer.mozilla.org/en-US/docs/Glossary/Entity title url HTML div https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div title url p5.js loadPixels() https://p5js.org/reference/#/p5/loadPixels title url p5.js brightness() https://p5js.org/reference/#/p5/brightness title url CodingTrainChooChoo on Twitch https://www.twitch.tv/codingtrainchoochoo	title author video_id The Pixel Array The Coding Train nMUMZ5YRxHI title author url Basics of CSS The Coding Train /Tutorials/8-html-css-dom/8.7-css-basics title author video_id p5.js Web Editor - Uploading Media Files The Coding Train rO6M5hj0V-o	title author video_id source ASCII art from image generator name url Navjot Singh Rakhra https://github.com/NavjotSRakhra fJMaec6zi9k https://github.com/NavjotSRakhra/ASCIIArtCreator title author url source Text Visual Density Sorter name url Joseph Horton https://hort.onl https://editor.p5js.org/jhrtn/full/a2pibVqFZ https://editor.p5js.org/jhrtn/sketches/a2pibVqFZ title author video_id source ASCII Webcam name url Bas Mulder https://github.com/basmulder03 5d9iUctUTWs https://github.com/basmulder03/ascii_webcam title author url source Image2ASCII in Rust name url Karthik Iyer https://github.com/KarthikRIyer https://raw.githubusercontent.com/KarthikRIyer/image2ascii/91e8471dbb2ebe98701aca7d4d24769e79091aa0/image.svg https://github.com/KarthikRIyer/image2ascii title author url source Asciifier - Slider-Controlled Char Size Josh Vickers https://editor.p5js.org/thejoshvickers/full/9_8ozyPMV https://editor.p5js.org/thejoshvickers/sketches/9_8ozyPMV	title time Welcome! Choo choo! 0:00 title time Introducing Today’s Topic 0:28 title time Pixel to ASCII 1:39 title time Pixelating an image 4:52 title time Pixel Array Explanation 7:03 title time Back to the code 8:40 title time Adding Text 10:18 title time Mapping Brightness to Characters 11:04 title time Switching from canvas to DOM 13:26 title time Real-time ASCII video 18:10 title time Some refinements 20:10 title time See you next time! 21:29

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 ASCII characters and finish with rendering video as texts in a DOM element.