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]