learn GLSL from zero
ToolsCrea con shadersShader MakerCrea shaders gratis en líneaToolkitObras de shaders listas para tu webSketcher LabPinta el hero de tu landing con shaders3D StudioEl editor Three.js en tu navegador
GamesJuega con shadersOnomatoShaderEscribe una palabra y explótalaThe WatcherUn ojo que te sigueAetherVidrio líquido con un ojo adentroBloomcoreUna palabra hace crecer un jardín de luzPyrokineAvienta fuego a la paredVoltaicLa pirámide lanza rayosSurfSurfea un océano de shader

Lección 7 de 10 · Animación en shaders

Osciladores

Tres anillos que nunca se sincronizan. Movimiento infinito.

Un sin() es predecible. Tres a frecuencias irracionales entre sí son impredecibles para siempre.

sin(T*0.3) + sin(T*0.17) + sin(T*0.07). Esas tres frecuencias nunca se sincronizan. El resultado: una señal que varía perpetuamente.

Tres relojes desincronizados. El caos controlado más elegante.

Oscillator stackSumar múltiples osciladores a frecuencias que no son múltiplos entre sí. En síntesis de audio se llama additive synthesis. Tres osciladores bastan para romper cualquier ciclo.
PruebaQuita el tercer sin, se siente más predecible. Cambia 0.07 a 0.3, dos frecuencias iguales, el patrón se simplifica.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float r1 = 0.25 + sin(T * 0.3) * 0.1;
  float r2 = 0.48 + sin(T * 0.17) * 0.12;
  float r3 = 0.75 + sin(T * 0.07) * 0.14;
  float d = length(p);
  float ds = length(p + vec2(.05, -.07));
  vec3 col = vec3(0.02, 0.02, 0.06);
  col -= vec3(smoothstep(.08,.0,abs(ds-r1))+smoothstep(.09,.0,abs(ds-r2))+smoothstep(.1,.0,abs(ds-r3)))*.12;
  col = max(col, vec3(0.));
  col += vec3(0.95, 0.3, 0.9) * smoothstep(0.04, 0.0, abs(d-r1));
  col += vec3(0.5, 0.4, 0.98) * smoothstep(0.05, 0.0, abs(d-r2));
  col += vec3(0.3, 0.65, 0.95) * smoothstep(0.06, 0.0, abs(d-r3));
  col += vec3(.4,.15,.4) * exp(-abs(d-r1)*5.) * .25;
  col += vec3(.2,.15,.45) * exp(-abs(d-r2)*4.) * .2;
  col += vec3(.12,.25,.4) * exp(-abs(d-r3)*3.) * .15;
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close