[HN Gopher] Show HN: ASCII Automata
       ___________________________________________________________________
        
       Show HN: ASCII Automata
        
       ASCII AUTOMATA is a tool to analyze the visual connectivity of
       characters in textmode fonts. It works by scoring edge connectivity
       of each piece and finding the best matching neighbour piece. Every
       time it places a piece, it "grows" towards the edges it touches by
       placing a matching piece. The red heatmap shows how frequently each
       character is used, useful for analyzing the fonts.  I initially
       made it as a tool for myself. When I design textmode art fonts it
       is sometimes difficult to figure out if a specific character would
       actually be useful for drawing or not. I wanted a tool which would
       show how useful and versatile some character is, and how well it
       connects to all other pieces.  But, as it turned out, this tool
       produces unexpectedly beautiful emergent patterns, so I made it
       into a proper little toy-tool for anyone to play around with.
       Sidenote: it was also a good opportunity to test a new method for
       constructing a responsive semi-complex UI.  I made a web component
       which renders text as SVG paths using hershey vector fonts. The SVG
       fills the parent element, and applies stroke after the stretching
       happens: so strings "a" and "aaa" take the same amount of space,
       while remaining legible because the stroke is independent of the
       text's transformations. Thus, I never have problems with
       overflowing text in the UI!  The layout is made with a CSS grid.
       For example the sidebar is simply <div style="--cols:8;--rows:41;"
       class="sidebar grid"> and then each UI element gets a position and
       size <vec-text style="--x:1;--y:19;--w:2;--h:1;">Cell Width</vec-
       text> . As a result, the layout is easy to make, the sidebar itself
       can be any size or shape,all the UI elements stay exactly where I
       put them, and all text remains legible due to the stretchy,
       monolined vector font web component. It's great!  The WHOLE UI
       layout is just 120 lines of HTML, and 40 lines of CSS (for around
       90 UI elements)!  (it did take a while to fiddle with the
       coordinate numbers, but I'm working on a wysiwyg tool to make that
       easier too...)  [crossposted this comment from mastodon:
       https://typo.social/@gdc/115405978249292146]
        
       Author : california-og
       Score  : 81 points
       Date   : 2025-10-17 20:19 UTC (4 days ago)
        
 (HTM) web link (hlnet.neocities.org)
 (TXT) w3m dump (hlnet.neocities.org)
        
       | mkesper wrote:
       | Truly nice! Reminds me of https://10print.org/
        
       | maremmano wrote:
       | Speechless. I love this kind of creativity and agency.
        
       | mkesper wrote:
       | Awesome! Have you thought about adding a PETSCII font?
        
         | california-og wrote:
         | That's a great idea! Don't know how I didn't think of that. But
         | you can upload your own fonts too as long as they are 1bit
         | black and white.
        
       | debo_ wrote:
       | The UI gives me intensely wonderfig xfig vibes
        
       | Timsky wrote:
       | Beautiful!
        
       | mock-possum wrote:
       | This is WILD. good clean safe pareidolia fun.
        
       | ge96 wrote:
       | Feel like I've seen a similar tool Ben Hecks used in one of his
       | projects making a game badge, able to look at a character like an
       | Invader
        
       ___________________________________________________________________
       (page generated 2025-10-21 23:01 UTC)