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 tri;

app.onInit = function(){
  //Quaternions
   var v = [];

   var x = new GFX.Vector(1.0,0.0,0.0); //x axis
   var y = new GFX.Vector(0.0,1.0,0.0); //y axis
   var z = new GFX.Vector(0.0,0.0,1.0); //z axis


   var quatA = new GFX.Quaternion();
   var quatB = new GFX.Quaternion();

   var num = 5.;

   for (var i=0;i<num;++i){
     quatA.setAxisAngle( y, 2.*Math.PI * i/num );
     //a rotation of the z axis around the y axis, by amount 0 - 2PI
     var axis = quatA.apply(z);
     for (var j=0; j<num; ++j){
       //a rotation around the rotated the z axis:
       quatB.setAxisAngle( axis, Math.PI * ((j/num) - .5)  ) ;
       //the first rotation, followed by the second:
       var q = quatB.mult(quatA);
       //apply it to the x axis
       var vec = q.apply(x);
       //add to our list of vertices
       v.push(vec.x, vec.y, vec.z);
     }
   }

    var vertices = new Float32Array(v);

    var texCoord = new Float32Array([

    ]);

    var indices = new Uint16Array([

    ]);


    tri = new GFX.Mesh();
    //Allocate Some Data on the GPU and copy position data over
    tri.vertexBuffer.bind();
    tri.vertexBuffer.alloc(vertices.byteLength);
    tri.vertexBuffer.data(vertices);
    //Allocate Some Data on the GPU and copy tex data over
    tri.texBuffer.bind();
    tri.texBuffer.alloc(texCoord.byteLength);
    tri.texBuffer.data(texCoord);
    //Allocate Some Data on the GPU and copy index data over
    tri.indexBuffer.bind();
    tri.indexBuffer.alloc(indices.byteLength);
    tri.indexBuffer.data(indices);
}
// Render the scene
app.onRender = function() {

  var scene = this.scene;
  scene.color = [0.99,0.20,0.20,1.0];
  //rotate scene camera about y axis
  scene.camera.frame.rotateY( Math.sin(scene.time*0.2) * Math.PI/20);

  //begin scene render, send matrices over to shader uniform
  scene.begin();

    //Send Time Variable over to GPU
    scene.shader.setUniformFloat("u_time", scene.time)
    // tri.frame.rotateY( scene.time );
    // tri.frame.rotateZ( Math.sin(scene.time) );

    //enable attributes in shader
    scene.shader.enableAttribute( "position" );
    scene.shader.enableAttribute( "uv" );

    // tri.frame.rotateX(scene.time*0.1);
    tri.frame.rotateY(scene.time*0.1);

    //upload model matrix
    tri.uploadModel(scene.shader)
    //Bind Vertex Buffer
    tri.vertexBuffer.bind();

    //Point Buffer to Attribute in shader
    scene.shader.pointAttribute("position", 3);
    scene.shader.pointAttribute("uv", 2)

    //Bind TexCoord Buffer
    tri.texBuffer.bind();

    //or just draw the vertex array buffer directly as points (can also use GL.LINES, GL.LINE_STRIP, GL.TRIANGLES, etc)
    tri.vertexBuffer.bind();
    tri.vertexBuffer.drawArrays(GL.TRIANGLES);

  scene.end();
}
</script>

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

  #ifdef GL_ES
  precision lowp float;
  #endif

  attribute vec3 position;      //Position
  attribute vec2 uv;            //Texture
  varying vec2 vuv;             //Texture Coordiante to Output to Fragment Shader

  uniform mat4 model;           //Model Matrix
  uniform mat4 view;            //View Matrix
  uniform mat4 projection;      //Projection Matrix

  uniform float u_time;

  vec2 random2 (vec2 st) {
      return fract(sin(vec2(dot(st,vec2(127.1,311.7)),dot(st,vec2(269.5,183.3))))*43758.5453);
  }

  // Value Noise by Inigo Quilez - iq/2013
  // https://www.shadertoy.com/view/lsf3WH
  float noise(vec2 st) {
    vec2 i = floor(st);
    vec2 f = fract(st);

    vec2 u = f*f*(3.0-2.0*f);

    return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ),
                     dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x),
                mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ),
                     dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y);
}


  void main() {
    vuv = uv;
    gl_Position = projection * view * model * vec4(position.x * (2.0 + cos(noise(uv))),position.y * (2.0 + sin(noise(uv))),position.z * (1.0 + sin(noise(uv))), 0.7);
  }
  </script>


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


  #ifdef GL_ES
  precision lowp float;
  #endif

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

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

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

  float randomSerie(float x, float freq, float t) {
      return step(.8,random( floor(x*freq)-floor(t) ));
  }

  varying vec2 vuv;

  void main() {
    vec2 st = vuv;
    st = fract(st*2.0 );

    vec3 color = vec3(0.0);

    float cols = 1.;
    float freq = random(floor(u_time))+abs(atan(u_time)*0.1);
    float t = 60.+u_time*(1.0-freq)*30.;

    if (fract(st.y*cols* 0.5) < 0.5){
        t *= -1.0;
    }

    freq += random(floor(st.y));

    float offset = 0.025;
    color = vec3(randomSerie(st.x, freq*100., t+offset),
                 randomSerie(st.x, freq*100., t),
                 randomSerie(st.x, freq*100., t-offset));

    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 tri;

	app.onInit = function(){
	//Quaternions
	var v = [];

	var x = new GFX.Vector(1.0,0.0,0.0); //x axis
	var y = new GFX.Vector(0.0,1.0,0.0); //y axis
	var z = new GFX.Vector(0.0,0.0,1.0); //z axis


	var quatA = new GFX.Quaternion();
	var quatB = new GFX.Quaternion();

	var num = 5.;

	for (var i=0;i<num;++i){
	quatA.setAxisAngle( y, 2.Math.PI i/num );
	//a rotation of the z axis around the y axis, by amount 0 - 2PI
	var axis = quatA.apply(z);
	for (var j=0; j<num; ++j){
	//a rotation around the rotated the z axis:
	quatB.setAxisAngle( axis, Math.PI * ((j/num) - .5) ) ;
	//the first rotation, followed by the second:
	var q = quatB.mult(quatA);
	//apply it to the x axis
	var vec = q.apply(x);
	//add to our list of vertices
	v.push(vec.x, vec.y, vec.z);
	}
	}

	var vertices = new Float32Array(v);

	var texCoord = new Float32Array([

	]);

	var indices = new Uint16Array([

	]);


	tri = new GFX.Mesh();
	//Allocate Some Data on the GPU and copy position data over
	tri.vertexBuffer.bind();
	tri.vertexBuffer.alloc(vertices.byteLength);
	tri.vertexBuffer.data(vertices);
	//Allocate Some Data on the GPU and copy tex data over
	tri.texBuffer.bind();
	tri.texBuffer.alloc(texCoord.byteLength);
	tri.texBuffer.data(texCoord);
	//Allocate Some Data on the GPU and copy index data over
	tri.indexBuffer.bind();
	tri.indexBuffer.alloc(indices.byteLength);
	tri.indexBuffer.data(indices);
	}
	// Render the scene
	app.onRender = function() {

	var scene = this.scene;
	scene.color = [0.99,0.20,0.20,1.0];
	//rotate scene camera about y axis
	scene.camera.frame.rotateY( Math.sin(scene.time0.2) Math.PI/20);

	//begin scene render, send matrices over to shader uniform
	scene.begin();

	//Send Time Variable over to GPU
	scene.shader.setUniformFloat("u_time", scene.time)
	// tri.frame.rotateY( scene.time );
	// tri.frame.rotateZ( Math.sin(scene.time) );

	//enable attributes in shader
	scene.shader.enableAttribute( "position" );
	scene.shader.enableAttribute( "uv" );

	// tri.frame.rotateX(scene.time*0.1);
	tri.frame.rotateY(scene.time*0.1);

	//upload model matrix
	tri.uploadModel(scene.shader)
	//Bind Vertex Buffer
	tri.vertexBuffer.bind();

	//Point Buffer to Attribute in shader
	scene.shader.pointAttribute("position", 3);
	scene.shader.pointAttribute("uv", 2)

	//Bind TexCoord Buffer
	tri.texBuffer.bind();

	//or just draw the vertex array buffer directly as points (can also use GL.LINES, GL.LINE_STRIP, GL.TRIANGLES, etc)
	tri.vertexBuffer.bind();
	tri.vertexBuffer.drawArrays(GL.TRIANGLES);

	scene.end();
	}
	</script>

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

	#ifdef GL_ES
	precision lowp float;
	#endif

	attribute vec3 position; //Position
	attribute vec2 uv; //Texture
	varying vec2 vuv; //Texture Coordiante to Output to Fragment Shader

	uniform mat4 model; //Model Matrix
	uniform mat4 view; //View Matrix
	uniform mat4 projection; //Projection Matrix

	uniform float u_time;

	vec2 random2 (vec2 st) {
	return fract(sin(vec2(dot(st,vec2(127.1,311.7)),dot(st,vec2(269.5,183.3))))*43758.5453);
	}

	// Value Noise by Inigo Quilez - iq/2013
	// https://www.shadertoy.com/view/lsf3WH
	float noise(vec2 st) {
	vec2 i = floor(st);
	vec2 f = fract(st);

	vec2 u = ff(3.0-2.0*f);

	return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ),
	dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x),
	mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ),
	dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y);
	}


	void main() {
	vuv = uv;
	gl_Position = projection * view * model * vec4(position.x * (2.0 + cos(noise(uv))),position.y * (2.0 + sin(noise(uv))),position.z * (1.0 + sin(noise(uv))), 0.7);
	}
	</script>


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


	#ifdef GL_ES
	precision lowp float;
	#endif

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

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

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

	float randomSerie(float x, float freq, float t) {
	return step(.8,random( floor(x*freq)-floor(t) ));
	}

	varying vec2 vuv;

	void main() {
	vec2 st = vuv;
	st = fract(st*2.0 );

	vec3 color = vec3(0.0);

	float cols = 1.;
	float freq = random(floor(u_time))+abs(atan(u_time)*0.1);
	float t = 60.+u_time(1.0-freq)30.;

	if (fract(st.ycols 0.5) < 0.5){
	t *= -1.0;
	}

	freq += random(floor(st.y));

	float offset = 0.025;
	color = vec3(randomSerie(st.x, freq*100., t+offset),
	randomSerie(st.x, freq*100., t),
	randomSerie(st.x, freq*100., t-offset));

	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>