Difference between revisions of "Team:Paris Bettencourt"

 
(310 intermediate revisions by 5 users not shown)
Line 3: Line 3:
 
<html>
 
<html>
  
 +
 +
 +
<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><div id=name>iGEM Paris-Bettencourt 2017</div></head>
+
    function Bacterie(color) {
  
−
<body>
+
           
 +
            this.height = 26;
 +
            this.width = 60;
  
−
<div id=abstract><b>Project Description</b></br></div>
+
            this.color;
 +
            this.x;
 +
            this.y;
 +
            this.rotation;
 +
            this.element;
  
−
<div id=abstract>From spider silk to mollusc nacre, living organisms have evolved of a wide variety with astonishing physical properties. The synthesis of biomaterials occurs thanks to a sequence of localized physiological events which have remained difficult to harness artificially.</br>
+
           
−
</br>
+
 
−
+
         
−
Our iGEM project aims to engineer <i>E. coli</i> to enable a greater spatial and timing control necessary to
+
            this.changeColor = function(color){
−
the synthesis of biomaterials. To do so, three research axes will be developed.
+
                Object.assign(this.element.style, {
−
The first axis will focus on the synthesis of biomaterials such as biominerals
+
                    backgroundColor : color//colors[Math.round(Math.random())]
−
and biopolymers. The second axis will investigate the use of recently described
+
                });
−
RNA scaffolding to optimize the enzymatic catalysis involved in the materials synthesis.
+
            }
−
The third axis will develop the optogenetic circuits enabling the light induced
+
 
−
control of our bacteria. In its most advanced state, our technology will enable
+
            this.getRotation = function() {
−
us to define the 3D shape and to control the composition (and, hence, the physical
+
                return Math.floor((Math.random() * 360) + 1);
−
properties) of our biomaterial.</div>
+
            }
−
</br>
+
            this.getPosition = function(max, padding){
−
</br>
+
                return Math.floor((Math.random() * max) + padding);
−
<div id=abstract><b>Contact us</b> </br>bettencourt.igem2017@gmail.com</br>
+
            }
 +
            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