TwSLs: Tweet-sized OpenGL Shader Language Programs

Every scene shown is rendered using the Tweet-sized OpenGL Shader Language program (or TwSL) shown.

To help the programs fit in a tweet, a few variables* are assumed to have been declared already, and the vec3 c is used to output the final colour value. Otherwise it is all valid GLSL.

The #TwSL hashtag is used to identify the tweet as a TwSL program so that viewer apps can search for and show the latest TwSLs live from Twitter.

TwSLs shown:

c=vec3(.25)//SolidGrey #TwSL

c=vec3(fract(t))//PulsingGreys #TwSL

c=vec3(u.y)//1DGreyGradient #TwSL

c=vec3(u,.0)//2DRedGreenGradient #TwSL

c=vec3(u,abs(sin(t)))//Pulsing2DGradient #TwSL

c=vec3(abs(fract(length(p*5.0)-t)*2.-1.))//RadialGradient #TwSL

u+=vec2(20.,11.+fract(t));y=fract(u.x*u.x*u.y*u.y*50.);c=vec3(y)//TvNoise #TwSL

y=smoothstep(0.,.2,length(p*vec2(1.8,1.))-.5);c=vec3(1.-y,1.,y)//Sun #TwSL

n=p*vec2(1.8,1.);x=max(length(n)-.5,-length(n-vec2(.2,.1))+.5);y=smoothstep(.01,­0.,x);c=vec3(y)//Moon #TwSL

y=atan(p.y,p.x)+t;z=length(p*2.);y=step(z-sin(y*5.)*.8,1.);c=vec3(y,1.,1.-z)//Fl­owerSpin #TwSL

y=atan(p.y,p.x)/6.28+t*.1;z=length(p*1.);y=abs(fract(y*4.)*2.-1.)-z;c=vec3(0.,y,­0.)//LeafSpin #TwSL

y=atan(p.y,p.x);x=length(p);z=(3.-x*3.)*abs(fract((t-pow(x*50.,.6)+(y/6.28)))*2.­-1.);c=vec3(z*.5,z,1.-p.y)//Spiral #TwSL

y=abs(fract(p.x*2.+t)*2.-1.);y=y*y*y*(y*(y*6.0-15.0)+10.0)-.5;y=step(y-.01,p.y)*­step(p.y,y+.01);c=vec3(y)//FakeSineGraph #TwSL

z=abs(p.y);x=fract(t+p.x/z*10.);y=smoothstep(0.,.2,x)*smoothstep(.4,.2,x)*z;c=ve­c3(y)//3DLines #TwSL

*** For people who want to start developing TwSLs:
uniform float t; // Time in seconds
vec2 n;
vec2 u; // 0-1 in x & y
vec2 p; // -1-1 in x & y
float x,y,z,w;
lowp vec3 c; // For RGB output

I used QML2/Qt5 to make the rendering app. It should be easy to make a similar one with WebGL.

Category:

Science & Technology

Tags:

• OpenGL
• GLSL
• TwSL
• Shader
• Graphics
• QML