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 5 de 10 · Fuerzas en un shader

Vortex

Triángulos en órbita. El vórtice jala.

Conviertes a coordenadas polares, le sumas T al ángulo, y regresas a cartesianas. El espacio entero gira. El warp se enrosca como agua vaciándose por el drenaje.

El agua cuando sueltas el tapón.

atan() + Tatan(p.y, p.x) te da el ángulo. Le sumas T * 0.1 y reconstruyes con cos/sin. Todo rota. Velocidad baja = contemplativo. Alta = centrífuga.
PruebaCambia el 0.15 a 0.5, centrifugadora. A 0.02, gira tan lento que apenas lo notas. Cambia el signo a -T * 0.15, gira al revés.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float spin = T * 0.15;
  vec3 col = vec3(0.04, 0.02, 0.1);
  for(int i = 0; i < 5; i++){
    float fi = float(i);
    float a = spin + fi * 1.2566;
    float dist = 0.4 + fi * 0.08;
    vec2 c = vec2(cos(a),sin(a)) * dist;
    float rot = a*2.; float ca=cos(rot),sa=sin(rot);
    vec2 q = p-c; q = vec2(q.x*ca-q.y*sa, q.x*sa+q.y*ca);
    vec2 aq = abs(q);
    float d = max(aq.x*.866+q.y*.5, -q.y) - 0.1;
    vec2 sq=q+vec2(.03,-.05); vec2 asq=abs(sq);
    col *= smoothstep(-.01,.1,max(asq.x*.866+sq.y*.5,-sq.y)-.1);
    col += vec3(.85,.45,.05) * smoothstep(.01,-.01,d) * (.5+fi*.1);
  }
  col += vec3(.95,.85,.4) * exp(-length(p)*2.) * .2;
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close