Modeling2.html

From 2013.igem.org

(Difference between revisions)
 
(44 intermediate revisions not shown)
Line 13: Line 13:
size(600, 1050);  
size(600, 1050);  
-
frameRate(1);
+
frameRate(20);
 +
 
var tol = 0.01;  
var tol = 0.01;  
//var dead = true;
//var dead = true;
Line 100: Line 101:
var dieHeadingX = 240;
var dieHeadingX = 240;
var dieHeadingY = 20;  
var dieHeadingY = 20;  
-
 
Line 140: Line 140:
};
};
-
 
Line 150: Line 149:
     fill(0, 0, 0);
     fill(0, 0, 0);
};
};
-
 
var makeAxis = function(xlabel, ylabel, min){
var makeAxis = function(xlabel, ylabel, min){
Line 180: Line 178:
         text(xlabel, graphxMin + graphWidth/2, min + 50);
         text(xlabel, graphxMin + graphWidth/2, min + 50);
};
};
-
 
var plotSolution = function(t, y, min, color) {
var plotSolution = function(t, y, min, color) {
-
     /*Other ways to do this. We already now which graph based on min*/   
+
      
     if (min >graphyMin){  
     if (min >graphyMin){  
Line 194: Line 191:
         stroke(56, 79, 224);
         stroke(56, 79, 224);
     }
     }
 +
 +
     
     var point1X = (t[0] - xMin)*graphWidth/xLength +graphxMin;  
     var point1X = (t[0] - xMin)*graphWidth/xLength +graphxMin;  
     var point1Y= - (y[0] - yMin)*graphHeight/yLength +min;
     var point1Y= - (y[0] - yMin)*graphHeight/yLength +min;
Line 200: Line 199:
     strokeWeight(2);
     strokeWeight(2);
 +
  for (var kk = -1; kk < t.length; kk++){
 +
        point2X = (t[kk] - xMin)*(graphWidth/xLength) +    graphxMin;
 +
        point2Y =  - (y[kk] - yMin)*graphHeight/yLength + min;
 +
if (point2X <= graphxMax)
 +
if (point2X >= graphxMin)
 +
if (point2Y <= min)
 +
if(point2Y >= (min - graphWidth))
 +
if(point1X <= graphxMax)
 +
if(point1X >= graphxMin)
 +
if(point1Y < min)
 +
if(point1Y > (min - graphWidth))
 +
line(point1X, point1Y, point2X, point2Y);
-
    for (var k = 1; k < t.length; k++){
+
          
-
         point2X = (t[k] - xMin)*(graphWidth/xLength) +    graphxMin;
+
-
        point2Y =  - (y[k] - yMin)*graphHeight/yLength + min;
+
-
 
+
-
        if (point2X <= graphxMax && point2X >= graphxMin && point2Y <= min && point2Y >= (min - graphWidth) &&  point1X <= graphxMax && point1X >= graphxMin && point1Y < min && point1Y > (min - graphWidth) )
+
-
        line(point1X, point1Y, point2X, point2Y);
+
-
 
+
         point1X = point2X;
         point1X = point2X;
-
         point1Y = point2Y;   
+
         point1Y = point2Y;  } 
 +
};
-
       
 
-
    }
 
-
 
-
 
-
};
 
var odefunX = function(y1, y2){
var odefunX = function(y1, y2){
Line 223: Line 224:
         return sol;  
         return sol;  
     };
     };
-
 
-
 
-
 
var odeSolution = function (icONE, icTWO) {
var odeSolution = function (icONE, icTWO) {
Line 242: Line 240:
     var odePart;  
     var odePart;  
-
     while (this.yone[counter] < 2 && this.yone[counter] > 0 && this.ytwo[counter] > 0 && this.ytwo[counter] < 2){
+
    var on = true;
-
        odePart = odefunX(this.yone[counter], this.ytwo[counter]);
+
 
-
        this.yone.push(- odePart[0]*dt + this.yone[counter]);
+
     while(on){
-
        this.ytwo.push(- odePart[1]*dt + this.ytwo[counter]);
+
 
-
        counter++;
+
        if (this.yone[counter] < 2){
 +
            if (this.yone[counter] > 0 ){
 +
                if (this.ytwo[counter] > 0){
 +
                    if (this.ytwo[counter] < 2) {
 +
                                odePart = odefunX(this.yone[counter], this.ytwo[counter]);
 +
                                this.yone.push(- odePart[0]*dt + this.yone[counter]);
 +
                                this.ytwo.push(- odePart[1]*dt + this.ytwo[counter]);
 +
                                counter++;
 +
 
 +
                    }                    else{
 +
                        on = false;
 +
                    }}                    else{
 +
                        on = false;
 +
                    }}
 +
                                    else{
 +
                        on = false;
 +
                    }}
 +
                    else{
 +
                        on = false;
 +
                    }
 +
 
     }
     }
 +
on = true;
     this.yone.reverse();
     this.yone.reverse();
     this.ytwo.reverse();  
     this.ytwo.reverse();  
   
   
-
 
+
      while(on){
-
    while (this.yone[counter] < 2 && this.yone[counter] > 0.1 && this.ytwo[counter] > 0.1 && this.ytwo[counter] < 2){
+
 
 +
        if (this.yone[counter] < 2){
 +
            if (this.yone[counter] > 0.1 ){
 +
                if (this.ytwo[counter] > 0.1){
 +
                    if (this.ytwo[counter] < 2) {
         odePart = odefunX(this.yone[counter], this.ytwo[counter]);
         odePart = odefunX(this.yone[counter], this.ytwo[counter]);
         this.yone.push(odePart[0]*dt + this.yone[counter]);
         this.yone.push(odePart[0]*dt + this.yone[counter]);
         this.ytwo.push(odePart[1]*dt + this.ytwo[counter]);
         this.ytwo.push(odePart[1]*dt + this.ytwo[counter]);
-
        counter++;
+
                                counter++;
 +
 
 +
                    }                    else{
 +
                        on = false;
 +
                    }}                    else{
 +
                        on = false;
 +
                    }}
 +
                                    else{
 +
                        on = false;
 +
                    }}
 +
                    else{
 +
                        on = false;
 +
                    }
 +
 
     }
     }
 +
 +
};
};
     this.plot = function(){
     this.plot = function(){
Line 267: Line 305:
-
var tail = function(x, y1, y2, theta) {
+
var flagellum = function(x, y1, y2, theta) {
     var cx1 = x - s  + 0.01*s*sin(theta);
     var cx1 = x - s  + 0.01*s*sin(theta);
     var cx2 = x - s*2 + 0.01*s*sin(theta+90);
     var cx2 = x - s*2 + 0.01*s*sin(theta+90);
Line 294: Line 332:
     stroke(111, 96, 86);
     stroke(111, 96, 86);
     rect(-s, -s/2, s*2, s, s);
     rect(-s, -s/2, s*2, s, s);
 +
     strokeWeight(1);
     strokeWeight(1);
     noFill();
     noFill();
-
     tail(-s, 0, 0, 0.25 * 1 % 360);
+
 
-
     tail(-s, -1, -3, 30 + 0.25 * 1 % 360);
+
 
-
     tail(-s, 1, 3, 60 + 0.25 * 1 % 360);
+
 
-
     tail(-s, 0, 2, 90 + 0.25 * 1 % 360);
+
 
-
     tail(-s, 0, -2, 90 + 0.25 * 1 % 360);
+
     flagellum(-s, 0, 0, 0.25 * frameCount % 360);
 +
     flagellum(-s, -1, -3, 30 + 0.25 * frameCount % 360);
 +
     flagellum(-s, 1, 3, 60 + 0.25 * frameCount % 360);
 +
     flagellum(-s, 0, 2, 90 + 0.25 * frameCount % 360);
 +
     flagellum(-s, 0, -2, 90 + 0.25 * frameCount % 360);
     resetMatrix();
     resetMatrix();
 +
  // if (!dead){
 +
  // lastF++;
 +
  // }
};
};
Line 314: Line 360:
     var counter = 0;  
     var counter = 0;  
     var odePart;  
     var odePart;  
-
    while (this.yone[counter] < 2 && this.yone[counter] > 0.05 && this.ytwo[counter] > 0.05 && this.ytwo[counter] < 2){
+
var on = true;
 +
 
 +
while(on){
 +
 
 +
        if (this.yone[counter] < 2){
 +
            if (this.yone[counter] > 0.1 ){
 +
                if (this.ytwo[counter] > 0.1){
 +
                    if (this.ytwo[counter] < 2) {
         odePart = odefunX(this.yone[counter], this.ytwo[counter]);
         odePart = odefunX(this.yone[counter], this.ytwo[counter]);
         this.yone.push(odePart[0]*dt + this.yone[counter]);
         this.yone.push(odePart[0]*dt + this.yone[counter]);
Line 320: Line 373:
         counter++;
         counter++;
         this.t.push(counter*dt);
         this.t.push(counter*dt);
 +
 +
                    }                    else{
 +
                        on = false;
 +
                    }}                    else{
 +
                        on = false;
 +
                    }}
 +
                                    else{
 +
                        on = false;
 +
                    }}
 +
                    else{
 +
                        on = false;
 +
                    }
 +
     }
     }
 +
 +
 
         textFont(myFont, 18);
         textFont(myFont, 18);
         fill(0, 0, 0);
         fill(0, 0, 0);
Line 352: Line 420:
   //  drawYeast(graphxMin + graphWidth*5/9 + 10, graphyMin + 45);
   //  drawYeast(graphxMin + graphWidth*5/9 + 10, graphyMin + 45);
};
};
-
 
var mousePressed = function() {
var mousePressed = function() {
Line 361: Line 428:
     mouseOverSlider = false;  
     mouseOverSlider = false;  
};
};
 +
//Setting up arrows to be in Vector field
//Setting up arrows to be in Vector field
Line 428: Line 496:
      
      
     this.moveSlider = function(){
     this.moveSlider = function(){
-
       if (mouseX > x+5 && mouseX < x + w + 10 && mouseY        > y && mouseY < y + h + 30){
+
       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;  
             this.theta = round(((mouseX - x ) / w) * this.max* 10)/10;  
 +
             thetaPlay = this.theta ;  
             thetaPlay = this.theta ;  
             this.myX = (w-30)*(this.theta/this.max) + x + 15;
             this.myX = (w-30)*(this.theta/this.max) + x + 15;
Line 454: Line 527:
var slider = new boxSlider(uiBoxX, uiBoxY, uiWidth, uiHeight, heading, thetaPlay, thetaMax, thetaInterval);
var slider = new boxSlider(uiBoxX, uiBoxY, uiWidth, uiHeight, heading, thetaPlay, thetaMax, thetaInterval);
-
 
var draw = function(){
var draw = function(){
Line 471: Line 543:
     /*Yeast Concentration Box */     
     /*Yeast Concentration Box */     
     drawHeader(graphxMin + 10 , yHeaderY, yHeading);   
     drawHeader(graphxMin + 10 , yHeaderY, yHeading);   
-
 
     makeAxis('Time', 'Concentration', graph2yMin);
     makeAxis('Time', 'Concentration', graph2yMin);
     makeAxis('Yeast', 'E. Coli', graphyMin);
     makeAxis('Yeast', 'E. Coli', graphyMin);
-
 
     if (mouseOverSlider){
     if (mouseOverSlider){
         slider.moveSlider();  
         slider.moveSlider();  
-
         if (mouseX > graphxMin && mouseX < graphxMax && mouseY < graphyMin && mouseY > graphyMax){                       
+
         if (mouseX > graphxMin)
 +
            if ( mouseX < graphxMax )
 +
                if ( mouseY < graphyMin)
 +
                    if (mouseY > graphyMax) {                       
             ballY = mouseY;
             ballY = mouseY;
             ballX = mouseX;
             ballX = mouseX;
Line 488: Line 561:
         }
         }
     }
     }
-
        count = 0;  
+
 
 +
 
 +
 
 +
  count = 0;  
         /*This is for drawing the arrows on the graph*/
         /*This is for drawing the arrows on the graph*/
Line 497: Line 573:
             }
             }
         }
         }
-
 
+
        slider.draw();  
-
        slider.draw();  
+
-
 
+
         nullClines[0].plot();
         nullClines[0].plot();
         nullClines[1].plot();
         nullClines[1].plot();
-
         if (icX < 1 + tol & icX > 1 - tol && icY > 1 - tol && icY < 1 + tol){
+
         if (icX < 1 + tol)
 +
            if (icX > 1 - tol)
 +
                if (icY > 1 - tol)
 +
                    if (icY < 1 + tol){
 +
 
             icX = 1+tol;  
             icX = 1+tol;  
             icY = 1+tol;  
             icY = 1+tol;  
         }
         }
 +
         interactiveSolver(icX, icY);
         interactiveSolver(icX, icY);
Line 513: Line 592:
         fill(56, 79, 224);
         fill(56, 79, 224);
         ellipse(ballX, ballY, 10, 10);
         ellipse(ballX, ballY, 10, 10);
 +
};
};
}
}
};
};
-
 
  </script>  
  </script>  
  <script type="application/javascript">
  <script type="application/javascript">

Latest revision as of 00:21, 28 September 2013

iGEM

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