Modeling2.html

From 2013.igem.org

(Difference between revisions)
 
(9 intermediate revisions not shown)
Line 421: Line 421:
};
};
 +
var mousePressed = function() {
 +
    mouseOverSlider = true;
 +
};
 +
 +
var mouseReleased = function() {
 +
    mouseOverSlider = false;
 +
};
 +
 +
 +
//Setting up arrows to be in Vector field
 +
    /*Vector Field */
 +
    var arrows =  [];
 +
    var funcX = xMin + dx/2; /* Start X */
 +
    var funcY = yMin + dy/2;
 +
    var graphX = graphxMin + boxWidth/2;
 +
    var graphY = graphyMin - boxHeight/2;
 +
    var maxLength = 0;
 +
    var count = 0;
 +
 +
    /*This is for finding the actual values in the x and y direction*/
 +
    for (var k = 0; k < arrowsinRow; k++) {
 +
        for (var l = 0; l < arrowsinCol; l++){
 +
            arrows.push(new arrow(funcX, funcY, graphX, graphY));
 +
            arrows[count].calculate();
 +
            funcX += dx;
 +
            graphX+= boxWidth;
 +
 +
            /* Find Max Length to scale arrow lengths */
 +
            if (maxLength < arrows[count].length) {
 +
                maxLength = arrows[count].length;
 +
            }
 +
            count++;
 +
        }
 +
          funcY += dy;
 +
          funcX = xMin + dx;
 +
          graphX = graphxMin + boxWidth/2;
 +
          graphY -= boxHeight;
 +
    }
 +
 +
 +
    var nullClines = [];
 +
    nullClines.push(new odeSolution(1.001, 1.001));
 +
    nullClines.push(new odeSolution(0.999, 0.999));
 +
    nullClines[0].calculate();
 +
    nullClines[1].calculate();
 +
 +
var boxSlider = function(x, y, w, h, heading, theta, max, thetaInterval) {
 +
    this.x = x;
 +
    this.y = y;
 +
    this.w = w;
 +
    this.h = h;
 +
    this.heading = heading;
 +
    this.theta = theta;
 +
    this.max = max;
 +
    this.myX = (w-30)*(this.theta/this.max) + this.x + 15;
 +
    this.myY = this.y + 28;
 +
 +
   
 +
    this.draw = function(){
 +
    noStroke();
 +
    fill(50, 50, 50);
 +
    rect(x+2, y+2, w, h, 8);
 +
    fill(255, 255, 255, 230);
 +
    rect(x, y, w, h, 8);
 +
    textFont(myFont, 15);
 +
    fill(0, 0, 0);
 +
    textAlign(LEFT, BOTTOM);
 +
    text(heading + this.theta, x+10, y+16);
 +
    fill(50, 50, 50, 220);
 +
    rect(x+10, y+25, w-20, 6, 6);
 +
    ellipse(this.myX, this.myY, 15, 15);
 +
 
 +
};
 +
   
 +
    this.moveSlider = function(){
 +
      if (mouseX > x+5)
 +
            if (mouseX < x + w + 10)
 +
                if (mouseY < y + h + 30)
 +
                    if (mouseY        > y){
 +
 +
            this.theta = round(((mouseX - x ) / w) * this.max* 10)/10;
 +
 +
            thetaPlay = this.theta ;
 +
            this.myX = (w-30)*(this.theta/this.max) + x + 15;
 +
            this.draw(); 
 +
 +
            count = 0 ;
 +
            maxLength = 0;
 +
            for (var i = 0; i < arrowsinRow; i++){
 +
            for (var j = 0; j < arrowsinCol; j++){
 +
                arrows[count].calculate();  /*maxLength is to scale everything, boxHeight is the */
 +
             
 +
                if (maxLength < arrows[count].length) {
 +
                maxLength = arrows[count].length;
 +
            }
 +
            count++;
 +
            }
 +
        }
 +
            nullClines[0].calculate();
 +
            nullClines[1].calculate();
 +
 +
      }
 +
    };
 +
};
 +
 +
var slider = new boxSlider(uiBoxX, uiBoxY, uiWidth, uiHeight, heading, thetaPlay, thetaMax, thetaInterval);
var draw = function(){
var draw = function(){
Line 440: Line 546:
     makeAxis('Yeast', 'E. Coli', graphyMin);
     makeAxis('Yeast', 'E. Coli', graphyMin);
 +
    if (mouseOverSlider){
 +
 +
        slider.moveSlider();
 +
        if (mouseX > graphxMin)
 +
            if ( mouseX < graphxMax )
 +
                if ( mouseY < graphyMin)
 +
                    if (mouseY > graphyMax) {                     
 +
            ballY = mouseY;
 +
            ballX = mouseX;
 +
            icX =  ((ballX - graphxMin)/graphWidth)*xLength + xMin;
 +
            icY =  ((graphyMin - ballY)/graphHeight)*yLength+ yMin;
 +
            eHeading = "Initial E. Coli Concentration: " + round(icY*100)/100;
 +
            yHeading = "Initial Yeast Concentration: " + round(100*icX)/100;         
 +
        }
 +
    }
 +
 +
 +
 +
  count = 0;
 +
 +
        /*This is for drawing the arrows on the graph*/
 +
        for (var i = 0; i < arrowsinRow; i++){
 +
            for (var j = 0; j < arrowsinCol; j++){
 +
                arrows[count].drawOn(maxLength, boxHeight);  /*maxLength is to scale everything, boxHeight is the */
 +
                count++;
 +
            }
 +
        }
 +
        slider.draw();
 +
        nullClines[0].plot();
 +
        nullClines[1].plot();
 +
 +
        if (icX < 1 + tol)
 +
            if (icX > 1 - tol)
 +
                if (icY > 1 - tol)
 +
                    if (icY < 1 + tol){
 +
 +
            icX = 1+tol;
 +
            icY = 1+tol;
 +
 +
        }
 +
 +
        interactiveSolver(icX, icY);
 +
        stroke(56, 79, 224);
 +
        fill(56, 79, 224);
 +
        ellipse(ballX, ballY, 10, 10);
};
};

Latest revision as of 00:21, 28 September 2013

iGEM

Retrieved from "http://2013.igem.org/Modeling2.html"