Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save GoodBoyNinja/7d5e6da4dcc5b35b85979a15672e8b42 to your computer and use it in GitHub Desktop.
Save GoodBoyNinja/7d5e6da4dcc5b35b85979a15672e8b42 to your computer and use it in GitHub Desktop.
Take the original position value and returns a point on a square around it. use "time" to drive the animation like in the example below.
function SquareMotion(squareSize, percent) {
squareSize = (squareSize === undefined) ? 100 : squareSize;
percent = (percent === undefined) ? 0 : percent % 100;
sideSize = squareSize / Math.SQRT2;
halfSize = sideSize * 0.5;
perimeter = sideSize * 4; // convert the original percent value to both horizontal and vertical percent values to drive the motion
horizontalpercent = (percent >= 25 && percent <= 50) ? 100 : (percent >= 75 && percent <= 100) ? 0 : (percent < 25) ? (percent * 4) : (100 - (4 * (percent % 25)));
verticalpercent = (percent >= 0 && percent <= 25) ? 0 : (percent >= 50 && percent <= 75) ? 100 : (percent < 50) ? (percent - 25) * 4 : (100 - (4 * (percent % 25))); // use the linear function to drive each dimension
xLoc = linear(horizontalpercent, 0, 100, -halfSize, halfSize);
yLoc = linear(verticalpercent, 0, 100, -halfSize, halfSize);
return [xLoc, yLoc] + value;
}
squareSize = 400;
percent = time * 25;
SquareMotion(squareSize, percent)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment