index.html

<html>

<head>
<title> Genetic GPU!</title>
<!--
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta property="og:title" content="Genetic GPU"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://petercottle.com/friendMapper2/index.html"/>
<meta property="og:image" content="http://petercottle.com/friendMapper2/friendMapperIcon.PNG"/>
<meta property="og:site_name" content="FriendMapper"/>
<meta property="og:description" content="Map your friends in 3D with WebGl and the Facebook Graph API! Coded by Peter Cottle"/>
-->

<link href="style.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>
<script type="text/javascript" src="webgl-utils.js"></script>
<script type="text/javascript" src="Tween.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://furious-leaf-8323.herokuapp.com/nowjs/now.js"></script>

<!--<script type="text/javascript" src="http://localhost:8080/nowjs/now.js"></script>-->
<!--<script type="text/javascript" src="jquery-1.6.1.min.js"></script>-->

<script type="text/javascript" src="geneticGPU.js"></script>
<script type="text/javascript" src="nowStuff.js"></script>

<script id="shader-simple-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;

uniform mat4 mvMatrix;
uniform mat4 pMatrix;

uniform float xPos;
uniform float yPos;
uniform float zPos;

varying vec4 vColor;

void main(void) {
    vec4 translatedPos = vec4(aVertexPosition[0] + xPos, aVertexPosition[1] + yPos, aVertexPosition[2] + zPos, 1.0);

    gl_Position = pMatrix * mvMatrix * translatedPos;
    vColor = aVertexColor;
}
</script>

<script id="shader-simple-fs" type="x-shader/x-fragment">
precision mediump float;

varying vec4 vColor;

void main(void) {
    gl_FragColor = vColor;
}

</script>

<script id="shader-box-vs" type="x-shader/x-vertex">
#ifdef GL_ES
precision highp float;
#else
precision mediump float;
#endif

attribute vec2 aVertexPosition;

uniform float time;

//*** our generated uniforms below:
//uniformStart
uniform float minX;
uniform float minY;
uniform float maxX;
uniform float maxY;
uniform float minZ;
uniform float maxZ;
//uniformEnd

uniform mat4 mvMatrix;
uniform mat4 pMatrix;

varying vec4 vPos;
varying vec3 varData;

varying float vminZ;
varying float vmaxZ;

//random number generator
float myRand(float seed) {
    float part1, result;
    float modded;
    float twoPow;

    twoPow = pow(2.0,16.0);
    part1 = 1664525.0 * seed + 1013904223.0;
    modded = mod(part1,twoPow);

    result = modded / (twoPow - 1.0);
    return result;
}

void main(void) {

    //***Our generated variable declarations
    //varDeclaration
    float x, y;
    //varDeclarationEnd

    float z, xOriginal, yOriginal;
    xOriginal = aVertexPosition[0];
    yOriginal = aVertexPosition[1];

    //the x and y go from -1 to 1 on the master grid, so
    //rescale these to be from -minX to +maxX

    //***Our generated variable assignments
    //varAssignment
    x = ((aVertexPosition[0] + 1.0)/(2.0)) * (maxX - minX) + minX;
    y = ((aVertexPosition[1] + 1.0)/(2.0)) * (maxY - minY) + minY;
    //varAssignmentEnd

    //*** Our generated equation string below:
    //equationString
    z = 2.0 * cos(time + x + y) * (0.5 + (sin(x*x + y*x + time) - 0.5)/(1.0 + 0.1*(x * x + y * y + cos(time)))) + 1.25 * (pow(xOriginal,2.0) + pow(yOriginal,2.0));
    //z = 0.25 * (pow(x,2.0) + pow(y,2.0) + 2.0*cos(time));
    //equationStringEnd

    //z = 0.3 * ((x * sin(sqrt(abs(x - (y + 9.0)))) - (y + 9.0) * sin(sqrt(abs(y + 0.5 * x + 9.0))));
    //z = (pow(x,2.0)/pow(max(maxX,abs(minX)),2.0))*(maxZ-minZ)*0.5 + (pow(y,2.0)/pow(max(maxY,abs(minY)),2.0))*(maxZ-minZ)*0.5 + minZ;

    //scale the z so it fits within our window
    float zScaled = ((z - minZ)/(maxZ - minZ)) * 2.0 + -1.0;

    vec4 position = vec4(aVertexPosition[0],aVertexPosition[1],zScaled,1.0);
    gl_Position = pMatrix * mvMatrix * position;
    vPos = position;

    //** Our generated variable assignment below:
    //varDataAssignment
    varData = vec3((x - minX) / (maxX - minX), (y - minY) / (maxY - minY), 0.0);
    //varDataAssignmentEnd

    //this is mainly for hue calculations when the z window changes
    vminZ = minZ;
    vmaxZ = maxZ;
}
</script>

<script id="shader-box-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#else
precision mediump float;
#endif

varying vec4 vPos;
varying vec3 varData;

varying float vminZ;
varying float vmaxZ;

float convertZToG(float z)
{
    float h, s, v;
    float f, p, q, t;
    float r,g,b;
    int i;

    //ok so first we need to map the z value to a number of degrees
    //
    //then with that number of degrees, we need to reduce that to
    //0 ->360
    //
    //then, we need to map this to an RGB value with the color
    //conversion formulas

    s = 0.9; v = 0.9;

    float dpz= vmaxZ - vminZ;
    float degreesPerZ = 630.0 / dpz;

    float hueDegrees = z * degreesPerZ + 90.0;

    //limit to 0->360
    hueDegrees -= 360.0 * floor(hueDegrees / 360.0);

    h = hueDegrees;
    h /= 60.0;
    i = int(floor(h));
    f = h - float(i);
    p = v * (1.0 - s);
    q = v * (1.0 - s * f);
    t = v * (1.0 - s * (1.0 - f));

    //switch(i)
    if(i == 0)
    {
        r = v;
        g = t;
        b = p;
    }
    else if(i == 1)
    {
        r = q;
        g = v;
        b = p;
    }
    else if(i == 2)
    {
        r = p;
        g = v;
        b = t;
    }
    else if(i == 3)
    {
        r = p;
        g = q;
        b = v;
    }
    else if(i == 4)
    {
        r = t;
        g = p;
        b = v;
    }
    else // i == 5
    {
        r = v;
        g = p;
        b = q;
    }
    return g;
}


float convertZToB(float z)
{
    float h, s, v;
    float f, p, q, t;
    float r,g,b;
    int i;

    //ok so first we need to map the z value to a number of degrees
    //
    //then with that number of degrees, we need to reduce that to
    //0 ->360
    //
    //then, we need to map this to an RGB value with the color
    //conversion formulas

    s = 0.9; v = 0.9;

    float dpz= vmaxZ - vminZ;
    float degreesPerZ = 630.0 / dpz;

    float hueDegrees = z * degreesPerZ + 90.0;

    //limit to 0->360
    hueDegrees -= 360.0 * floor(hueDegrees / 360.0);

    h = hueDegrees;
    h /= 60.0;
    i = int(floor(h));
    f = h - float(i);
    p = v * (1.0 - s);
    q = v * (1.0 - s * f);
    t = v * (1.0 - s * (1.0 - f));

    //switch(i)
    if(i == 0)
    {
        r = v;
        g = t;
        b = p;
    }
    else if(i == 1)
    {
        r = q;
        g = v;
        b = p;
    }
    else if(i == 2)
    {
        r = p;
        g = v;
        b = t;
    }
    else if(i == 3)
    {
        r = p;
        g = q;
        b = v;
    }
    else if(i == 4)
    {
        r = t;
        g = p;
        b = v;
    }
    else // i == 5
    {
        r = v;
        g = p;
        b = q;
    }
    return b;
}


float convertZToR(float z)
{
    float h, s, v;
    float f, p, q, t;
    float r,g,b;
    int i;

    //ok so first we need to map the z value to a number of degrees
    //
    //then with that number of degrees, we need to reduce that to
    //0 ->360
    //
    //then, we need to map this to an RGB value with the color
    //conversion formulas

    s = 0.9; v = 0.9;

    float dpz= vmaxZ - vminZ;
    float degreesPerZ = 630.0 / dpz;

    float hueDegrees = z * degreesPerZ + 90.0;

    //limit to 0->360
    hueDegrees -= 360.0 * floor(hueDegrees / 360.0);

    h = hueDegrees;
    h /= 60.0;
    i = int(floor(h));
    f = h - float(i);
    p = v * (1.0 - s);
    q = v * (1.0 - s * f);
    t = v * (1.0 - s * (1.0 - f));

    //switch(i)
    if(i == 0)
    {
        r = v;
        g = t;
        b = p;
    }
    else if(i == 1)
    {
        r = q;
        g = v;
        b = p;
    }
    else if(i == 2)
    {
        r = p;
        g = v;
        b = t;
    }
    else if(i == 3)
    {
        r = p;
        g = q;
        b = v;
    }
    else if(i == 4)
    {
        r = t;
        g = p;
        b = v;
    }
    else // i == 5
    {
        r = v;
        g = p;
        b = q;
    }
    return r;
}

void main(void) {

    //this is always the same, we fill with 0s if there isnt room
    gl_FragColor = vec4(varData[0],varData[1],varData[2],1.0);

    //hueStart
    float z = (vPos[2] + 1.0) * 2.0;
    float r,g,b;
    r = convertZToR(z);
    g = convertZToG(z);
    b = convertZToB(z);
    gl_FragColor = vec4(r,g,b,1);
    //hueEnd

    //gl_FragColor = vec4(varData[0],varData[1],varData[2],1.0);

}

</script>


<script type="text/javascript">
//good equations:
//z = sin(5.5*x - time)*cos(5.0*y + time)+0.5*x*x+ abs(y) - 1.0
//z = sin(pow(x,2.0) + pow(y,2.0) + time) / (abs(x*y) + 1.0) + 0.65 * (x*x/9.0 + y*y/9.0)
//z = 0.0 - sin(x*y + time) + (cos(time) * pow(x/3.0,2.0) + pow(y/3.0,2.0)) + 0.5*cos(x * y * 3.0 + time * 2.0)
//z = 0.5*sqrt(x * y + y *y)+ 1.0 * sin(sqrt(x*x + y*y) + time)  + 0.8*(pow(x/3.0,0.5) + pow(y/3.0,0.5)) - 1.5 + 0.5*cos(x)


$j = jQuery.noConflict();

//globals
var boxTimeout = null;
var notifyTimeout = null;

var shouldCircuit = false;
var thePopup = null;
var canvas = null;

var equationTimeout = null;
var lastEquation = "";

function randomString(string_length) {
    if(!string_length)
    {
        string_length = 8;
    }
	var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
	var randomstring = '';
	for (var i=0; i<string_length; i++) {
		var rnum = Math.floor(Math.random() * chars.length);
		randomstring += chars.substring(rnum,rnum+1);
	}
    return randomstring;
}

/************** some UI classes **************/

function frobController() {
    this.idToChange = null;
    this.srcElement = null;

    this.isFrobbing = false;
    this.startValue = null;

    this.deltaX = 0;
}


frobController.prototype.frobMouseDown = function(e) {

    this.srcElement = e.srcElement;
    this.idToChange = e.srcElement.id;
    this.isFrobbing = true;

    this.startValue = Number($j(this.srcElement).html());
    this.startX = e.clientX;
};

frobController.prototype.frobMouseMove = function(e) {
    if(!this.isFrobbing)
    {
        return;
    }

    if(!event.which)
    {
        this.isFrobbing = false;
    }

    var deltaX = e.clientX - this.startX;

    var expFactor = 5 * Math.exp(-Math.pow(Math.abs(deltaX * 0.02),2));
    var delta = 5 - expFactor;

    //offset by the sign. i do this instead of abs(x) / x because sometimes you get 0
    if(deltaX > 0)
    {
        var newVal = this.startValue + delta;
    }
    else
    {
        var newVal = this.startValue - delta;
    }

    //now go set this
    prob.baseSearchWindow.windowAttributes[this.idToChange].val = newVal;
    prob.searchWindow2d.windowAttributes[this.idToChange].val = newVal;
    //we need to update the extractors as well

    $j(this.srcElement).html(String(newVal).substring(0,5));
};


function zeroPad(num,count)
{
    var numZeropad = String(num);
    while(numZeropad.length < count) {
        numZeropad = "0" + numZeropad;
    }
    return numZeropad;
}

function startWaiting() {
    //first time loading, do some formatting stuff

    //make sure the loading gif appears
    $j('#timeoutGif').addClass('timeoutLoading');
    //and change our equation status to waiting
    $j('#equationStringTextArea').addClass('textareaWaiting');
    $j('#equationStringTextArea').removeClass('textareaBadEquation');
}

function startOrResetTimeout() {
    if(equationTimeout)
    {
        clearTimeout(equationTimeout);
    }
    else
    {
        startWaiting();
    }

    equationTimeout = setTimeout('equationStringEdit();',1000);
}

function stopWaiting() {
    //hide loading gifs
    $j('#timeoutGif').removeClass('timeoutLoading');
    equationTimeout = null;
    $j('#equationStringTextArea').removeClass('textareaWaiting');
}

function changeSelected() {
    //get the value at the selected one
    var esOfSelected = $j('#providedEquations').val();
    $j('#equationStringTextArea').val(esOfSelected);
    equationStringEdit();

};

function equationStringEdit() {
    stopWaiting();

    var newEquation = $j('#equationStringTextArea').val();

    //if this equation is the same, peace out
    if(newEquation.replace(/\s/g,'') == lastEquation)
    {
        console.log("no change in equation, peace");
        return;
    }

    //first validate
    var back = Problem.prototype.validateEquationString(newEquation);
    $j('#equationStringTextArea').val(back);

    //then try doing it
    if(buildProblem(newEquation))
    {
        //good equation -- the default style is "good equation"
        lastEquation = newEquation.replace(/\s/g,'');
    }
    else
    {
        //bad equation
        $j('#equationStringTextArea').addClass('textareaBadEquation');
    }
}

function buildProblem(equationString) {
    var newProb;
    var newTemplate;
    var newSolver;

    try {
        console.log("making new prob with",equationString);
        newProb = new Problem(equationString,[],true);
        newTemplate = new ShaderTemplateRenderer(newProb);
        newSolver = newTemplate.solver;
    } catch(e) {
        console.log("NEW PROBLEM FAILED");
        console.log(String(e));
        topNotify(String(e));
        return null;
    }

    console.log("new problem success!!");
    //these are valid so switch over for real

    prob = newProb;
    template = newTemplate;
    solver = newSolver;

    var equationInfo = getMyEquationInfo();

    //distribute this now
    changeRoomEquation(equationInfo);

    return true;
}

function changeOurEquation(equationInfo) {
    var equationString = equationInfo.equationString;
    var fixedVars = equationInfo.fixedVars;
    var fixAllBut2 = equationInfo.fixAllBut2;

    if(!equationString) { alert("bad equation string in equationinfo!"); console.log(equationInfo); return; }

    var newProb, newTemplate, newSolver;

    try {
        console.log("making new prob with",equationString);
        newProb = new Problem(equationString,fixedVars,fixAllBut2);
        newTemplate = new ShaderTemplateRenderer(newProb);
        newSolver = newTemplate.solver;
    } catch(e) {
        topNotify(String(e));
        return null;
    }

    prob = newProb;
    template = newTemplate;
    solver = newSolver;

    if(now.total)
    {
        solver.baseSearchWindow.divideUpSearchSpace(now.position,now.total);
        solver.searchWindow2d.divideUpSearchSpace(now.position,now.total);
    }
    else
    {
        console.log("no now total");
    }
};

function initGL(canvas) {
    try {
        //webgl context attributes!!
        gl = canvas.getContext("experimental-webgl",{
                                preserveDrawingBuffer:true,
                                antialias:false,
                                });
        gl.viewportWidth = canvas.width;
        gl.viewportHeight = canvas.height;
    } catch (e) {
        if (!gl || /Firefox/.test(navigator.userAgent)) {

            if(/Safari/.test(navigator.userAgent))
            {
                window.location = "http://petercottle.com/friendMapper2/safari.html";
            }
            else
            {
                window.location = "http://petercottle.com/friendMapper2/browserFail.html";
            }
        }
    }
}

function onMouseWheel(event) {

    var toZoom = 0;
    if(event.originalEvent.wheelDeltaY)
    {
        toZoom = event.originalEvent.wheelDeltaY * 0.003;
    }
    else
    {
        //friggin firefox...
        toZoom = -1 * event.originalEvent.detail * 0.06;
    }

    //zoomAmount += toZoom;
    scaleAmount += toZoom / 100;

    if(scaleAmount < 0.0001)
    {
        scaleAmount = 0.0001;
    }
}

function resizeWindow()
{
    //fix other frame buffer size...?
    initOtherFrameBuffer();

    //window sizes
    var wHeight = $j(window).height();
    var wWidth = $j(window).width();

    //viewport sizes
    vHeight = wHeight;
    vWidth = Math.round(wWidth / 2);

    //set the width to the canvas
    $j('#earth-canvas').attr('width',String(vWidth) + 'px');
    $j('#earth-canvas').attr('height',String(vHeight) + 'px');

    gl.viewportWidth = vWidth;
    gl.viewportHeight = vHeight; 
    gl.viewport(0,0,vWidth,vHeight);

    //mat4.perspective(45,gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
    mat4.ortho(-0.0519,0.0519,-0.0414,0.0414,0.1,100.0,pMatrix);

    $j('.loadingGif').css('left',String(wWidth/2 - 220*0.5) + 'px');
    $j('.loadingGif').css('top',String(wHeight / 2 - 19*0.5) + 'px');
    //fix loading gif
}


var mouseDown = false;
var lastMouseX = null;
var lastMouseY = null;

var earthRotationMatrix = mat4.create();
mat4.identity(earthRotationMatrix);

function handleMouseDown(event) {
    //event.preventDefault();
    mouseDown = true;

    //otherwise, move with mouse
    lastMouseX = event.clientX;
    lastMouseY = event.clientY;
}


function handleMouseUp(event) {
    mouseDown = false;
}


function handleMouseMove(event) {
    //phantom events
    if(event.clientX == lastMouseX && event.clientY == lastMouseY)
    {
        return;
    }
    if(!event.which || !mouseDown)
    {
        mouseDown = false;
        lastMouseX = event.clientX;
        lastMouseY = event.clientY;
        return;
    }
    //this here only executes when we are clicking and dragging mouse

    var newX = event.clientX;
    var newY = event.clientY;

    var deltaX = newX - lastMouseX;
    var deltaY = newY - lastMouseY;

    globalYrotate += deltaX / 10;
    globalXrotate += deltaY / 10;

    if(globalXrotate > angleLimit)
    {
        globalXrotate = angleLimit;
    }
    else if (globalXrotate < -angleLimit*1.5)
    {
        globalXrotate = -angleLimit * 1.5;
    }

    lastMouseX = newX
    lastMouseY = newY;
}


function startLoadingWithText(theText) {
    startLoading();
    topNotify(theText);
}

function stopLoadingWithText() {
    stopLoading();
    topNotifyClear();
}

function topNotifyClear() {
    $j('#topNotifyBar').html('');
    $j('#topNotifyBarHolder').addClass('topNotifyBarHidden');
}

function startLoading() {
    isLoading = true;

    var wHeight = $j(window).height();
    var wWidth = $j(window).width();
    $j('.loadingGif').css('left',String(wWidth/2 - 220*0.5) + 'px');
    $j('.loadingGif').css('top',String(wHeight / 2 - 19*0.5) + 'px');
    $j('.loadingGif').fadeIn();
}

function stopLoading() {
    isLoading = false;
    $j('.loadingGif').fadeOut();
}


function topNotify(theText) {
    topNotifyHtml('<h2 style="font-size:20px">' + theText + "</h2>");
}

function topNotifyHtml(theText) {
    //and if someone is clicking fast, get rid of it
    if(notifyTimeout)
    {
        clearTimeout(notifyTimeout);
    }

    //basically, if its already displayed, hide it and come back in 700ms
    if(!$j('#topNotifyBarHolder').hasClass('topNotifyBarHidden'))
    {
        //clear and come back
        topNotifyClear();
        var jsToExecute = "topNotifyHtml('" + theText + "');";
        notifyTimeout = setTimeout(jsToExecute,700);
        return;
    }

    $j('#topNotifyBar').html("<h1>" + theText + "</h1>");

    $j('#topNotifyBarHolder').removeClass('topNotifyBarHidden');
}

var shaderStuff = {"fShaderSrc":"\n#ifdef GL_ES\nprecision highp float;\n#else\nprecision mediump float;\n#endif\n\nvarying vec4 vPos;\nvarying vec3 varData;\n\nvarying float vminZ;\nvarying float vmaxZ;\n\nfloat convertZToG(float z)\n{\n    float h, s, v;\n    float f, p, q, t;\n    float r,g,b;\n    int i;\n\n    //ok so first we need to map the z value to a number of degrees\n    //\n    //then with that number of degrees, we need to reduce that to\n    //0 ->360\n    //\n    //then, we need to map this to an RGB value with the color\n    //conversion formulas\n\n    s = 0.9; v = 0.9;\n\n    float dpz= vmaxZ - vminZ;\n    float degreesPerZ = 630.0 / dpz;\n\n    float hueDegrees = z * degreesPerZ + 90.0;\n\n    //limit to 0->360\n    hueDegrees -= 360.0 * floor(hueDegrees / 360.0);\n\n    h = hueDegrees;\n    h /= 60.0;\n    i = int(floor(h));\n    f = h - float(i);\n    p = v * (1.0 - s);\n    q = v * (1.0 - s * f);\n    t = v * (1.0 - s * (1.0 - f));\n\n    //switch(i)\n    if(i == 0)\n    {\n        r = v;\n        g = t;\n        b = p;\n    }\n    else if(i == 1)\n    {\n        r = q;\n        g = v;\n        b = p;\n    }\n    else if(i == 2)\n    {\n        r = p;\n        g = v;\n        b = t;\n    }\n    else if(i == 3)\n    {\n        r = p;\n        g = q;\n        b = v;\n    }\n    else if(i == 4)\n    {\n        r = t;\n        g = p;\n        b = v;\n    }\n    else // i == 5\n    {\n        r = v;\n        g = p;\n        b = q;\n    }\n    return g;\n}\n\n\nfloat convertZToB(float z)\n{\n    float h, s, v;\n    float f, p, q, t;\n    float r,g,b;\n    int i;\n\n    //ok so first we need to map the z value to a number of degrees\n    //\n    //then with that number of degrees, we need to reduce that to\n    //0 ->360\n    //\n    //then, we need to map this to an RGB value with the color\n    //conversion formulas\n\n    s = 0.9; v = 0.9;\n\n    float dpz= vmaxZ - vminZ;\n    float degreesPerZ = 630.0 / dpz;\n\n    float hueDegrees = z * degreesPerZ + 90.0;\n\n    //limit to 0->360\n    hueDegrees -= 360.0 * floor(hueDegrees / 360.0);\n\n    h = hueDegrees;\n    h /= 60.0;\n    i = int(floor(h));\n    f = h - float(i);\n    p = v * (1.0 - s);\n    q = v * (1.0 - s * f);\n    t = v * (1.0 - s * (1.0 - f));\n\n    //switch(i)\n    if(i == 0)\n    {\n        r = v;\n        g = t;\n        b = p;\n    }\n    else if(i == 1)\n    {\n        r = q;\n        g = v;\n        b = p;\n    }\n    else if(i == 2)\n    {\n        r = p;\n        g = v;\n        b = t;\n    }\n    else if(i == 3)\n    {\n        r = p;\n        g = q;\n        b = v;\n    }\n    else if(i == 4)\n    {\n        r = t;\n        g = p;\n        b = v;\n    }\n    else // i == 5\n    {\n        r = v;\n        g = p;\n        b = q;\n    }\n    return b;\n}\n\n\nfloat convertZToR(float z)\n{\n    float h, s, v;\n    float f, p, q, t;\n    float r,g,b;\n    int i;\n\n    //ok so first we need to map the z value to a number of degrees\n    //\n    //then with that number of degrees, we need to reduce that to\n    //0 ->360\n    //\n    //then, we need to map this to an RGB value with the color\n    //conversion formulas\n\n    s = 0.9; v = 0.9;\n\n    float dpz= vmaxZ - vminZ;\n    float degreesPerZ = 630.0 / dpz;\n\n    float hueDegrees = z * degreesPerZ + 90.0;\n\n    //limit to 0->360\n    hueDegrees -= 360.0 * floor(hueDegrees / 360.0);\n\n    h = hueDegrees;\n    h /= 60.0;\n    i = int(floor(h));\n    f = h - float(i);\n    p = v * (1.0 - s);\n    q = v * (1.0 - s * f);\n    t = v * (1.0 - s * (1.0 - f));\n\n    //switch(i)\n    if(i == 0)\n    {\n        r = v;\n        g = t;\n        b = p;\n    }\n    else if(i == 1)\n    {\n        r = q;\n        g = v;\n        b = p;\n    }\n    else if(i == 2)\n    {\n        r = p;\n        g = v;\n        b = t;\n    }\n    else if(i == 3)\n    {\n        r = p;\n        g = q;\n        b = v;\n    }\n    else if(i == 4)\n    {\n        r = t;\n        g = p;\n        b = v;\n    }\n    else // i == 5\n    {\n        r = v;\n        g = p;\n        b = q;\n    }\n    return r;\n}\n\nvoid main(void) {\n\n    //this is always the same, we fill with 0s if there isnt room\n    gl_FragColor = vec4(varData[0],varData[1],varData[2],1.0);\n\n    \n\n    //gl_FragColor = vec4(varData[0],varData[1],varData[2],1.0);\n\n}\n\n","vShaderSrc":"\n#ifdef GL_ES\nprecision highp float;\n#else\nprecision mediump float;\n#endif\n\nattribute vec2 aVertexPosition;\n\nuniform float time;\n\n//*** our generated uniforms below:\nuniform float minG;\nuniform float maxG;\nuniform float minX;\nuniform float maxX;\nuniform float minY;\nuniform float maxY;\nuniform float minZ;\nuniform float maxZ;\n\n\nuniform mat4 mvMatrix;\nuniform mat4 pMatrix;\n\nvarying vec4 vPos;\nvarying vec3 varData;\n\nvarying float vminZ;\nvarying float vmaxZ;\n\n//random number generator\nfloat myRand(float seed) {\n    float part1, result;\n    float modded;\n    float twoPow;\n\n    twoPow = pow(2.0,16.0);\n    part1 = 1664525.0 * seed + 1013904223.0;\n    modded = mod(part1,twoPow);\n\n    result = modded / (twoPow - 1.0);\n    return result;\n}\n\nvoid main(void) {\n\n    //***Our generated variable declarations\n    float g,x,y;\n\n    float z, xOriginal, yOriginal;\n    xOriginal = aVertexPosition[0];\n    yOriginal = aVertexPosition[1];\n\n    //the x and y go from -1 to 1 on the master grid, so\n    //rescale these to be from -minX to +maxX\n\n    //***Our generated variable assignments\n    g = myRand(pow(1.0 + time,3.0) + 1.0 * 1.0 *  time * float(aVertexPosition[0]) * 17.0 + 1.0 * pow(time,2.0) * float(aVertexPosition[1]) * 100.0 + time) * (maxG - minG) + minG;\nx = myRand(pow(2.0 + time,3.0) + 2.0 * 2.0 *  time * float(aVertexPosition[0]) * 17.0 + 2.0 * pow(time,2.0) * float(aVertexPosition[1]) * 100.0 + time) * (maxX - minX) + minX;\ny = myRand(pow(3.0 + time,3.0) + 3.0 * 3.0 *  time * float(aVertexPosition[0]) * 17.0 + 3.0 * pow(time,2.0) * float(aVertexPosition[1]) * 100.0 + time) * (maxY - minY) + minY;\n\n\n    //*** Our generated equation string below:\n    z = sin(x + time*0.3) + cos(y + time*0.7) + sin(g);\n\n    //z = 0.3 * ((x * sin(sqrt(abs(x - (y + 9.0)))) - (y + 9.0) * sin(sqrt(abs(y + 0.5 * x + 9.0))));\n    //z = (pow(x,2.0)/pow(max(maxX,abs(minX)),2.0))*(maxZ-minZ)*0.5 + (pow(y,2.0)/pow(max(maxY,abs(minY)),2.0))*(maxZ-minZ)*0.5 + minZ;\n\n    //scale the z so it fits within our window\n    float zScaled = ((z - minZ)/(maxZ - minZ)) * 2.0 + -1.0;\n\n    vec4 position = vec4(aVertexPosition[0],aVertexPosition[1],zScaled,1.0);\n    gl_Position = pMatrix * mvMatrix * position;\n    vPos = position;\n\n    //** Our generated variable assignment below:\n    varData = vec3((g - minG)/(maxG - minG),(x - minX)/(maxX - minX),(y - minY)/(maxY - minY));\n\n\n    //this is mainly for hue calculations when the z window changes\n    vminZ = minZ;\n    vmaxZ = maxZ;\n}\n"};



var shaderStuff2 = {"vShaderSrc":"\n#ifdef GL_ES\nprecision highp float;\n#else\nprecision mediump float;\n#endif\n\nattribute vec2 aVertexPosition;\n\nuniform float time;\n\n//*** our generated uniforms below:\nuniform float minX;\nuniform float maxX;\nuniform float minY;\nuniform float maxY;\nuniform float minZ;\nuniform float maxZ;\n\n\nuniform mat4 mvMatrix;\nuniform mat4 pMatrix;\n\nvarying vec4 vPos;\nvarying vec3 varData;\n\nvarying float vminZ;\nvarying float vmaxZ;\n\n//random number generator\nfloat myRand(float seed) {\n    float part1, result;\n    float modded;\n    float twoPow;\n\n    twoPow = pow(2.0,16.0);\n    part1 = 1664525.0 * seed + 1013904223.0;\n    modded = mod(part1,twoPow);\n\n    result = modded / (twoPow - 1.0);\n    return result;\n}\n\nvoid main(void) {\n\n    //***Our generated variable declarations\n    float x,y;\n\n    float z, xOriginal, yOriginal;\n    xOriginal = aVertexPosition[0];\n    yOriginal = aVertexPosition[1];\n\n    //the x and y go from -1 to 1 on the master grid, so\n    //rescale these to be from -minX to +maxX\n\n    //***Our generated variable assignments\n    x = myRand(pow(1.0 + time,3.0) + 1.0 * 1.0 *  time * float(aVertexPosition[0]) * 17.0 + 1.0 * pow(time,2.0) * float(aVertexPosition[1]) * 100.0 + time) * (maxX - minX) + minX;\ny = myRand(pow(2.0 + time,3.0) + 2.0 * 2.0 *  time * float(aVertexPosition[0]) * 17.0 + 2.0 * pow(time,2.0) * float(aVertexPosition[1]) * 100.0 + time) * (maxY - minY) + minY;\n\n\n    //*** Our generated equation string below:\n    z = sin(x + time) + cos(y + time);\n\n    //z = 0.3 * ((x * sin(sqrt(abs(x - (y + 9.0)))) - (y + 9.0) * sin(sqrt(abs(y + 0.5 * x + 9.0))));\n    //z = (pow(x,2.0)/pow(max(maxX,abs(minX)),2.0))*(maxZ-minZ)*0.5 + (pow(y,2.0)/pow(max(maxY,abs(minY)),2.0))*(maxZ-minZ)*0.5 + minZ;\n\n    //scale the z so it fits within our window\n    float zScaled = ((z - minZ)/(maxZ - minZ)) * 2.0 + -1.0;\n\n    vec4 position = vec4(aVertexPosition[0],aVertexPosition[1],zScaled,1.0);\n    gl_Position = pMatrix * mvMatrix * position;\n    vPos = position;\n\n    //** Our generated variable assignment below:\n    varData = vec3((x - minX)/(maxX - minX),(y - minY)/(maxY - minY),0.0);\n\n\n    //this is mainly for hue calculations when the z window changes\n    vminZ = minZ;\n    vmaxZ = maxZ;\n}\n","fShaderSrc":"\n#ifdef GL_ES\nprecision highp float;\n#else\nprecision mediump float;\n#endif\n\nvarying vec4 vPos;\nvarying vec3 varData;\n\nvarying float vminZ;\nvarying float vmaxZ;\n\nfloat convertZToG(float z)\n{\n    float h, s, v;\n    float f, p, q, t;\n    float r,g,b;\n    int i;\n\n    //ok so first we need to map the z value to a number of degrees\n    //\n    //then with that number of degrees, we need to reduce that to\n    //0 ->360\n    //\n    //then, we need to map this to an RGB value with the color\n    //conversion formulas\n\n    s = 0.9; v = 0.9;\n\n    float dpz= vmaxZ - vminZ;\n    float degreesPerZ = 630.0 / dpz;\n\n    float hueDegrees = z * degreesPerZ + 90.0;\n\n    //limit to 0->360\n    hueDegrees -= 360.0 * floor(hueDegrees / 360.0);\n\n    h = hueDegrees;\n    h /= 60.0;\n    i = int(floor(h));\n    f = h - float(i);\n    p = v * (1.0 - s);\n    q = v * (1.0 - s * f);\n    t = v * (1.0 - s * (1.0 - f));\n\n    //switch(i)\n    if(i == 0)\n    {\n        r = v;\n        g = t;\n        b = p;\n    }\n    else if(i == 1)\n    {\n        r = q;\n        g = v;\n        b = p;\n    }\n    else if(i == 2)\n    {\n        r = p;\n        g = v;\n        b = t;\n    }\n    else if(i == 3)\n    {\n        r = p;\n        g = q;\n        b = v;\n    }\n    else if(i == 4)\n    {\n        r = t;\n        g = p;\n        b = v;\n    }\n    else // i == 5\n    {\n        r = v;\n        g = p;\n        b = q;\n    }\n    return g;\n}\n\n\nfloat convertZToB(float z)\n{\n    float h, s, v;\n    float f, p, q, t;\n    float r,g,b;\n    int i;\n\n    //ok so first we need to map the z value to a number of degrees\n    //\n    //then with that number of degrees, we need to reduce that to\n    //0 ->360\n    //\n    //then, we need to map this to an RGB value with the color\n    //conversion formulas\n\n    s = 0.9; v = 0.9;\n\n    float dpz= vmaxZ - vminZ;\n    float degreesPerZ = 630.0 / dpz;\n\n    float hueDegrees = z * degreesPerZ + 90.0;\n\n    //limit to 0->360\n    hueDegrees -= 360.0 * floor(hueDegrees / 360.0);\n\n    h = hueDegrees;\n    h /= 60.0;\n    i = int(floor(h));\n    f = h - float(i);\n    p = v * (1.0 - s);\n    q = v * (1.0 - s * f);\n    t = v * (1.0 - s * (1.0 - f));\n\n    //switch(i)\n    if(i == 0)\n    {\n        r = v;\n        g = t;\n        b = p;\n    }\n    else if(i == 1)\n    {\n        r = q;\n        g = v;\n        b = p;\n    }\n    else if(i == 2)\n    {\n        r = p;\n        g = v;\n        b = t;\n    }\n    else if(i == 3)\n    {\n        r = p;\n        g = q;\n        b = v;\n    }\n    else if(i == 4)\n    {\n        r = t;\n        g = p;\n        b = v;\n    }\n    else // i == 5\n    {\n        r = v;\n        g = p;\n        b = q;\n    }\n    return b;\n}\n\n\nfloat convertZToR(float z)\n{\n    float h, s, v;\n    float f, p, q, t;\n    float r,g,b;\n    int i;\n\n    //ok so first we need to map the z value to a number of degrees\n    //\n    //then with that number of degrees, we need to reduce that to\n    //0 ->360\n    //\n    //then, we need to map this to an RGB value with the color\n    //conversion formulas\n\n    s = 0.9; v = 0.9;\n\n    float dpz= vmaxZ - vminZ;\n    float degreesPerZ = 630.0 / dpz;\n\n    float hueDegrees = z * degreesPerZ + 90.0;\n\n    //limit to 0->360\n    hueDegrees -= 360.0 * floor(hueDegrees / 360.0);\n\n    h = hueDegrees;\n    h /= 60.0;\n    i = int(floor(h));\n    f = h - float(i);\n    p = v * (1.0 - s);\n    q = v * (1.0 - s * f);\n    t = v * (1.0 - s * (1.0 - f));\n\n    //switch(i)\n    if(i == 0)\n    {\n        r = v;\n        g = t;\n        b = p;\n    }\n    else if(i == 1)\n    {\n        r = q;\n        g = v;\n        b = p;\n    }\n    else if(i == 2)\n    {\n        r = p;\n        g = v;\n        b = t;\n    }\n    else if(i == 3)\n    {\n        r = p;\n        g = q;\n        b = v;\n    }\n    else if(i == 4)\n    {\n        r = t;\n        g = p;\n        b = v;\n    }\n    else // i == 5\n    {\n        r = v;\n        g = p;\n        b = q;\n    }\n    return r;\n}\n\nvoid main(void) {\n\n    //this is always the same, we fill with 0s if there isnt room\n    gl_FragColor = vec4(varData[0],varData[1],varData[2],1.0);\n\n    \n\n    //gl_FragColor = vec4(varData[0],varData[1],varData[2],1.0);\n\n}\n\n"};



$j(document).ready(function(){
    TWEEN.start();
    webGLStart();

    resizeWindow();

    $j('#earth-canvas').bind('mousewheel',onMouseWheel);
    $j('#earth-canvas').bind('DOMMouseScroll',onMouseWheel);

    $j('#earth-canvas').bind('mousedown',handleMouseDown);
    $j(document).bind('mousemove',handleMouseMove);
    $j('#earth-canvas').bind('mouseup',handleMouseUp);

    frob = new frobController();

    //frob event handlers
    $j('.frobSpanner').live('mousedown',function(e) {
        frob.frobMouseDown(e);
    });

    $j(document).bind('mousemove',function(e) {
        frob.frobMouseMove(e);
    });

    //default viewport sizes
    gl.viewportHeight = 400;
    gl.viewportWidth = 400;

    $j('#earth-canvas')[0].width = gl.viewportHeight;
    $j('#earth-canvas')[0].height = gl.viewportWidth;

    eq = "z = 2.0 * cos(t*time + x + y) * (0.5 + (sin(x*x + y*x + t*time) - 0.5)/(1.0 + 0.1*(x * x + y * y + cos(v*time)))) + g * 1.25 * (pow(xOriginal,2.0) + pow(yOriginal,2.0))";
    prob = new Problem(eq,[],true);
    template = new ShaderTemplateRenderer(prob);
    solver = template.solver; solver.solvePass(); 

    $j('#equationStringTextArea').keydown(function() { startOrResetTimeout(); });
    lastEquation = $j('#equationStringTextArea').val().replace(/\s/g,'');

    $j('#providedEquations').change(function(e) { changeSelected(); });


    //now do the node stuff if it is defined

    doNodeStuff();
});

</script>


</head>


<body>


<div id="equationControlHolder" class="buttonGradient smooth controlHolder">
        <h1 style="margin-bottom:10px">Equation:
             <select id="providedEquations" style="display:inline-block">
                <option value="z = 2.0 * cos(t*time + x + y) * (0.5 + (sin(x*x + y*x + t*time) - 0.5)/(1.0 + 0.1*(x * x + y * y + cos(v*time)))) + g * 1.25 * (pow(xOriginal,2.0) + pow(yOriginal,2.0));">Vanilla</option>
             <option value="z = 2.0 * cos(x + y) * (0.5 + (sin(x*x + y*x) - 0.5)/(1.0 + 0.1*(x * x + y * y ))) + g * 1.25 * (pow(xOriginal,2.0) + pow(yOriginal,2.0));">Vanilla (Static)</option>
                <option value="z = a*sin(5.5*x - t*time)*cos(5.0*y + t*time)+b*0.5*x*x+ c*abs(y) - 1.0">Wavy</option>
                <option value="z = a*sin(5.5*x)*cos(5.0*y)+b*0.5*x*x+ c*abs(y) - 1.0">Wavy (Static)</option>
                <option value="z = a*sin(pow(x,2.0) + pow(y,2.0) + t*time) / (abs(x*y) + 1.0) + c*0.65 * (x*x/9.0 + y*y/9.0)">Fun one</option>
                <option value="z = a*sin(pow(x,2.0) + pow(y,2.0)) / (abs(x*y) + 1.0) + c*0.65 * (x*x/9.0 + y*y/9.0)">Fun one (Static)</option>
                <option value="z = 0.0 - a*0.5*sin(x*y + t*time*0.7) + b*(cos(v*time*0.3) * pow(x/3.0,2.0) + pow(y/3.0,2.0)) + c*0.5*cos(x * y * 3.0 + t*time * 1.0) + x*0.1 + d*(pow(x/3.0,2.0) + pow(y/3.0,2.0))">Mini Boss</option>
                <option value="z = 0.0 - a*0.5*sin(x*y) + b*(cos(0.3) * pow(x/3.0,2.0) + pow(y/3.0,2.0)) + c*0.5*cos(x * y * 3.0) + x*0.1 + d*(pow(x/3.0,2.0) + pow(y/3.0,2.0))">Mini Boss (Static)</option>
                <option value="z = a*1.0*sin(pow(x,3.0) + pow(y,3.0) + t*time*0.5) / (abs(x*y) + 2.0) + b*1.65 * (x*x/9.0 + y*y/9.0)">Lasagna</option>
                <option value="z = a*1.0*sin(pow(x,3.0) + pow(y,3.0)) / (abs(x*y) + 2.0) + b*1.65 * (x*x/9.0 + y*y/9.0)">Lasagna (Static)</option>
            </select>

        
        </h1>
        <textarea rows="4" id="equationStringTextArea" class="validEquation">Equation here!</textarea>

        <img id="timeoutGif" src="equationTimeout.gif" class="equationTimeout smooth" />

        <div style="display:inline-block;width:140px;position:relative;top:-20px;">
                      <a onclick="javascript:solver.baseSearchWindow.reset();" class="uiButtonWhite" style="display:inline-block">Reset Window</a> 
        </div>

        <table style="width:100%;margin-bottom:10px;">
            <tr style="width:100%;text-align:center">
                <td class="controlCol">
                    <h4>Search Variables</h4>
                </td>
                <td class="controlCol">
                    <h4>Fixed / Constant Variables</h4>
                </td>
            </tr>
            <tr style="width:100%;text-align:center">
                <td class="controlCol">
                    <div id="sampleVariablesList">

                    </div>
                </td>
                <td class="controlCol">
                    <div id="fixedVariablesList">

                    </div>
                </td>
            </tr>
        </table>
</div>

<div id="minimumControlHolder" class="buttonGradient smooth controlHolder">
    <h4>Host Minimum: </h4>
        <p id="hostMinimum">
        Unknown
        </p>

    <h4> Network Minimum: </h4>
        <p id="networkMinimum">
        Unknown
        </p>
</div>

<canvas id="earth-canvas" width="500px" height="500px"></canvas>

<div id="holder-for-screenshots">
</div>

<div id="networkMessages">
<p>Network Messages</p>
</div>

<img src="loading.gif"class="loadingGif"/>

<div id="topNotifyBarWrapper" style="width:100%;text-align:center;position:absolute;top:0px;">
    <div id="topNotifyBarHolder" class="buttonGradient smooth topNotifyBar topNotifyBarHidden bubbleToStop" onclick="topNotifyClear()" style="display:inline-block;cursor:pointer">
        <div id="topNotifyBar">

        </div>
    </div>
</div>

</body>

</html>