Lección 4 de 10 · Animación en shaders
Elastic
Se pasa, rebota, se asienta. Cuadrado de gelatina.
En la vida real nada frena en seco. Todo se pasa, rebota y se asienta. Eso es movimiento elástico.
La fórmula: exp(-T * 2.) * sin(T * 12.). El sin() oscila rápido (el rebote). El exp(-T) lo va apagando (el damping). Juntos: un golpe que vibra y se calma.
Overshoot → bounce → settle. Física elástica en una línea.
Damped oscillation
exp(-t * damping) * sin(t * freq). damping controla qué tan rápido se calma. freq controla qué tan rápido vibra.Cambia
2. (damping) a 0.5, tarda mucho en calmarse. Cambia 12. (frecuencia) a 30., vibra más rápido.El código
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.);
}