roboshoes/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                margin: 0;
                padding: 0;
                overflow: hidden;
            }

            #canvas {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>

        <script id="vertex" type="x-shader/x-vertex">
            precision mediump float;

            attribute vec2 aPosition;

            varying vec2 vUV;

            void main() {
                gl_Position = vec4( aPosition, 0, 1 );
                vUV = aPosition;
            }

        </script>

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

            varying vec2 vUV;

            uniform vec2 uResolution;

            const vec4 black = vec4( 0, 0, 0, 1 );
            const vec4 white = vec4( 1 );

            void main() {
                gl_FragColor = mix( white, black, step( 10.0, mod( gl_FragCoord.y, 20.0 ) ) );
            }

        </script>

        <canvas id="canvas"></canvas>

        <script src="script.js"></script>
    </body>
</html>

## script.js
var canvas = document.getElementById( "canvas" );
var gl = canvas.getContext( "webgl" ) || canvas.getContext( "experimental-webgl" );

gl.clearColor( 0, 0, 0, 1 );
gl.disable( gl.DEPTH_TEST );

var vertexShaderSource = document.getElementById( "vertex" ).innerText;
var fragmentShaderSource = document.getElementById( "fragment" ).innerText;

function compileShader( gl, source, type ) {
    var shader = gl.createShader( type );

    gl.shaderSource( shader, source );
    gl.compileShader( shader );

    if ( ! gl.getShaderParameter( shader, gl.COMPILE_STATUS ) ) {
        console.warn( gl.getShaderInfoLog( shader ) );

        gl.deleteShader( shader );

        return null;
    }

    return shader;
}

function makeProgram( gl, vertexShader, fragmentShader ) {
    var program = gl.createProgram();

    gl.attachShader( program, vertexShader );
    gl.attachShader( program, fragmentShader );
    gl.linkProgram( program );
    gl.validateProgram( program );

    if ( ! gl.getProgramParameter( program, gl.LINK_STATUS ) ) {
        console.warn( gl.getProgramInfoLog( program ) );
    }

    gl.useProgram( program );

    return program;
}

function makeVertexBuffer( gl ) {
    var buffer = gl.createBuffer();
    var vertices = [
         1.0,  1.0,
        -1.0,  1.0,
         1.0, -1.0,
        -1.0, -1.0,
    ];

    gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( vertices ), gl.STATIC_DRAW );

    return buffer;
}

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    gl.viewport( 0, 0, canvas.width, canvas.height );
}

// --------------

var vertexBuffer;
var vertexLocation;
var resolutionLocation;

function init() {
    var vertexShader = compileShader( gl, vertexShaderSource, gl.VERTEX_SHADER );
    var fragmentShader = compileShader( gl, fragmentShaderSource, gl.FRAGMENT_SHADER );

    var program = makeProgram( gl, vertexShader, fragmentShader );

    vertexLocation = gl.getAttribLocation( program, "aPosition" );
    vertexBuffer = makeVertexBuffer( gl );

    uniformLocation = gl.getUniformLocation( program, "uResolution" );

    gl.enableVertexAttribArray( vertexLocation );
}

function loop() {

    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );

    gl.bindBuffer( gl.ARRAY_BUFFER, vertexBuffer );
    gl.vertexAttribPointer( vertexLocation, 2, gl.FLOAT, gl.FALSE, 0, 0 );

    gl.uniform2f( resolutionLocation, window.innerWidth, window.innerHeight );

    gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );

    requestAnimationFrame( loop );
}

init();
resize();
loop();
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	html, body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	}

	#canvas {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>

	<script id="vertex" type="x-shader/x-vertex">
	precision mediump float;

	attribute vec2 aPosition;

	varying vec2 vUV;

	void main() {
	gl_Position = vec4( aPosition, 0, 1 );
	vUV = aPosition;
	}

	</script>

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

	varying vec2 vUV;

	uniform vec2 uResolution;

	const vec4 black = vec4( 0, 0, 0, 1 );
	const vec4 white = vec4( 1 );

	void main() {
	gl_FragColor = mix( white, black, step( 10.0, mod( gl_FragCoord.y, 20.0 ) ) );
	}

	</script>

	<canvas id="canvas"></canvas>

	<script src="script.js"></script>
	</body>
	</html>
	var canvas = document.getElementById( "canvas" );
	var gl = canvas.getContext( "webgl" ) \|\| canvas.getContext( "experimental-webgl" );

	gl.clearColor( 0, 0, 0, 1 );
	gl.disable( gl.DEPTH_TEST );

	var vertexShaderSource = document.getElementById( "vertex" ).innerText;
	var fragmentShaderSource = document.getElementById( "fragment" ).innerText;

	function compileShader( gl, source, type ) {
	var shader = gl.createShader( type );

	gl.shaderSource( shader, source );
	gl.compileShader( shader );

	if ( ! gl.getShaderParameter( shader, gl.COMPILE_STATUS ) ) {
	console.warn( gl.getShaderInfoLog( shader ) );

	gl.deleteShader( shader );

	return null;
	}

	return shader;
	}

	function makeProgram( gl, vertexShader, fragmentShader ) {
	var program = gl.createProgram();

	gl.attachShader( program, vertexShader );
	gl.attachShader( program, fragmentShader );
	gl.linkProgram( program );
	gl.validateProgram( program );

	if ( ! gl.getProgramParameter( program, gl.LINK_STATUS ) ) {
	console.warn( gl.getProgramInfoLog( program ) );
	}

	gl.useProgram( program );

	return program;
	}

	function makeVertexBuffer( gl ) {
	var buffer = gl.createBuffer();
	var vertices = [
	1.0, 1.0,
	-1.0, 1.0,
	1.0, -1.0,
	-1.0, -1.0,
	];

	gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
	gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( vertices ), gl.STATIC_DRAW );

	return buffer;
	}

	function resize() {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	gl.viewport( 0, 0, canvas.width, canvas.height );
	}

	// --------------

	var vertexBuffer;
	var vertexLocation;
	var resolutionLocation;

	function init() {
	var vertexShader = compileShader( gl, vertexShaderSource, gl.VERTEX_SHADER );
	var fragmentShader = compileShader( gl, fragmentShaderSource, gl.FRAGMENT_SHADER );

	var program = makeProgram( gl, vertexShader, fragmentShader );

	vertexLocation = gl.getAttribLocation( program, "aPosition" );
	vertexBuffer = makeVertexBuffer( gl );

	uniformLocation = gl.getUniformLocation( program, "uResolution" );

	gl.enableVertexAttribArray( vertexLocation );
	}

	function loop() {

	gl.clear( gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT );

	gl.bindBuffer( gl.ARRAY_BUFFER, vertexBuffer );
	gl.vertexAttribPointer( vertexLocation, 2, gl.FLOAT, gl.FALSE, 0, 0 );

	gl.uniform2f( resolutionLocation, window.innerWidth, window.innerHeight );

	gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );

	requestAnimationFrame( loop );
	}

	init();
	resize();
	loop();