Lección 1 de 10 · Animación en shaders
Breathe
El círculo respira. La sombra crece con él.
Ya sabes mover cosas con T. Ahora vas a controlar cómo se mueven. Motion no es animar, es coreografiar. Darle intención al tiempo.
0.618, frecuencia irracional. El loop que nunca cierra.
El primer truco: sin(T * 0.618). Ese 0.618 es el ratio áureo invertido, un número irracional. Nunca se alinea con ningún ciclo entero. El resultado: la animación respira, pero nunca se repite exactamente igual. Orgánico, no mecánico.
- → Esta sección te enseña a controlar el tiempo como instrumento
- → Respiración, drift, phase, elastic, morph, flow, oscillators, loops, rhythm
- → Al final vas a coreografiar movimiento que se siente vivo
Frecuencia irracionalCuando multiplicas
T por un número irracional (0.618, 0.7071, PI/4), el ciclo nunca se cierra perfectamente. Cada vuelta es ligeramente diferente. Eso es lo que hace que algo se sienta vivo.Cambia
0.618 a 1.0, se siente mecánico. Vuelve a 0.618 y nota la diferencia. Cambia el 0.18 (amplitud del respiro) a 0.3 y respira más profundo.El código
void main(){
vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
float breath = 0.38 + 0.18 * sin(T * 0.618);
float d = length(p) - breath;
float shape = smoothstep(0.02, -0.02, d);
float shadow = smoothstep(0.0, 0.35, length(p + vec2(.06, -.1)) - breath);
float glow = exp(-max(d, 0.) * 4.) * 0.5;
float inner = exp(-length(p) * 2.) * shape;
vec3 col = vec3(0.03, 0.02, 0.05) * shadow;
col += vec3(0.95, 0.5, 0.15) * shape;
col += vec3(1.0, 0.85, 0.5) * inner * 0.3;
col += vec3(0.9, 0.35, 0.1) * glow;
col += vec3(.5,.2,.05) * exp(-max(d,0.)*1.5) * .2;
gl_FragColor = vec4(col, 1.);
}