Jellyfish Tweet Shader


GeeXLab - Twigl jellyfish shader



Downloads

 
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:

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):
GeeXLab - Twigl jellyfish shader

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: 1280×720).





Leave a Comment

Your email address will not be published. Required fields are marked *