Team:Acton-BoxboroughRHS/Simulations
From 2014hs.igem.org
(Difference between revisions)
(44 intermediate revisions not shown) | |||
Line 55: | Line 55: | ||
font-family:"Arial"; | font-family:"Arial"; | ||
border:1px solid black; | border:1px solid black; | ||
+ | border-radius:5px; | ||
border-bottom:none; | border-bottom:none; | ||
padding:15px; | padding:15px; | ||
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://c9.io/ab_igem/igem2014 | + | <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"> |
</td> | </td> | ||
</tr> | </tr> | ||
Line 110: | Line 114: | ||
<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> | <li><a href="https://2014hs.igem.org/Team:Acton-BoxboroughRHS/Labs">Labs</a></li> | ||
- | + | ||
</ul> | </ul> | ||
Line 119: | 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">Note that this is | + | <!-- |
+ | <p style="font-size:12px;font-family:Arial;color:red">Note that this interactive simulation is still under construction:</p> | ||
+ | --> | ||
<br></br> | <br></br> | ||
- | <canvas id="myCanvas | + | <canvas id="myCanvas" style="border:1px solid #d3d3d3;"> |
Your browser does not support the HTML5 canvas tag.</canvas> | 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> | <script> | ||
var c=document.getElementById("myCanvas"); | var c=document.getElementById("myCanvas"); | ||
var ctx=c.getContext("2d"); | var ctx=c.getContext("2d"); | ||
- | + | ||
+ | |||
+ | c.width=800; | ||
+ | c.height=610; | ||
+ | |||
/* | /* | ||
ctx.beginPath(); | ctx.beginPath(); | ||
Line 137: | Line 156: | ||
ctx.stroke(); | 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> | </script> | ||
Line 265: | Line 385: | ||
- | <div style="background-color:#FF3333;font-family:Arial;font-size:10px;width:200px"> | + | <div style="background-color:#FF3333;font-family:Arial;font-size:10px;width:200px;border-radius:5px"> |
- | <p> | + | <p>End of Page</p> |
- | + | ||
- | + | ||
</div> | </div> | ||
+ | |||
<!-- | <!-- |
Latest revision as of 02:57, 14 September 2014
![]() |
End of Page