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. thecodingtrain.com/challenges...
p5.js Web Editor Sketches:
🕹️ ASCII video: editor.p5js.org/codingtrain/s...
🕹️ ASCII image canvas: editor.p5js.org/codingtrain/s...
🕹️ ASCII image dom: editor.p5js.org/codingtrain/s...
🕹️ ASCII text: editor.p5js.org/codingtrain/s...
🕹️ ASCII weather api: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Video
🎥 All videos: • Coding Challenges
Links discussed in this video:
🔗 ASCII play by ertdfgcvb: play.ertdfgcvb.xyz/
🔗 HTML Entity: developer.mozilla.org/en-US/d...
🔗 HTML div: developer.mozilla.org/en-US/d...
🔗 p5.js loadPixels(): p5js.org/reference/#/p5/loadP...
🔗 p5.js brightness(): p5js.org/reference/#/p5/brigh...
🔗 CodingTrainChooChoo on Twitch: / codingtrainchoochoo
Other videos mentioned in this video:
🎥 The Pixel Array: • 11.3: The Pixel Array ...
🎥 Basics of CSS: • 8.7: The Basics of CSS...
🎥 p5.js Web Editor - Uploading Media Files: • p5.js Web Editor: Uplo...
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: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/Guides/com...
🚩 Suggest Topics: github.com/CodingTrain/Rainbo...
💡 GitHub: github.com/CodingTrain
💬 Discord: / discord
💖 Membership: kzhead.infojoin
🛒 Store: standard.tv/codingtrain
📚 Books: www.amazon.com/shop/thecoding...
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/websit...
I vote keeping it 'Coding Challenge'. You'll always be the Coding Challenge guy to me. Even if we go past the time limit every time haha :D
facts! 2nd that...
I agree. I see the "challenge" to be to make something cool, to learn something, and to have fun. *thats* the challenge. Not something to beat necessarily
Yesss
@@pvic6959 that's very very true and i see that's the idea of the game jams, and it's to learn new things and have fun and make teams, make new friends and learn how to work in teams, the game jam is like a challenge to me so i love it, and love the best programming teacher ever MR Daniel Shiffman ❣️, love you all guys ♥️.
Leave it as is please
As an old C/C++ coder, seeing this much accomplished with this little code is mind-blowing!
I wrote something like this for Uni a year ago in C++. I don't know if I'm mad I didn't use JavaScript or not, but the experience was certainly interesting with C++
I did an very very basic ASCII video filter like a month ago. I could just play the video on an html page and I would just display a code section animated to see the video in ASCII. It could be nice to improve it. If y'all are interested you could just fork my project and make a PR (it's super basic tho, I think it's a static modems project)
Damn I just finished seeing the video and realise he did the same thing but better lol.
@@jjinendra3inhi ki kami thi😂
You have no idea... Java here
...now Dan, your whole whiteboard speed-edits and post augmentation has become so next level... perfect! just WOW!
A video can be rendered on a commodore 64 with this trick. :lol:
The amount of effort for your off-the-cuff alternate ideas that you then have to fully code so your editor can splice them in for 2.5 seconds. Don't think it's lost on us. It's an incredible amount of extra work per video. You are a legend, sir!
I noticed that too. Kudos!
i love how simple of a concept this is. i remember back in the 2000's and a lot of websites did this to images and i thought it was simply magic. so cool to see real time video being rendered at the browser with ASCII, just amazing
A video can be rendered on a commodore 64 with this trick. :lol:. It had a very rich character set. I may try it in an emulator.
in 90s there was something called aalib, you could pump anything through it and see videos, demos, games... whatever on ascii terminal the idea is like 30 years late but even this is not true as algorithms doing such things existed probably a few decades earlier. aalib could use also 16 colors, different type of charsets and so on, and so on.
kzhead.info/sun/ebCldNiXa3d9i2w/bejne.html a demo which was part of the project 😀
Next step: add edge-recognition, so you can use / for such slopes, that could keep sharp edges sharp
Oh I love this idea!!
@@TheCodingTrain I was going to suggest doing this but remove the innards so your left with just the outlines similar to the old ASCII art days. _____ ___ |[]|_n__n_I_c |___||______|____} O-O--O-O+++--O-O
@@nzhook That's a great idea too, though my brain is upset at the phrasing "remove the innards" xD I mean, I understand what you mean, but that sounds so... visceral.
try using a log base 2 function to convert the pixel range from 255 to an 8 scale. Then get the image derivative by using a two pointer technique to subtract the previous pixel from the current pixel!
then add a hashmap for your ascii character of choice
Messed around with some of the ascii shading characters and found that ' .:░▒▓█' this combo works great for the "density" const. Loved this video and your content is always great!
Arent those unicode/utf8 ?
@@marcopeterson805 i think its from extended ascii
I tried this during the recent live stream and it worked great!!!
@@omarsoub_._ yup it is. I guess they were used in old programs
@@marcopeterson805 These characters exists from looooooooooong ago, they are original from ASCII extended. ALTGR +176, ALTGR+177,ALTGR+178, and ALTGR+219
Daniel your channel has become really amazing in these years. Your immense energy and positivity are still the same!!! That's why you're the best. Keep up the outstanding job.
6 odd years ago I watched my first coding train video. It was something about star generation like travelling in hyperspace. Now I’m about to finish my degree in computer science. I’m researching testing methods for random number generation, comparing pseudorandom to radiation random. You inspired me all those years ago, thanks
When I was 6 years old, it was 1996. and I was with my kindergarten on a school trip. Back then, there weren't PCs available on location, only old FAX telephones. And while we were talking on a shared phone my mom sent me an image of her converted to ASCII via fax. I was really really proud that I've got a picture of her while all kids were just talking with their parents on a phone.
wow, what a story!
I just started coding a few weeks ago and your tutorials are sooo good and really fun! I love your humor and energy, it just makes coding fun and exciting instead of intimidating and scary
The video editing on all these newer videos is really next level. The content is as fantastic as always too!
I remember ertdfgcvb from the website they had in the mid-2000s, showcasing all sorts of Flash-based art which I loved as a kid. (fun fact: ertdfgcvb is not just a random jumble of letters, it's forming a parallelogram on a keyboard!)
Really appreciate the tight editing. This channel just keeps getting better...somehow.
you've inspired me to make my own processing style framework in C#! since i've started watching you i've grown quite a bit as a programmer, thank you for that! keep coding challenge!
Coding has never been this fun and cheerful for me before, THANK YOU SO MUCH
your style of teaching really resonates with me, and im about 10 years into a professional coding career where coding has often become mundane and unimaginative. I found myself excited again about the possibilities. thank you for sharing with us!
This is the thing that i was searching for months. Finally you did it
Man, I just discovered your channel yesterday. You give great ideas to mess around which CAN produce even greater ideas. Thank you for your videos.
I absolutely love your videos. You taught me how to code by actually giving me examples and problems to solve and everything. I just really appreciate your content. Keep on inspiring :D
MAN I got so ecstatic when I saw you. I loved your videos as a child but drowned in demotivation and stopped watching coding videos so this is refreshing and blissful! I'm now majoring in Computer Engineering!!
Wow! I love this story! (Also, I feel old 😂)
@@TheCodingTrain😢
I vote keeping the name as is. I see the "challenge" to be to make something cool, to learn something, and to have fun. *thats* the challenge. Not something to beat necessarily
Appreciate this feedback!
@@TheCodingTrain No problem! You have brought me joy, entertainment, and learning for many years at this point! I share your channel with ANYONE who asks me about coding haha. Im glad I could give back a little bit :)
I wasn’t here for quite some time (about 2 years or so now), and I’ve gotta say, the quality of these videos has improved a ton! Well done Daniel!
You always bring joy to my heart, and knowledge to my mind. Thank you. You're awesome.
Code Stations - places on the different routes the Coding Train takes where it stops to take in the Scenery. Different routes cover different themes, tracks can converge at some Stations where topics overlap and passengers can hop off and follow a different route. You can also have "Scenic Routes" where you take in more detail or "Express Routes" where you cover the essentials. Trains still have to arrive on time so the timing element can remain...
Coding has always been cool. This guy made it fun
I just want to say thank you for being so passionate about what you do. Your videos actually make me want to learn coding and replicate similar projects ❤️
Just found your vids and absolutely love them, keep posting these challenges!
One thing you could do to improve this is to improve the string storing the brightest to darkest characters so that the progression is more linear, rather than just random. Then it would line up with the linear nature of the algorithm which assigns the brightness of a pixel to the character in the string
This guys is like the Bob Ross of creative coding and I'm all for it.
I love to see the channel evolving, you're the best!
i love to see your progression over the years
Keep "Coding Challenge". That name has worked well for six years! But ditch the clock. The challenge for you is to explain the coding process so that others can understand it, and you shouldn't feel rushed. The challenge for Coding Train passengers is to make (and hopefully share) our own variants.
You could do something like "Coding Voyage"?! Voyage evokes a sense of exploration and adventure which is in tune with your theme, even if it is historically used for nautical expeditions and not train trips lol. Great video as always!
Neat! Awesome move at the end when you added a bunch of spaces to the brightness/character array; that really made it pop in an interesting way!
Love your enthusiasm for coding! Keep it up!
This is so cool. Stuff like this is really inspiring me to learn to code.
That is crazy how the numbers are in descending order!
@Andy B I don't think the string is well thought out.
Love you energy and enthusiasm. One of my favorite teacher.
Another great tutorial and coding challenge, I love watching these! I developed an image reader as my first year college co-op project with a company called ProGraph, and used the 'fixedsys' font to dump each image format to ASCII, as a test. FixedSys is a mono-spaced raster font, so you can count the actual pixels in each character to determine how much 'value' the character has based on the number pixels in the area that are white, and express it as a value from 0 (black, no pixels are white) to 255 (white, all pixels are white). You can quickly fill an array with 0 through 255 'values' that recreate black to white transitional brightness and do exactly what you did using the generated string of each 'pixel' pulled from the 'value' array.
Trying to render 3D objects ASCII-style would be pretty cool. Replicating Andy Sloane's spinning donut using JS would be an interesting coding challenge.
You can use pretty much the same code as in this video, just replace the camera input with your favoured method of capturing 3D objects. Either through rendering it to video, a series of stills or P5's built-in loadModel to load the .obj file directly (don't forget to switch it back to using Canvas and setting your canvas to WebGL if you use the latter).
I'm excited to see this in action and make it my self, eventually. Thank you! Choo Choo!
Please share on the website when you do! thecodingtrain.com/CodingChallenges/166-ascii-image.html
This is a really cool project, thanks for sharing!
the editing on this and the little gags on the screen are great. awesome video!
Dude, I love your videos! They are awesome! Also, I love your energy and your coding skills. OK, back to the topic!!! ASCII images are my favorite thing to do. I put that s#!t everywhere... Nothing better than a funny ASCII image after finishing a build or running a command! It makes things kinda starwarsy and leget!!! And let's not forget, these silly images boosts team morale (since we can't pay them more, why not I give them some ASCII images treats instead)? LOL, JK... They get paid enough... Anyway, keep on rocking man! I will put an ASCII images of you in my code as an easter egg (I do that from time to time in harmless code, like build scripts and such)
Really nice to see more of this format again, loved the original challenges and they are what got me hooked in the first place. Change is good though, and while I like the Coding Challenge name, they are more like journeys as you say. Confirmation bias at work I’m sure, but I really do like the name Coding Journey. Implicit in that name is the arrival at a destination, but Coding Destination doesn’t quite have the same ring. Besides, quite often it’s not the end result that matters, but more about how you get there. Coding Trip Coding Ride Coding Expedition Nah, I prefer Coding Journey, then you could title videos like “Coding Journey to ASCII town”, lol
used to watch you for my new media arts class. i love how youre so enthusiastic! will continue keeping up with the stuff you post really appreciate what you do
Is anyone else here implementing this code on vintage computers, PRE 1985? This is why I am here, and I thank you so much @The Coding Train for your fantastic video and energy!
Instead of using a non-breaking space you should use the presentation element, , this will preserve whitespace without adding the non-breaking part of nbsp.
OMG that was incredible.... You are the reason am so happy find processing ide , and that gives me freedom in creativity , And I wanna do this too:)
Thanks for the nice comment!
I wrote a C++ program to play full color video in the console: kzhead.info/sun/p8mhd6WaiXRjpq8/bejne.html It uses only the 16 standard colors available in CMD with dithering, as well as only the standard ASCII characters 176-178. It works in both Windows and Linux, and it works in Windows Subsystem for Linux and through SSH. You can watch video through an SSH console!
I love how this guy is always such happy and excited
As an alternative to replacing all of the spaces with nonbreaking space entities, you could set `white-space: pre;` in the CSS file, which would make all spaces render normally.
yea was just gonna say this as well.
That’s exactly how I do it in the ASCII playground. The performance is really good (60FPS in fullscreen) until color is added (single chars wrapped in spans).
@@agysin using colors, i print in a canvas instead of the Dom. It'd be pointless anyway.
@@kirkanos771 I wrote an optional canvas renderer as well and it's faster but not by much, tbh. I finally also added a WebGL renderer which obviously is smooth no matter the amount of characters to display. But the point for me is to output text as “text“ - and not to render it on a pixel canvas.
@@davealias He didn't do it in CSS. &nbbsp; is still HTML
fun fact: i did ASCII art with a tutorial in blender using nodes (those who know about blender understand) and from that i made a donut with lighting adjustment and rotation. so i kinda understand the logic at first but idk the syntax or the code so i didnt make it the tutorial is from default cube
ofc it's by Default Cube, the dude's channel is a gold mine
Awesome video. Thinking of the running colored text… It is cool to see how small creative lines have such amazing effect! I
Simply, you are the best! This was crazy good!
I’d love to see you create a script that detects the resolution of an input image/video and then fits that to a hilbert curve. It’s a much more efficient data structure
Some ideas: - The coding choo-llenge - Express coding - Coding training
Or may be "Coding Express"
I'm studying logic and algorithms yet, and this channel is awesome. It will be a great way to train my skill in building project once I learn Python and Javascript. Thanks a lot.
i know nothing about coding, I have no idea how I even ended up here. I also don't even own a computer. But I was fascinated by this video and watched it twice. i have no idea where I should start watching your channel but you've a subscriber in me.
Great video! I've been inspired to get back into programming from your channel. Just one question.. How do I achieve your level of energy and enthusiasm?
Really you want to sound like a total knob end?
@@shrimpoffthebarbie What does that even mean?
You can always try Cocaine.
that density array seems wrong. There are bright characters at one end, and dark characters at the other, but in the middle it's just all the numbers in numerical order which I highly doubt is also the order of density.
Amazing. Your contribution to education is a great gift. Thanks!
Seen a few videos but this one enticed me to subscribe. Very nice idea. I remember the Fortran versions at Uni back in late 70s to make pinup posters.. Coding is still cool, even after 40 years.
Oh wow, this is similar to a project I attempted called "picharsso". It has support for braille characters if you're into that
Oh cool! I would love to try something like that!! Any reference links?
@@TheCodingTrain Hey Dan! I’m having some issues with KZhead comments with links, so I tweeted the link , mentioning the coding train handle! Cheers!
Should totally be Coding Collaborations.... cause the challenges so far haven't been "go away and code the same thing" it's been "go away and improve on my thing" .... to that end including going through other people's additions to your code (or even each other's code) would be amazing videos/followups for a second channel
Yes! I'm hoping to do this more on live streams!
I've been there for some of that (you even looked at my raytracing.... which I still need to work on) but I think they could be their own videos even going back to the earliest submissions Code diving random code is kinda vital for all coders teaching that would be great not just "cool effect" but "how does that work" kinda things Also I'm thinking about Steve Shives and his "not actually trek actually" videos where he puts in "even less effort" and does comment response stuff, doing that with code could be very interesting, it could be a lot less work to create that content but you probably can't do it with just any or every submission diving into some though would be great and drive people to the old challenges again
Manh! this guys energy is on another level
Is it me or is the production value of this video just off the charts? It’s been a while since I’ve seen a coding train video and I’m pleasantly surprised
19 seconds ago wow!
5 minutes ago, pogers!
17:07 => html,body{whitespace:pre;} no need of
New to your channel and can't stop binge watching! It's more of "Coding task accomplished"
Also, I hate clickbait thumbnails so much. Nowhere in this video is that thumbnail.
your magic is to make watch me these 22 minutes even if I am not a coder or developer, to enjoy me, and to make me feel like I understand and I can do it by myself:)
I love your energy!
I always love your "Coding Challenge" videos, always excited to see another! About the name, I think "The Coding Express" has a nice ring to it, either way keep them coming!
The editing is amazing!
Oh my, this is so crazy, thumb up!! I remember those irc days, but making ascii video is really the next level.
That might be the coolest thing you've done so far, nice
Wow , just wow , you are a great teacher I have ever seen! Exelent 👏
I love that at the end you filtered out the green like a boss.
I just found your videos and what initially got me to click was the Coding Challenge videos, I think you should keep em
I watch a p5.js video about making a ball bounce like 4/5 years ago. Today I am a IT-manage and Full Stack, with PHP and JS as my natives. This guy sparked something in me!
i just found this video and saw the whole thing, amazing subscribed, keep up man!
Very well done. You have a great teaching method that make it fun.
this is the first time that i see your channel and I love it. you really do great things fighting !!!!!!
wow. this is simply amazing
Excellent old school challenge!
you are just amazing man! I am inspired. keep it up! :) thank you for amazing videos.
Just want to drop a line letting you know that I thoroughly enjoy your videos. Keep up the good work (y)
What a fun video format. Very cool!
I really like this guy's attitude for coding!
Really love how you make coding cuter🥰 hope all the best for you🥰
I love this guy! Not as much as Tom MacDonald and Adam Calhoun love each other but there is still time... Thank you Dan for all the years of knowledge and happiness you bring into this world! Keep up the great work!
That was insane bravo!
I vote for keeping it as "Coding Challenge". Something I've always appreciated about your channel is that you don't hide the struggle of getting something working. Many other channels edit out all the mistakes. I think downplaying the challenge can negatively affect a new programmer's confidence.
True, the satisfaction is getting through and overcoming the struggle
Man, you're awesome, LOVE your videos.
this channel is such a gem
bro this edit is epic, keep it up
Absolutely awesome! 👏
Perhaps, "The Challenge Express?" Thanks for being an awesome human being.
Oooooooooh, this is a super excellent idea!