Coding Challenge 166: ASCII Text Images
HTML-код
- Опубликовано: 13 июн 2024
- 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: ruclips.net/user/thecodingtrainjoin
🛒 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
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!
...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:
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.
ruclips.net/video/FLlDt_4EGX4/видео.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
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.
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
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!
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.
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.
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
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 :)
This guys is like the Bob Ross of creative coding and I'm all for it.
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 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.
I really like this guy's attitude for coding!
That is crazy how the numbers are in descending order!
@Andy B I don't think the string is well thought out.
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 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
Coding has always been cool. This guy made it fun
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...
This is the thing that i was searching for months. Finally you did it
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!
Coding has never been this fun and cheerful for me before, THANK YOU SO MUCH
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 is so cool. Stuff like this is really inspiring me to learn to code.
The video editing on all these newer videos is really next level. The content is as fantastic as always too!
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
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
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!
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!
really like these coding challenges
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
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.
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
Love you energy and enthusiasm. One of my favorite teacher.
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
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!
Perhaps, "The Challenge Express?" Thanks for being an awesome human being.
Oooooooooh, this is a super excellent idea!
Damn the video part looked so smooth
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)
Some ideas:
- The coding choo-llenge
- Express coding
- Coding training
Or may be "Coding Express"
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
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
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
You always bring joy to my heart, and knowledge to my mind. Thank you. You're awesome.
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!
He's so cute. Such a sweet, inspiring person. Love to see him having a blast doing crazy stuff like this😀
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.
Manh! this guys energy is on another level
I vote for Coding Conundrum. You present each video as a puzzle that needs to be solved.
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 RUclips 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
I love how this guy is always such happy and excited
i love to see your progression over the years
19 seconds ago wow!
5 minutes ago, pogers!
17:07 => html,body{whitespace:pre;}
no need of
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:)
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.
Also, I hate clickbait thumbnails so much. Nowhere in this video is that thumbnail.
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
I love to see the channel evolving, you're the best!
I don't even follow the content anymore(great content btw). I am just here for the positive energy! Daniel is my antidepressant
Love your enthusiasm for coding! Keep it up!
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!
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!
This is the best free software Ive seen. Respect.
Amazing. Your contribution to education is a great gift. Thanks!
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!
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 ❤️
Simply, you are the best! This was crazy good!
Choo choo!.... _All Aboard the Coding Express!!_
Wow , just wow , you are a great teacher I have ever seen! Exelent 👏
this channel is such a gem
the editing on this and the little gags on the screen are great. awesome video!
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.
honestly, coolest thing I've seen in a while.
It’s amazing how much the human eye and brain can comprehend simply from contrast and simple shapes.
funniest coding youtuber I ever watched, respect
That might be the coolest thing you've done so far, nice
New to your channel and can't stop binge watching! It's more of "Coding task accomplished"
I love that at the end you filtered out the green like a boss.
This guy is actually insane!
The best codeing channel 🔥
My favorite videos of you are the ones where you try something new without a completely set up plan. It shows your true character and are the most entertaining for me. The chaos is part of the deal ;)
Thanks for the nice feedback!
coding adventure!!! What the heck, coding journey, exploratory coding, are also chill
This is a really cool project, thanks for sharing!
This is my first time messing with java, ty for helping me make my christmas gifts for my family this year!
Just found your vids and absolutely love them, keep posting these challenges!
Dude, if you haven't been on Sesame Street yet? It's a crying shame. You remind me, of that, and Mr. Rogers. Best memories of my childhood. You, are a natural and I'm convinced you could make ANYTHING fun. Good vibes, good times. Thanks!
Its amazing how creative you get with code
I love your energy!
One of the best videos I've seen in a long time
Wow thank you for the kind feedback!
this is the coolest thing ive ever seen
wow props of the Next Level production value!