Teaching a canvas crocodile to swim

Anatomy first

She took several tries. A cute cartoon looked fake. A realistic 3D mesh looked worse. What worked was a cartoon drawn over real proportions:

• The head is 16 percent of her length, and the tail is half of it.
• Forelimbs have five toes and no webbing. Hind limbs have four toes, webbed.
• A double crest runs down the tail and merges into a single one about two thirds of the way along.
• The eyes sit on raised turrets, set back and close to the midline, so a real crocodile can watch the surface with everything else underwater.

Her mouth never opens. This is a calm swamp.

How she swims

Every frame happens in two stages. First, a chain of spine joints follows the head, each one pulled toward the one in front. Then a travelling wave is laid across the body, almost nothing at the shoulders and growing toward the tip of the tail. The head does not weave. Crocodiles swim with their tails.

She follows your cursor slowly, at about 38 pixels a second, because a pet that races across what you are reading is a pet people turn off.

Boop her

Click her and she dives. She shrinks, blurs and fades, body first and eyes last, stays down for a few seconds, then surfaces somewhere away from your cursor, eyes and nostrils first. Boop her again soon after and she gets warier and stays down longer. The wariness wears off over about half a minute.

What went wrong

• She tore in half. The body outline was offset straight from twelve spine joints, and the swim wave made the left and right offsets cross each other. Resampling the spine into a smooth curve of 46 points before offsetting fixed it.
• She lost her head. The head’s angle was measured across three segments, so on tight turns it came loose at the neck. Anchoring the head to the third joint, pointing it down the spine, and letting the body overlap the skull slightly fixed it.
• Her tail twitched. A hard angle limit on a follow-the-leader chain oscillates back and forth across the limit. Replacing it with stiffness that is strong at the neck and nearly gone at the tail tip cut the tail’s peak acceleration from 4.87 to 0.47 pixels per frame squared.
• One angle bug, weirdness everywhere. ((a - b + 3π) % 2π) - π goes wrong as soon as the difference leaves a narrow range, because JavaScript’s % keeps the sign of the number being divided. atan2(sin(a - b), cos(a - b)) is right every time.

The swamp reacts

The duckweed parts around her as she swims and closes up behind her. Her body lies along the path her head has just taken, so the channel she clears through the weed has her exact shape. When she dives, it closes over her.