ping pong — live canvas animation example

motion & easing8+
ball bounce
docsfull function
ball orbiting a sun
docsfull function
lerp (smooth follow)
docsfull function
easing functions
docsfull function
spring (damped harmonic motion)
docsfull function
move object to changing point
docsfull function
quadratic bezier curve
docsfull function
Bézier curves
docsfull function
trig, angles & vectors8+
sine curve
docsfull function
demystify sine and cosine
docsfull function
find points on a circle
docsfull function
point object towards another
docsfull function
distribute around circle
docsfull function
vector reflection (bounce)
docsfull function
vector rotation
docsfull function
angle interpolation (shortest turn)
docsfull function
collision detection11+
point to circle collision
docsfull function
point to polygon collision
docsfull function
rectangle to rectangle collision
docsfull function
circle to rectangle collision
docsfull function
circle to circle collision
docsfull function
line to circle collision
docsfull function
line to line collision
docsfull function
line to point collision
docsfull function
line to rectangle collision
docsfull function
polygon to polygon collision
docsfull function
circle field (collision at scale)
docsfull function
numbers in motion7-
lerp
docsfull function
inverse lerp
docsfull function
map range
docsfull function
clamp
docsfull function
wrap
docsfull function
ping pong
docsfull function
smoothstep
docsfull function
geometry & shapes8+
get a point on a line
docsfull function
get line length
docsfull function
get triangle data from line
docsfull function
draw star
docsfull function
draw rectangle (using trig, not rect())
docsfull function
draw equilateral triangle (from radius and center point)
docsfull function
get circle from three points
docsfull function
center on parent
docsfull function
generative showpieces13+
Fourier epicycles
docsfull function
Conway's Game of Life
docsfull function
Perlin noise flow field
docsfull function
Wave interference
docsfull function
Gravitational lensing
docsfull function
Orbital precession (GR)
docsfull function
Phyllotaxis (golden angle)
docsfull function
Murmuration (flocking starlings)
docsfull function
Sierpinski Triangle
docsfull function
Glitter
docsfull function
Pretty Ring
docsfull function
Sparklies
docsfull function
Klimt-Inspired Swirls
docsfull function
handy helpers7+
degrees to radians
docsfull function
radians to degrees
docsfull function
format number with commas
docsfull function
random integer between
docsfull function
random number between
docsfull function
color lerp (RGB vs HSL)
docsfull function
color families (pick a range by name)
docsfull function

pingPong bounces one number back and forth between 0 and a peak — a triangle wave. The bar on the left is that number; the dot on the right is something using it. Watch them slide out and back, forever, with no jump.