Lesson 4 of 10 · Shader animation
Elastic
Overshoots, bounces, settles. Jelly square.
In real life nothing stops dead. Everything overshoots, bounces, and settles. That is elastic motion.
The formula: exp(-T * 2.) * sin(T * 12.). The sin() oscillates fast (the bounce). The exp(-T) fades it out (damping). Together: a hit that vibrates and calms down.
Overshoot → bounce → settle. Elastic physics in one line.
Damped oscillation
exp(-t * damping) * sin(t * freq). damping controls how fast it calms. freq controls how fast it vibrates.Change
2. (damping) to 0.5, takes forever to settle. Change 12. (frequency) to 30., vibrates faster.The code
void main(){
vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
float t = mod(T, 4.);
float elastic = exp(-t * 2.) * sin(t * 12.);
vec2 c = vec2(0., elastic * 0.5);
float stretch = 1.0 + elastic * 0.3;
vec2 sz = vec2(0.18 / stretch, 0.18 * stretch);
vec2 q = abs(p - c) - sz;
float d = max(q.x, q.y);
vec2 qs = abs(p - vec2(0., -.7)) - vec2(.2, .015);
float shadow = smoothstep(-.01, .15, max(qs.x, qs.y));
vec3 col = vec3(0.02, 0.03, 0.08) * shadow;
col += vec3(0.85, 0.9, 0.98) * smoothstep(.01, -.01, d);
col += vec3(0.4, 0.55, 0.8) * exp(-max(d,0.)*6.) * 0.3;
col = hueShift(col, 0.0);
gl_FragColor = vec4(col, 1.);
}