haehn/index_bonus2.html

## index_bonus2.html
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <title>Default WebGL!</title>
    <style>
      html, body {
        background-color:#000;
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden !important;
      }

      #c {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <script type="text/javascript" src="https://cs460.org/js/glmatrix.js"></script>

  <script id="vertexshader" type="glsl">
    attribute vec3 position;

    uniform vec3 offset;

    void main(void) {

      gl_PointSize = 10.;

      vec3 final_position = position;
      final_position.x += offset.x;
      final_position.y += offset.y;
      final_position.z += offset.z;


      gl_Position = vec4( final_position, 1.);

    }
  </script>

  <script id="fragmentshader" type="glsl">
    precision mediump float;

    uniform vec4 color;

    void main(void) {

      gl_FragColor = color; //vec4(1., 1., 1., 1.);

    }
  </script>

  <script>

    // VARIABLE DECLARATIONS

    window.onload = function() {


      //************************************************************//
      //
      // INITIALIZE WEBGL
      //
      c = document.getElementById( 'c' ); // setup canvas
      c.width = window.innerWidth;
      c.height = window.innerHeight;

      gl = c.getContext( 'webgl' ); // setup GL context
      gl.viewport(0, 0, c.width, c.height );


      //************************************************************//
      //
      // SHADERS
      //
      v_shader = gl.createShader( gl.VERTEX_SHADER );
      f_shader = gl.createShader( gl.FRAGMENT_SHADER );

      // compile vertex shader
      gl.shaderSource( v_shader, document.getElementById( 'vertexshader' ).innerText );
      gl.compileShader( v_shader );
      if (!gl.getShaderParameter( v_shader, gl.COMPILE_STATUS)) {

        console.log(gl.getShaderInfoLog( v_shader ));

      } else {

        console.log('Vertex Shader compiled!');

      }

      // compile fragment shader
      gl.shaderSource( f_shader, document.getElementById( 'fragmentshader' ).innerText );
      gl.compileShader( f_shader );
      if (!gl.getShaderParameter( f_shader, gl.COMPILE_STATUS)) {

        console.log(gl.getShaderInfoLog( f_shader ));

      } else {

        console.log('Fragment Shader compiled!');

      }


      // attach and link the shaders
      shaderprogram = gl.createProgram();
      gl.attachShader( shaderprogram, v_shader );
      gl.attachShader( shaderprogram, f_shader );

      gl.linkProgram( shaderprogram );

      gl.useProgram( shaderprogram );


      STEP = .1;

      OBJECTS = [];
      OBJECTS.push( createRectangle( [1.,0.,0.,1.], [0., 0., 0.]) );
      OBJECTS.push( createRectangle( [1.,1.,0.,1.], [-.2, -.2, 0.]) );
      OBJECTS.push( createRectangle( [0.,1.,0.,1.], [.2, .2, 0.]) );
      OBJECTS.push( createRectangle( [1.,1.,1.,1.], [.7, .7, 0.]) );

      animate();

    };


    function createRectangle(color, offset) {


      //************************************************************//
      //
      // CREATE GEOMETRY
      //
      // vertices = new Float32Array( [
      //                                -0.5,  0.5, 0.0, // V0
      //                                -0.5, -0.5, 0.0, // V1
      //                                 0.5,  0.5, 0.0, // V2

      //                                 0.5,  0.5, 0.0, // V3
      //                                -0.5, -0.5, 0.0, // V4
      //                                 0.5, -0.5, 0.0  // V5
      //                               ] );

      vertices = new Float32Array( [
                                     -0.5,  0.5, 0.0, // V0      // 0
                                     -0.5, -0.5, 0.0, // V1, V4  // 1
                                      0.5,  0.5, 0.0, // V2, V3  // 2
                                      0.5, -0.5, 0.0  // V5      // 3
                                    ] );

      indices = new Uint8Array( [ 0, 1, 2,     // Triangle 1
                                  2, 1, 3 ] ); // Triangle 2


      v_buffer = gl.createBuffer(); // create
      gl.bindBuffer( gl.ARRAY_BUFFER, v_buffer ); // bind
      gl.bufferData( gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW ); // put data in
      gl.bindBuffer( gl.ARRAY_BUFFER, null ); // unbind


      i_buffer = gl.createBuffer(); // create
      gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, i_buffer ); // bind
      gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW ); // put data in
      gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, null ); // unbind

      return [v_buffer, i_buffer, color, offset];

    }


    function animate() {

      requestAnimationFrame( animate );

      // CLEAR NOW BEFORE ANY DRAWING
      gl.clearColor( 0., 0., 0., 0.)
      gl.clear( gl.COLOR_BUFFER_BIT );


      for(var o=0; o<OBJECTS.length; o++) {

        var current = OBJECTS[o];

        var v_buffer = current[0];
        var i_buffer = current[1];
        var COLOR = current[2];
        var OFFSET = current[3];


        // console.log('drawing', COLOR);


        //************************************************************//
        //
        // CONNECT SHADER WITH GEOMETRY
        //
        gl.bindBuffer( gl.ARRAY_BUFFER, v_buffer );

        gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, i_buffer );

        // find the attribute in the shader source
        var a_position = gl.getAttribLocation( shaderprogram, 'position' );

        gl.vertexAttribPointer( a_position, 3, gl.FLOAT, false, 0, 0 );

        gl.enableVertexAttribArray ( a_position );

        var u_color = gl.getUniformLocation( shaderprogram, 'color' );

        gl.uniform4fv( u_color, new Float32Array(COLOR));

        var u_offset = gl.getUniformLocation( shaderprogram, 'offset' );

        // OFFSET[0] += STEP;

        // if (OFFSET[0] <= -1) {

        //   STEP = .1;

        // } else if (OFFSET[0] >= 1) {

        //   STEP = -.1;

        // }

        gl.uniform3fv( u_offset, new Float32Array( OFFSET ) );


        //************************************************************//
        //
        // DRAW!
        //
        // gl.drawArrays( gl.LINES, 0, 6 );
        gl.drawElements( gl.TRIANGLES, 6, gl.UNSIGNED_BYTE, 0);


      }


    }

  </script>
  <body>
    <canvas id="c"></canvas>
  </body>
</html>
	<html>
	<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	<title>Default WebGL!</title>
	<style>
	html, body {
	background-color:#000;
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden !important;
	}

	#c {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<script type="text/javascript" src="https://cs460.org/js/glmatrix.js"></script>

	<script id="vertexshader" type="glsl">
	attribute vec3 position;

	uniform vec3 offset;

	void main(void) {

	gl_PointSize = 10.;

	vec3 final_position = position;
	final_position.x += offset.x;
	final_position.y += offset.y;
	final_position.z += offset.z;


	gl_Position = vec4( final_position, 1.);

	}
	</script>

	<script id="fragmentshader" type="glsl">
	precision mediump float;

	uniform vec4 color;

	void main(void) {

	gl_FragColor = color; //vec4(1., 1., 1., 1.);

	}
	</script>

	<script>

	// VARIABLE DECLARATIONS

	window.onload = function() {


	//************************************************************//
	//
	// INITIALIZE WEBGL
	//
	c = document.getElementById( 'c' ); // setup canvas
	c.width = window.innerWidth;
	c.height = window.innerHeight;

	gl = c.getContext( 'webgl' ); // setup GL context
	gl.viewport(0, 0, c.width, c.height );



	//************************************************************//
	//
	// SHADERS
	//
	v_shader = gl.createShader( gl.VERTEX_SHADER );
	f_shader = gl.createShader( gl.FRAGMENT_SHADER );

	// compile vertex shader
	gl.shaderSource( v_shader, document.getElementById( 'vertexshader' ).innerText );
	gl.compileShader( v_shader );
	if (!gl.getShaderParameter( v_shader, gl.COMPILE_STATUS)) {

	console.log(gl.getShaderInfoLog( v_shader ));

	} else {

	console.log('Vertex Shader compiled!');

	}

	// compile fragment shader
	gl.shaderSource( f_shader, document.getElementById( 'fragmentshader' ).innerText );
	gl.compileShader( f_shader );
	if (!gl.getShaderParameter( f_shader, gl.COMPILE_STATUS)) {

	console.log(gl.getShaderInfoLog( f_shader ));

	} else {

	console.log('Fragment Shader compiled!');

	}


	// attach and link the shaders
	shaderprogram = gl.createProgram();
	gl.attachShader( shaderprogram, v_shader );
	gl.attachShader( shaderprogram, f_shader );

	gl.linkProgram( shaderprogram );

	gl.useProgram( shaderprogram );


	STEP = .1;

	OBJECTS = [];
	OBJECTS.push( createRectangle( [1.,0.,0.,1.], [0., 0., 0.]) );
	OBJECTS.push( createRectangle( [1.,1.,0.,1.], [-.2, -.2, 0.]) );
	OBJECTS.push( createRectangle( [0.,1.,0.,1.], [.2, .2, 0.]) );
	OBJECTS.push( createRectangle( [1.,1.,1.,1.], [.7, .7, 0.]) );

	animate();

	};


	function createRectangle(color, offset) {



	//************************************************************//
	//
	// CREATE GEOMETRY
	//
	// vertices = new Float32Array( [
	// -0.5, 0.5, 0.0, // V0
	// -0.5, -0.5, 0.0, // V1
	// 0.5, 0.5, 0.0, // V2

	// 0.5, 0.5, 0.0, // V3
	// -0.5, -0.5, 0.0, // V4
	// 0.5, -0.5, 0.0 // V5
	// ] );

	vertices = new Float32Array( [
	-0.5, 0.5, 0.0, // V0 // 0
	-0.5, -0.5, 0.0, // V1, V4 // 1
	0.5, 0.5, 0.0, // V2, V3 // 2
	0.5, -0.5, 0.0 // V5 // 3
	] );

	indices = new Uint8Array( [ 0, 1, 2, // Triangle 1
	2, 1, 3 ] ); // Triangle 2


	v_buffer = gl.createBuffer(); // create
	gl.bindBuffer( gl.ARRAY_BUFFER, v_buffer ); // bind
	gl.bufferData( gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW ); // put data in
	gl.bindBuffer( gl.ARRAY_BUFFER, null ); // unbind


	i_buffer = gl.createBuffer(); // create
	gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, i_buffer ); // bind
	gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW ); // put data in
	gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, null ); // unbind

	return [v_buffer, i_buffer, color, offset];

	}




	function animate() {

	requestAnimationFrame( animate );

	// CLEAR NOW BEFORE ANY DRAWING
	gl.clearColor( 0., 0., 0., 0.)
	gl.clear( gl.COLOR_BUFFER_BIT );



	for(var o=0; o<OBJECTS.length; o++) {

	var current = OBJECTS[o];

	var v_buffer = current[0];
	var i_buffer = current[1];
	var COLOR = current[2];
	var OFFSET = current[3];


	// console.log('drawing', COLOR);


	//************************************************************//
	//
	// CONNECT SHADER WITH GEOMETRY
	//
	gl.bindBuffer( gl.ARRAY_BUFFER, v_buffer );

	gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, i_buffer );

	// find the attribute in the shader source
	var a_position = gl.getAttribLocation( shaderprogram, 'position' );

	gl.vertexAttribPointer( a_position, 3, gl.FLOAT, false, 0, 0 );

	gl.enableVertexAttribArray ( a_position );

	var u_color = gl.getUniformLocation( shaderprogram, 'color' );

	gl.uniform4fv( u_color, new Float32Array(COLOR));

	var u_offset = gl.getUniformLocation( shaderprogram, 'offset' );

	// OFFSET[0] += STEP;

	// if (OFFSET[0] <= -1) {

	// STEP = .1;

	// } else if (OFFSET[0] >= 1) {

	// STEP = -.1;

	// }

	gl.uniform3fv( u_offset, new Float32Array( OFFSET ) );


	//************************************************************//
	//
	// DRAW!
	//
	// gl.drawArrays( gl.LINES, 0, 6 );
	gl.drawElements( gl.TRIANGLES, 6, gl.UNSIGNED_BYTE, 0);


	}



	}

	</script>
	<body>
	<canvas id="c"></canvas>
	</body>
	</html>