Marine Life · JS Playground

Modes
1 wander 2 circle 3 follow mouse
space pause/play R respawn D debug

Creature

Pick a creature

Presets

Body wave

Slices (N strips along the body) 40

Tail amplitude (px) 14

Wave frequency (Hz) 2.4

Wavelength (body-lengths) 0.85

Head stillness 0.22

Tail emphasis (curve) 1.6

Body motion

Lateral sway (px) 3

Breathe / scale pulse 0.015

Bank into turn (shear) 0.18

Swimming

Forward speed (px/s) 121

Turn rate (rad/s) 1.2

Wave-speed coupling 0.6

Appearance

Fish size (px) 120

Shadow depth 0.5

Fish count 1

Foam / wake

Foam enabled (master toggle)

Foam amount (burst + trickle density) 0.750

Droplet size 0.700

Foam lifetime (how long bubbles linger) 0.450

Spray distance (initial velocity) 0.800

Brightness 0.200

Scene

Motion mode

Motion trail

Water caustics

Debug slice lines

Pixelated (no smoothing)

How it works: the top-down image is cut into N horizontal strips. Each strip is drawn at an offset along a traveling sine wave whose amplitude grows from head→tail — pure Canvas2D drawImage calls, no shaders, no spritesheets. The same trick ports 1:1 to a vertex shader on a tessellated quad if you ever want it on the GPU.

— fps

Marine Life slice-wave swim · canvas2d