Team:Acton-BoxboroughRHS/Simulations

From 2014hs.igem.org

(Difference between revisions)
 
(15 intermediate revisions not shown)
Line 90: 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">
         <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/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>
                 </td>
                 </tr>
                 </tr>
Line 114: 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>
-
             <li><a href="https://2014hs.igem.org/Team:Acton-BoxboroughRHS/Template">Template</a></li>
+
              
         </ul>
         </ul>
              
              
Line 126: Line 126:
         <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 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>
         <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>
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 142: 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="rgb(245,245,245)";
+
            ctx.fillStyle="black";
-
        ctx.fillRect(0,0,500,500);
+
-
        ctx.font = "30px Arial";
+
            ctx.font = "30px Arial";
-
        ctx.strokeText("Plasmid",10+timet,50+timet);
+
            ctx.fillText("Plasmid",110,150+clock(t+3));
   
   
-
        ctx.font = "12px Arial";
+
            ctx.font = "12px Arial";
-
        ctx.strokeText("Backbone",200,370);
+
            ctx.fillText("Backbone",300,470+clock(t+5));
-
        ctx.font = "10px Arial";
+
            ctx.font = "10px Arial";
-
        ctx.strokeText("RBS",120,200);
+
            ctx.fillText("RBS",220,300+clock(t+6));
   
   
-
        ctx.font = "10px Arial";
+
            ctx.font = "10px Arial";
-
        ctx.strokeText("Promoter",190,130);
+
            ctx.fillText("Promoter",290,230+clock(t+1));
-
        ctx.font = "10px Arial";
+
            ctx.font = "10px Arial";
-
        ctx.strokeText("ORF",280,130);
+
            ctx.fillText("ORF",380,220+clock(t+2));
-
        ctx.font = "10px Arial";
+
            ctx.font = "10px Arial";
-
        ctx.strokeText("Terminator",350,200);
+
            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.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();
-
        ctx.strokeStyle="pink";
 
-
        ctx.beginPath();
 
-
        ctx.arc(250,250,100,1.75*Math.PI,0);
 
-
        ctx.stroke();
 
-
       
 
         </script>
         </script>
Line 309: Line 386:
          
          
         <div style="background-color:#FF3333;font-family:Arial;font-size:10px;width:200px;border-radius:5px">
         <div style="background-color:#FF3333;font-family:Arial;font-size:10px;width:200px;border-radius:5px">
-
         <p>Still Under Construction</p>
+
         <p>End of Page</p>
-
        </div>
+
-
        <div style="padding-top:1000px">
+
         </div>
         </div>
 +
       
          
          
         <!--
         <!--

Latest revision as of 02:57, 14 September 2014

Welcome to the ABRHS iGEM team

ABRHS




Simulations

Your browser does not support the HTML5 canvas tag.

End of Page

Retrieved from "http://2014hs.igem.org/Team:Acton-BoxboroughRHS/Simulations"