Tetris Font (2020) | Hacker News Reader

Tetris Font (2020)

erikdemaine.org

723 pointsBluestein92 comments

I did kinda the opposite and instead of making a font out of tetris I made a font play Tetris.

I did it with the Harfbuzz shaper which now have experimental support for embedding WebAssembly programs to shape fonts.

Talk where I show it off: https://www.youtube.com/watch?v=Ms1Drb9Vw9M

Source code: https://github.com/Erk-/programmable-fonts

You can also see actual uses of this WebAssembly embedding to show that is not just for fun here: https://github.com/harfbuzz/harfbuzz-wasm-examples

Awesome.

This is precisely the sort of beautiful thing I love finding on HN.[a]

Your work put a smile on my face.

Thank you for sharing it here!

---

[a] For those here who only want to see the demo, it starts at 22:50: https://youtu.be/Ms1Drb9Vw9M?t=1370

---

PS. I also submitted your demo to HN. I think it deserves its own post: https://news.ycombinator.com/item?id=40737961

I liked how you set your bio in the "About" section, kind of circular dependencies :)

Or recursion :)

Incredible ...

(The Tetris pieces going up upon backspace are a riot :)

thats absolutely bananas, awesome job. The bad apple showcase is great too.

If anyone else is looking for the links

repo: https://github.com/hsfzxjy/Bad-Apple-Font

youtube[1]: https://www.youtube.com/watch?v=GF2sn2DXjlA

youtube[2]: https://www.youtube.com/watch?v=qFd8vsr8nag

That was the first part I did, I wrote a blog about it here [0].

At the time it was also discussed on here at [1].

[0]: https://blog.erk.dev/posts/anifont/

[1]: https://news.ycombinator.com/item?id=37317055

Nice demo. Really kicks all the "bytecode can never be fast --- we have to AOT everything" people in the teeth, doesn't it?

Coolest thing I've seen so far this year. Demo starts at 22:55 but the whole presentation is worth watching.

I agree. Watched the whole thing and the entire video is worth it.-

(The "historical exploration" of type, and typesetting, even if an introduction, is great ...)

You can even play Pokemon using fonts: https://www.coderelay.io/fontemon.html

You demo the result in GIMP (with a Wasm runtime linked(?)) and in the font viewer FontGoogles, and there's someone else who is playing around with it in gedit. There's no way to make use of this in, say, Firefox, yet, even though it ships with Harfbuzz, right?

I could not get it to work when I looked into it last, for Gimp I actually installed it globally, I think neither Chrome or Firefox uses the system Harfbuzz. Going by the dependants of Harfbuzz on Arch [0] it might be possible that it works in Chromium with a custom Harfbuzz, but it is not something I have tried. And since it is still experimental it is not built by default in any distribution I know of.

[0]: https://archlinux.org/packages/extra/x86_64/harfbuzz/

Gotcha, thanks champ!

This is fantastic! These days, we have learned that no product can be taken seriously if it doesn't use LLMs somehow, so also based on Harfbuzz-Wasm, here's a font which is also an LLM: https://news.ycombinator.com/item?id=40766791

Very neat! I love how you can do an entire paragraph.

For example https://erikdemaine.org/fonts/tetris/?text=%7D6G6C+8%40%3F%3...

Indeed.-

(And, incidentally, how the URL encodes the value used for text generation, so that you can share links to actual examples ...)

Pretty neat.-

PS. Nice Rickroll, BTW :)

very neat text you've chosen there, too!

thank you :-)

Now I sing tha song for about 15 min already

Related: One of the subniche in the Tetris communities is Tetris art / pattern creation, i.e. drawing predefined patterns while playing the game (almost) normally.

One of most practiced pattern is the chevron, where you draw a > shape with holes, but otherwise fill the whose board. This stemmed from the Japanese arcade version of Tetris by Sega (or Segatet for those in the known). This version was hugely popular in the arcade (it stayed for an incredibly 10 years in the top100 earner in some arcade magazine), and some player were destroying the game so much that they invented this challenge. This was recognized in Segatet successor Tetris the Grand Master (TGM3), and formally named "Secret Grade". One example here: https://www.youtube.com/watch?v=ZgzcAkjp0J8 , and another there with TGM3 signature speed https://www.youtube.com/watch?v=32wzKc0cHQU .

But in general, Shuey is the master of arbitrary making pattern. Look at him drawing a Luigi: https://www.youtube.com/watch?v=_tipJDjeKuY .

Note that since then, an algorithm for arbitrary pattern generation has been devised by Michael Birken: https://www.youtube.com/watch?v=PJkHwulsac4

(sort of related: the playing forever algorithm may be interpreted as a pattern creation https://tetris.wiki/Playing_forever )

It's so satisfying to watch...

Do these pattern drawings only work with aluck Manipulation?

Secret grade is done within the confines of the game with no luck manipulation.

Note that the piece distribution algorithm is usually not a pure random() function, but one that's optimized to remove or reduce piece repetitions. For TGM it's history based (keep in memory the 4 last pieces type, reroll in case of repetition, with a 4 or 6 reroll limit depending on the game). IIRC Shuey uses a ruleset that uses the standard 7-bag algorithm (it's a Fisher-Yates with 7 elements; put all 7 types in a collection and deplete them one by one, randomly).

The author explains:

"Each letter and digit in this typeface is made up of exactly one of each of the Tetris pieces: (I), (J), (L), (O), (S), (T), and (Z). Furthermore, the letter is designed so that it can actually be constructed by stacking these pieces one at a time and be supported by previous pieces, as in Tetris. These designs were found by hand, aided by the BurrTools software which enabled searching for whether the Tetris pieces could fit inside a candidate outline for a letter. The piece colors roughly follow The Tetris Company's standard colors, or you can switch to black pieces. The initial rotations follow the standard Super Rotation System."

I was today years old when I learned that each tetromino has a letter shape.

"Trade" you for "tetromino", which I did not know was a thing :)

TIL ...

This is cool, and some of Demaine’s other work is amazing too.

https://erikdemaine.org/papers/Origamizer_SoCG2017/paper.pdf

^ provides an algorithm for generating any 3D solid via folding a 2D net (origami style)

The Advanced Data Structures course lectures are great, including his very own research on "Retroactive Data Structures" https://courses.csail.mit.edu/6.851/spring21/lectures/L01.ht...

All the "time travelling" they do with these data structures is really cool.-

Who would want to use the browser’s back button to undo a state change… I had to press back 20 times

Right-click the back button?

Browsers only display the last 10 - 20 states, so if you've been clicking around it quickly fills up with just this page.

Would be nice if browsers would group back button entries by: 1. same url except hash 2. same domain 3. rest

Safari does this

Where’s the right click button on my phone

Long press

I don't think it's on purpose, just a naïve consequence of using the URL for state.

Pretty common.

Should be replacing state in the history stack rather than pushing a new state.

Agreed, was very annoying, please don’t misuse history like that :(

I find the back/forward buttons useful for undoing/redoing changes, so that I don't lose past cool designs / settings, though I can see it being a controversial approach.

That said, there were definitely way too much history generated when typing into a text field. I just implemented a planned compromise, where you only get a history event when changing a "committed" text field (meaning you previously defocused the field). Hopefully this is the best of both worlds!

For those who don't know the author:

https://en.wikipedia.org/wiki/Erik_Demaine

LOL, completed PhD at 20

Oh wow, quite a portfolio: https://github.com/edemaine

He is also the maintainer of KaTeX, which I depend on.

(Thanks Erik!)

I know him from proving NP-hardness of the game Sokoban:

https://erikdemaine.org/papers/PushingBlocks_CGTA/

And I clicked this submission because of his name, after all the time.

I didn't fully go through or understand the proof, but it was a refreshing addition to the classic problems I had to understand for college at the time.

Didn't need it, just fed my curiosity.

And when I clicked this link, my curiosity was fed again.

Seems like it's worth having heard of him, even as a non-scientist, because his subjects are just so interesting. Reminds me of Scott Aaronson in that regard.

That paper does not prove that Sokoban is NP-hard. It does, however, cite an earlier paper proving the stronger result that Sokoban is PSPACE-complete:

Culberson, Joseph. "Sokoban is PSPACE-complete." (1997). https://era.library.ualberta.ca/items/f551dfd8-c8e6-4e78-883...

Yes, correct, and mentioned in the abstract. Sorry, I was imprecise and wrong.

Thanks for the links!

From a programming perspective, it would have been cooler if the font generation was automatic at the cost of a bit of quality. This might have allowed for more interesting variation, lowercase, and support of other symbols.

There is nothing less anoying than seeing a really custom font repeat a letter.

I worked on a similar project here:

https://github.com/robertmuth/TetrisScroller

It has a pretty much complete ascii font but I am cheating in that I allow one non tetris piece with only 3 pixels arranged as an angle. There is also a simple tool that tries to find a covering of a given font.

Reminds me of this sample from the Lwan project: https://time.lwan.ws/blocks -- where the clock is rendered on the server, and new frames are sent to the client using chunked encoding.

(Incidentally, great webserver ...)

Thank you!

Au contraire :)

Would be nice if the "obscure in URL" feature wouldn't show the text in the textbox when you send it to someone.

Well noticed. Good point ...

(Or an additional "Obscure in textbox" checkbox or something along those lines ...)

Good idea! I've gone ahead and implemented this feature: if "obscure in URL" is turned on, the text won't be visible unless you focus on the textbox (e.g. to edit it).

I don't understand the limitation to use all of the pieces exactly once, I'd say the rule to keep valid Tetris moves only is enough. I'm curious what could be built with just that in place.

Right now I especially dislike letters: 'B', 'G', 'I', 'N'. For comparison, I like 'F' and '1', they both look very natural to me; 'A' and 'S' get a pass too. 'Q' gets a special mention for its long tail.

That being said, the project is super cool and looks great already.

Feels like there should be many ways to make a particular letter, and it'd be neat if it was random each time. I tried "Hello" and noticed the L's are the same. Considering it's just for fun I think it'd add a little more fun if it was actually unique letters.

Also, can we get a checkbox for "pause after animation"? I want to take a minute to check out the letters before it starts animating again. I know you can click off Animate after it finishes, but if I share this, others may not be so keen.

Regarding the first question, I've gone ahead and implemented random build orders, so at least the two Ls in HELLO will usually produce different animations (depending on random choices). Designing completely different glyphs for the same letter is quite challenging (finding these already took a lot of work).

Regarding the second question, there's already a 2-second delay. I wonder if there should be a slider to specify the delay?

My Amiga could do that too! https://www.youtube.com/watch?v=-r9LlyJ9YN4

TETRIS: THE MUSICAL (!)

- https://www.youtube.com/watch?v=TwcS46tkixI

Huh, I was expecting that other Tetris musical: https://www.youtube.com/watch?v=hWTFG3J1CP8

I stand humbly corrected :)

... that one is great - in a different way - but great nonetheless.-

I love little webtools like this that save state in the URL for easy sharing.

Indeed.-

(The URL as a tool. Such a great "innovation" too. URLs are wonderful ...)

It reminds me of long-gone times where the web was about sharing easy fun like this instead of viral marketing and influencers.

(It indeed does :)

Same here)

Great doco about origami that Erik appears in. 'Between The Folds' https://www.youtube.com/watch?v=DiIr7du6Y3w

Nice https://erikdemaine.org/fonts/tetris/?text=u%26rz+~uu&rot=1&...

Multiplayer Tetris that spins!! https://youtu.be/PGFgcaVmL_I?si=egqUDmOc8D2cUAUM

Reminds me of this paint-by-tetris tool: https://www.ioccc.org/years.html#2013_birken

This is really cool! As a big Tetris and typography fan this is such a novel combination, especially as they're all buildable in-game.

Quite the "rabbit hole", trying different texts, punctuation (sadly, none that I could produce, which - if you think about it, makes sense) ...

Ah I learned dynammic programming from watching this guy's lectures. Child prodigy who went on to become an MIT professor!

I have to admit I did not know where it was going at first but was thoroughly delighted once it finished stacking up haha

I think there’s a small bug where the speed change isn’t reflected in the downloaded gif (it’s very slow by default)

I couldn't reproduce this bug. Perhaps the program you're using to display the GIF doesn't support the GIF frame delay feature? (E.g., Chrome seems to display them fine.) Feel free to open an issue on the repo if I'm missing something: https://github.com/edemaine/font-tetris

Ah, fwiw was using my iPhone for the test, so perhaps it’s just scoped to that. Not like that’s a use case you really need to support with this :)

Wow! But can you vary how you build each type - all letters seem to follow the same recipe

Yes. I think the "recipes" are hardcoded.-

This is neat, but yeah, another fun challenge: have it build a letter/word/pixel art from random pieces, the best it can.

Thanks for the feature suggestion! I've gone ahead and implemented random valid stacking order. So if you reload the page, and enter text that repeats the same letter more than once, you will hopefully get different build orders (depending on random choices). For example: https://erikdemaine.org/fonts/tetris/?text=aaaaa&rotate=0&sp...

Making a great thing even greater :)

Congrats on such a neat idea so nicely executed ...

Cool, I wish there was a variations for the pieces for each letter though.

Coming soon near you:

- Game of life using Tetris

- Logic gates using Tetris

- Full microprocessor using Tetris

- Full computer emulation using Tetris ... :)

i was interested to see how it would render kanji, probably is harder than i think

Perfect, maybe we can make HN use this font for a day exclusively.

ASCII only?

Excellent!!

Nice..

Very cool!

Reply on news.ycombinator.com