Most cartoon characters walk heel, toe, heel, toe. Pivot can't. He doesn't have heels. Or toes. He has two very pointy legs and a hinge.
So he walks the way a drafting compass walks across a map.
The compass walk
If you've ever "walked" a pair of dividers across a map to measure a distance, you already know how Pivot moves:
- Plant one point.
- Swing the other leg around it in a half circle.
- Plant that one, and swing the first leg.
- Repeat until you arrive, or fall over.
That's the whole trick, and it gives him a walk nobody else has: a vaulting, swinging, tick-tock sort of gait. When he's in a real hurry he gives up on walking entirely and cartwheels.
Drawing a mascot in code
Pivot isn't a picture. He's a handful of shapes with names: two legs, a crossbar for arms, a gear for a head and a star for an eye. Because each part is its own shape, code can move them one at a time.
One step of the walk, simplified a lot, goes something like this:
// one step of the compass walk
const hinge = plantedFoot.position; // this leg stays put
swingLeg.angle += speed * dt; // the other one swings
if (swingLeg.touchesGround()) {
plantedFoot = swingLeg; // plant it, swap legs
sound.play('tick');
}Drawing him this way has some nice side effects:
- He's sharp at any size. Phone, laptop, giant TV: no blurry edges.
- He's tiny. All of Pivot is a few kilobytes of text. A single photo is usually bigger.
- He can react. A video can't look at your cursor. Pivot can, and does.
- Hats. His head is just a gear, so any hat fits. This turned out to be very important.
The small stuff
The walk is the big one, but the little things matter just as much. His eye follows your cursor. He blinks. Leave him alone for a while and he gets bored. Throw him (you'll work out how) and he tumbles, bounces and lands dizzy.
None of that is complicated on its own. Put together, it turns a pile of shapes into somebody.
Next time he vaults across the page, give him a wave. He'll probably wave back.