"
Modeling2.html
From 2013.igem.org
(Difference between revisions)
| (4 intermediate revisions not shown) | |||
| Line 299: | Line 299: | ||
}; | }; | ||
this.plot = function(){ | this.plot = function(){ | ||
| - | |||
plotSolution(this.yone, this.ytwo, graphyMin); | plotSolution(this.yone, this.ytwo, graphyMin); | ||
}; | }; | ||
| Line 467: | Line 466: | ||
nullClines[0].calculate(); | nullClines[0].calculate(); | ||
nullClines[1].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 485: | Line 545: | ||
makeAxis('Time', 'Concentration', graph2yMin); | makeAxis('Time', 'Concentration', graph2yMin); | ||
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; | ||
| + | } | ||
| + | } | ||
| Line 497: | Line 573: | ||
} | } | ||
} | } | ||
| - | + | slider.draw(); | |
| - | + | ||
| - | + | ||
nullClines[0].plot(); | nullClines[0].plot(); | ||
nullClines[1].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
