jack
/
cocorobolx


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
							<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebGL 3D</title>

    <style type="text/css">
      body { background-color: grey;}
      canvas { background-color: white;}
    </style>

    <script src="../../dist/skulpt.js" type="text/javascript"></script>
    <script src="../../dist/builtin.js" type="text/javascript"></script>
</head>

<body>
<h1>WebGL 3D</h1>
<form>
<textarea id="code" name="code" cols="120" rows="40">
import webgl
from math import sin

gl = webgl.Context("my-canvas")
trianglesVerticeBuffer = gl.createBuffer()
trianglesColorBuffer = gl.createBuffer()
program = None
uViewMatrix = None
uProjMatrix = None
viewMatrix = webgl.Matrix4x4([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0])
projMatrix = webgl.Matrix4x4([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0])

def setup():
  print viewMatrix
  print projMatrix
  global program, uViewMatrix, uProjMatrix
  vs = gl.createShader(gl.VERTEX_SHADER) 
  gl.shaderSource(vs, "" + 
  "attribute vec3 aVertexPosition;" + 
  "attribute vec3 aVertexColor;" +
  "" +
  "uniform mat4 uViewMatrix;" +
  "uniform mat4 uProjMatrix;" +
  "" + 
  "varying highp vec4 vColor;" + 
  "void main(void) {" + 
  "  gl_Position = uProjMatrix * uViewMatrix * vec4(aVertexPosition, 1.0);" + 
  "  vColor = vec4(aVertexColor, 1.0);" + 
  "}")
  gl.compileShader(vs)
  print "Vertex shader COMPILE_STATUS: " + str(gl.getShaderParameter(vs, gl.COMPILE_STATUS))
  fs = gl.createShader(gl.FRAGMENT_SHADER) 
  gl.shaderSource(fs, "" + 
  "varying highp vec4 vColor;" + 
  "void main(void) {" + 
  "  gl_FragColor = vColor;" + 
  "}")
  gl.compileShader(fs)
  print "Fragment shader COMPILE_STATUS: " + str(gl.getShaderParameter(fs, gl.COMPILE_STATUS))

  program = gl.createProgram()
  gl.attachShader(program, vs)
  gl.attachShader(program, fs)
  gl.linkProgram(program)
  print "Program LINK_STATUS: " + str(gl.getProgramParameter(program, gl.LINK_STATUS))
  gl.useProgram(program)

  triangleVerticeColors = [1.0, 0.0, 0.0, 1.0, 1.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 1.0, 1.0, 0.0, 0.0, 1.0]

  gl.bindBuffer(gl.ARRAY_BUFFER, trianglesColorBuffer)
  gl.bufferData(gl.ARRAY_BUFFER, webgl.Float32Array(triangleVerticeColors), gl.STATIC_DRAW)

  uViewMatrix = gl.getUniformLocation(program, "uViewMatrix")
  uProjMatrix = gl.getUniformLocation(program, "uProjMatrix")
  projMatrix.perspective(45, 4.0/3.0, 0.1, 100.0)
  viewMatrix.identity()
  viewMatrix.translate([0.0, 0.0, -2.0])
  gl.clearColor(0.0, 0.0, 0.0, 1.0);  
  gl.viewport(0, 0, 400, 300);

def draw(gl, elapsed):
  gl.clear(gl.COLOR_BUFFER_BIT);  
  translation = sin(elapsed * 2.0 * 3.14159 / 10000.0)/2.0;
  triangleVertices = [-0.5 + translation,  0.5, -0.5,
                       0.0 + translation,  0.0, -0.5,
                      -0.5 + translation, -0.5, -0.5,
                       0.5 + translation,  0.5,  0.5,
                       0.0 + translation,  0.0,  0.5,
                       0.5 + translation, -0.5,  0.5]
  gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer)
  gl.bufferData(gl.ARRAY_BUFFER, webgl.Float32Array(triangleVertices), gl.DYNAMIC_DRAW)

  gl.uniformMatrix4fv(uProjMatrix, False, projMatrix)
  gl.uniformMatrix4fv(uViewMatrix, False, viewMatrix)

  vertexPositionAttribute = gl.getAttribLocation(program, "aVertexPosition")
  gl.enableVertexAttribArray(vertexPositionAttribute)
  gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer)
  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, False, 0, 0)

  vertexColorAttribute = gl.getAttribLocation(program, "aVertexColor")
  gl.enableVertexAttribArray(vertexColorAttribute)
  gl.bindBuffer(gl.ARRAY_BUFFER, trianglesColorBuffer)
  gl.vertexAttribPointer(vertexColorAttribute, 3, gl.FLOAT, False, 0, 0)

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

setup()

gl.setDrawFunc(draw);
</textarea>
<button onclick="runit()" type="button">Run</button>
</form>
<canvas id="my-canvas" height="300" width="400">
  Your browser does not support the HTML5 canvas element.
</canvas>
<pre id="my-output" ></pre>
    <script>
      function outputHandler(text) {
        var output = document.getElementById("my-output");
        output.innerHTML = output.innerHTML + text.replace(/</g, '&lt;');
      }

      function builtinRead(x) {
        if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined) {
          throw "File not found: '" + x + "'";
        }
        return Sk.builtinFiles["files"][x];
      }

      function runit() {
        var prog = document.getElementById("code").value;
        // Clear the output
        document.getElementById("my-output").innerHTML = '';
        Sk.canvas = "my-canvas";
        Sk.pre = "my-output";
        Sk.configure({"output":outputHandler, "read":builtinRead});
        try {
           eval(Sk.importMainWithBody("<stdin>", false, prog));
        }
        catch(e) {
          alert(e);
        }
      }
    </script>
  </body>
</html>