5 ms·
ASCII Play
- imglorp 5y agoIt's cool but the "r" in that font is distracting.
- bskrobisz 5y agoVery cool! There's another site I used to frequent with a similar bent, focused on golfing: https://www.dwitter.net/ https://www.dwitter.net/
- elliottcarlson 5y agoI made a similar feature as a Tumblr post type during an internal hackathon -- shame that never got to see the light of day as a production feature. Processing post types, that allowed others to reblog and make revisions. Would've been painful to get it ready for a mobile release unfortunately.
- atulvi 5y agoI thought this was running on a canvas element, but no.. characters are nested inside spans. That's amazing.
- tabokie 5y agoAnother commercial website that heavily uses ASCII animation: https://oxide.computer/ https://oxide.computer/
- agys 5y agoThat’s a very slick page! By inspecting the animated diagrams they switch from text rendering in a PRE element to a CANVAS renderer when the page width shrinks below a certain size.
- stkdump 5y agoIs this a non-GPU variant of shadertoy?
- selficist 5y agowhat is the monospace font used for the code shown there?
- who23 5y agolooks like jetbrains mono?
- who23 5y agoafter a little digging it looks like a custom font called 'Simple Console', though it's not available anywhere I can find other than through the website (which states it's licensed only for use on their website, not for download or use on other sites)
- agys 5y agoIt is a custom version of “Simple” by Norm made to include some of the box drawing glyphs. https://lineto.com/typefaces/simple https://lineto.com/typefaces/simple
- agys 5y agoTwo examples with the box drawing glyphs: https://play.ertdfgcvb.xyz/#/1612272092088 https://play.ertdfgcvb.xyz/#/1612272092088 https://play.ertdfgcvb.xyz/#/1625307783449 https://play.ertdfgcvb.xyz/#/1625307783449
- thristian 5y agoAnnoyingly, the canvas is hard-coded to use only the "Simple Console" font; if your browser doesn't load the font for whatever reason, it shows up in a proportional typeface which ruins the effect. Changing `font-family: "Simple Console"` to `font-family: "Simple Console", monospace` would fix it.
- agys 5y agoThank you, will fix! Note: some CSS attributes for the pre (or canvas) can be set trough an exported “settings” object: export const settings = { fontFamily : 'Monaco' }
- buitreVirtual 5y agoIt should come with an epilepsia warning.
- ggeorgovassilis 5y agoFriendly plug: design and run ASCII art animations in the browser and export to animated GIF: https://animasci.com/ https://animasci.com/
- kaeruct 5y agoI love it. Just a small nitpick, it broke my back button :(
- agys 5y agoStrange. In which situation exactly if I may ask (sorry if I’m using the thread for debugging purposes)?