tetrix.js

var points = [];
var colors = [];
var gl;
var canvas;


var xAxis = 2;
var yAxis = 1;
var zAxis = 0;

var axis = 0;
var theta = [0, 0, 0];
var thetaLoc;

var NumTimesToSubdivide = 0;

function init()
{
    canvas = document.getElementById( "gl-canvas" );

    gl = WebGLUtils.setupWebGL( canvas );
    if ( !gl ) { alert( "WebGL isn't available" ); }

    //
    //  Initialize our data for the Sierpinski Gasket
    //

    // First, initialize the corners of our tetrahedron

    var vertices = [
        vec3(  0.0000,  0.0000, -1.0000 ),
        vec3(  0.0000,  0.9428,  0.3333 ),
        vec3( -0.8165, -0.4714,  0.3333 ),
        vec3(  0.8165, -0.4714,  0.3333 )
    ];

        document.getElementById("slider").onchange = function() {
        NumTimesToSubdivide = event.srcElement.value;
    };

    divideTetra( vertices[0], vertices[1], vertices[2], vertices[3],
                  NumTimesToSubdivide);

    //
    //  Configure WebGL
    //
    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

    //enable depth
    gl.enable(gl.DEPTH_TEST);

    //  Load shaders and initialize attribute buffers

    var program = initShaders( gl, "vertex-shader", "fragment-shader" );
    gl.useProgram( program );

    // create color buffer
    var cBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW);

    // associate shader variables
    var vColor = gl.getAttribLocation(program, "vColor");
    gl.vertexAttribPointer(vColor, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vColor);

    // Load the data into the GPU

    var vBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW );

    // Associate shader variables with our data buffer

    var vPosition = gl.getAttribLocation( program, "vPosition" );
    gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition);

    thetaLoc = gl.getUniformLocation(program, "theta");

    document.getElementById( "xButton").onclick = function (){
      axis = xAxis;
    };
    document.getElementById( "yButton").onclick = function(){
      axis = yAxis;
    };
    document.getElementById( "zButton").onclick = function(){
      axis = zAxis;
    };

    render();
};

function triangle( a, b, c, color)
{
    var tetraColors = [
        vec3(1.0, 0.0, 0.0),
        vec3(0.0, 0.0, 1.0),
        vec3(1.0, 0.0, 0.0),
        vec3(0.0, 0.0, 1.0)
    ];

    colors.push(tetraColors[color]);
    points.push(a);
    colors.push(tetraColors[color]);
    points.push(b);
    colors.push(tetraColors[color]);
    points.push(c);
}


function tetra (a, b, c, d)
{
    triangle( a, c, b, 0);
    triangle( a, c, d, 1);
    triangle( a, b, d, 2);
    triangle( b, c, d, 3);
}

function divideTetra( a, b, c, d, count )
{

    // check for end of recursion

    if ( count === 0 ) {
        tetra( a, b, c, d);
    }
    else {

        //bisect the sides

        var ab = mix( a, b, 0.5 );
        var ac = mix( a, c, 0.5);
        var ad = mix( a, d, 0.5 );
        var bc = mix( b, c, 0.5 );
        var bd = mix( b, d, 0.5 );
        var cd = mix( c, d, 0.5 );

        --count;

        // three new triangles

        divideTetra(  a, ab, ac, ad, count );
        divideTetra( ab,  b, bc, bd, count );
        divideTetra( ac, bc,  c, cd, count );
        divideTetra( ad, bd, cd,  d, count );
    }
}

window.onload = init;

function render()
{
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    theta[axis] += 2.0;
    gl.uniform3fv(thetaLoc, theta);

    gl.drawArrays( gl.TRIANGLES, 0, points.length );
    points = [];
    requestAnimFrame(init);
}