Square Wheels

There was a request recently for help rolling a square object along a floor so that the sides stayed in contact with the floor plane. I came up with a fairly simple solution by adding expressions to the anchor point and position property of a square and then rolling it along by adjusting rotation.

The approach:

The easiest way to rotate on a corner is to simply move the anchor point to the corner. The challenge is to switch corners automatically every 90º. If I divide rotation by 90 and use Math.floor(value) I can create a counter that goes from 0 to 3 in the first rotation. To make the number repeat I'll use the % 4 function. So far the expression looks like this:

count = Math.floor(rotation / 90);
num = count;
val = ( num % 4);

To keep the value from going negative I can add 100 to the number (num). This will give me 25 rotations in the negative direction before my value goes negative.

Now it's just a matter of adding a few if else statements. The final Anchor point expression looks like this:

count = Math.floor(rotation / 90);
num = count + 100;
val = ( num % 4);

if (val == 0) {
  [width, height]
}
else if (val == 1) {
  [width, 0]
}
else if (val == 2) {
  [0, 0]
}
else
  [0, height]

I used width and height instead of the values for the layer so the expression would work with any square layer of any size.

The last step is to modify the position of the X value by multiplying the rounded count by the width of the layer. The expression should be fairly easy to understand and looks like this:

val = Math.floor(rotation / 90);
x = value[0] + val * width;
y = value[1]; 
[x, y]

The only thing left to do is animate the rotation value. You'll find a project for AE CS3 here I hope you enjoy...