Modeling2.html
From 2013.igem.org
(Difference between revisions)
(16 intermediate revisions not shown) | |||
Line 240: | Line 240: | ||
var odePart; | var odePart; | ||
- | while ( | + | var on = true; |
- | if (this.yone[counter] < 2 ) | + | |
- | if (this.yone[counter] > 0) | + | while(on){ |
- | + | ||
+ | if (this.yone[counter] < 2){ | ||
+ | if (this.yone[counter] > 0 ){ | ||
+ | if (this.ytwo[counter] > 0){ | ||
if (this.ytwo[counter] < 2) { | 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{ |
- | 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){ | ||
- | + | if (this.yone[counter] < 2){ | |
- | if (this.yone[counter] < 2 ) | + | if (this.yone[counter] > 0.1 ){ |
- | if (this.yone[counter] > 0) | + | if (this.ytwo[counter] > 0.1){ |
- | + | ||
if (this.ytwo[counter] < 2) { | 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++; | |
- | + | ||
- | + | ||
- | + | ||
+ | } else{ | ||
+ | on = false; | ||
+ | }} else{ | ||
+ | on = false; | ||
+ | }} | ||
+ | else{ | ||
+ | on = false; | ||
+ | }} | ||
+ | else{ | ||
+ | on = false; | ||
+ | } | ||
- | + | } | |
- | |||
}; | }; | ||
- | |||
this.plot = function(){ | this.plot = function(){ | ||
plotSolution(this.yone, this.ytwo, graphyMin); | plotSolution(this.yone, this.ytwo, graphyMin); | ||
}; | }; | ||
+ | }; | ||
+ | |||
+ | |||
+ | var flagellum = function(x, y1, y2, theta) { | ||
+ | var cx1 = x - s + 0.01*s*sin(theta); | ||
+ | var cx2 = x - s*2 + 0.01*s*sin(theta+90); | ||
+ | var x2 = x - s*3; | ||
+ | var cy1 = y1 + 2*s*cos(theta); | ||
+ | var cy2 = y1 - 2*s*cos(theta+90); | ||
+ | bezier(x, y1, cx1, cy1, cx2, cy2, x2, y2); | ||
+ | |||
+ | }; | ||
+ | |||
+ | var s = 9; | ||
+ | |||
+ | var drawYeast = function(xx, yy){ | ||
+ | fill(194, 85, 72); | ||
+ | noStroke(); | ||
+ | ellipse(xx + 5 , yy + 5 , 20, 20); | ||
+ | ellipse(xx, yy, 20, 20); | ||
+ | }; | ||
+ | |||
+ | var drawBacteria = function(xx, yy){ | ||
+ | translate(xx, yy); | ||
+ | rotate(3.14*4/3); | ||
+ | // | ||
+ | strokeWeight(2); | ||
+ | fill(124, 159, 139); | ||
+ | stroke(111, 96, 86); | ||
+ | rect(-s, -s/2, s*2, s, s); | ||
+ | |||
+ | strokeWeight(1); | ||
+ | noFill(); | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | 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(); | ||
+ | // if (!dead){ | ||
+ | // lastF++; | ||
+ | // } | ||
+ | }; | ||
+ | |||
+ | var interactiveSolver = function (icONE, icTWO) { | ||
+ | this.yone = []; | ||
+ | this.ytwo = []; | ||
+ | this.t = []; | ||
+ | t.push(0); | ||
+ | this.yone.push(icONE); | ||
+ | this.ytwo.push(icTWO); | ||
+ | |||
+ | var counter = 0; | ||
+ | var odePart; | ||
+ | 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]); | ||
+ | this.yone.push(odePart[0]*dt + this.yone[counter]); | ||
+ | this.ytwo.push(odePart[1]*dt + this.ytwo[counter]); | ||
+ | counter++; | ||
+ | this.t.push(counter*dt); | ||
+ | |||
+ | } else{ | ||
+ | on = false; | ||
+ | }} else{ | ||
+ | on = false; | ||
+ | }} | ||
+ | else{ | ||
+ | on = false; | ||
+ | }} | ||
+ | else{ | ||
+ | on = false; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | textFont(myFont, 18); | ||
+ | fill(0, 0, 0); | ||
+ | textAlign(CENTER, CENTER); | ||
+ | |||
+ | noFill(); | ||
+ | if (this.yone[counter] > 0.8) { | ||
+ | |||
+ | text("The Population Survives!", graphxMin + graphWidth/2, dieHeadingY); | ||
+ | //dead = false; | ||
+ | stroke(0, 250, 0); | ||
+ | } | ||
+ | else { | ||
+ | text("The Population Dies", graphxMin + graphWidth/2, dieHeadingY); | ||
+ | //dead = true; | ||
+ | stroke(250, 0, 0); | ||
+ | } | ||
+ | rect(graphxMin, 7, graphWidth, 80, 10); | ||
+ | |||
+ | |||
+ | plotSolution(this.yone, this.ytwo, graphyMin, 1); | ||
+ | plotSolution(this.t, this.ytwo, graph2yMin); | ||
+ | plotSolution(this.t, this.yone, graph2yMin); | ||
+ | |||
+ | |||
+ | var eColiY= - (this.ytwo[0] - yMin)*graphHeight/yLength + graph2yMin; | ||
+ | var yeastY= -(this.yone[0] - yMin)*graphHeight/yLength + graph2yMin; | ||
+ | drawYeast(graphxMin, yeastY); | ||
+ | drawBacteria(graphxMin, eColiY); | ||
+ | // drawBacteria(graphxMin - 40, graphyMin - graphHeight*5/8); | ||
+ | // drawYeast(graphxMin + graphWidth*5/9 + 10, graphyMin + 45); | ||
+ | }; | ||
+ | |||
+ | 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 304: | 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