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 10 de 10 · Animación en shaders

Tu movimiento

Combina todo. Tu coreografía de figuras.

Oscillators + elastic + beat. Tu coreografía a 60fps.

Todo junto. Cada bloque ya lo conoces:

PruebaCambia las frecuencias de los osciladores. Cambia el 8. del pow. Cambia las escalas. Esta es tu coreografía.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float ox = sin(T*.3)*.3+sin(T*.17)*.15+sin(T*.07)*.1;
  float oy = sin(T*.23)*.25+sin(T*.13)*.12;
  float t = mod(T, 5.);
  float elastic = exp(-t*1.5)*sin(t*10.)*.2;
  float beat = pow(sin(T*2.)*.5+.5, 8.);
  float breath = 0.2+0.05*sin(T*0.618);
  vec3 col = vec3(0.03,0.02,0.06);
  float ripple = sin(length(p)*10.-T*2.)*.5+.5;
  col += vec3(.08,.06,.15)*ripple*exp(-length(p));
  float dc = length(p-vec2(ox,oy))-(breath+beat*.08);
  col += vec3(.5,.2,.08)*exp(-max(dc,0.)*3.)*.4;
  col += vec3(.95,.45,.15)*smoothstep(.02,-.02,dc);
  col += vec3(1.,.85,.5)*exp(-length(p-vec2(ox,oy))*4.)*smoothstep(.02,-.02,dc)*.3;
  vec2 sc = vec2(-ox*.4,elastic);
  vec2 sq = abs(p-sc)-vec2(.13);
  float ds = max(sq.x,sq.y);
  vec2 gsq = abs(p-vec2(sc.x,-.8))-vec2(.15+abs(elastic)*.1,.012);
  col *= smoothstep(-.01,.1,max(gsq.x,gsq.y));
  col += vec3(.15,.42,.48)*exp(-max(ds,0.)*3.)*.4;
  col += vec3(.3,.88,.95)*smoothstep(.01,-.01,ds);
  float a = T*.4;
  vec2 tc = vec2(cos(a),sin(a))*.5;
  float ca=cos(a*2.),sa=sin(a*2.);
  vec2 tp = p-tc; tp = vec2(tp.x*ca-tp.y*sa,tp.x*sa+tp.y*ca);
  vec2 at = abs(tp);
  float dt = max(at.x*.866+tp.y*.5,-tp.y)-.11;
  col += vec3(.2,.15,.08)*smoothstep(.02,.0,abs(length(p)-.5))*.25;
  col += vec3(.5,.4,.1)*exp(-max(dt,0.)*3.)*.4;
  col += vec3(.95,.8,.2)*smoothstep(.01,-.01,dt);
  vec2 hp = abs(p+vec2(oy*.3,-ox*.2));
  float rh = .15+beat*.1;
  float dh = max(hp.x*.866+hp.y*.5,hp.y)-rh;
  col += vec3(.4,.15,.45)*exp(-max(dh,0.)*3.)*.4;
  col += vec3(.85,.35,.9)*smoothstep(.02,-.02,dh);
  col += vec3(.95,.7,.95)*beat*smoothstep(.02,-.02,dh)*.3;
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close