Show HN: ASCII Automata

Show HN: ASCII Automata(hlnet.neocities.org)

103 points by california-og 212 days ago | 10 comments

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]

mkesper 209 days ago |

Truly nice! Reminds me of https://10print.org/

sgentle 208 days ago |

Really fun. Thanks for sharing!

Some random ideas:

It'd be cool if you could start the growth engine from manual mode. Maybe for breadth-first growth you could add all the placed characters, and for depth-first just the last cell you clicked (+ some kind of visual feedback to show what that is)?

I'd also love to play with some way of enabling/disabling the characters to create a subset and see how that behaves.

One last thing is it'd be nice to toggle the grid lines off.

california-og 208 days ago | |

Thank you! These are good ideas, will implement for the next iteration.

ge96 208 days ago |

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

mkesper 209 days ago |

Awesome! Have you thought about adding a PETSCII font?

california-og 209 days ago | |

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_ 209 days ago |

The UI gives me intensely wonderfig xfig vibes

mock-possum 209 days ago |

This is WILD. good clean safe pareidolia fun.

Timsky 209 days ago |

Beautiful!

maremmano 209 days ago |

Speechless. I love this kind of creativity and agency.