Tetris Font (2020)(erikdemaine.org)
erikdemaine.org
Tetris Font (2020)
https://erikdemaine.org/fonts/tetris/
97 comments
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
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
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 ...)
(The "historical exploration" of type, and typesetting, even if an introduction, is great ...)
Incredible ...
(The Tetris pieces going up upon backspace are a riot :)
(The Tetris pieces going up upon backspace are a riot :)
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/
[0]: https://archlinux.org/packages/extra/x86_64/harfbuzz/
Gotcha, thanks champ!
thats absolutely bananas, awesome job. The bad apple showcase is great too.
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
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
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
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
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
Nice demo. Really kicks all the "bytecode can never be fast --- we have to AOT everything" people in the teeth, doesn't it?
Very neat! I love how you can do an entire paragraph.
For example https://erikdemaine.org/fonts/tetris/?text=%7D6G6C+8%40%3F%3...
For example https://erikdemaine.org/fonts/tetris/?text=%7D6G6C+8%40%3F%3...
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 )
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).
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."
"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."
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)
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
I don't think it's on purpose, just a naïve consequence of using the URL for state.
Pretty common.
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!
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!
Should be replacing state in the history stack rather than pushing a new state.
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
Agreed, was very annoying, please don’t misuse history like that :(
For those who don't know the author:
https://en.wikipedia.org/wiki/Erik_Demaine
https://en.wikipedia.org/wiki/Erik_Demaine
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.
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...
See also https://erikdemaine.org/papers/NCL_TCS/
Culberson, Joseph. "Sokoban is PSPACE-complete." (1997). https://era.library.ualberta.ca/items/f551dfd8-c8e6-4e78-883...
See also https://erikdemaine.org/papers/NCL_TCS/
Yes, correct, and mentioned in the abstract. Sorry, I was imprecise and wrong.
Thanks for the links!
Thanks for the links!
Oh wow, quite a portfolio: https://github.com/edemaine
He is also the maintainer of KaTeX, which I depend on.
(Thanks Erik!)
He is also the maintainer of KaTeX, which I depend on.
(Thanks Erik!)
LOL, completed PhD at 20
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.
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.
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.
Would be nice if the "obscure in URL" feature wouldn't show the text in the textbox when you send it to someone.
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.
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.
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?
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
- 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.-
... 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 ...)
(The URL as a tool. Such a great "innovation" too. URLs are wonderful ...)
Great doco about origami that Erik appears in. 'Between The Folds' https://www.youtube.com/watch?v=DiIr7du6Y3w
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
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 ...
Congrats on such a neat idea so nicely executed ...
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.
Cool, I wish there was a variations for the pieces for each letter though.
[deleted]
Coming soon near you:
- Game of life using Tetris
- Logic gates using Tetris
- Full microprocessor using Tetris
- Full computer emulation using Tetris ... :)
- 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!
[deleted]
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