One of our engineers recently found this great video on GLSL shaders, and soon enough we were all eager to play around with it. This morning, we decided to have a little fun and see what we could come up with, and we replaced our old SVG+CSS animated home page background with a GLSL shader.
This has actually been not only a huge improvement to performance but resulted in a much more interesting and dynamic background. We're really happy with the result.
You can see it on our home page or above in the showcase, and we also included a few other candidate shaders we came up with this morning in the showcase controls.
See the code for the shader below, and let us know what you think!
#define t 2.*sin(iTime/12.)
#define r iResolution.xy
void mainImage( out vec4 fragColor, in vec2 fragCoord ){
vec3 c;
float A,B,l,z=t;
for(int i=0;i<3;i++) {
vec2 uv,p=fragCoord.xy/r;
uv=p;
p-=.5;
p.x*=r.x/r.y;
A=p.x*cos(7.*t*p.y)-p.y*sin(5.*t*p.x);
B=p.x*sin(5.*t*p.x)+p.y*cos(3.*t*p.y);
p*=vec2(A,B);
z+=.005;
l=length(p);
uv+=p/l*(sin(z)+3.1415)*abs(sin(l*5.-z-z));
c[i]=.01/length(mod(uv,1.)-.5);
}
fragColor=vec4(c/(1.-l/2.),t)/vec4(1.,.2,.3,1.);
fragColor*=2.*fragColor*sqrt(l)/(1.+10.*l);
}Subscribe to our newsletter
Receive an email when we publish a new post. No spam, just the good stuff.