Image to Ascii

Coding Challenge #166

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.

Topics

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 refinements
21:29 - See you next time!

ASCII video

ASCII image canvas

ASCII image dom

ASCII text

ASCII weather api

Community Contributions

ASCII art from image generator by Navjot Singh Rakhra (Source Code)
Text Visual Density Sorter by Joseph Horton (Source Code)
ASCII Webcam by Bas Mulder (Source Code)
Image2ASCII in Rust by Karthik Iyer (Source Code)
Asciifier - Slider-Controlled Char Size by Josh Vickers (Source Code)

You can also add your own version! (See how)

Links discussed in this coding challenge

Videos discussed in this coding challenge

The Pixel Array by The Coding Train
Basics of CSS by The Coding Train
p5.js Web Editor - Uploading Media Files by The Coding Train