ASCII Play(play.ertdfgcvb.xyz)

158 pointsby bpierrevor 5 Jahren20 comments

play.ertdfgcvb.xyz

https://play.ertdfgcvb.xyz/

10 comments

Annoyingly, 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.

agysvor 5 Jahren

Thank 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' }

tabokievor 5 Jahren

Another commercial website that heavily uses ASCII animation: https://oxide.computer/

agysvor 5 Jahren

That’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.

atulvivor 5 Jahren

I thought this was running on a canvas element, but no.. characters are nested inside spans. That's amazing.

bskrobiszvor 5 Jahren

Very cool! There's another site I used to frequent with a similar bent, focused on golfing: https://www.dwitter.net/

elliottcarlsonvor 5 Jahren

I 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.

ggeorgovassilisvor 5 Jahren

Friendly plug: design and run ASCII art animations in the browser and export to animated GIF: https://animasci.com/

imglorpvor 5 Jahren

It's cool but the "r" in that font is distracting.

agysvor 5 Jahren

The “r”, which looks a bit like a hook, is what makes this font special. The reason it was chosen is that the name of the website contains an “r”…

selficistvor 5 Jahren

I kinda liked the font, but agree with you on the 'r', looks like a something bent over lol

kaeructvor 5 Jahren

I love it. Just a small nitpick, it broke my back button :(

agysvor 5 Jahren

Strange. In which situation exactly if I may ask (sorry if I’m using the thread for debugging purposes)?

stkdumpvor 5 Jahren

Is this a non-GPU variant of shadertoy?

selficistvor 5 Jahren

what is the monospace font used for the code shown there?

who23vor 5 Jahren

after 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)

agysvor 5 Jahren

It is a custom version of “Simple” by Norm made to include some of the box drawing glyphs.

https://lineto.com/typefaces/simple

agysvor 5 Jahren

Two examples with the box drawing glyphs:

https://play.ertdfgcvb.xyz/#/1612272092088

https://play.ertdfgcvb.xyz/#/1625307783449

who23vor 5 Jahren

looks like jetbrains mono?

buitreVirtualvor 5 Jahren

It should come with an epilepsia warning.