PabloReszczynski/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Tarea 2</title>
</head>

<body>

  <input type="text" id="real"></input>
  <input type="text" id="imaginary"></input>
  <button onclick="setValues()">Render</button>
  <script src="webgl-debug.js"></script>
  <script type="text/javascript">

    var gl;
    var canvas;
    var buffer;

    var shaderScript;
    var shaderSource;
    var vertexShader;
    var fragmentShader;

    var real = -0.1;
    var imaginary = 0.651;

    window.onload = init;

    function setValues() {
      real = Number(document.getElementById('real').value);
      imaginary = Number(document.getElementById('imaginary').value);
      render();
    }

    function throwOnGLError(err, funcName, args) {
      throw WebGLDebugUtils.glEnumToString(err) + " was caused by call to: " + funcName;
    }

    function logGLCall(functionName, args) {
      console.log("gl." + functionName + "(" +
        WebGLDebugUtils.glFunctionArgsToString(functionName, args) + ")");
    }

    function init() {

      canvas = document.getElementById('glscreen');
      gl = canvas.getContext('experimental-webgl');
      canvas.width = 800;
      canvas.height = 800;

      ctx = WebGLDebugUtils.makeDebugContext(gl, throwOnGLError, logGLCall);

      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

      buffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(
        gl.ARRAY_BUFFER,
        new Float32Array([
          -1.0, -1.0,
          1.0, -1.0,
          -1.0, 1.0,
          -1.0, 1.0,
          1.0, -1.0,
          1.0, 1.0]),
        gl.STATIC_DRAW
      );

      shaderScript = document.getElementById("2d-vertex-shader");
      shaderSource = shaderScript.text;
      vertexShader = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vertexShader, shaderSource);
      gl.compileShader(vertexShader);

      shaderScript = document.getElementById("2d-fragment-shader");
      shaderSource = shaderScript.text;
      fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      gl.shaderSource(fragmentShader, shaderSource);
      gl.compileShader(fragmentShader);

      var compiled = gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS);
      var compilationLog = gl.getShaderInfoLog(fragmentShader);
      console.log(compiled)
      console.log(compilationLog)

      program = gl.createProgram();
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);
      gl.useProgram(program);

      render();

    }

    function render() {

      window.requestAnimationFrame(render, canvas);

      gl.clearColor(1.0, 0.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      positionLocation = gl.getAttribLocation(program, 'a_position');
      gl.enableVertexAttribArray(positionLocation);
      gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

      u_iter = gl.getUniformLocation(program, 'u_iter');
      gl.uniform1i(u_iter, 1000);

      u_c = gl.getUniformLocation(program, 'u_c');
      gl.uniform2f(u_c, real, imaginary);

      gl.drawArrays(gl.TRIANGLES, 0, 6);

    }
  </script>

  <script id="2d-vertex-shader" type="x-shader/x-vertex">
         attribute vec2 a_position;
         void main() {
           gl_Position = vec4(a_position, 0, 1);
         }
        </script>

  <script id="2d-fragment-shader" type="x-shader/x-fragment">
         #define NUM_STEPS 1000000
         #ifdef GL_FRAGMENT_PRECISION_HIGH
         precision highp float;
         #else
         precision mediump float;
         #endif
         precision mediump int;

         uniform int u_iter;
         uniform vec2 u_c;

         // credits to sam, http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl
         vec3 hsv2rgb(vec3 c) {
           vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
           vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
           return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
         }

         void main() {
           vec2 z;
           bool escaped = false;
           int steps;

           z.x = 3.0 * (gl_FragCoord.x - 400.0) / 400.0 * 0.5;
           z.y = 2.0 * (gl_FragCoord.y - 400.0) / 400.0 * 0.5;

           float smoothColor = exp(- sqrt(z.x * z.x + z.y * z.y));

           for (int i=0; i<NUM_STEPS; i++) {
             steps = i;

             float x = (z.x * z.x - z.y * z.y) + u_c.x;
             float y = (z.y * z.x + z.x * z.y) + u_c.y;
             smoothColor += exp(- sqrt(x*x + y*y));

             if(steps > u_iter) break;
             if((x*x + y*y) > 4.0) {
               escaped = true;
               break;
             }

             z.x = x;
             z.y = y;
           }

           if (escaped) {
             float h = float(smoothColor) / float(u_iter);
             gl_FragColor = vec4(hsv2rgb(vec3(h, 1.0, 1.0)), 1.0);
           } else {
             gl_FragColor = vec4(hsv2rgb(vec3(0.0)), 1.0);
           }

         }
        </script>

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

</body>
    </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<title>Tarea 2</title>
	</head>

	<body>

	<input type="text" id="real"></input>
	<input type="text" id="imaginary"></input>
	<button onclick="setValues()">Render</button>
	<script src="webgl-debug.js"></script>
	<script type="text/javascript">

	var gl;
	var canvas;
	var buffer;

	var shaderScript;
	var shaderSource;
	var vertexShader;
	var fragmentShader;

	var real = -0.1;
	var imaginary = 0.651;

	window.onload = init;

	function setValues() {
	real = Number(document.getElementById('real').value);
	imaginary = Number(document.getElementById('imaginary').value);
	render();
	}

	function throwOnGLError(err, funcName, args) {
	throw WebGLDebugUtils.glEnumToString(err) + " was caused by call to: " + funcName;
	}

	function logGLCall(functionName, args) {
	console.log("gl." + functionName + "(" +
	WebGLDebugUtils.glFunctionArgsToString(functionName, args) + ")");
	}

	function init() {

	canvas = document.getElementById('glscreen');
	gl = canvas.getContext('experimental-webgl');
	canvas.width = 800;
	canvas.height = 800;

	ctx = WebGLDebugUtils.makeDebugContext(gl, throwOnGLError, logGLCall);

	gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

	buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
	gl.bufferData(
	gl.ARRAY_BUFFER,
	new Float32Array([
	-1.0, -1.0,
	1.0, -1.0,
	-1.0, 1.0,
	-1.0, 1.0,
	1.0, -1.0,
	1.0, 1.0]),
	gl.STATIC_DRAW
	);

	shaderScript = document.getElementById("2d-vertex-shader");
	shaderSource = shaderScript.text;
	vertexShader = gl.createShader(gl.VERTEX_SHADER);
	gl.shaderSource(vertexShader, shaderSource);
	gl.compileShader(vertexShader);

	shaderScript = document.getElementById("2d-fragment-shader");
	shaderSource = shaderScript.text;
	fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource(fragmentShader, shaderSource);
	gl.compileShader(fragmentShader);

	var compiled = gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS);
	var compilationLog = gl.getShaderInfoLog(fragmentShader);
	console.log(compiled)
	console.log(compilationLog)

	program = gl.createProgram();
	gl.attachShader(program, vertexShader);
	gl.attachShader(program, fragmentShader);
	gl.linkProgram(program);
	gl.useProgram(program);

	render();

	}

	function render() {

	window.requestAnimationFrame(render, canvas);

	gl.clearColor(1.0, 0.0, 0.0, 1.0);
	gl.clear(gl.COLOR_BUFFER_BIT);
	positionLocation = gl.getAttribLocation(program, 'a_position');
	gl.enableVertexAttribArray(positionLocation);
	gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

	u_iter = gl.getUniformLocation(program, 'u_iter');
	gl.uniform1i(u_iter, 1000);

	u_c = gl.getUniformLocation(program, 'u_c');
	gl.uniform2f(u_c, real, imaginary);

	gl.drawArrays(gl.TRIANGLES, 0, 6);

	}
	</script>

	<script id="2d-vertex-shader" type="x-shader/x-vertex">
	attribute vec2 a_position;
	void main() {
	gl_Position = vec4(a_position, 0, 1);
	}
	</script>

	<script id="2d-fragment-shader" type="x-shader/x-fragment">
	#define NUM_STEPS 1000000
	#ifdef GL_FRAGMENT_PRECISION_HIGH
	precision highp float;
	#else
	precision mediump float;
	#endif
	precision mediump int;

	uniform int u_iter;
	uniform vec2 u_c;

	// credits to sam, http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl
	vec3 hsv2rgb(vec3 c) {
	vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
	vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
	return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
	}

	void main() {
	vec2 z;
	bool escaped = false;
	int steps;

	z.x = 3.0 * (gl_FragCoord.x - 400.0) / 400.0 * 0.5;
	z.y = 2.0 * (gl_FragCoord.y - 400.0) / 400.0 * 0.5;

	float smoothColor = exp(- sqrt(z.x * z.x + z.y * z.y));

	for (int i=0; i<NUM_STEPS; i++) {
	steps = i;

	float x = (z.x * z.x - z.y * z.y) + u_c.x;
	float y = (z.y * z.x + z.x * z.y) + u_c.y;
	smoothColor += exp(- sqrt(xx + yy));

	if(steps > u_iter) break;
	if((xx + yy) > 4.0) {
	escaped = true;
	break;
	}

	z.x = x;
	z.y = y;
	}

	if (escaped) {
	float h = float(smoothColor) / float(u_iter);
	gl_FragColor = vec4(hsv2rgb(vec3(h, 1.0, 1.0)), 1.0);
	} else {
	gl_FragColor = vec4(hsv2rgb(vec3(0.0)), 1.0);
	}

	}
	</script>

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

	</body>
	</html>