uforange/index.html

## index.html
<html>

<script src = "https://rawgit.com/wolftype/200c/gh-pages/js/gfx.js"></script>
<script type="text/javascript">

var app = new GFX.App();
var box;

/// On Initialization of the WebGL Application (this happens once)
app.onInit = function(){
  // A CUBE!
  // We include each vertex on the back side TWICE so that we can attach
  // TWO separate uv coordinates to each
  var vertices = new Float32Array( [
    0.0, 0.0, 0.0,
    -1.0, -1.0, 1.0,
    1.0, -1.0, 1.0,
    1.0, -1.0, -1.0,
    -1.0, -1.0, -1.0,

    -1.0, 1.0, 1.0,
    1.0, 1.0, 1.0,
    1.0, 1.0, -1.0,
    -1.0, 1.0, -1.0,


  ]);
  var texCoord = new Float32Array([
    0.0, 1.0,
    -1.0, -1.0,
    1.0, -1.0,
    1.0, -1.0,
    -1.0, -1.0,

    -1.0, 1.0,
    1,0, 1.0,
    1.0, 1.0,
    -1.0, 1.0,


  ]);
  //Break Object Vertices Triangles
   var indices = new Uint16Array([
     0, 1, 2,
     0, 2, 3,
     0, 3, 4,
     0, 4, 1,
     1, 2, 4,
     3, 4, 2,

     5, 0, 6,
     6, 0, 7,
     7, 0, 8,
     8, 0, 5,
     8, 5, 6,
     8, 6, 7,
   ]);
  //Create and Bind two new array buffers and a new element array buffer
  box = new GFX.Mesh();
  //Allocate Some Data on the GPU and copy position data over
  box.vertexBuffer.bind();
  box.vertexBuffer.alloc( vertices.byteLength );
  box.vertexBuffer.data(vertices);
  //Allocate Some Data on the GPU and copy tex data over
  box.texBuffer.bind();
  box.texBuffer.alloc( texCoord.byteLength );
  box.texBuffer.data(texCoord);
  //Allocate Some Data on the GPU and copy index data over
  box.indexBuffer.bind();
  box.indexBuffer.alloc( indices.byteLength );
  box.indexBuffer.data(indices);
}
// Render the scene
app.onRender = function() {
  var scene = this.scene;
  //rotate scene camera about y axis
  scene.camera.frame.rotateY( Math.sin( scene.time) * Math.PI / 30 );
  //begin scene render, send matrices over to shader uniform
  scene.begin();
    //Send Time Variable over to GPU
    scene.shader.setUniformFloat("u_time", scene.time )
    //enable attributes in shader
    scene.shader.enableAttribute( "position" );
    scene.shader.enableAttribute( "uv" );
    box.frame.rotateX( scene.time * 0.3 );
    //upload model matrix
    box.uploadModel(scene.shader)
    //Bind Vertex Buffer
    box.vertexBuffer.bind();
    //Point Buffer to Attribute in shader
    scene.shader.pointAttribute("position", 3);
    //Bind TexCoord Buffer
    box.texBuffer.bind();
    //Point Buffer to Attribute in Shader
    scene.shader.pointAttribute("uv", 2)
    //Bind Index Buffer and Draw based on Indices
    box.indexBuffer.bind();
    //Draw the indices
    box.indexBuffer.drawElements(GL.TRIANGLES);
   //or just draw the vertex array buffer directly as points (can also use GL.LINES, GL.LINE_STRIP, GL.TRIANGLES, etc)
    // box.vertexBuffer.bind();
    // box.vertexBuffer.drawArrays(GL.POINTS);
  scene.end();
}
</script>

<!-- VERTEX SHADER -->
<script id="gfxvert" type="text/glsl">

  #ifdef GL_ES
  precision lowp float;
  #endif

  attribute vec3 position;
  attribute vec2 uv;

  uniform mat4 model;
  uniform mat4 view;
  uniform mat4 projection;

  varying vec2 vuv;

  void main() {
    vuv = uv;
    gl_Position = projection * view * model * vec4(position, 1.0);
    gl_PointSize = 10.0;
  }
</script>


<!-- FRAGMENT SHADER -->
<script id="gfxfrag" type="text/glsl">

  #ifdef GL_ES
  precision lowp float;
  #endif

  uniform float u_time;
  uniform vec2 u_resolution;

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

  float random (in vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898,78.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 );
  }

  varying vec2 vuv;

  // modified an example code from
  // http://thebookofshaders.com/edit.php#10/ikeda-03.frag
  void main() {
    vec2 st = vuv;
    st = fract(st*8.0);

    vec2 grid = vec2(1.0, 2.0);
    st *= grid;

    vec2 ipos = floor(st);
    vec2 fpos = fract(st);

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

    vec2 offset = vec2(0.1, 5.0);

    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((color),1.0);
  }
</script>

<body onload=app.start()>
<canvas id="gfxcanvas" width=640 height=480> No <code> canvas </code> tag support </canvas>

</body>
</html>
	<html>

	<script src = "https://rawgit.com/wolftype/200c/gh-pages/js/gfx.js"></script>
	<script type="text/javascript">

	var app = new GFX.App();
	var box;

	/// On Initialization of the WebGL Application (this happens once)
	app.onInit = function(){
	// A CUBE!
	// We include each vertex on the back side TWICE so that we can attach
	// TWO separate uv coordinates to each
	var vertices = new Float32Array( [
	0.0, 0.0, 0.0,
	-1.0, -1.0, 1.0,
	1.0, -1.0, 1.0,
	1.0, -1.0, -1.0,
	-1.0, -1.0, -1.0,

	-1.0, 1.0, 1.0,
	1.0, 1.0, 1.0,
	1.0, 1.0, -1.0,
	-1.0, 1.0, -1.0,



	]);
	var texCoord = new Float32Array([
	0.0, 1.0,
	-1.0, -1.0,
	1.0, -1.0,
	1.0, -1.0,
	-1.0, -1.0,

	-1.0, 1.0,
	1,0, 1.0,
	1.0, 1.0,
	-1.0, 1.0,


	]);
	//Break Object Vertices Triangles
	var indices = new Uint16Array([
	0, 1, 2,
	0, 2, 3,
	0, 3, 4,
	0, 4, 1,
	1, 2, 4,
	3, 4, 2,

	5, 0, 6,
	6, 0, 7,
	7, 0, 8,
	8, 0, 5,
	8, 5, 6,
	8, 6, 7,
	]);
	//Create and Bind two new array buffers and a new element array buffer
	box = new GFX.Mesh();
	//Allocate Some Data on the GPU and copy position data over
	box.vertexBuffer.bind();
	box.vertexBuffer.alloc( vertices.byteLength );
	box.vertexBuffer.data(vertices);
	//Allocate Some Data on the GPU and copy tex data over
	box.texBuffer.bind();
	box.texBuffer.alloc( texCoord.byteLength );
	box.texBuffer.data(texCoord);
	//Allocate Some Data on the GPU and copy index data over
	box.indexBuffer.bind();
	box.indexBuffer.alloc( indices.byteLength );
	box.indexBuffer.data(indices);
	}
	// Render the scene
	app.onRender = function() {
	var scene = this.scene;
	//rotate scene camera about y axis
	scene.camera.frame.rotateY( Math.sin( scene.time) * Math.PI / 30 );
	//begin scene render, send matrices over to shader uniform
	scene.begin();
	//Send Time Variable over to GPU
	scene.shader.setUniformFloat("u_time", scene.time )
	//enable attributes in shader
	scene.shader.enableAttribute( "position" );
	scene.shader.enableAttribute( "uv" );
	box.frame.rotateX( scene.time * 0.3 );
	//upload model matrix
	box.uploadModel(scene.shader)
	//Bind Vertex Buffer
	box.vertexBuffer.bind();
	//Point Buffer to Attribute in shader
	scene.shader.pointAttribute("position", 3);
	//Bind TexCoord Buffer
	box.texBuffer.bind();
	//Point Buffer to Attribute in Shader
	scene.shader.pointAttribute("uv", 2)
	//Bind Index Buffer and Draw based on Indices
	box.indexBuffer.bind();
	//Draw the indices
	box.indexBuffer.drawElements(GL.TRIANGLES);
	//or just draw the vertex array buffer directly as points (can also use GL.LINES, GL.LINE_STRIP, GL.TRIANGLES, etc)
	// box.vertexBuffer.bind();
	// box.vertexBuffer.drawArrays(GL.POINTS);
	scene.end();
	}
	</script>

	<!-- VERTEX SHADER -->
	<script id="gfxvert" type="text/glsl">

	#ifdef GL_ES
	precision lowp float;
	#endif

	attribute vec3 position;
	attribute vec2 uv;

	uniform mat4 model;
	uniform mat4 view;
	uniform mat4 projection;

	varying vec2 vuv;

	void main() {
	vuv = uv;
	gl_Position = projection * view * model * vec4(position, 1.0);
	gl_PointSize = 10.0;
	}
	</script>


	<!-- FRAGMENT SHADER -->
	<script id="gfxfrag" type="text/glsl">

	#ifdef GL_ES
	precision lowp float;
	#endif

	uniform float u_time;
	uniform vec2 u_resolution;

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

	float random (in vec2 st) {
	return fract(sin(dot(st.xy, vec2(12.9898,78.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 );
	}

	varying vec2 vuv;

	// modified an example code from
	// http://thebookofshaders.com/edit.php#10/ikeda-03.frag
	void main() {
	vec2 st = vuv;
	st = fract(st*8.0);

	vec2 grid = vec2(1.0, 2.0);
	st *= grid;

	vec2 ipos = floor(st);
	vec2 fpos = fract(st);

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

	vec2 offset = vec2(0.1, 5.0);

	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((color),1.0);
	}
	</script>

	<body onload=app.start()>
	<canvas id="gfxcanvas" width=640 height=480> No <code> canvas </code> tag support </canvas>

	</body>
	</html>