To try everything Brilliant has to offer for free for a full 30 days, visit brilliant.org/Acerola/ you’ll also get 20% off an annual premium subscription! #ad I got braces on so I'm learning how to speak again, sorry for any poorly enunciated words!
0:48 There is a pretty good came called "Stone Story RPG" that uses ascii art for the entire game, and by the entire game, i mean the ENTIRE GAME, menus, lightning, everything, and it looks beautifully simple
Finally someone that takes into account edge flow, as someone that does some 'by hand' ascii art, always am a bit annoyed when all of those 'ascii art generators' just do the "bright = big character, dark = small character" and leave at that A way of making it even nicer would probably to have an extra pass that applies some character heuristics, like "if above is '\' and bellow is '/', this should be a ')' ", and also take into account that letter characters also have slopes, so if you have a 'top left to bottom right' sloped edge, the 'q' character also fits it, and a 'V' is where '\' and '/' converge going down, and so on
I know Acerola likes to focus on real-time rendering and applications to games in motion. I wonder how much computation time these extra checks would add.
I was thinking that maybe there was a way to do some additional processing at a higher resolution to better quantize pixel groups that would better match specific characters. Like an 'L' shape would fit better in an ascii pixel where you have two light subpixels on the bottom of the pixel and one light one dark subpixel at the top for example.
big game studio does a general 'replace bright with big character, dark with small character' and called it a day, but then you come in and did just that much more work and on all accounts blew them out of the water all by yourself. you deserve my sub o7
3:29 I also recommend uploading in 1440p (you can transcode or export, you don't need your timeline to be 1440p) because then RUclips does the "Enhanced Bitrate" thing where normal 1080p gets half the bitrate it used to.
Also, thank you for not doing the increasingly dull LLM / Transformers / AI content. You'll soon be what current gen game devs & technical artists (who are starting now) will call an "OG" resource on graphics programming. On your path, and with a few good collabs, you have the potential to co-author the next evolution of the GPU Gems series. Excited for you to blow up :D
A lot of ascii art uses a variety of other symbols for edges, like V, for sharp points, Y for branching lines, and sometimes non-ascii characters (japanese characters seem common) to get more complicated edges. The art at 6:45 has a lot of examples of this. I wonder how you'd be able to automate something like that; you'd need a lot more than just the angle of the edge. It seems like you'd need to do something complicated with the "subpixels" as you downscale the image to find the specific shape of the edges, and map it to the most similar-looking edge character.
You would add to the "histogram" step I think, replacing the check for "which angle is most common in the 8x8 block" with a check against a set of multiple angles. Like, if the top half is mostly \ and the bottom half is mostly / you instead get ). You could get more granular with it, possibly to the point of very specific letters.
I'd say that is more of an extended ascii/CGA text mode art as it uses the DOS font that includes more characters, and also uses foreground and and background colours, but yea, pretty cool game
@@pinkorcyanbutlong5651 a lot of ascii art isn't truly ascii, but shift jis or its successors anyway thanks to the popularity of the medium on japanese image boards. the "ascii" in the name isn't really in reference to the encoding used, but rather the fact that the image is made from digital text. ascii was just the standard when term was coined, so it's kinda just been genericized in this context i mean really it's been genericized in a _lot_ of contexts, stuff like terminal-based roguelikes get called ascii games even when they use the ibm charset, but y'know
0:54 correction: there are a few. Many of which are mobile games. It’s not really a shader, but just everything is rendered with text. _Stone Story_ is a good one- it’s a free mobile game with no ads. Mad respect to them for making something good and playable for mobile.
so if it's not a shader and just actual ascii art, then there is no correction, there is also nothing to correct as it's me saying I personally have not seen it, not that it doesn't exist lol
IDK why but the shader rendering actual text characters in the boss fight cutscene as just lines and squares was really funny. You literally Are Text, ASCII shader...
Calling it ASCII art isn't really correct. Drawn *with* ASCII is how it is usually referred to. All characters are symbolic or literal text, not a portrayal of an image. That this is cohesive owes to a painstaking selection of characters and it still takes work to get used to. The game itself is art, the use of ASCII isn't the medium though.
If you abandon the realtime requirement, you could maybe do something like this: Take the DCT of all the white-on-black characters that you want to be available to the shader. Take the DCT of the section of the image. Find the “nearest” by some metric. This way you can dramatically expand the palette of letters, and have a more organic selection
When I initially clicked on the video I assumed this is how the effect was going to work. But on reflection - and as you say - this would require a huge amount of branching and would run terribly as a GPU shader.
I was thinking maybe you could use locality sensitive hashing to switch between character palettes. You could downscale 8x8 blocks to 2x2 and use 4 hash functions, horizontal and vertical lines, and the two diagonals. Each hash function gives you 1 bit of info: which side of the line is brighter. That gives you 16 palettes you can choose from to determine the best character for the brightness less, which should retain quite a bit more detail. It should be very fast as well, as you're just comparing a few numbers each time without branching.
I was thinking you could use convolution filters generated by blurring the character set. Taking the DCT of the section is interesting. What are the advantages of doing that over just a convolution filter?
@@oEQjet tbh my signal processing skills aren’t strong enough to really push me towards one or the other. I thought DCT was what jpeg used so thought might make more sense in this specific case
Amazing work my bro. I hope you’re proud of the knowledge that you’ve gained and shared. This video was not only very informative and interesting, but easy to follow and understand too. Appreciate you, mate. Edit: WOW! That’s incredible. It got even better in the last 5 minutes. The Elden Ring scenes (with no DLC spoilers!) was beautiful. Man you nailed this so hard
I wonder how this would look like if instead of just downscaling the image and only matching the character to the luminance, you sampled the original image and looped through more characters to find one that best matches the pixels. This would be quite slow, but there are definitely ways to optimize this lookup. Would be pretty interesting to also see how it works with different fonts.
I've actually implemented this a few months back. Only in C# but I have outlined how it could be done in a shader with probably acceptable performance. It would take a lot of passes and buffers though. I've come to the conclusion that it's not really worth it. It preserves details a little bit better and the output is noticeably sharper - the simple luminance match method has a noticeable blur in comparison - but it's not better by enough to justify it IMO. With a bitmap font, it's still very noisy, the better details are only noticeable if you actively look for them. Maybe if you use antialiased fonts, but that would completely tank the performance. imgur_com/a/f5pQ1Qs (p sure youtube doesn't allow linking off-site so replace the _ with .)
I've actually implemented this a few months back. Only in C# but I have outlined how it could be done in a shader with probably acceptable performance. It would take a lot of passes and buffers though. I've come to the conclusion that it's not really worth it. It preserves details a little bit better and the output is noticeably sharper - the simple luminance match method has a noticeable blur in comparison - but it's not better by enough to justify it IMO. With a bitmap font, it's still very noisy, the better details are only noticeable if you actively look for them. Maybe if you use antialiased fonts, but that would completely tank the performance. a/f5pQ1Qs pretty sure youtube auto-deletes links, it's an imgur album with a comparison
@@sacwingedbatsatadbitsad4346 Hmm what if instead of just comparing the bitmaps you compared the gradient of those? Looking at your imgur gallery it looks like the edges are not really as pronounced as one would expect from this.
@@sxs512 The way it works is it subtracts the pixel in the font, 0 or 1, from the grayscale pixel in the same position, then adds together the absolute value of the pixels in the 8x8 grid. Obviously, if you subtract a value from itself you get 0, so the character with the lowest absolute value is the best match. This is the most canonical approach, it preserves the most information overall. Not all information is equally important to humans, though. For example, you can distinguish more shades of green than red or blue. You'd need to enhance the edges as in the video to get a more desirable but less technically correct look.
Just watched the video. Here is an option to save more details. You could choose symbols from ASCII table not by luminance, but by calculating how much the shape of the symbol suits the 8/8 region. First, normalise 8 by 8 region, to turn it lightest into white, and it darkest into black and shift all the other colors proportionally. Choose the symbol that has the least total difference compared to the region, and then adjust symbol's luminance to be same as average luminance of original chunk. Another option is to apply filter separately to RGB channels with red, green and blue symbols and then add them together to get the final result. Combining this methods you will be able to use all ASCII symbols, their luminance and colors, which should save a ton of details, probably close to possible maximum. This also should make image less contrast and more pleasant to look at for a long time. if comparing 8by8 chunks will hit performance, you can average some pixels to get 4by4 or 2by2 chunks, or you can find the least used symbols in the table and remove them, or both. This still should save more details Sadly i'm too dumb to code it myself
Depth fading looks very good, it really gives you that sense of 3D that's needed to keep the image coherent during gameplay. Lot of potential here for cool artstyles in a game.
It should be possible to retain much more detail by expanding the character set. It would be cool to see a shader that uses ALL ASCII characters and "downsamples" each 8x8 pixel grid down to the ASCII character that is most similar to it.
lets go love ascii made a ascii shader myself once it was awfull and poorly coded that used a text texture as a compute shader only took like a month im actually still thinking of making a ascii horror game lol
There is a lot of flicker on characters, especially with full square character. Perhaps having some kind of threshold to prevent high frequency changes of the same character like [full square -> @ for 1 frame -> back to full square] would make the image feel more stable if you prevent full square coming up again if there was one recently.
Been following the progress for this on twitter. This looks absolutely amazing and might be my favorite video of yours. Would love to make some small game that gets absolutely carried by these visual effects. Well done! Also, you gotta have one of the highest viewer retention rates during your ad reads (feel free to send this part of the message to potential sponsors)
0:47 Well, my dad is very good at building cities in Minecraft-like games that are so large that the game eventually can't handle it anymore. So I'll soon create my own such game that I'll make playable in the Linux TTY, inspired by this video.
Love this. Your channel has got to be one of my favorites! I can understand everything you’re talking about even though I’m only a high school freshman. It’s all so simple, and your intro with the flashing phrases and the design is peak! I also love recurring bits such as parish being the harbinger of the sponsored segment. As well as the ever popular “but Acerola?” Speaking of which, I don’t know if I just missed it, but I didn’t really get why returnal using a 10x10 text size was so strange. But you manage to put so much information in such a short amount of time that I very well could have subconsciously breezed past it. Another thing I love about these videos.
If you think about JPG tiles they have tile shapes within the encoding. So if you tried to use that trick, you could categorise all characters to have their equivalent gradients with baked in luminance value. You could detect a gradient across an 8x8 square and pick the set of characters based on luminance then sort them by the best gradient. In this way a bright character with darkness at the bottom can choose “.” And if the darkness is at the top it can choose “‘“ .I don’t claim to know how to make game code, so that is your magic. Other examples of characters with the same luminance but different gradients would be < and > or b and p.
Love the vid! I recently made a Asccii art generator in JS that created a bitmask of every ascii character of font size using a canvas and grabbing an image of each character, then cutting the image into chunks equal to the size of a character size. I then find the the best matching asscii mask and use that character, it really worked well in giving small intricate details with the non standard a-z and symbols by using other languages and special symbols. This obviously does not run real time and take about 10 seconds to generate on a 800x1200 image at font 10. Struggled to optimize it to be more real while not losing detail. Amazing insight gained from this vid, thank you!
yeah that elden ring cutscene was legitimately breathtaking in ASCII You really highlight the artistry of shaders in a way I never would have understood before
This would be fascinating for a game where you play as some sort of near-sighted cyborg who occasionally has flashes of hyper-photorealistic vision in key story moments where their humanity manifests itself.
This shader, as absurd as it may look, is probably one of, if not my absolute all-time FAVOURITE VISUAL EFFECT!! It looks so majestic, even with the quality loss. I adore you for having made this AND having it fully open-source. Believe me, when I can, my support on Patreon is guaranteed
You should have used a higher resolution if possible so you could get the most detail possible. I counted the amount of characters on the screen's width and counted 240 which multiplied by 8 is 1920 pixels wide or 1080p. With 1440p it is 1.3... scale so you could get 1.7... times more characters on the screen. With 4k or 2160p it is a 2 times scale so you could get 4 times more characters on the screen.
What a brilliant ploy to get people to watch the ad. Also, this was probably the easiest to follow video that you've made yet. I think I could probably code this one up myself.
Another option when selecting a char for a region, you can blur the character, take the use a least-squares method between the target and the character, and use the char with the lowest variance
There's another way I achieved this effect - create an 8x8 set of images of the ASCII characters (or text characters of other systems like C64, etc etc) - and use an image mosaic approach. This will take into account the internal shape of the characters and map the closest one to an 8x8 pixel of the original image. Upscaling by 8 to get 1:1 pixel mapping looks fantastic, but also results in gigantic images. As a final step you can downsample the image by 8 to get 8x8 solid blocks for coloring in the text (a better way would be to get the brightest and darkest pixels from each region and use these as text/background coloring)
I noticed the 11:52 Valhalla music almost immediately despite The Primeagen talking in its reaction video. Great video btw and impressive work on your part. You've taught me quite a few things that hopefully will be useful for me in the future.
I feel like evaluating each 8x8 tile of the rendered image and finding the closest character for it's features using a simple confidence model comparing the like-ness of the tile to each caharacter in the ascii table would improve the intricate details. kinda like how ascii artists look for super intricate ascii characters that perfectly fit the shape they need
This looks very cool. I've made a good amount of ASCII shaders, and I love the addition of the edge layer, especially implementing the distance falloff. Cel shading would obviously play very well with this effect The em-dash (-) would be better than the underscore for horizontal lines because it's in the middle of the sprite, so all of your edge sprites will be centered on the same axis. I would also suggest increasing your gradient from 10 to 16 or even 32 steps. You're reducing the already low amount of information by compressing your gradient palette. Thanks for sharing all of your awesome experiments!
There’s a game called Stone Story(mobile and steam) that is (I believe) entirely made of characters(ASKII). It’s very simplistic, but it’s still entertaining.
this is just amazing, thanks for inspiring me to do my own ascii renderer in rust, ill probably make a discord bot which converts all images sent in a server to this beautiful ascii image and store it in a "gallery" channel
I really really liked how the shader affected subtitles in the cutscene, this could be a sick effect for corrupted/loading data, like in a context that is not directly a command prompt, that kind of distortion couple be much more interesting than just printing a string of random numbers
Holy hell Acerola, this is so clean. Genuinely learnt so much while watching this video and it was so much fun experimenting after seeing the whole thing. God just because how well it turned out, genuinely I am so tempted into developing a whole game on it. Love it and please keep letting your random wishes drive you man. Also peak music choice throughout
What a cool and fun thing to do. Even if it wasn't super beneficial or the best way to render a game it made for a really cool thing to watch while eating breakfast! Thanks for your work!
To try everything Brilliant has to offer for free for a full 30 days, visit brilliant.org/Acerola/ you’ll also get 20% off an annual premium subscription! #ad
I got braces on so I'm learning how to speak again, sorry for any poorly enunciated words!
Maybe lol
Super Hot Mind Control Delete uses ASCII art shader for it's non-puzzle "real life" scenes in some sort of prison
Good luck with braces! I just got off "clear correct / invisalign" so I feel you.
Your cat is freaking me out, every time she appears an add pop up out of nowhere besides her😂
dwarf fortress uses acii character
"Is it possible to edge" Is a far more philosophical question than I expected from this video
many people have been asking this
@@Acerola_tI think I'm going to search for edging for further research
@@virionspiral please no
@@virionspiral on microsoft edge
"I want to go home, and then edge"... *disparage message*
0:48 There is a pretty good came called "Stone Story RPG" that uses ascii art for the entire game, and by the entire game, i mean the ENTIRE GAME, menus, lightning, everything, and it looks beautifully simple
Yup, was looking for this comment
Havent played that game in a while cause my dumbass dont know how to code automate the 🔥🔥💪💪GRIND🔥🔥💪💪💪
"Today, we'll be turning characters, into characters" 🔥✍
"is it possible to edge?" 🔥✍️
Monogatari reference?
That was GOOD.
“Noodles into noodles? At the Chinese restaurant?” - Parappa The Rapper 2 (PS2)
@@cringe4581 when is this said? I can't remember
Talks about ASCII art:
Creates ASCII art:
Beats Elden Ring with ASCII art:
Gives the public ASCII art for FREE:
Doesn't elaborate further....:
BaZED
Finally someone that takes into account edge flow, as someone that does some 'by hand' ascii art, always am a bit annoyed when all of those 'ascii art generators' just do the "bright = big character, dark = small character" and leave at that
A way of making it even nicer would probably to have an extra pass that applies some character heuristics, like "if above is '\' and bellow is '/', this should be a ')' ", and also take into account that letter characters also have slopes, so if you have a 'top left to bottom right' sloped edge, the 'q' character also fits it, and a 'V' is where '\' and '/' converge going down, and so on
Yea i was surprised they decided to limit it to just the 10 characters they did
¨`^~,._.,~^´¨ More letters would definitely be better ...
I know Acerola likes to focus on real-time rendering and applications to games in motion. I wonder how much computation time these extra checks would add.
I was thinking that maybe there was a way to do some additional processing at a higher resolution to better quantize pixel groups that would better match specific characters. Like an 'L' shape would fit better in an ascii pixel where you have two light subpixels on the bottom of the pixel and one light one dark subpixel at the top for example.
@@minicooper237probably neural nets lmao. With enough layers you could identify tiny features and assign the best character
I love the suspense leading up to the Mohg fight only for him to Comet Azur his ass
But acerola
But acerola,
but acerola~
butt
But acerola 😳😩
but areola.
big game studio does a general 'replace bright with big character, dark with small character' and called it a day, but then you come in and did just that much more work and on all accounts blew them out of the water all by yourself. you deserve my sub o7
i mean it *is* just a thing for the photo mode. not like its a major game feature
1:57 We are all edging, aren't we
3:29 I also recommend uploading in 1440p (you can transcode or export, you don't need your timeline to be 1440p) because then RUclips does the "Enhanced Bitrate" thing where normal 1080p gets half the bitrate it used to.
doesn't do?
16:45 Very ironic how an ASCII shader can't draw text worth crap 🤖
Not throwing shade, just found it funny. I love the effect, it looks great!
Maybe you can detect when a text is getting rendered in real time, so it can maybe be possible to put "real" text over the ascii text
i bet it could render text if the text was large enough. the problem is what he was talking about at @15:00
@@dantekiwi7926 Maybe you could just render the UI after converting everything to ASCII
@@dantekiwi7926 oh god
@@dantekiwi7926 if its not lined up with the grid and doesn't have the same font I can't imagine it looking good
Also, thank you for not doing the increasingly dull LLM / Transformers / AI content. You'll soon be what current gen game devs & technical artists (who are starting now) will call an "OG" resource on graphics programming.
On your path, and with a few good collabs, you have the potential to co-author the next evolution of the GPU Gems series.
Excited for you to blow up :D
transformers?
@@TeleportRush The alien car robots
@@TeleportRush the T in GPT is 'Transformer'
A lot of ascii art uses a variety of other symbols for edges, like V, for sharp points, Y for branching lines, and sometimes non-ascii characters (japanese characters seem common) to get more complicated edges. The art at 6:45 has a lot of examples of this. I wonder how you'd be able to automate something like that; you'd need a lot more than just the angle of the edge. It seems like you'd need to do something complicated with the "subpixels" as you downscale the image to find the specific shape of the edges, and map it to the most similar-looking edge character.
I think you could just use the letter sprites themselves as convolutional filters of a sort.
i think it would be similar to how jpeg compression breaks an image down into preset shapes but with characters instead
( ㅅ )
You would add to the "histogram" step I think, replacing the check for "which angle is most common in the 8x8 block" with a check against a set of multiple angles.
Like, if the top half is mostly \ and the bottom half is mostly / you instead get ). You could get more granular with it, possibly to the point of very specific letters.
Putting a video of your cat with the sponsor part is honestly so smart, I respect that
there's Asciicker, which is 3d and rendered in ascii characters
oh yeah this is a good example, thank you!
the fact that it's pronounces "ass kicker" is hilarious to me
I'd say that is more of an extended ascii/CGA text mode art as it uses the DOS font that includes more characters, and also uses foreground and and background colours, but yea, pretty cool game
@@pinkorcyanbutlong5651 a lot of ascii art isn't truly ascii, but shift jis or its successors anyway thanks to the popularity of the medium on japanese image boards. the "ascii" in the name isn't really in reference to the encoding used, but rather the fact that the image is made from digital text. ascii was just the standard when term was coined, so it's kinda just been genericized in this context
i mean really it's been genericized in a _lot_ of contexts, stuff like terminal-based roguelikes get called ascii games even when they use the ibm charset, but y'know
Also, my submission for acerolas jam: LAMB
There is a game based on ASCII art. Its called "Asciicker"
stone story rpg is an amazing game which uses ascii art for the visuals
yeah i meant specifically an ascii shader over 3D like the Returnal example
Dwarf fortress is the most beautiful game using ASCII art. You will understand everything happening on screen very easily.
The way tht Stone Story RPG allows players to make their own ASCII sprites is quite cool.
Candy Box 2 also uses ascii art
Cogmind does ASCII art well (it's a futuristic 2d roguelike).
0:54 correction: there are a few. Many of which are mobile games. It’s not really a shader, but just everything is rendered with text. _Stone Story_ is a good one- it’s a free mobile game with no ads. Mad respect to them for making something good and playable for mobile.
so if it's not a shader and just actual ascii art, then there is no correction, there is also nothing to correct as it's me saying I personally have not seen it, not that it doesn't exist lol
@@Acerola_t fair. But it’s still a really cool concept to render a game in ascii.
IDK why but the shader rendering actual text characters in the boss fight cutscene as just lines and squares was really funny. You literally Are Text, ASCII shader...
downscaled captions
@@MultiChristianandres yeah but either way it's still funny
Dwarf Fortress is an entire game rendered with ascii art.
I was surprised almost nobody else is saying this, I guess it isn't exactly conveying art? Just symbols representing objects
Exactly. The game is rendered in characters but its not asci art@@864awesomeness
Calling it ASCII art isn't really correct. Drawn *with* ASCII is how it is usually referred to. All characters are symbolic or literal text, not a portrayal of an image. That this is cohesive owes to a painstaking selection of characters and it still takes work to get used to. The game itself is art, the use of ASCII isn't the medium though.
this shader coupled with the fact that the elden ring dlc added an option to put the word "edge" into messages makes for some insane meme potential
edge has always been in the game.
those 9999 rating messages around the assassin dude in round table hold saying edge, lord
Edge isn't new
edge,
lord
Can’t believe he spent months figuring out the optimal edge technique 😤😮💨😤
If you abandon the realtime requirement, you could maybe do something like this:
Take the DCT of all the white-on-black characters that you want to be available to the shader.
Take the DCT of the section of the image.
Find the “nearest” by some metric.
This way you can dramatically expand the palette of letters, and have a more organic selection
When I initially clicked on the video I assumed this is how the effect was going to work. But on reflection - and as you say - this would require a huge amount of branching and would run terribly as a GPU shader.
I was thinking maybe you could use locality sensitive hashing to switch between character palettes. You could downscale 8x8 blocks to 2x2 and use 4 hash functions, horizontal and vertical lines, and the two diagonals. Each hash function gives you 1 bit of info: which side of the line is brighter. That gives you 16 palettes you can choose from to determine the best character for the brightness less, which should retain quite a bit more detail. It should be very fast as well, as you're just comparing a few numbers each time without branching.
I was thinking you could use convolution filters generated by blurring the character set. Taking the DCT of the section is interesting. What are the advantages of doing that over just a convolution filter?
@@oEQjet tbh my signal processing skills aren’t strong enough to really push me towards one or the other. I thought DCT was what jpeg used so thought might make more sense in this specific case
@@maboesanman I mean you're not crazy! Jpeg do use it, you could use it here! And i honestly couldn't predict what would be more effective.
Amazing work my bro. I hope you’re proud of the knowledge that you’ve gained and shared. This video was not only very informative and interesting, but easy to follow and understand too. Appreciate you, mate.
Edit: WOW! That’s incredible. It got even better in the last 5 minutes. The Elden Ring scenes (with no DLC spoilers!) was beautiful. Man you nailed this so hard
I wonder how this would look like if instead of just downscaling the image and only matching the character to the luminance, you sampled the original image and looped through more characters to find one that best matches the pixels. This would be quite slow, but there are definitely ways to optimize this lookup. Would be pretty interesting to also see how it works with different fonts.
I've actually implemented this a few months back. Only in C# but I have outlined how it could be done in a shader with probably acceptable performance. It would take a lot of passes and buffers though. I've come to the conclusion that it's not really worth it. It preserves details a little bit better and the output is noticeably sharper - the simple luminance match method has a noticeable blur in comparison - but it's not better by enough to justify it IMO. With a bitmap font, it's still very noisy, the better details are only noticeable if you actively look for them. Maybe if you use antialiased fonts, but that would completely tank the performance.
imgur_com/a/f5pQ1Qs (p sure youtube doesn't allow linking off-site so replace the _ with .)
I've actually implemented this a few months back. Only in C# but I have outlined how it could be done in a shader with probably acceptable performance. It would take a lot of passes and buffers though. I've come to the conclusion that it's not really worth it. It preserves details a little bit better and the output is noticeably sharper - the simple luminance match method has a noticeable blur in comparison - but it's not better by enough to justify it IMO. With a bitmap font, it's still very noisy, the better details are only noticeable if you actively look for them. Maybe if you use antialiased fonts, but that would completely tank the performance.
a/f5pQ1Qs pretty sure youtube auto-deletes links, it's an imgur album with a comparison
@@sacwingedbatsatadbitsad4346
Hmm what if instead of just comparing the bitmaps you compared the gradient of those? Looking at your imgur gallery it looks like the edges are not really as pronounced as one would expect from this.
@@sxs512 The way it works is it subtracts the pixel in the font, 0 or 1, from the grayscale pixel in the same position, then adds together the absolute value of the pixels in the 8x8 grid. Obviously, if you subtract a value from itself you get 0, so the character with the lowest absolute value is the best match. This is the most canonical approach, it preserves the most information overall. Not all information is equally important to humans, though. For example, you can distinguish more shades of green than red or blue. You'd need to enhance the edges as in the video to get a more desirable but less technically correct look.
Underrated channel. Pacing, explanations, visual guides and comedy/presentation are all done well.
Thanks Acerola 👏
13:15 With fading based on depth, that's my favourite option. Looks amazing.
This guys is amazing, easily my favourite computer science RUclipsr! You’re a fucking legend and inspiration 🔥
"game as ascii" reminded me of the primeagen's recent journey of rendering DOOM as ascii and making his twitch chat play it.
It's come full circle now with prime reacting to this video lol
I remember those dope ASCII GameFaqs guide logos. They were sick.
Just watched 18 minutes and 17 seconds of a guy talking about Edging. Absolute Cinema.
Just watched the video. Here is an option to save more details. You could choose symbols from ASCII table not by luminance, but by calculating how much the shape of the symbol suits the 8/8 region. First, normalise 8 by 8 region, to turn it lightest into white, and it darkest into black and shift all the other colors proportionally. Choose the symbol that has the least total difference compared to the region, and then adjust symbol's luminance to be same as average luminance of original chunk.
Another option is to apply filter separately to RGB channels with red, green and blue symbols and then add them together to get the final result. Combining this methods you will be able to use all ASCII symbols, their luminance and colors, which should save a ton of details, probably close to possible maximum. This also should make image less contrast and more pleasant to look at for a long time.
if comparing 8by8 chunks will hit performance, you can average some pixels to get 4by4 or 2by2 chunks, or you can find the least used symbols in the table and remove them, or both. This still should save more details
Sadly i'm too dumb to code it myself
Depth fading looks very good, it really gives you that sense of 3D that's needed to keep the image coherent during gameplay. Lot of potential here for cool artstyles in a game.
it's insane how well that final result still reads as a detailed image.
The cat is forcing me to watch the sponsor! Noo!
That cat better be getting a cut
Someone needs a sponsor block extension
@@IvanIvanov-ww8ylthat's why I missed the cat 😔
it'd be really cool if someone makes it that we can copy the ascii as a screenshot and be able to paste it on a text file
It was brilliant putting the cat on the sponsor segment so that I bypassed my sponsorskip to see the kitty.
Same XD
that was so clever it's perverse
every like 30 seconds there's another mindblowing idea presented that i would never think of in a million years this video is insane
I actually watched the sponsor because of the cat. Brilliant move
He must has learned this trick on Brilliant.
9:39 bonus points for finding an image with the correct group size
A+ great job keep up the good work
THE TIMING ON THIS IS IMPECCABLE I NEEDED THIS AND IT JUST CAME TO ME ON MY HOMESCREEN
It should be possible to retain much more detail by expanding the character set.
It would be cool to see a shader that uses ALL ASCII characters and "downsamples" each 8x8 pixel grid down to the ASCII character that is most similar to it.
lets go love ascii made a ascii shader myself once it was awfull and poorly coded that used a text texture as a compute shader only took like a month im actually still thinking of making a ascii horror game lol
Stone Story RPG is an ASCII only game. all handmade
this video is about not handmade ascii art
There is a lot of flicker on characters, especially with full square character.
Perhaps having some kind of threshold to prevent high frequency changes of the same character like [full square -> @ for 1 frame -> back to full square] would make the image feel more stable if you prevent full square coming up again if there was one recently.
Was going to suggest this idea too :) Would be cool to see
VLC can play an entire movie in ascii art.
holy shit it's beautiful 😭
your video definitely convinced me to build my ascii shader
! There is a game that only uses only characters for their art style!!
Its called stone story and is pretty cool, if you are into those kind of games
This looks so much better than I could have ever imagined
This looks like it'd work great for a horror game, as the ascii filter makes it harder to see anything.
Been following the progress for this on twitter. This looks absolutely amazing and might be my favorite video of yours. Would love to make some small game that gets absolutely carried by these visual effects. Well done!
Also, you gotta have one of the highest viewer retention rates during your ad reads (feel free to send this part of the message to potential sponsors)
0:37 so today, we'll be turning characters
*into characters*
acerola's excuse to dedicate an entire video to edging
For one second I thought that I was going to see an ascii version of bad apple again
Amazing stuff. Maybe faces looking jumbled together from a distance would make for a great horror game style with all the uncannyness.
Best way to do an add segment I have ever seen. I didn’t even play attention to the add, just the cat lol
I'm rolling my ace soooo hard rn
Acerola: the photomode tech demo guy
0:47 Well, my dad is very good at building cities in Minecraft-like games that are so large that the game eventually can't handle it anymore. So I'll soon create my own such game that I'll make playable in the Linux TTY, inspired by this video.
youre really cool mr rola
Additional effect: shift your grid by 1 pixel per frame and you can get that real Matrix "falling characters" vibe.
finally we have the technology to make a worthy spiritual successor to return of the obra dinn
Love this. Your channel has got to be one of my favorites! I can understand everything you’re talking about even though I’m only a high school freshman. It’s all so simple, and your intro with the flashing phrases and the design is peak! I also love recurring bits such as parish being the harbinger of the sponsored segment. As well as the ever popular “but Acerola?”
Speaking of which, I don’t know if I just missed it, but I didn’t really get why returnal using a 10x10 text size was so strange. But you manage to put so much information in such a short amount of time that I very well could have subconsciously breezed past it. Another thing I love about these videos.
did you start going to gym?
I KNOW RIGHT, I SWEAR HE WASNT THIS BEEFY
If you think about JPG tiles they have tile shapes within the encoding. So if you tried to use that trick, you could categorise all characters to have their equivalent gradients with baked in luminance value. You could detect a gradient across an 8x8 square and pick the set of characters based on luminance then sort them by the best gradient. In this way a bright character with darkness at the bottom can choose “.” And if the darkness is at the top it can choose “‘“ .I don’t claim to know how to make game code, so that is your magic. Other examples of characters with the same luminance but different gradients would be < and > or b and p.
the thumbnail swap is nasty, i hate youtube after mr beast
?
I got goosebumps from the mogh cutscene, pure cinema, you are a fucking wizard harry.
STOP USING THAT THUMBS UP IMAGE I BEG 😭
Love the vid! I recently made a Asccii art generator in JS that created a bitmask of every ascii character of font size using a canvas and grabbing an image of each character, then cutting the image into chunks equal to the size of a character size. I then find the the best matching asscii mask and use that character, it really worked well in giving small intricate details with the non standard a-z and symbols by using other languages and special symbols.
This obviously does not run real time and take about 10 seconds to generate on a 800x1200 image at font 10. Struggled to optimize it to be more real while not losing detail. Amazing insight gained from this vid, thank you!
yeah that elden ring cutscene was legitimately breathtaking in ASCII
You really highlight the artistry of shaders in a way I never would have understood before
Golden content. Technical, without bs, source included. Many thanks
Now add an OCR which will convert any text on screen into ascii characters directly, so that you can read subtitles and menus in game
In a game made with ASCII art graphics in mind, you wouldn’t need to do that (also I imagine that OCR is a bit slow for that? I could be wrong)
My jaw dropped on the "fading by distance" part, makes a night and day difference in visibility.
Very smart to share the advertisement with cat time. 10/10, didn't skip the ad.
This would be fascinating for a game where you play as some sort of near-sighted cyborg who occasionally has flashes of hyper-photorealistic vision in key story moments where their humanity manifests itself.
I like how despite all this ascii/shader knowledge this dude clearly lifts. bad ass.
this just in, acerola figures out edging
This shader, as absurd as it may look, is probably one of, if not my absolute all-time FAVOURITE VISUAL EFFECT!! It looks so majestic, even with the quality loss. I adore you for having made this AND having it fully open-source. Believe me, when I can, my support on Patreon is guaranteed
You should have used a higher resolution if possible so you could get the most detail possible. I counted the amount of characters on the screen's width and counted 240 which multiplied by 8 is 1920 pixels wide or 1080p. With 1440p it is 1.3... scale so you could get 1.7... times more characters on the screen. With 4k or 2160p it is a 2 times scale so you could get 4 times more characters on the screen.
dude reinvented reshade
Challenge: Use the entire Unicode. Output to terminal. With ANSI colors.
What a brilliant ploy to get people to watch the ad. Also, this was probably the easiest to follow video that you've made yet. I think I could probably code this one up myself.
Another option when selecting a char for a region, you can blur the character, take the use a least-squares method between the target and the character, and use the char with the lowest variance
There's another way I achieved this effect - create an 8x8 set of images of the ASCII characters (or text characters of other systems like C64, etc etc) - and use an image mosaic approach. This will take into account the internal shape of the characters and map the closest one to an 8x8 pixel of the original image. Upscaling by 8 to get 1:1 pixel mapping looks fantastic, but also results in gigantic images. As a final step you can downsample the image by 8 to get 8x8 solid blocks for coloring in the text (a better way would be to get the brightest and darkest pixels from each region and use these as text/background coloring)
I want to see it applied to an older game.
Like Crash Bandicoot or the first Metal Gear Solid
This is absolutely fantastic! Just... wow! (both the editing/pacing of the video as well as the final effect are top notch! )
I noticed the 11:52 Valhalla music almost immediately despite The Primeagen talking in its reaction video. Great video btw and impressive work on your part. You've taught me quite a few things that hopefully will be useful for me in the future.
I feel like evaluating each 8x8 tile of the rendered image and finding the closest character for it's features using a simple confidence model comparing the like-ness of the tile to each caharacter in the ascii table would improve the intricate details. kinda like how ascii artists look for super intricate ascii characters that perfectly fit the shape they need
That mogh intro cinematic with the shader was a work of art
This looks very cool. I've made a good amount of ASCII shaders, and I love the addition of the edge layer, especially implementing the distance falloff. Cel shading would obviously play very well with this effect
The em-dash (-) would be better than the underscore for horizontal lines because it's in the middle of the sprite, so all of your edge sprites will be centered on the same axis. I would also suggest increasing your gradient from 10 to 16 or even 32 steps. You're reducing the already low amount of information by compressing your gradient palette.
Thanks for sharing all of your awesome experiments!
i think it'll look really cool on a game with a simple artestyle, like animal crossing, sicnce there is not much details or gradients
this must be the first video in a while that I watched the whole ad sponsor in, just cuz the cat was so adorable lmao
exactly what I was about to comment lol
There’s a game called Stone Story(mobile and steam) that is (I believe) entirely made of characters(ASKII). It’s very simplistic, but it’s still entertaining.
That's so great. I want to see/play an entire game made for this
this is just amazing, thanks for inspiring me to do my own ascii renderer in rust, ill probably make a discord bot which converts all images sent in a server to this beautiful ascii image and store it in a "gallery" channel
I really really liked how the shader affected subtitles in the cutscene, this could be a sick effect for corrupted/loading data, like in a context that is not directly a command prompt, that kind of distortion couple be much more interesting than just printing a string of random numbers
Holy hell Acerola, this is so clean. Genuinely learnt so much while watching this video and it was so much fun experimenting after seeing the whole thing. God just because how well it turned out, genuinely I am so tempted into developing a whole game on it. Love it and please keep letting your random wishes drive you man.
Also peak music choice throughout
Honestly a game with this kind of shader where the assets were made to work alongside it would go so hard
What a cool and fun thing to do. Even if it wasn't super beneficial or the best way to render a game it made for a really cool thing to watch while eating breakfast! Thanks for your work!