It's a fun experiment into WebGL and graphics programming. I intended it to be a cool tool for getting inspiration for designing and creating other art in general. I do eventually want to build this out into a larger set of tools that would allow you to quickly iterate and build out various aesthetics for designing.
In it's current state, it's mostly practical for creating pretty images and videos that you could use in other projects. If there's more interest I could possibly turn it into more, would love to hear ideas and suggestions!
Author here, love that you tried to recreate the Balatro background. I was also similarly obsessed with that game last year. If you were able to recreate it I’d love to see, I just added more sharing capabilities to the tool.
Just throwing a HELL YES <with a kung fu punch> out there for this. Nice work. I've been trying to integrate a live ascii video feature for a while now and the subtle detail on this is really inspiring.
Author here. Thanks so much for the rad reply and enthusiasm! So glad I could help inspire you, and please feel free to use this for any art you make, just tag me on socials or send it my way so I can check it out.
This is cool... But I feel like having different color/brightness for each symbol kinda defeats the purpose of it being ASCII when the symbols only correspond to different intensities anyway.
Author here, I understand where you are coming from. However I did choose to keep it this way as it generally looks better. I toyed with other methods and I may introduce them in as a setting.
Author here. Not ridiculous at all, the name is a bit of a misnomer. I had tried doing true ASCII but moving data back to the CPU to render it all was too slow. So I opted to recreate them as glyphs that are drawn using signed distance functions, which gets pretty close to looking like real ASCII while still being incredibly performant due to it never leaving the GPU.
Author here. This is all done on the GPU using shaders. It's a few layers, and you can find the details over on my Bluesky post, feel free to read it there. I've been thinking about making a blog post covering how I went about building it.
Neat. It'd be more "ASCII" if it used 8x16 pixel (but right extended to 9x16) characters in 80:133 width:height aspect ratio since 80x25 characters at 720x400 on 4:3 results in 80:133 pixels. An arbitrary sized canvas is cool so long as the aspect ratio is preserved.
The infamous MCGA/"VGA" mode 13h had pixels with an aspect ratio 6:5, while 320 x 240 Mode X was square (1:1).
I still remember the unchained offset calculation for the memory offset for pixel memory access before the era of U and V pipes and many optimizing compiler passes:
unsigned short offset = (((y << 2) + y) << 6) + x;
unsigned char far *ptr = (unsigned char far*)MK_FP(0xA000, offset);
// IIRC: #define MK_FP(seg, off) ((void far *)((unsigned long)(seg) << 16 | (unsigned long)(off))) // far pointers != linear address
Yes you're right in that it's not real ASCII, but more ASCII-esque. I took some artistic liberty to do everything on the GPU, if I had done true ASCII I would have had to move data back to the CPU and render the glyphs there. However it was too slow and didn't have the desired effect I was seeking.
I am considering building out an additional feature set where it allows for true ASCII rendering, but we'll see if I get around to that.
Author here. Wow that's so cool! I've never heard of browsh but it's so cool to see that my site (which was built to be as static as possible) works well and even renders the WebGL in the terminal. Thanks for sharing!
You can render only single characters. First you need to change the HTML "max" attribute of <input> to 1.1 in the "Glyph Thresholds". And set 0.0 for the desired characters and the characters above. Set 1.1 for the remaining characters.
For example, if you only want the dash, set the dot and dash to 0.0. Then set 1.1 for the plus, ring, and cross characters.
Author here. That’s a nice trick! I’ve been pondering on how to handle this but I think I’m going to allow the ability to toggle on/off the presence of glyphs so that you don’t have to muck around with the thresholds to get them to not render.
Was experimenting with something similar... working on a modern QWK reader, and this is kind of a core thing to deal with, rendering ansi in messages as html. (synchronet color codes don't work right and renegade color codes untested).
Was an initial experiment with Claude Code, but kind of a cool result that's pretty close to what I want.
Author here, yeah I apologize for the misnomer. I could render it with actual ASCII but it was too slow because of needing to process it on the CPU. My method here is actually done all on the GPU and draws glyphs similar to how fonts are drawn. Well actually I'm using signed distance functions to draw the glyphs, but the glyphs are ASCII-esque.
This looks like a good way to model "satellite-view clouds" where you render "the full atmosphere". I don't think it would work well when modeling "ground-view clouds" however. I have been looking for a good (fast) algorithm for doing that, would appreciate it if people have pointers for that.
Author here. Interesting point about the satellite-view clouds, I'm not very familiar with that domain. But I can point you to the article I read about domain warping on top of noise, which is what I use to produce this effect.
74 comments
[ 2.8 ms ] story [ 84.7 ms ] threadIt's a fun experiment into WebGL and graphics programming. I intended it to be a cool tool for getting inspiration for designing and creating other art in general. I do eventually want to build this out into a larger set of tools that would allow you to quickly iterate and build out various aesthetics for designing.
In it's current state, it's mostly practical for creating pretty images and videos that you could use in other projects. If there's more interest I could possibly turn it into more, would love to hear ideas and suggestions!
https://post-processing.tresjs.org/guide/pmndrs/ascii
https://forum.babylonjs.com/t/ascii-shader-using-glsl-postpr...
https://threejs.org/examples/?q=ascii#webgl_effects_ascii
https://fwdapps.net/l/asci/
https://codesandbox.io/p/sandbox/ascii-postprocessing-n628p8...
https://www.youtube.com/watch?v=NxeRcnLr0ko
and the code: https://github.com/kristopolous/ascsee
I just updated it so it compiles on modern systems.
I also found the original version if you like being an archaeologist: https://9ol.es/tmp/gol.c
https://bsky.app/profile/caidan.dev/post/3mcdwifkfvc2o
The infamous MCGA/"VGA" mode 13h had pixels with an aspect ratio 6:5, while 320 x 240 Mode X was square (1:1).
I still remember the unchained offset calculation for the memory offset for pixel memory access before the era of U and V pipes and many optimizing compiler passes:
In real-mode (linear): 0xa0000 + (320 * y) + xYes you're right in that it's not real ASCII, but more ASCII-esque. I took some artistic liberty to do everything on the GPU, if I had done true ASCII I would have had to move data back to the CPU and render the glyphs there. However it was too slow and didn't have the desired effect I was seeking.
I am considering building out an additional feature set where it allows for true ASCII rendering, but we'll see if I get around to that.
https://srdjan.pro
For example, if you only want the dash, set the dot and dash to 0.0. Then set 1.1 for the plus, ring, and cross characters.
Was an initial experiment with Claude Code, but kind of a cool result that's pretty close to what I want.
https://github.com/bbs-land/bbs-ansi-to-html
https://iquilezles.org/articles/warp/