A few weeks ago when I was exploring text animation effects I noticed that changing the font sprite from a rectangle to a trapezoid made the font look really interesting. I didn’t quite understand why, at the time, and I wanted to focus on animations so I wrote it down as a thing to investigate later. Well, that later is now. u_variant controls the division of the rectangle into triangles. Set that, then try adjusting u_skew_x to see how the distorted text
changes. Set both u_skew_x
and u_skew_y
to the center position to get the original undistorted font.
1 Screenshots#
Here’s the original serious-looking undistorted font:
![screenshot of](blog/font-original.png?2024-05-21-15-47-00)
This shows how skew can change the character of the font. It looks more “fun”, even though it’s the same font underneath!
![screenshot of](blog/font-bottom-heavy.png?2024-05-21-15-47-00)
Skew the other way can make it look spooky:
![screenshot of](blog/font-spooky.png?2024-05-21-15-46-59)
There could be many more variants from changing the triangulation and skew parameters. All from one basic font!
2 More#
I love the comments people leave on my pages and blog posts. They pointed to
- https://joostdevblog.blogspot.com/2016/09/fixing-texture-distortion-in-deformed.html[1]
- https://stackoverflow.com/questions/15242507/perspective-correct-texturing-of-trapezoid-in-opengl-es-2-0[2]
And I learned a lot from there.
Source: font-distortion.js