Modeling2.html
From 2013.igem.org
(Difference between revisions)
(45 intermediate revisions not shown) | |||
Line 10: | Line 10: | ||
<script src="http://fablabo.net/mediawiki/extensions/processingjs/processing-1.3.6.min.js"></script> <!-- Imporint Processingjs Library --> | <script src="http://fablabo.net/mediawiki/extensions/processingjs/processing-1.3.6.min.js"></script> <!-- Imporint Processingjs Library --> | ||
- | <script> | + | <script>var sketchProc=function(processingInstance){ with (processingInstance){ |
- | + | ||
- | var sketchProc=function(processingInstance){ with (processingInstance){ | + | |
size(600, 1050); | size(600, 1050); | ||
- | frameRate( | + | frameRate(20); |
+ | |||
var tol = 0.01; | var tol = 0.01; | ||
//var dead = true; | //var dead = true; | ||
Line 102: | Line 101: | ||
var dieHeadingX = 240; | var dieHeadingX = 240; | ||
var dieHeadingY = 20; | var dieHeadingY = 20; | ||
- | |||
Line 142: | Line 140: | ||
}; | }; | ||
- | |||
Line 152: | Line 149: | ||
fill(0, 0, 0); | fill(0, 0, 0); | ||
}; | }; | ||
- | |||
var makeAxis = function(xlabel, ylabel, min){ | var makeAxis = function(xlabel, ylabel, min){ | ||
Line 182: | 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) { | ||
- | + | ||
if (min >graphyMin){ | if (min >graphyMin){ | ||
Line 196: | 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 202: | 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); | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
point1X = point2X; | point1X = point2X; | ||
- | point1Y = point2Y; | + | point1Y = point2Y; } |
+ | }; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
var odefunX = function(y1, y2){ | var odefunX = function(y1, y2){ | ||
Line 225: | Line 224: | ||
return sol; | return sol; | ||
}; | }; | ||
- | |||
- | |||
- | |||
var odeSolution = function (icONE, icTWO) { | var odeSolution = function (icONE, icTWO) { | ||
Line 244: | Line 240: | ||
var odePart; | var odePart; | ||
- | while (this.yone[counter] < 2 | + | var on = true; |
- | + | ||
- | + | while(on){ | |
- | + | ||
- | + | 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){ | |
- | + | ||
+ | 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++; | |
+ | |||
+ | } else{ | ||
+ | on = false; | ||
+ | }} else{ | ||
+ | on = false; | ||
+ | }} | ||
+ | else{ | ||
+ | on = false; | ||
+ | }} | ||
+ | else{ | ||
+ | on = false; | ||
+ | } | ||
+ | |||
} | } | ||
+ | |||
+ | |||
}; | }; | ||
this.plot = function(){ | this.plot = function(){ | ||
Line 269: | Line 305: | ||
- | var | + | 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 296: | 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(); | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | 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 316: | Line 360: | ||
var counter = 0; | var counter = 0; | ||
var odePart; | 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]); | 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 322: | 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 354: | 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 363: | Line 428: | ||
mouseOverSlider = false; | mouseOverSlider = false; | ||
}; | }; | ||
+ | |||
//Setting up arrows to be in Vector field | //Setting up arrows to be in Vector field | ||
Line 430: | Line 496: | ||
this.moveSlider = function(){ | this.moveSlider = function(){ | ||
- | if (mouseX > x+5 | + | 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 456: | 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 473: | 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 | + | if (mouseX > graphxMin) |
+ | if ( mouseX < graphxMax ) | ||
+ | if ( mouseY < graphyMin) | ||
+ | if (mouseY > graphyMax) { | ||
ballY = mouseY; | ballY = mouseY; | ||
ballX = mouseX; | ballX = mouseX; | ||
Line 490: | Line 561: | ||
} | } | ||
} | } | ||
- | + | ||
+ | |||
+ | |||
+ | count = 0; | ||
/*This is for drawing the arrows on the graph*/ | /*This is for drawing the arrows on the graph*/ | ||
Line 499: | 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 (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 515: | 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