<script id="fragmentShader" type="x-shader/fragment">
precision mediump float;
uniform vec3 color;

uniform float time;
uniform float width;
uniform float height;

const float PI = 3.141592654;

// by @mattdesl    
float hue2rgb(float f1, float f2, float hue) {
    if (hue < 0.0)
        hue += 1.0;
    else if (hue > 1.0)
        hue -= 1.0;
    float res;
    if ((6.0 * hue) < 1.0)
        res = f1 + (f2 - f1) * 6.0 * hue;
    else if ((2.0 * hue) < 1.0)
        res = f2;
    else if ((3.0 * hue) < 2.0)
        res = f1 + (f2 - f1) * ((2.0 / 3.0) - hue) * 6.0;
    else
        res = f1;
    return res;
}

vec3 hsl2rgb(vec3 hsl) {
    vec3 rgb;   
    if (hsl.y == 0.0) {
        rgb = vec3(hsl.z); // Luminance
    } else {
        float f2;
        
        if (hsl.z < 0.5)
            f2 = hsl.z * (1.0 + hsl.y);
        else
            f2 = hsl.z + hsl.y - hsl.y * hsl.z;
            
        float f1 = 2.0 * hsl.z - f2;
        
        rgb.r = hue2rgb(f1, f2, hsl.x + (1.0/3.0));
        rgb.g = hue2rgb(f1, f2, hsl.x);
        rgb.b = hue2rgb(f1, f2, hsl.x - (1.0/3.0));
    }   
    return rgb;
}  
// end hsl2rgb
  
vec2 rotate(vec2 p, float a) {
  return vec2(p.x * cos(a) - p.y * sin(a),
              p.x * sin(a) + p.y * cos(a));
}  
  
vec2 translate(float a) {
  return vec2(cos(a*2.0), sin(a*3.0));
}
  
float sharpen(float x) {
  return x > sin(time) * .5 ? 1.0 : x; 
}
  
float dot_pattern(vec2 p) {
  return sharpen(sin(time * .1 + p.x / 0.2) * 
                 sin(time * .1 + p.y / 0.2));
}
  /*
float funny_circles(vec2 p) {
  vec2 p0 = mod(vec2(0.5, 0.5), 1.0);
  float r1 = .2;
  float r2 = .3;
  return 0;
} */

float hue_cycle(vec2 p) {
  return float(mod(sin((p.x + p.y * p.y)*.25 + time * .1), 1.0));
}

vec2 coords() {
  float vmin = min(width, height);  
  return vec2((gl_FragCoord.x - width * .5) / vmin, 
              (gl_FragCoord.y - height * .5) / vmin);
}  
  

void main () {
  vec2 p0 = coords();
  vec2 p = rotate(p0, time / 10.0) + translate(time * .001);
  vec3 c0 = hsl2rgb(vec3(hue_cycle(p), 1.0, .5));
  vec3 c = c0 * dot_pattern(p);
  gl_FragColor = vec4(vec3(c), 1.0);
}
</script>
<script id="vertexShader" type="x-shader/vertex">
precision mediump float;
attribute vec2 position;

void main () {
  gl_Position = vec4(position, 0, 1);
} 
</script>
<div class="ui">

</div>