Team:UCL PG

From 2013.igem.org

(Difference between revisions)
Line 5: Line 5:
<script type="text/javascript">
<script type="text/javascript">
-
<![CDATA[
+
// <![CDATA[
-
var colour="#9933ff"; // what colour are the blobs
+
var colour="random"; // in addition to "random" can be set to any valid colour eg "#f0f" or "red"
-
var speed=66; // speed of animation, lower is faster
+
var sparkles=50;
-
var blobs=20; // how many blobs are in the jar
+
-
var charc=String.fromCharCode(9679); // a blob - can be changed to charc='hello' or charc='*' for a different effect
+
-
/***************************\
+
/****************************
-
*   Blobs in a Jar Effect  *
+
* Tinkerbell Magic Sparkle *
-
*(c)2012-13 mf2fm web-design*
+
*(c)2005-13 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
* DON'T EDIT BELOW THIS BOX *
-
\***************************/
+
****************************/
-
 
+
var x=ox=400;
-
var div;
+
var y=oy=300;
-
var xpos=new Array();
+
-
var ypos=new Array();
+
-
var zpos=new Array();
+
-
var dx=new Array();
+
-
var dy=new Array();
+
-
var dz=new Array();
+
-
var blob=new Array();  
+
var swide=800;
var swide=800;
var shigh=600;
var shigh=600;
-
var ie_version=(navigator.appVersion.indexOf("MSIE")!=-1)?parseFloat(navigator.appVersion.split("MSIE")[1]):false;
+
var sleft=sdown=0;
 +
var tiny=new Array();
 +
var star=new Array();
 +
var starv=new Array();
 +
var starx=new Array();
 +
var stary=new Array();
 +
var tinyx=new Array();
 +
var tinyy=new Array();
 +
var tinyv=new Array();
-
function addLoadEvent(funky) {
+
window.onload=function() { if (document.getElementById) {
-
   var oldonload=window.onload;
+
   var i, rats, rlef, rdow;
-
   if (typeof(oldonload)!='function') window.onload=funky;
+
   for (var i=0; i<sparkles; i++) {
-
  else window.onload=function() {
+
    var rats=createDiv(3, 3);
-
     if (oldonload) oldonload();
+
    rats.style.visibility="hidden";
-
     funky();
+
    rats.style.zIndex="999";
 +
    document.body.appendChild(tiny[i]=rats);
 +
    starv[i]=0;
 +
    tinyv[i]=0;
 +
    var rats=createDiv(5, 5);
 +
    rats.style.backgroundColor="transparent";
 +
    rats.style.visibility="hidden";
 +
    rats.style.zIndex="999";
 +
    var rlef=createDiv(1, 5);
 +
     var rdow=createDiv(5, 1);
 +
    rats.appendChild(rlef);
 +
     rats.appendChild(rdow);
 +
    rlef.style.top="2px";
 +
    rlef.style.left="0px";
 +
    rdow.style.top="0px";
 +
    rdow.style.left="2px";
 +
    document.body.appendChild(star[i]=rats);
   }
   }
-
}
+
  set_width();
 +
  sparkle();
 +
}}
-
addLoadEvent(fill_the_jar);
+
function sparkle() {
-
 
+
  var c;
-
function fill_the_jar() {
+
  if (Math.abs(x-ox)>1 || Math.abs(y-oy)>1) {
-
var i, dvs;
+
    ox=x;
-
div=document.createElement('div');
+
    oy=y;
-
dvs=div.style;
+
    for (c=0; c<sparkles; c++) if (!starv[c]) {
-
dvs.position='fixed';
+
      star[c].style.left=(starx[c]=x)+"px";
-
dvs.left='0px';
+
      star[c].style.top=(stary[c]=y+1)+"px";
-
dvs.top='0px';
+
      star[c].style.clip="rect(0px, 5px, 5px, 0px)";
-
dvs.width='1px';
+
      star[c].childNodes[0].style.backgroundColor=star[c].childNodes[1].style.backgroundColor=(colour=="random")?newColour():colour;
-
dvs.height='1px';
+
      star[c].style.visibility="visible";
-
document.body.appendChild(div);
+
      starv[c]=50;
-
set_width();
+
      break;
-
for (i=0; i<blobs; i++) {
+
    }
-
  add_blob(i);
+
  }
-
  jamjar(i);
+
  for (c=0; c<sparkles; c++) {
-
}
+
    if (starv[c]) update_star(c);
 +
    if (tinyv[c]) update_tiny(c);
 +
  }
 +
  setTimeout("sparkle()", 40);
}
}
-
function add_blob(ref) {
+
function update_star(i) {
-
var dv, sy;
+
  if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
-
dv=document.createElement('div');
+
  if (starv[i]) {
-
sy=dv.style;
+
    stary[i]+=1+Math.random()*3;
-
sy.position='absolute';
+
    starx[i]+=(i%5-2)/5;
-
sy.textAlign='center';
+
    if (stary[i]<shigh+sdown) {
-
    if (ie_version && ie_version<10) {
+
      star[i].style.top=stary[i]+"px";
-
  sy.fontSize="10px";
+
      star[i].style.left=starx[i]+"px";
-
  sy.width="100px";
+
    }
-
  sy.height="100px";
+
    else {
-
  sy.paddingTop="40px";
+
      star[i].style.visibility="hidden";
-
  sy.color=colour;
+
      starv[i]=0;
-
      dv.appendChild(document.createTextNode(charc));
+
      return;
-
}
+
    }
-
else if (ie_version) {
+
-
  sy.fontSize="1px";
+
-
  sy.width="0px";
+
-
  sy.height="0px";
+
-
}
+
-
else {
+
-
  dv.appendChild(document.createTextNode(charc));
+
-
  sy.color='rgba(0,0,0,0)';
+
-
}
+
-
ypos[ref]=Math.floor(shigh*Math.random());
+
-
dy[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
+
-
xpos[ref]=Math.floor(swide*Math.random());
+
-
dx[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
+
-
zpos[ref]=Math.random()*20;
+
-
dz[ref]=(0.5+Math.random())*(Math.random()>.5?.5:-.5);
+
-
blob[ref]=dv;
+
-
div.appendChild(blob[ref]);
+
-
set_blob(ref);
+
-
}
+
-
 
+
-
function rejig(ref, xy) {
+
-
  if (xy=='y') {
+
-
dx[ref]=(0.5+Math.random())*sign(dx[ref]);
+
-
    dy[ref]=(0.5+Math.random())*-sign(dy[ref]);
+
   }
   }
   else {
   else {
-
     dx[ref]=(0.5+Math.random())*-sign(dx[ref]);
+
     tinyv[i]=50;
-
  dy[ref]=(0.5+Math.random())*sign(dy[ref]);
+
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
 +
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
 +
    tiny[i].style.width="2px";
 +
    tiny[i].style.height="2px";
 +
    tiny[i].style.backgroundColor=star[i].childNodes[0].style.backgroundColor;
 +
    star[i].style.visibility="hidden";
 +
    tiny[i].style.visibility="visible"
   }
   }
}
}
-
function sign(a) {
+
function update_tiny(i) {
-
   if (a<0) return (-2);
+
   if (--tinyv[i]==25) {
-
   else if (a>0) return (2);
+
    tiny[i].style.width="1px";
-
  else return (0);
+
    tiny[i].style.height="1px";
 +
   }
 +
  if (tinyv[i]) {
 +
    tinyy[i]+=1+Math.random()*3;
 +
    tinyx[i]+=(i%5-2)/5;
 +
    if (tinyy[i]<shigh+sdown) {
 +
      tiny[i].style.top=tinyy[i]+"px";
 +
      tiny[i].style.left=tinyx[i]+"px";
 +
    }
 +
    else {
 +
      tiny[i].style.visibility="hidden";
 +
      tinyv[i]=0;
 +
      return;
 +
    }
 +
  }
 +
  else tiny[i].style.visibility="hidden";
}
}
-
function set_blob(ref) {
+
document.onmousemove=mouse;
-
var sy;
+
function mouse(e) {
-
sy=blob[ref].style;
+
  if (e) {
-
sy.top=ypos[ref]+'px';
+
    y=e.pageY;
-
sy.left=xpos[ref]+'px';
+
    x=e.pageX;
-
    if (ie_version && ie_version<10) {
+
  }
-
  sy.filter="glow(color="+colour+",strength="+zpos[ref]+")";
+
  else {
-
  sy.fontSize=30-zpos[ref]+"px";
+
    set_scroll();
-
}
+
    y=event.y+sdown;
-
else if (ie_version) {
+
    x=event.x+sleft;
-
  sy.boxShadow="0px 0px 40px "+zpos[ref]+"px "+colour;
+
  }
-
}
+
-
else {
+
-
  sy.textShadow=colour+' 0px 0px '+zpos[ref]+'px';
+
-
  sy.fontSize=40+zpos[ref]+'px';
+
-
}
+
}
}
-
function jamjar(ref) {
+
window.onscroll=set_scroll;
-
if (ypos[ref]+dy[ref]<-50 || ypos[ref]+dy[ref]>shigh) rejig(ref, 'y');
+
function set_scroll() {
-
ypos[ref]+=dy[ref];
+
  if (typeof(self.pageYOffset)=='number') {
-
if (xpos[ref]+dx[ref]<-50 || xpos[ref]+dx[ref]>swide) rejig(ref, 'x');
+
    sdown=self.pageYOffset;
-
xpos[ref]+=dx[ref];
+
    sleft=self.pageXOffset;
-
if (zpos[ref]+dz[ref]<0 || zpos[ref]+dz[ref]>20) dz[ref]=-dz[ref];
+
  }
-
zpos[ref]+=dz[ref];
+
  else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
-
set_blob(ref);
+
    sdown=document.body.scrollTop;
-
setTimeout("jamjar("+ref+")", speed);
+
    sleft=document.body.scrollLeft;
 +
  }
 +
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
 +
    sleft=document.documentElement.scrollLeft;
 +
    sdown=document.documentElement.scrollTop;
 +
  }
 +
  else {
 +
    sdown=0;
 +
    sleft=0;
 +
  }
}
}
Line 146: Line 167:
     if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
     if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
   }
   }
-
   if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
+
   if (typeof(self.innerWidth)=='number' && self.innerWidth) {
     if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
     if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
     if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
     if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
Line 161: Line 182:
   shigh=sh_min;
   shigh=sh_min;
}
}
-
]]>
+
 
 +
function createDiv(height, width) {
 +
  var div=document.createElement("div");
 +
  div.style.position="absolute";
 +
  div.style.height=height+"px";
 +
  div.style.width=width+"px";
 +
  div.style.overflow="hidden";
 +
  return (div);
 +
}
 +
 
 +
function newColour() {
 +
  var c=new Array();
 +
  c[0]=255;
 +
  c[1]=Math.floor(Math.random()*256);
 +
  c[2]=Math.floor(Math.random()*(256-c[1]/2));
 +
  c.sort(function(){return (0.5 - Math.random());});
 +
  return ("rgb("+c[0]+", "+c[1]+", "+c[2]+")");
 +
}
 +
// ]]>
</script>
</script>

Revision as of 03:07, 29 September 2013

    


About iGEM

International Genetically Engineered Machine (iGEM) is an annual world-wide synthetic biology competition aimed at university students. Each year, participating teams from all over the world are challenged to bring their innovative ideas to life by applying engineering methodology in life sciences to ultimately produce “Biobricks” which are modular biological circuit parts that can be utilized to solve global issues.

About us

We are a combination of dedicated graduate students and research assistants from both UCL Cancer Institute and UCL Engineering.

About our idea

Improvising activation of the circuit with light, evolve luminescent proteins. Allow preclinical genetic imaging to study endogenous and disease processes in vivo and to image the genetic behaviour of life.

Retrieved from "http://2013.igem.org/Team:UCL_PG"