Tetris as Font

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

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

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

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

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

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

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

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

For those who don't know the author:

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

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

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

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.

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)

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.

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 )

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

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.

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

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

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

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

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.

Very cool!

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.

Nice..

Excellent!!

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.

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

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."