|
|
Downloads
Demo: geexlab-demopack-gl32/d30-twigl/
|
I recently discovered twigl.app. It’s an online editor for coding one tweet pixel shaders (the max length of a shader should be less than 280 characters). I ported to GeeXLab a very cool shader that renders some jellyfish in a 266 characters shader:
for(float i,e,g,s;i++<2e2;){vec3 p=vec3((FC.xy-r*.5)/r.y*g+.7,g+=e);p.y-=t*.1;p-=round(p);p.xz*=1.+sin(t*PI+(round(g)+p.y)*9.)*.2;for(e=s=9.;s<4e2;s+=s)e=s/2e6+min(e,max(-p.y,abs(length(p)-.2))/s),p.y+=length(p.xz)*2.,p=.2-abs(p*3.);o.rgb+=hsv(.6+.9/p.y,.9,4e-6/e);}#つぶやきGLSL pic.twitter.com/g1D0CVQcgS
— yonatan (@zozuar) August 25, 2021
Ok in reality, the shader is longer because the code of some functions like hsv() is not taken into account….
Anyway, I found the shader very cool and I’m still amazed how some lines of math can produce organic-like patterns.
The original pixel shader is:
for(float i,e,g,s;i++<2e2;){vec3 p=vec3((FC.xy-r*.5)/r.y*g+.7,g+=e);
p.y-=t*.1;p-=round(p);p.xz*=1.+sin(t*PI+(round(g)+p.y)*9.)*.2;for(e=s=9.;s<4e2;
s+=s)e=s/2e6+min(e,max(-p.y,abs(length(p)-.2))/s),p.y+=length(p.xz)*2.,p=.2-abs(p*3.);
o.rgb+=hsv(.6+.9/p.y,.9,4e-6/e);}
Here is the pixel shader in the GeeXLab demo:
#version 150
uniform float time;
uniform vec2 resolution;
in vec4 v_texcoord;
out vec4 FragColor;
#define PI 3.14159265
#define FC gl_FragCoord
vec3 hsv(float h, float s, float v)
{
vec4 t = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(vec3(h) + t.xyz) * 6.0 - vec3(t.w));
return v * mix(vec3(t.x), clamp(p - vec3(t.x), 0.0, 1.0), s);
}
void main()
{
vec2 r = resolution;
float t = time;
float i=0,e=0,g=0,s=0;
vec3 fcolor = vec3(0.0);
for(;i++<2e2;)
//for(float i,e,g,s;i++<2e2;)
{
vec3 p = vec3((FC.xy-r*.5)/r.y*g+.7, g+=e);
p.y -= t*.2;
p -= round(p);
p.xz *= 1. + sin(t*PI+(round(g)+p.y)*9.)*.2;
for(e=s=9.;s<4e2;s+=s)
e = s/2e6+min(e,max(-p.y,abs(length(p)-.2))/s),p.y+=length(p.xz)*2.,p=.2-abs(p*3.0);
fcolor.rgb += hsv(.6+.9/p.y,.9,4e-6/e);
}
FragColor.rgb = fcolor;
FragColor.a = 1.0;
}
I took the hsv() code from this page.
The GeeXLab demo (just drop geexlab-demopack-gl32/d30-twigl/main.xml in GeeXLab):
The shader is ready for live coding. Just edit the shader (d30-twigl/shaders/ps01.glsl) in your favorite text editor and save it to see the result in real time.
On a GeForce RTX 2070, this demo runs at 156 FPS (resolution: 1280x720).