Team:Acton-BoxboroughRHS/Simulations

From 2014hs.igem.org

(Difference between revisions)

Revision as of 02:20, 21 June 2014

Welcome to the ABRHS iGEM team

Simulations

End of Page

@@ Line 131: / Line 131: @@
          <br></br>
-        <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
+        <canvas id="myCanvas" style="border:1px solid #d3d3d3;">
 Your browser does not support the HTML5 canvas tag.</canvas>
+        <br></br>
+        <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>
          <script>
          var c=document.getElementById("myCanvas");
          var ctx=c.getContext("2d");
+        c.width=800;
+        c.height=800;
          /*
          ctx.beginPath();
@@ Line 145: / Line 155: @@
          */
          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
+             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);
-        function render(){
-        ctx.fillStyle="rgb(245,245,245)";
-        ctx.fillRect(0,0,800,800);
+            ctx.fillStyle="black";
-        ctx.fillStyle="black";
+            ctx.font = "30px Arial";
+            ctx.fillText("Plasmid",110,150+clock(t+3));
-        ctx.font = "30px Arial";
-        ctx.fillText("Plasmid",10,50+clock(t+3));
-        ctx.font = "12px Arial";
+            ctx.font = "12px Arial";
-        ctx.fillText("Backbone",200,370+clock(t+5));
+            ctx.fillText("Backbone",300,470+clock(t+5));
-        ctx.font = "10px Arial";
+            ctx.font = "10px Arial";
-        ctx.fillText("RBS",120,200+clock(t+6));
+            ctx.fillText("RBS",220,300+clock(t+6));
-        ctx.font = "10px Arial";
+            ctx.font = "10px Arial";
-        ctx.fillText("Promoter",190,130+clock(t+1));
+            ctx.fillText("Promoter",290,230+clock(t+1));
-        ctx.font = "10px Arial";
+            ctx.font = "10px Arial";
-        ctx.fillText("ORF",280,130+clock(t+2));
+            ctx.fillText("ORF",380,220+clock(t+2));
-        ctx.font = "10px Arial";
+            ctx.font = "10px Arial";
-        ctx.fillText("Terminator",350,200+clock(t+1.5));
+            ctx.fillText("Terminator",450,300+clock(t+1.5));
-        ctx.strokeStyle="green";
+            ctx.strokeStyle="green";
-        ctx.beginPath();
+            ctx.beginPath();
-        ctx.arc(250,250,100,0, Math.PI);
+            ctx.arc(350,350,100,0, Math.PI);
-        ctx.stroke();
+            ctx.stroke();
-        ctx.strokeStyle="red";
+            ctx.strokeStyle="red";
-        ctx.beginPath();
+            ctx.beginPath();
-        ctx.arc(250,250,100,Math.PI,1.25*Math.PI);
+            ctx.arc(350,350,100,Math.PI,1.25*Math.PI);
-        ctx.stroke();
+            ctx.stroke();
-        ctx.strokeStyle="blue";
+            ctx.strokeStyle="blue";
-        ctx.beginPath();
+            ctx.beginPath();
-        ctx.arc(250,250,100,1.25*Math.PI,1.5*Math.PI);
+            ctx.arc(350,350,100,1.25*Math.PI,1.5*Math.PI);
-        ctx.stroke();
+            ctx.stroke();
-        ctx.strokeStyle="orange";
+            ctx.strokeStyle="orange";
-        ctx.beginPath();
+            ctx.beginPath();
-        ctx.arc(250,250,100,1.5*Math.PI,1.75*Math.PI);
+            ctx.arc(350,350,100,1.5*Math.PI,1.75*Math.PI);
-        ctx.stroke();
+            ctx.stroke();
-        ctx.strokeStyle="pink";
+            ctx.strokeStyle="pink";
-        ctx.beginPath();
+            ctx.beginPath();
-        ctx.arc(250,250,100,1.75*Math.PI,0);
+            ctx.arc(350,350,100,1.75*Math.PI,0);
-        ctx.stroke();
+            ctx.stroke();
-         setTimeout(render,1000/60)
+            t+=Math.PI/36;
+         }
-        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();