Show HN: ASCII Automata(hlnet.neocities.org)
hlnet.neocities.org
Show HN: ASCII Automata
https://hlnet.neocities.org/ascii-automata/
11 comments
Truly nice! Reminds me of https://10print.org/
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.
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.
Thank you! These are good ideas, will implement for the next iteration.
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
Awesome! Have you thought about adding a PETSCII font?
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.
The UI gives me intensely wonderfig xfig vibes
This is WILD. good clean safe pareidolia fun.
Beautiful!
Speechless. I love this kind of creativity and agency.
[deleted]
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]