Team:Acton-BoxboroughRHS/Simulations

From 2014hs.igem.org

(Difference between revisions)

Latest revision as of 02:57, 14 September 2014

Welcome to the ABRHS iGEM team

Simulations

End of Page

@@ Line 55: / Line 55: @@
                  font-family:"Arial";
                  border:1px solid black;
+                border-radius:5px;
                  border-bottom:none;
                  padding:15px;
@@ Line 70: / Line 71: @@
                  color:yellow;
                  text-shadow:1px 1px 1px black;
+            }
+            #myCanvas{
+                border-radius:8px;
              }
          </style>
@@ Line 86: / Line 90: @@
-     <body style="background-image:linear-gradient( rgb(200,200,255),rgb(225,225,255))">
+     <body background="https://c9.io/emykion/new_work_space/workspace/igemback.png">
          <div align="center">
              <table width="900" cellspacing="0" cellpadding="0" style="padding-top:0px;padding-bottom: 5px">
                  <tr>
                  <td align="center">
-                 <img height=220px width=950px src="https://c9.io/ab_igem/igem2014/workspace/copy.jpg" alt="ABRHS">
+                 <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>
                  </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/Labs">Labs</a></li>
-             <li><a href="https://2014hs.igem.org/Team:Acton-BoxboroughRHS/Template">Template</a></li>
          </ul>
@@ Line 119: / Line 123: @@
+         <br></br>
+        <br></br>
          <h style="font-size:50px;font-family:Arial">Simulations</h>
-         <p style="font-size:12px;font-family:Arial">Note that this is test JavaScript:</p>
+        <!--
+         <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" width="500" height="500" 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>
+        <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();
@@ Line 137: / Line 156: @@
          ctx.stroke();
          */
+        var t=0;
-         ctx.strokeStyle="green";
-         ctx.beginPath();
-         ctx.arc(250,250,100,-0.1*Math.PI,-0.9*Math.PI);
+        var plas=[0,0,0,0,0];
-         ctx.stroke();
+         //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.strokeStyle="red";
-        ctx.beginPath();
+            ctx.fillStyle="black";
-        ctx.arc(250,250,100,-0.3*Math.PI-0.1*Math.PI,);
-        ctx.stroke();
+            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>
@@ Line 268: / 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>Message</p>
+         <p>End of Page</p>
-        </div>
-        <div style="padding-top:1000px">
          </div>
          <!--