cskonopka/btc-html5-webgl.html

## btc-html5-webgl.html
<html>
<script type="text/javascript">

var GL;
var shaderId;
var vertexBuffer;
var indexBuffer;
var timer = 0;

function initWebGL(){
    var canvas = document.getElementById("glcanvas");
    GL = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    if (!GL) {
      alert("Unable to initialize WebGL. Your browser may not support it.");
    }
    GL.clearColor(1.0, 0.0, 0.0, 1.0);
    GL.clear(GL.COLOR_BUFFER_BIT| GL.DEPTH_BUFFER_BIT);

    initShaderProgram();
    initBuffers();
}

function initShaderProgram(){
    shaderId = GL.createProgram();
    var vertId = GL.createShader(GL.VERTEX_SHADER);
    var fragId = GL.createShader(GL.FRAGMENT_SHADER);
    var vert = document.getElementById("vertScript").text;
    var frag = document.getElementById("fragScript").text;

    GL.shaderSource(vertId, vert);
    GL.shaderSource(fragId, frag);
    GL.compileShader(vertId);
    GL.compileShader(fragId);

    if (!GL.getShaderParameter(vertId, GL.COMPILE_STATUS)) {
        alert("Vertex Shader Compiler Error: " + GL.getShaderInfoLog(id));
        GL.deleteShader(vertId);
        return null;
    }

    if (!GL.getShaderParameter(fragId, GL.COMPILE_STATUS)) {
        alert("Fragment Shader Compiler Error: " + GL.getShaderInfoLog(id));
        GL.deleteShader(fragId);
        return null;
    }

    GL.attachShader(shaderId, vertId);
    GL.attachShader(shaderId, fragId);
    GL.linkProgram(shaderId);

    if (!GL.getProgramParameter(shaderId, GL.LINK_STATUS)) {
      alert("Shader Linking Error: " + GL.getProgramInfoLog(shader));
    }
}

function initBuffers(){
    var vertices = new Float32Array( [
      -1.0, -1.0, 0.0,
      -1.0,  1.0, 0.0,
       1.0,  1.0, 0.0,
       1.0, -1.0, 0.0
    ]);

    vertexBuffer = GL.createBuffer();
    GL.bindBuffer(GL.ARRAY_BUFFER, vertexBuffer);
    GL.bufferData(GL.ARRAY_BUFFER, vertices.byteLength, GL.STATIC_DRAW);
    GL.bufferSubData(GL.ARRAY_BUFFER, 0, vertices );

    var indices = new Uint16Array([ 0,1,3,2 ]);
    indexBuffer = GL.createBuffer();
    GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, indexBuffer);
    GL.bufferData(GL.ELEMENT_ARRAY_BUFFER, indices.byteLength, GL.STATIC_DRAW);
    GL.bufferSubData(GL.ELEMENT_ARRAY_BUFFER, 0, indices );
}

window.requestAnimFrame = ( function() {
    return  window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||

    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
  } ) ();

function animationLoop(){
    requestAnimFrame( animationLoop );
    render();
}

function render(){
    timer+=.1;

    GL.useProgram(shaderId);
    var uID = GL.getUniformLocation(shaderId, "uTime");
    GL.uniform1f(uID, timer);
    var attId = GL.getAttribLocation(shaderId, "position");
    GL.enableVertexAttribArray(attId);
    GL.bindBuffer(GL.ARRAY_BUFFER, vertexBuffer);
    GL.vertexAttribPointer( attId, 3, GL.FLOAT, false, 0, 0);
    GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, indexBuffer);
    GL.drawElements(GL.TRIANGLE_STRIP, 4, GL.UNSIGNED_SHORT, 0);
}

function start(){
    initWebGL();
    animationLoop();
}

</script>
<script id="vertScript" type="text/glsl">

  #ifdef GL_ES
  precision lowp float;
  #endif

  attribute vec3 position;

  void main(void) {
    gl_Position = vec4(position,1.0);
  }

</script>

<script id="fragScript" type="text/glsl">

    #ifdef GL_ES
    precision mediump float;
    #endif

    #define PI 3.14159265359

    uniform vec2 uResolution;
    uniform vec2 uMouse;
    uniform float uTime;

    float plot(vec2 st, float pct){
      return  smoothstep( pct-0.02, pct, st.y) -
              smoothstep( pct, pct+0.02, st.y);
    }

    void main() {
        vec2 st = gl_FragCoord.xy/vec2(640,480);
        st -= 0.5;  // becomes -0.5 to 0.5
        st *= 12.0;
        float pct2 = 0.0;
        pct2 = distance(st,vec2(0.5));

        float y3 = sin(cos((st.y)*(0.10)))-sin(st.x+st.y*02.2);
        float y = smoothstep(1.2-(sin(((y3)))*(cos(st.y/-9.2))),0.5,st.x) - smoothstep(0.5,0.1,(st.x*0.2))+(sin(st.x-(uTime*.0412)));
        float y2 = smoothstep(04.91,02.5,st.y+st.x) - smoothstep(0.481,0.918,st.y);
        vec3 colorA = vec3(y*y2)-(y3-(0.14))*(sin(st.x-(uTime*.02412)));
        colorA = (1.0)*colorA*vec3(.020+(sin(((y3+y)))+(cos(pct2*-0.2))),0.120,(0.10+(sin(y3))));

        float y4 = cos(cos((st.x)*(0.13)*sin(0.23)));
        float y5 = smoothstep(0.2,0.25,0.3) - smoothstep(0.25,0.31,(st.y*0.12));
        float y6 = smoothstep(0.9+(st.x*0.012),0.1915,st.y+cos(st.y)) - smoothstep(0.641,0.8191,(st.x+st.y)*0.2);
        vec3 colorB = vec3(y4+y5)-(y3*(0.913))*(sin(st.x+(uTime*.031592)));
        colorB = (1.0)*colorB*vec3(.920,0.95030,(0.20-y6))*(sin(st.y-(uTime*.032412)));

        // a. The DISTANCE from the pixel to the center
        vec2 bl = step(vec2(0.5),st);
        float pct = bl.x * bl.y;
        vec3 colorMix = vec3(0.0);
        colorMix = mix(colorA*0.432, colorB+0.3892, 0.983*(sin(((y6+y2)))*(cos(pct2/-2.2))));

        gl_FragColor = vec4(colorMix,1.0);
    }
</script>

<body style="margin:0px;" onload=start()>
<canvas id="glcanvas" width=640 height=480 style="height:100%; width:100%; margin:auto; display:block">
 Oops, browser has no <code> canvas </code> tag support
</canvas>
</body>

</html>
	<html>
	<script type="text/javascript">

	var GL;
	var shaderId;
	var vertexBuffer;
	var indexBuffer;
	var timer = 0;

	function initWebGL(){
	var canvas = document.getElementById("glcanvas");
	GL = canvas.getContext("webgl") \|\| canvas.getContext("experimental-webgl");
	if (!GL) {
	alert("Unable to initialize WebGL. Your browser may not support it.");
	}
	GL.clearColor(1.0, 0.0, 0.0, 1.0);
	GL.clear(GL.COLOR_BUFFER_BIT\| GL.DEPTH_BUFFER_BIT);

	initShaderProgram();
	initBuffers();
	}

	function initShaderProgram(){
	shaderId = GL.createProgram();
	var vertId = GL.createShader(GL.VERTEX_SHADER);
	var fragId = GL.createShader(GL.FRAGMENT_SHADER);
	var vert = document.getElementById("vertScript").text;
	var frag = document.getElementById("fragScript").text;

	GL.shaderSource(vertId, vert);
	GL.shaderSource(fragId, frag);
	GL.compileShader(vertId);
	GL.compileShader(fragId);

	if (!GL.getShaderParameter(vertId, GL.COMPILE_STATUS)) {
	alert("Vertex Shader Compiler Error: " + GL.getShaderInfoLog(id));
	GL.deleteShader(vertId);
	return null;
	}

	if (!GL.getShaderParameter(fragId, GL.COMPILE_STATUS)) {
	alert("Fragment Shader Compiler Error: " + GL.getShaderInfoLog(id));
	GL.deleteShader(fragId);
	return null;
	}

	GL.attachShader(shaderId, vertId);
	GL.attachShader(shaderId, fragId);
	GL.linkProgram(shaderId);

	if (!GL.getProgramParameter(shaderId, GL.LINK_STATUS)) {
	alert("Shader Linking Error: " + GL.getProgramInfoLog(shader));
	}
	}

	function initBuffers(){
	var vertices = new Float32Array( [
	-1.0, -1.0, 0.0,
	-1.0, 1.0, 0.0,
	1.0, 1.0, 0.0,
	1.0, -1.0, 0.0
	]);

	vertexBuffer = GL.createBuffer();
	GL.bindBuffer(GL.ARRAY_BUFFER, vertexBuffer);
	GL.bufferData(GL.ARRAY_BUFFER, vertices.byteLength, GL.STATIC_DRAW);
	GL.bufferSubData(GL.ARRAY_BUFFER, 0, vertices );

	var indices = new Uint16Array([ 0,1,3,2 ]);
	indexBuffer = GL.createBuffer();
	GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, indexBuffer);
	GL.bufferData(GL.ELEMENT_ARRAY_BUFFER, indices.byteLength, GL.STATIC_DRAW);
	GL.bufferSubData(GL.ELEMENT_ARRAY_BUFFER, 0, indices );
	}

	window.requestAnimFrame = ( function() {
	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|

	function(callback) {
	window.setTimeout(callback, 1000 / 60);
	};
	} ) ();

	function animationLoop(){
	requestAnimFrame( animationLoop );
	render();
	}

	function render(){
	timer+=.1;

	GL.useProgram(shaderId);
	var uID = GL.getUniformLocation(shaderId, "uTime");
	GL.uniform1f(uID, timer);
	var attId = GL.getAttribLocation(shaderId, "position");
	GL.enableVertexAttribArray(attId);
	GL.bindBuffer(GL.ARRAY_BUFFER, vertexBuffer);
	GL.vertexAttribPointer( attId, 3, GL.FLOAT, false, 0, 0);
	GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, indexBuffer);
	GL.drawElements(GL.TRIANGLE_STRIP, 4, GL.UNSIGNED_SHORT, 0);
	}

	function start(){
	initWebGL();
	animationLoop();
	}

	</script>
	<script id="vertScript" type="text/glsl">

	#ifdef GL_ES
	precision lowp float;
	#endif

	attribute vec3 position;

	void main(void) {
	gl_Position = vec4(position,1.0);
	}

	</script>

	<script id="fragScript" type="text/glsl">

	#ifdef GL_ES
	precision mediump float;
	#endif

	#define PI 3.14159265359

	uniform vec2 uResolution;
	uniform vec2 uMouse;
	uniform float uTime;

	float plot(vec2 st, float pct){
	return smoothstep( pct-0.02, pct, st.y) -
	smoothstep( pct, pct+0.02, st.y);
	}

	void main() {
	vec2 st = gl_FragCoord.xy/vec2(640,480);
	st -= 0.5; // becomes -0.5 to 0.5
	st *= 12.0;
	float pct2 = 0.0;
	pct2 = distance(st,vec2(0.5));

	float y3 = sin(cos((st.y)(0.10)))-sin(st.x+st.y02.2);
	float y = smoothstep(1.2-(sin(((y3)))(cos(st.y/-9.2))),0.5,st.x) - smoothstep(0.5,0.1,(st.x0.2))+(sin(st.x-(uTime*.0412)));
	float y2 = smoothstep(04.91,02.5,st.y+st.x) - smoothstep(0.481,0.918,st.y);
	vec3 colorA = vec3(yy2)-(y3-(0.14))(sin(st.x-(uTime*.02412)));
	colorA = (1.0)colorAvec3(.020+(sin(((y3+y)))+(cos(pct2*-0.2))),0.120,(0.10+(sin(y3))));

	float y4 = cos(cos((st.x)(0.13)sin(0.23)));
	float y5 = smoothstep(0.2,0.25,0.3) - smoothstep(0.25,0.31,(st.y*0.12));
	float y6 = smoothstep(0.9+(st.x0.012),0.1915,st.y+cos(st.y)) - smoothstep(0.641,0.8191,(st.x+st.y)0.2);
	vec3 colorB = vec3(y4+y5)-(y3(0.913))(sin(st.x+(uTime*.031592)));
	colorB = (1.0)colorBvec3(.920,0.95030,(0.20-y6))(sin(st.y-(uTime.032412)));

	// a. The DISTANCE from the pixel to the center
	vec2 bl = step(vec2(0.5),st);
	float pct = bl.x * bl.y;
	vec3 colorMix = vec3(0.0);
	colorMix = mix(colorA0.432, colorB+0.3892, 0.983(sin(((y6+y2)))*(cos(pct2/-2.2))));

	gl_FragColor = vec4(colorMix,1.0);
	}
	</script>

	<body style="margin:0px;" onload=start()>
	<canvas id="glcanvas" width=640 height=480 style="height:100%; width:100%; margin:auto; display:block">
	Oops, browser has no <code> canvas </code> tag support
	</canvas>
	</body>

	</html>