uforange/index.html

## index.html
<html>
  <script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/build/GlslCanvas.js"></script>
  <body>
  <canvas class="glslCanvas" data-fragment="
    #ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float random (in float x) {
    return fract(sin(x)*sin(u_time));
}

float random (in vec2 st) {
    return fract(sin(dot(st.xy, vec2(0.0, 10000000.233)))* 43758.5453123);
}

float pattern(vec2 st, vec2 v, float t) {
    vec2 p = floor(st+v);
    return step(t, random(100.+p*.000001)+random(p.x)*0.5 );
}

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st *= 5.0; // Scale the coordinate system
    vec2 ipos = floor(st);  // get the integer coords
    vec2 fpos = fract(st);  // get the fractional coords

    vec2 grid = vec2(3.0, 40.);
    st *= grid;

    vec2 vel = vec2(u_time * max(grid.x,grid.y)); // time
    vel *= vec2(1.,0.0) * (u_time * random(1.-ipos.y)); // direction

    //offset
    vec2 offset = vec2(0.0, 10.);

    vec3 color = vec3(random(fpos));
    color.r = pattern(st+offset, vel, 0.5+sin(u_time));
    color.g = pattern(st, vel, 0.5+sin(u_time)*-1.);
    color.b = pattern(st-offset, vel, 0.5+cos(u_time)*0.5);
    color *= step(0.,(fpos.x * fpos.y));

    gl_FragColor = vec4((1.-color),1.0);
}
  "
  width="960" height="500"> </canvas>
  </body>
  </html>
	<html>
	<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/build/GlslCanvas.js"></script>
	<body>
	<canvas class="glslCanvas" data-fragment="
	#ifdef GL_ES
	precision mediump float;
	#endif

	uniform vec2 u_resolution;
	uniform vec2 u_mouse;
	uniform float u_time;

	float random (in float x) {
	return fract(sin(x)*sin(u_time));
	}

	float random (in vec2 st) {
	return fract(sin(dot(st.xy, vec2(0.0, 10000000.233)))* 43758.5453123);
	}

	float pattern(vec2 st, vec2 v, float t) {
	vec2 p = floor(st+v);
	return step(t, random(100.+p.000001)+random(p.x)0.5 );
	}

	void main() {
	vec2 st = gl_FragCoord.xy/u_resolution.xy;
	st *= 5.0; // Scale the coordinate system
	vec2 ipos = floor(st); // get the integer coords
	vec2 fpos = fract(st); // get the fractional coords

	vec2 grid = vec2(3.0, 40.);
	st *= grid;

	vec2 vel = vec2(u_time * max(grid.x,grid.y)); // time
	vel = vec2(1.,0.0) (u_time * random(1.-ipos.y)); // direction

	//offset
	vec2 offset = vec2(0.0, 10.);

	vec3 color = vec3(random(fpos));
	color.r = pattern(st+offset, vel, 0.5+sin(u_time));
	color.g = pattern(st, vel, 0.5+sin(u_time)*-1.);
	color.b = pattern(st-offset, vel, 0.5+cos(u_time)*0.5);
	color = step(0.,(fpos.x fpos.y));

	gl_FragColor = vec4((1.-color),1.0);
	}
	"
	width="960" height="500"> </canvas>
	</body>
	</html>