Team:Acton-BoxboroughRHS/Simulations

From 2014hs.igem.org

(Difference between revisions)
Line 131: Line 131:
         <br></br>
         <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>
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>
         <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=800;
 +
       
         /*
         /*
         ctx.beginPath();
         ctx.beginPath();
Line 145: Line 155:
         */
         */
         var t=0;
         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){
         function clock(i){
-
             i%=2*Math.PI
+
             i%=2*Math.PI;
             return 4*Math.cos(i);
             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();
         render();

Revision as of 02:20, 21 June 2014

Welcome to the ABRHS iGEM team

ABRHS




Simulations

Your browser does not support the HTML5 canvas tag.

End of Page