"

From 2014hs.igem.org

Revision as of 01:50, 21 June 2014 (view source) 17malim (Talk | contribs) ← Older edit		Latest revision as of 02:57, 14 September 2014 (view source) 17malim (Talk | contribs)
(5 intermediate revisions not shown)
Line 95:		Line 95:
	<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 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>
		+	<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 145:		Line 157:
	*/		*/
	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 render(){	+	function draw(){
-	ctx.fillStyle="rgb(245,245,245)";	+	ctx.fillStyle="rgb(245,245,245)";
-	ctx.fillRect(0,0,800,800);	+	ctx.fillRect(0,0,c.width,c.height);
-	ctx.fillStyle="black";	+	ctx.fillStyle="black";
-	ctx.font = "30px Arial";	+	ctx.font = "30px Arial";
-	ctx.fillText("Plasmid",10,50+clock(t+3));	+	ctx.fillText("Plasmid",110,150+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.beginPath();	+
-	ctx.arc(250,250,100,1.75*Math.PI,0);	+
-	ctx.stroke();	+
-	setTimeout(render,1000/60)	+	ctx.strokeStyle="pink";
		+	ctx.beginPath();
		+	ctx.arc(350,350,100,1.75*Math.PI,0);
		+	ctx.stroke();
-	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();
Line 330:		Line 388:
	<p>End of Page</p>		<p>End of Page</p>
	</div>		</div>
-	<div style="padding-top:1000px">	+
-	</div>	+
	<!--		<!--

---

Latest revision as of 02:57, 14 September 2014

Simulations

Your browser does not support the HTML5 canvas tag.