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:
This shows how skew can change the character of the font. It looks more “fun”, even though it’s the same font underneath!
Skew the other way can make it look spooky:
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.
I also later found https://www.shadertoy.com/view/MdycWh[3] and https://www.shadertoy.com/view/4sVyWh[4] which is a different type of distortion on sdf fonts.
Source: font-distortion.js