Difference between revisions of "Team:Paris Bettencourt"

 
(259 intermediate revisions by 4 users not shown)
Line 3: Line 3:
 
<html>
 
<html>
  
−
<head>
+
 
 +
 
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 +
<style type="text/css">
 
<style>
 
<style>
  
−
     #name {
+
#content {
−
         font-size : 30px;
+
     width: 100%;
−
         margin-top : 50px;
+
    padding-top : 15px;
−
         text-align : center;
+
    border: none;
 +
    color: black;
 +
    margin: 0;
 +
    padding:0;
 +
}
 +
 
 +
#top_title {
 +
    display: none;
 +
}
 +
 
 +
.neant {
 +
    height : 65px;
 +
    width : 100%;
 +
}
 +
section.page-header {
 +
   
 +
    margin-bottom: 35px;
 +
}
 +
 
 +
.page-header .logomedusa {
 +
    width: 370px;
 +
    margin-top : 60px;
 +
    position: absolute;
 +
    left: 50%;
 +
    margin-left: -185px !important;  /* 50% of your logo width */
 +
    display: block;
 +
    z-index:99;
 +
}
 +
#u1570{
 +
 
 +
    height:600px;
 +
}
 +
 
 +
#description {
 +
width : 25%;
 +
margin-left : 37.5%;
 +
text-align : center;
 +
  overflow : visible;
 +
}
 +
#projectdescription {
 +
margin-top : 100px;
 +
width : 100%;
 +
text-align : center;
 +
position : relative;
 +
min-height : 500px;
 +
  overflow : visible;
 +
}
 +
#projectdescription h4 {
 +
text-align : center;
 +
         text-indent : 0px;
 +
overflow : visible;
 +
}
 +
#project1 {
 +
position : absolute;
 +
width : 20%;
 +
float : left;
 +
         overflow : visible;
 +
}
 +
#project2 {
 +
position : absolute;
 +
max-width : 20%;
 +
margin-left : 26.66%;
 +
float : left;
 +
overflow : visible !important;
 +
}
 +
#project3 {
 +
position : absolute;
 +
width : 20%;
 +
margin-left : 53.333%;
 +
float : left;
 +
  overflow : visible;
 +
         z-index : 49;
 +
}
 +
#project4 {
 +
position : absolute;
 +
width : 20%;
 +
margin-left : 80%;
 +
float : left;
 +
}
 +
.logo {
 +
padding : auto;
 +
  overflow : visible;
 +
}
 +
.logosubp {
 +
display : none;
 +
margin : auto;
 +
  overflow : visible;
 +
}
 +
.logosubpinerte {
 +
display : block;
 +
margin : auto;
 +
  overflow : visible;
 +
}
 +
.logo:hover .logosubp {
 +
display : block;
 +
}
 +
.logo:hover .logosubpinerte {
 +
display : none;
 +
}
 +
.text4 video {
 +
      margin : 0 auto;
 +
      display : block;
 +
}
 +
#maintitle {
 +
font-family : "Avenir", Lato, sans-serif;
 +
}
 +
 
 +
#blockverticalcenter {
 +
    display : table;
 +
    text-align : center;
 +
    vertical-align : middle;
 +
    padding : 0 auto;
 +
}
 +
#blockverticalcenter p {
 +
    display : table-cell;
 +
}
 +
 
 +
 
 +
#block1 {
 +
      display : flex !important;
 +
      vertical-align : middle !important;
 +
}
 +
</style>
 +
 
 +
<body>
 +
            <div class=neant></div>
 +
            <section class=page-header>
 +
                    <div class="col-md-12"  id="u1570" ><!-- image -->
 +
                        <img  class="logomedusa"  src="/wiki/images/thumb/0/00/Logo-medusa.png/599px-Logo-medusa.png" />
 +
                    </div>
 +
 
 +
            </section>
 +
<div class=textbody>
 +
<h1 id=maintitle>BRINGING CONTROL TO THE</br>THIRD DIMENSION</h1>
 +
<div class=text4 id=block1>
 +
<div class=text4left><video width="560" height="315" controls><source src="https://static.igem.org/mediawiki/2017/7/7e/PB_MedusaTrailer.mp4" type="video/mp4"></source></video></div>
 +
<div class=text4right id=blockverticalcenter>By creating logic circuits with photo sensitive proteins, we <b>control and study cells in 3D.</b></div>
 +
</div>
 +
 
 +
<div class=text1><b>Proof of concept - 3D printer: </b>
 +
by creating a printer, it is a clear and easily quantified way to validate our 3D controls.
 +
It also allowed us to engineer biomaterials that would be compatible and useful in
 +
biotech. We also optimised production by creating local concnetrations of enzymes in
 +
the RNA organelles.
 +
</div>
 +
<div id="projectdescription">
 +
<div id="project1"><div class="logo">
 +
<a href="https://2017.igem.org/Team:Paris_Bettencourt/Biomaterials"><img class="logosubpinerte" src="https://static.igem.org/mediawiki/2017/2/2c/RocheinertePB.png"><img class="logosubp" src="https://static.igem.org/mediawiki/2017/6/61/RochePB.gif"></div><h2>Biomaterials</div></a>
 +
<div id="project2"><div class="logo">
 +
<a href="https://2017.igem.org/Team:Paris_Bettencourt/Transmembrane_Proteins"><img class="logosubpinerte" src="https://static.igem.org/mediawiki/2017/5/51/LaserinertePB.png"><img class="logosubp" src="https://static.igem.org/mediawiki/2017/a/ad/LaserPB.gif"></div><h2>Membrane Photoreceptor</h2></a></div>
 +
<div id="project3"><div class="logo">
 +
<a href="https://2017.igem.org/Team:Paris_Bettencourt/RNA"><img class="logosubpinerte" src="https://static.igem.org/mediawiki/2017/1/17/GifRNAinertePB.png"><img class="logosubp" src="https://static.igem.org/mediawiki/2017/5/53/GifRNAPB.gif"></div><h2>RNA Organelle</h2></div></a>
 +
<div id="project4"><div class="logo">
 +
<a href="https://2017.igem.org/Team:Paris_Bettencourt/Proteins_Caging"><img class="logosubpinerte" src="https://static.igem.org/mediawiki/2017/c/c5/GifdrompainertePB.png"><img class="logosubp" src="https://static.igem.org/mediawiki/2017/e/e7/GifdrompaPB.gif"></div><h2>Proteins Photocaging</h2></div></a>
 +
</div>
 +
        </div>
 +
    </body>
 +
 
 +
 
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 +
 
 +
<script>
 +
 
 +
 
 +
(function(){
 +
    var BACTERIE_COUNT = 100;
 +
    var colors = ['#062D75', '#E8292F'];
 +
    var bacteries = [];
 +
    var container = window.document.getElementById("u1570");
 +
    var interval1;
 +
    var interval2
 +
 
 +
   
 +
    function fillContainer () {
 +
        var k = 1;
 +
        for(var i=0; i<BACTERIE_COUNT; i++) {
 +
            k = 1-k;
 +
            var bacterie = new Bacterie(colors[k]);
 +
            bacterie.setPosition(container);
 +
            bacteries.push(bacterie);
 +
            container.appendChild(bacterie.element);
 +
        }
 +
        runColorChanging();  
 
     }
 
     }
  
−
     #abstract {
+
 
−
         width : 80%;
+
 
−
         margin-left : 10%;
+
 
−
        margin-right : 10%;
+
     function clearBacteries() {
−
         text-align : justify;
+
         if(bacteries.length ==0) return;
−
         margin-top : 30px;
+
         for(var i=0; i<BACTERIE_COUNT; i++) {
 +
                container.removeChild(bacteries[i].element);
 +
         }
 +
         bacteries = [];
 
     }
 
     }
−
     h1 {
+
 
−
         font-size : 0px;
+
     function runFillingInterval(){
 +
         interval1 = setInterval(function(){
 +
            clearInterval(interval2);
 +
            clearBacteries();
 +
            fillContainer();
 +
        }, 4000);
 
     }
 
     }
−
     #description {
+
 
−
         text-align : center;
+
     function runColorChanging(){
−
         margin-top : 40px;
+
         interval2 = setInterval(function(){
 +
            for(var i=0; i<BACTERIE_COUNT; i++) {
 +
                //console.log(bacteries[i]);
 +
                bacteries[i].changeColor(colors[Math.round(Math.random())]);
 +
            }
 +
 
 +
         }, 2000);
 
     }
 
     }
 +
       
  
−
</style>
 
−
</head>
 
  
−
<body>
+
    function Bacterie(color) {
  
−
<header><div id=name>iGEM Paris-Bettencourt 2017</div></header>
+
           
 +
            this.height = 26;
 +
            this.width = 60;
  
−
<br>
+
            this.color;
−
<br>
+
            this.x;
 +
            this.y;
 +
            this.rotation;
 +
            this.element;
  
−
<img style="opacity:0.5" src="http://maisonchateauneuf.fr/medusa/images/header-home-animado.gif?crc=3964752341"/>
+
           
−
<div id=abstract><b>Medusa: Bringing control to the third dimension</b></br></div>
+
  
−
<div id=abstract>Accurate spatial-temporal response is fundamental to synthetic biology. Optogenetics has emerged as a powerful tool for genetic control and Medusa brings optogenetics to the next level. By engineering E. coli to respond to multiple light inputs, creating a logical AND gate, we aim to achieve both spatial and temporal control of gene expression. Photosensory transmembrane proteins as well as photoswitchable protein caging were investigated to further expand the existing library of optogenetic tools. For spatial control at the subcellular level, we explored the use of a novel synthetic RNA organelles to manipulate enzymatic activity. Finally, in an effort to promote synthetic biology, we sought the input of the DIY community and chose to illustrate the power of our system by 3D-printing biomaterials.</div>
+
         
−
<div id=abstract><b>Contact us</b> </br>bettencourt.igem2017@gmail.com</br>
+
            this.changeColor = function(color){
 +
                Object.assign(this.element.style, {
 +
                    backgroundColor : color//colors[Math.round(Math.random())]
 +
                });
 +
            }
 +
 
 +
            this.getRotation = function() {
 +
                return Math.floor((Math.random() * 360) + 1);
 +
            }
 +
            this.getPosition = function(max, padding){
 +
                return Math.floor((Math.random() * max) + padding);
 +
            }
 +
            this.setPosition = function(container){
 +
                Object.assign(this.element.style, {
 +
                    top: this.getPosition(container.clientHeight-this.width, 70) +'px',
 +
                    left: this.getPosition(container.clientWidth-this.width, 1) +'px',
 +
                });
 +
            }
 +
 
 +
            this.createElement = function(){
 +
 
 +
                this.element = document.createElement('div');
 +
                Object.assign(this.element.style, {
 +
                    height: this.height +"px",
 +
                    width: this.width+"px",
 +
                    backgroundColor: color,
 +
                    borderRadius: '20px',
 +
                    transform: 'rotate('+ this.getRotation() + 'deg)',
 +
                    position:'absolute',
 +
                    //top: this.getPosition(380) +'px',
 +
                    //left: this.getPosition(1596) +'px',
 +
                    zIndex:2
 +
                });
 +
               
 +
             
 +
            }
 +
 
 +
            this.createElement();
 +
            return this;
 +
 
 +
    }
  
−
</body>
 
  
 +
    fillContainer(); 
 +
    runFillingInterval();
 +
 
 +
})();
 +
</script>
 +
   
 
</html>
 
</html>
 +
{{Paris_Bettencourt/footer}}

Latest revision as of 17:20, 12 December 2017

BRINGING CONTROL TO THE
THIRD DIMENSION

By creating logic circuits with photo sensitive proteins, we control and study cells in 3D.
Proof of concept - 3D printer: by creating a printer, it is a clear and easily quantified way to validate our 3D controls. It also allowed us to engineer biomaterials that would be compatible and useful in biotech. We also optimised production by creating local concnetrations of enzymes in the RNA organelles.
Centre for Research and Interdisciplinarity (CRI)
Faculty of Medicine Cochin Port-Royal, South wing, 2nd floor
Paris Descartes University
24, rue du Faubourg Saint Jacques
75014 Paris, France
bettencourt.igem2017@gmail.com