jack
/
cocorobolx


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
							<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebGL Movement</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 Movement</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

def setup():
  global program
  vs = gl.createShader(gl.VERTEX_SHADER) 
  gl.shaderSource(vs, "attribute vec3 aVertexPosition; attribute vec3 aVertexColor; varying highp vec4 vColor; void main(void) { gl_Position = 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)

def draw(gl, elapsed):
  gl.clearColor(0.1, 0.5, 0.1, 1.0);  
  gl.clear(gl.COLOR_BUFFER_BIT);  
  gl.viewport(0, 0, 400, 300);
  translation = sin(elapsed * 2.0 * 3.14159 / 10000.0)/2.0;
  triangleVertices = [-0.5 + translation,  0.5, 0.0,
                       0.0 + translation,  0.0, 0.0,
                      -0.5 + translation, -0.5, 0.0,
                       0.5 + translation,  0.5, 0.0,
                       0.0 + translation,  0.0, 0.0,
                       0.5 + translation, -0.5, 0.0]
  gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer)
  gl.bufferData(gl.ARRAY_BUFFER, webgl.Float32Array(triangleVertices), gl.DYNAMIC_DRAW)
  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>