Three Shears

This week's project hasn't quite come together yet, so let's talk about something totally different: rotating images.

Or to be more specific, let's talk about how rotating images can make weird holes appear in moving bodies made of atoms.

And an update on these updates: going forward, I'm giving myself the right to skip weekly updates.

Making Updates Optional

Since Jan 1st 2024, I've always published a weekly update on something, even if that week's work didn't really pan out.¹

I have been told that this is moderately entertaining because of the gifs and bad jokes.

And that's great, but:

• These updates take a lot of time - anywhere from 2 hours to a day² - which is time I'm not spending on the actual, you know, game.
• I get paid (hopefully) when I release a game, not for publishing these updates.³

So I'm going to try a new approach: if I'm not quite ready to show a thing, then I'll skip the week's update.

Recap of Atom Bodies

All game levels are made of atoms (stone, water, etc pixels), but some atoms are part of an "Atom Body": that means they can't move like normal, but instead move according to the instructions of the "rigid body physics engine", which handles gravity, stops bodies penetrating each other, etc.

It works like this:

1. All the non-body atoms move, and atoms at rest are used to calculate colliders for the rigid body physics engine.
2. The rigid body physics engine makes atom bodies move (but not their atoms).
3. Now atom bodies have moved but their atoms haven't yet, so:
   1. Take all the body-atoms out of the atom simulation and put them into their owning atom body temporarily.
   2. Then place each body-atom back into the atom simulation, but at their correct position, based on the new position of the atom body.

Placing atoms

To make step three above work, each body-atom remembers its coordinates "inside" the atom body, something like "oh yeah I should always be 3 pixels to the right and 2 pixels down from wherever the top left of the atom body is".

And this works perfectly, right up until the rigid body physics engine rotates an atom body - and then you get something like this:

The problem is that each atom must exist at a discrete coordinate (like 4, 2), but rotation results in a continuous position (like 4.6, 2.7).

So when we round the resulting coordinate to the nearest integer, then sometimes one atom ends up with the same rounding result as another atom - which means one of those atoms can't be placed back into the world, which causes the 1-pixel gap.

Now you might be wondering, "hey, how come I don't see holes when I rotate an image in my image editor", and the answer is roughly that image editors work around this by averaging ("interpolating between") nearby pixels when there would be a gap.

Unfortunately, we can't do that when placing body atoms: arbitrarily creating new atoms at some rotations would cause all sorts of problems. But, if we turn the atoms into an image and then draw that with appropriate rotation? Then we're cooking:

In this approach, the body atoms themselves are then not rendered at all.

Of course, if you were to look at both the body atoms and the texture together, you'd see the gaps still:

But with the overlay texture in place normally, you can't see those gaps, so it's mostly fine.

Three Shears Rotation

I had the approach above in place for the last year or so, but a couple months ago a Slow Rush Discord friend working on their own falling sand game⁴ told me about an 80s-era trick that prevents those gaps!

It's called Three Shears Rotation: Mathematics™ tells us that you can apply 3 "shear" (aka "skew") operations to rotate an image to any rotation.

And since a shear is basically "for each row of pixels, shift it left or right, shifting a little more for each new row" (or moving a column of pixels up/down for a vertical shear), that guarantees every pixel (or in our case, body atom) will have a place:

Look ma, no gaps!

Now, I had hoped that would let me remove the texture-overlay approach entirely, but unfortunately this technique results in shuddering and shimmering of small details:

So in the end I decided to keep using the texture overlay for rendering, just to give the illusion of smooth atom body movement - and only use three-shears for body atom placement.⁵

Shimmery web build‎

Normally I would publish a demo with the new goodies turned on, but since I quietly implemented this a few weeks ago you've already seen the new approach in action for a while.

So instead, here:

• I've turned off the overlay texture, so that all body atoms are placed based on their Three Shears rotation and rendered as-is - which gives that shimmering and jerky movement of atom bodies that I talked about above.
• You can press F7 to cycle between rendering the raw body "three-sheared" atoms, body atoms with transparent green overlay texture, or just the regular overlay texture (which is what you saw last week).

You tell me whether you prefer the real but shimmering/jerky atom bodies, or the fake but smooth atom bodies:

In other news, I fixed the "enemies get wet unexpectedly" bug I mentioned last week: liquid no longer travels through terrain when it's displaced by atom bodies. That was a doozy, but not in the way that's fun to read about after the fact.