"
Team:Acton-BoxboroughRHS/Simulations
From 2014hs.igem.org
(Difference between revisions)
| (77 intermediate revisions not shown) | |||
| Line 50: | Line 50: | ||
float:left; | float:left; | ||
| - | margin-right: | + | margin-right:7px; |
/*makes spaces between each list element*/ | /*makes spaces between each list element*/ | ||
font-family:"Arial"; | font-family:"Arial"; | ||
border:1px solid black; | border:1px solid black; | ||
| + | border-radius:5px; | ||
border-bottom:none; | border-bottom:none; | ||
| - | padding: | + | padding:15px; |
| - | width: | + | width:60px; |
text-align:center; | text-align:center; | ||
| Line 70: | Line 71: | ||
color:yellow; | color:yellow; | ||
text-shadow:1px 1px 1px black; | text-shadow:1px 1px 1px black; | ||
| + | } | ||
| + | #myCanvas{ | ||
| + | border-radius:8px; | ||
} | } | ||
</style> | </style> | ||
| Line 86: | Line 90: | ||
| - | <body | + | <body background="https://c9.io/emykion/new_work_space/workspace/igemback.png"> |
<div align="center"> | <div align="center"> | ||
| - | <table width="900" cellspacing="0" cellpadding="0" style="padding-top:0px;padding-bottom: 5px | + | <table width="900" cellspacing="0" cellpadding="0" style="padding-top:0px;padding-bottom: 5px"> |
<tr> | <tr> | ||
<td align="center"> | <td align="center"> | ||
| - | + | <img height=220px width=950px src="https://preview.c9.io/ab_igem/igem2014/copy.jpg?_c9_id=livepreview0&_c9_host=https://ide.c9.io" alt="ABRHS"> | |
| - | <img src=" | + | |
</td> | </td> | ||
</tr> | </tr> | ||
</table> | </table> | ||
| + | <!-- | ||
<p style="font-family:arial">Note that this is a prototype site. For the real wiki, go <a href="https://2014hs.igem.org/Team:Acton-BoxboroughRHS">here</a>.</p> | <p style="font-family:arial">Note that this is a prototype site. For the real wiki, go <a href="https://2014hs.igem.org/Team:Acton-BoxboroughRHS">here</a>.</p> | ||
| + | --> | ||
</div> | </div> | ||
<div id="navbar"> | <div id="navbar"> | ||
| Line 108: | Line 113: | ||
<li><a href="https://2014hs.igem.org/Team:Acton-BoxboroughRHS/Safety">Safety</a></li> | <li><a href="https://2014hs.igem.org/Team:Acton-BoxboroughRHS/Safety">Safety</a></li> | ||
<li><a href="https://2014hs.igem.org/Team:Acton-BoxboroughRHS/Research">Research</a></li> | <li><a href="https://2014hs.igem.org/Team:Acton-BoxboroughRHS/Research">Research</a></li> | ||
| + | <li><a href="https://2014hs.igem.org/Team:Acton-BoxboroughRHS/Labs">Labs</a></li> | ||
| + | |||
</ul> | </ul> | ||
| Line 116: | Line 123: | ||
| - | + | <br></br> | |
| + | <br></br> | ||
<h style="font-size:50px;font-family:Arial">Simulations</h> | <h style="font-size:50px;font-family:Arial">Simulations</h> | ||
| + | <!-- | ||
| + | <p style="font-size:12px;font-family:Arial;color:red">Note that this interactive simulation is still under construction:</p> | ||
| + | --> | ||
| + | <br></br> | ||
| + | |||
| + | <canvas id="myCanvas" style="border:1px solid #d3d3d3;"> | ||
| + | Your browser does not support the HTML5 canvas tag.</canvas> | ||
| + | <br></br> | ||
| + | <div style="background-color:green"> | ||
| + | <button text="RBS" onclick="plas_f(0)">RBS</button> | ||
| + | <button text="Promoter" onclick="plas_f(1)">Promoter</button> | ||
| + | <button text="ORF" onclick="plas_f(2)">ORF</button> | ||
| + | <button text="Terminator" onclick="plas_f(3)">Terminator</button> | ||
| + | <button text="Backbone" onclick="plas_f(4)">Backbone</button> | ||
| + | </div> | ||
| + | <script> | ||
| + | var c=document.getElementById("myCanvas"); | ||
| + | var ctx=c.getContext("2d"); | ||
| + | |||
| + | c.width=800; | ||
| + | c.height=610; | ||
| + | |||
| + | /* | ||
| + | ctx.beginPath(); | ||
| + | ctx.lineWidth="2" | ||
| + | ctx.strokeStyle="red"; | ||
| + | ctx.rect(0,0, 100, 100) | ||
| + | ctx.stroke(); | ||
| + | */ | ||
| + | var t=0; | ||
| + | |||
| + | |||
| + | |||
| + | var plas=[0,0,0,0,0]; | ||
| + | //rbs, pro, orf, ter, bac | ||
| + | console.log(plas); | ||
| + | |||
| + | function plas_f(x){ | ||
| + | plas=[0,0,0,0,0]; | ||
| + | plas[x]=1; | ||
| + | console.log(plas); | ||
| + | } | ||
| + | |||
| + | |||
| + | function clock(i){ | ||
| + | i%=2*Math.PI; | ||
| + | return 4*Math.cos(i); | ||
| + | } | ||
| + | |||
| + | function draw(){ | ||
| + | ctx.fillStyle="rgb(245,245,245)"; | ||
| + | ctx.fillRect(0,0,c.width,c.height); | ||
| + | |||
| + | |||
| + | ctx.fillStyle="black"; | ||
| + | |||
| + | ctx.font = "30px Arial"; | ||
| + | ctx.fillText("Plasmid",110,150+clock(t+3)); | ||
| + | |||
| + | ctx.font = "12px Arial"; | ||
| + | ctx.fillText("Backbone",300,470+clock(t+5)); | ||
| + | |||
| + | ctx.font = "10px Arial"; | ||
| + | ctx.fillText("RBS",220,300+clock(t+6)); | ||
| + | |||
| + | ctx.font = "10px Arial"; | ||
| + | ctx.fillText("Promoter",290,230+clock(t+1)); | ||
| + | |||
| + | ctx.font = "10px Arial"; | ||
| + | ctx.fillText("ORF",380,220+clock(t+2)); | ||
| + | |||
| + | ctx.font = "10px Arial"; | ||
| + | ctx.fillText("Terminator",450,300+clock(t+1.5)); | ||
| + | |||
| + | ctx.strokeStyle="green"; | ||
| + | ctx.beginPath(); | ||
| + | ctx.arc(350,350,100,0, Math.PI); | ||
| + | ctx.stroke(); | ||
| + | |||
| + | ctx.strokeStyle="red"; | ||
| + | ctx.beginPath(); | ||
| + | ctx.arc(350,350,100,Math.PI,1.25*Math.PI); | ||
| + | ctx.stroke(); | ||
| + | |||
| + | ctx.strokeStyle="blue"; | ||
| + | ctx.beginPath(); | ||
| + | ctx.arc(350,350,100,1.25*Math.PI,1.5*Math.PI); | ||
| + | ctx.stroke(); | ||
| + | |||
| + | ctx.strokeStyle="orange"; | ||
| + | ctx.beginPath(); | ||
| + | ctx.arc(350,350,100,1.5*Math.PI,1.75*Math.PI); | ||
| + | ctx.stroke(); | ||
| + | |||
| + | ctx.strokeStyle="pink"; | ||
| + | ctx.beginPath(); | ||
| + | ctx.arc(350,350,100,1.75*Math.PI,0); | ||
| + | ctx.stroke(); | ||
| + | |||
| + | t+=Math.PI/36; | ||
| + | } | ||
| + | function render(){ | ||
| + | |||
| + | draw(); | ||
| + | /* | ||
| + | var un; | ||
| + | for(var i=1;i<5;i+=1){ | ||
| + | if(plas[i]==1){ | ||
| + | un=plas.indexOf(1); | ||
| + | } | ||
| + | } | ||
| + | */ | ||
| + | switch(plas.indexOf(1)){ | ||
| + | case(0): | ||
| + | ctx.font = "12px Arial"; | ||
| + | ctx.fillText("The Ribosome Binding Site is the location where the bacterial ribosomes binds to the strand.",5,550+clock(t+1)); | ||
| + | break; | ||
| + | case(1): | ||
| + | ctx.font = "12px Arial"; | ||
| + | ctx.fillText("The Promoter encourages the binding of RNA polymerase to the strand.",5,550+clock(t+1)); | ||
| + | break; | ||
| + | case(2): | ||
| + | ctx.font = "12px Arial"; | ||
| + | ctx.fillText("The Open Reading Frame is the actual gene that is to be expressed.",5,550+clock(t+1)); | ||
| + | break; | ||
| + | case(3): | ||
| + | ctx.font = "12px Arial"; | ||
| + | ctx.fillText("The Terminator stops the transcription of the DNA.",5,550+clock(t+1)); | ||
| + | break; | ||
| + | case(4): | ||
| + | ctx.font = "12px Arial"; | ||
| + | ctx.fillText("The Backbone is the generic plasmid into which DNA sequences are spliced.",5,550+clock(t+1)); | ||
| + | ctx.fillText("They also help select correctly spliced bacteria.",5,600+clock(t+1)); | ||
| + | break; | ||
| + | } | ||
| + | setTimeout(render,1000/60); | ||
| + | } | ||
| + | render(); | ||
| + | |||
| + | </script> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | <!-- | ||
<canvas id="canvas"></canvas> | <canvas id="canvas"></canvas> | ||
<script> | <script> | ||
| Line 229: | Line 382: | ||
render(); | render(); | ||
</script> | </script> | ||
| + | --> | ||
| + | <div style="background-color:#FF3333;font-family:Arial;font-size:10px;width:200px;border-radius:5px"> | ||
| + | <p>End of Page</p> | ||
| + | </div> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
<!-- | <!-- | ||
Latest revision as of 02:57, 14 September 2014
|
End of Page
