Team:ESBS-Strasbourg/Project/visual

From 2010.igem.org

(Difference between revisions)
(New page: {{ESBS-Strasbourg/Temp1}} {| <html> <p> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>ESBS - Strasbourg</title> <script type="text/jav...)
 
(15 intermediate revisions not shown)
Line 107: Line 107:
position: absolute;
position: absolute;
top: -20px;
top: -20px;
-
font: 18px Trebuchet MS;
+
font: 17px Trebuchet MS;
text-align: center;
text-align: center;
           }
           }
Line 138: Line 138:
</>
</>
</div>
</div>
 +
<div id="content0" style="display:none">
<div id="content0" style="display:none">
Line 201: Line 202:
-
</div>
 
-
 
<div class="menubg">
<div class="menubg">
</div>
</div>
Line 257: Line 256:
position: relative;
position: relative;
float: left;
float: left;
-
width:170px;
+
width:143px;
height:75px;
height:75px;
color:#fff;
color:#fff;
Line 274: Line 273:
border:none;
border:none;
height:193px;
height:193px;
-
width:193px;
+
width:153px;
background:#000;
background:#000;
  /*opacity for IE5+*/
  /*opacity for IE5+*/
Line 303: Line 302:
ul#nav li.last,ul#nav li.last ul{border:none;width:193px;}
ul#nav li.last,ul#nav li.last ul{border:none;width:193px;}
   
   
-
</style>  
+
</style>
 +
<div class="outer">
<div class="outer">
Line 313: Line 313:
</li>
</li>
<li>
<li>
-
<p><br/><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Team">&nbsp;&nbsp;TEAM</a></p>
+
<p><br/><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Team">
 +
&nbsp;&nbsp;TEAM</a></p>
<ul>
<ul>
-
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Team">Overview</a></li>
+
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Team">
 +
Overview</a></li>
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Team#under">
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Team#under">
Students</a></li>
Students</a></li>
-
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Team#instructors">
+
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Team#advisors">
Advisors</a></li>
Advisors</a></li>
 +
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Team#instructors">
 +
Instructors</a></li>
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Team#uni">
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Team#uni">
Strasbourg</a></li>
Strasbourg</a></li>
 +
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Team#collaboration">
 +
Collaboration</a></li>
                                
                                
</ul>
</ul>
Line 327: Line 333:
<li>
<li>
<p><br />
<p><br />
-
<a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project">&nbsp;&nbsp;PROJECT</a></p>
+
<a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project">
 +
&nbsp;&nbsp;PROJECT</a></p>
<ul>
<ul>
-
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project">Overview</a></li>
+
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project">
 +
Overview</a></li>
                                 <li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project/Strategy">
                                 <li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project/Strategy">
Strategy</a></li>
Strategy</a></li>
 +
                                <li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project/visual">
 +
Visual Description</a></li>
                                 <li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project/Application">
                                 <li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project/Application">
Application</a></li>
Application</a></li>
-
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project/Acknowledgment">Acknowledgment</a></li>
+
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project/Acknowledgment">
 +
Acknowledgment</a></li>
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project/Reference">
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project/Reference">
Reference</a></li>
Reference</a></li>
Line 341: Line 352:
</li>
</li>
<li>
<li>
-
<p><br/><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Results">&nbsp;&nbsp;RESULTS</a></p>                 
+
<p><br/><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Results/Biobricks">
 +
&nbsp;&nbsp;RESULTS</a></p>                 
                         <ul>
                         <ul>
-
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Results/Biobricks">Biobricks</a></li>
+
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Results/Biobricks">
 +
Biobricks</a></li>
 +
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Results/Assembly">
 +
<font size="3">Biobrick Assembly Technique</font></a></li>
                                 <li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Results/Characterization">
                                 <li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Results/Characterization">
Characterization</a></li>
Characterization</a></li>
-
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Results/Modelling">Modelling</a></li>
+
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Results/Modelling">
 +
Modeling</a></li>
 +
 
</ul>
</ul>
Line 353: Line 370:
</li>
</li>
<li>
<li>
-
<p><br/><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Notebook">&nbsp;&nbsp;NOTEBOOK</a></p>
+
<p><br/><a>
 +
&nbsp;&nbsp;NOTEBOOK</a></p>
                         <ul>
                         <ul>
-
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Notebook/Syntethic">Synthetic Photoreceptors</a></li>
+
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Notebook/Syntethic">
 +
Synthetic Photoreceptors</a></li>
                                 <li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Notebook/Microfluidics">
                                 <li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Notebook/Microfluidics">
Microfluidics</a></li>
Microfluidics</a></li>
-
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Notebook/Labbook">Lab-book</a></li>
+
                              <li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Results/Device">Lighting device</a></li>
 +
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Notebook/Labbook">
 +
Lab-book</a></li>
</ul>
</ul>
</li>
</li>
 +
 +
<li>
 +
<p><br/><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Humanpractice">
 +
HUMAN PRACTICE</a></p>
 +
                        <ul>
 +
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Humanpractice#organisation">
 +
Organisation</a></li>
 +
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Humanpractice#survey">
 +
Survey</a></li>
 +
                                <li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Humanpractice#video">
 +
The ClpX video</a></li>
 +
                                <li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Humanpractice#game">
 +
The ClpX game</a></li>
 +
<li><a href="https://2010.igem.org/Team:ESBS-Strasbourg/Humanpractice#safety">
 +
Project Safety</a></li>
 +
 +
</ul>
 +
 +
</li>
 +
                 <li class="last">
                 <li class="last">
<p><br />
<p><br />
-
<a href="https://2010.igem.org/Team:ESBS-Strasbourg/Sponsors">&nbsp;&nbsp;SPONSORS</a></p>
+
<a href="https://2010.igem.org/Team:ESBS-Strasbourg/Sponsors">
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SPONSORS</a></p>
</li>
</li>
</ul>
</ul>
 +
</div>
 +
</div>
</div>
</div>
</div>
</div>
Line 427: Line 471:
<table cellspacing=0>
<table cellspacing=0>
<tr>
<tr>
-
<td width="210" rowspan=7 bgcolor="#414141" valign="top">
+
<td width="210" rowspan=20 bgcolor="#414141" valign="top">
<br>
<br>
-
<div class="heading">PROJECT INDEX</div>
+
<div class="heading">Visual explanation</div>
<div class="desc">
<div class="desc">
-
Our device construction is divided into 4 components :<br><br>
+
 
-
<a href="#degradation">1. Degradation system</a>
+
<ul>
-
<br>
+
<li><a href="#Animation">Animation</a></li>
-
<a href="#light">2. Light detection system</a>
+
<li><a href="#molstruc">Molecular Structure of the System</a></li>
-
<br>
+
<li><a href="#molstrucunit">Molecular Structure of 1 unit</a></li>
-
<a href="#tagging">3. Protein Tagging</a>
+
<li><a href="#system">System description</a></li>
-
<br>
+
<li><a href="#assembly">Assembly</a></li>
-
<a href="#system">4. Light controllable protease</a>
+
<li><a href="#taggedprot">Tagged protein</a></li>
-
<br><br>
+
<li><a href="#mecadesc">Mechanical description</a></li>
-
<a href="https://2010.igem.org/Team:ESBS-Strasbourg/notebook">Notebook</a>
+
<li><a href="#workstation">Workstation</a></li>
 +
</ul>
 +
 
</div>
</div>
</p></div>
</p></div>
</td>
</td>
-
<td width="10" rowspan=7 bgcolor="#222222">
+
<td width="10" rowspan=20 bgcolor="#222222">
</div>
</div>
-
 
+
<div id="windowbox" style="position:fixed; top:50%; left:20px; width:11%;">
 +
<span style="color:ivory;">
 +
&nbsp;&nbsp;
 +
<a href="https://2010.igem.org/Team:ESBS-Strasbourg/science">
 +
<img border="0" src="https://static.igem.org/mediawiki/2010/d/da/ESBS-Strasbourg-Clpx.gif" width="70" height="85" ></a>
 +
<br>
 +
Let me guide you</span>
<td width="750" bgcolor="#414141" valign="top">
<td width="750" bgcolor="#414141" valign="top">
<div class="desc">
<div class="desc">
<div class="heading">
<div class="heading">
-
<a name="degradation"></a>
+
<a name="Animation"></a>
-
Degradation system
+
Animation
</div>
</div>
-
<center>
 
<br>
<br>
-
<img src="https://static.igem.org/mediawiki/2010/c/cf/Team_ESBS-Strasbourg_construction.jpg">
 
-
</center>
 
<br>
<br>
-
<p><b>ClpXP Protease</b></p>
+
All animation were modeled in blender 2.54 beta. Blender is a open source program for 3D animation.
<br>
<br>
 +
<a target="_blank" href="http://www.blender.org/">(http://www.blender.org/)</a>
<br>
<br>
-
bla bla bla
+
The two videos cover the assembly of the ClpXP system and the degradation of the tagged protein. It is important to note that protein proportions a molecular structure are not entirely respected in the animation. Also the change of the phytochrome B conformation from the Pf state into the Pfr state is symbolized by a change of color. However, the hexametric structure of ClpX and the heptametrical structure of ClpP were schematically shown. <a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project/visual#molstruc">Picture 1</a> and <a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project/visual#taggedprot">Picture 2</a> give a better understanding between the molecular structure and the schematic animation. <a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project/visual#molstruc">Picture 1 (Molecular Structure of the System)</a> describes the modeled system in detail. <a href="https://2010.igem.org/Team:ESBS-Strasbourg/Project/visual#taggedprot">Picture 2 (Tagged protein)</a> describes the protein in detail.
<br>
<br>
-
</div>
 
<br>
<br>
 +
<body>
 +
<object width="360" height="292"><param name="movie" value="http://www.youtube.com/v/Vb1Y7lsKEho?hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Vb1Y7lsKEho?hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="292"></embed></object>
 +
</body>
 +
&nbsp;
 +
<object width="360" height="292"><param name="movie" value="http://www.youtube.com/v/dhcPTP6kOyQ?hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/dhcPTP6kOyQ?hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="292"></embed></object>
 +
</body>
 +
<br>
 +
</td>
</td>
</tr>
</tr>
Line 479: Line 536:
<td width="750" bgcolor="#414141" valign="top">
<td width="750" bgcolor="#414141" valign="top">
<div class="heading">
<div class="heading">
-
<a name="light"></a>
+
<a name="molstruc"></a>
-
Light detection system
+
Molecular Structure of the System
</div>
</div>
<div class="desc">
<div class="desc">
 +
<br><br>
<center>
<center>
<br>
<br>
-
<img src="https://static.igem.org/mediawiki/2010/c/cf/Team_ESBS-Strasbourg_construction.jpg">
+
<img src="https://static.igem.org/mediawiki/2010/e/e7/ESBS-Strasbourg-Moleculare-structure.png">
</center>
</center>
 +
<center>
<br>
<br>
-
<p><b>Phytochrome - PIF</b></p>
+
<p><b>The left shows the molecular structure of the ClpX hexamere fused to the phytochrome B and the <br> schematic image in the animation</b></p>
 +
</center>
 +
</div>
 +
 
 +
</td>
 +
</tr>
 +
 
 +
 
 +
<tr>
 +
<td width="750" height="10" bgcolor="#222222">
 +
</td>
 +
</tr>
 +
 
 +
 
 +
<td width="750" bgcolor="#414141">
 +
<div class="desc">
 +
<div class="heading">
 +
<a name="molstrucunit"></a>
 +
Molecular structure of one unit (assembled biobrick) of our system.
 +
</div>
 +
<br><br>
 +
<center>
<br>
<br>
 +
<img src="https://static.igem.org/mediawiki/2010/f/f5/ESBS-Strasbourg-Moleculare-structure2.png">
 +
</center>
<br>
<br>
-
bla bla bla
+
<center>
-
<br>
+
<p><b>This shows the molecular structure of the trimetric unit of the ClpX fused to phytochrome B <br> and the schematic image in the animation.</b></p>
 +
</center>
 +
 
</div>
</div>
<br>
<br>
Line 503: Line 587:
</td>
</td>
</tr>
</tr>
 +
 +
 +
 +
Line 508: Line 596:
<div class="desc">
<div class="desc">
<div class="heading">
<div class="heading">
-
<a name="tagging"></a>
+
<a name="system"></a>
-
Protein Tagging
+
System description
</div>
</div>
 +
<br><br>
<center>
<center>
<br>
<br>
-
<img src="https://static.igem.org/mediawiki/2010/c/cf/Team_ESBS-Strasbourg_construction.jpg">
+
<img src="https://static.igem.org/mediawiki/2010/3/3a/ESBS-Strasbourg-ClpXPSystem.jpg" width="550" height="331">
</center>
</center>
<br>
<br>
-
<p><b>Tagging</b></p>
+
<p><b>This picture shows a detailed information about the animated ClpXP system. Phytochrome B in the inactive state and the ClpP are in a bright petrol color. The ClpX unit is shown in a dark petrol color. The conformation change of the phytochrome B from the Pf to the Pfr state is shown with a color change.</b></p>
<br>
<br>
 +
</div>
<br>
<br>
-
bla bla bla
+
</td>
 +
</tr>
 +
 
 +
 
 +
 
 +
<tr>
 +
<td width="750" height="10" bgcolor="#222222">
 +
</td>
 +
</tr>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<td width="750" bgcolor="#414141">
 +
<div class="desc">
 +
<div class="heading">
 +
<a name="assembly"></a>
 +
Assembly
 +
</div>
 +
<br><br>
 +
<center>
 +
<br>
 +
<body>
 +
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/dhcPTP6kOyQ?hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/dhcPTP6kOyQ?hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
 +
</body>
 +
</center>
 +
<br>
 +
<p><b>In this video the assembly of the ClpXP system in the inactive state is shown. First joining of the two trimetric subunit interconnected with a linker is shown. After the ClpX hexamere is created to the two units of the ClpP joins and built a multi protein complex.</b></p>
<br>
<br>
</div>
</div>
Line 540: Line 659:
<div class="desc">
<div class="desc">
<div class="heading">
<div class="heading">
-
<a name="system"></a>
+
<a name="taggedprot"></a>
-
Light controllable protease
+
Tagged protein (GFP)
</div>
</div>
 +
<br><br>
<center>
<center>
<br>
<br>
-
<img src="https://static.igem.org/mediawiki/2010/c/cf/Team_ESBS-Strasbourg_construction.jpg">
+
<img src="https://static.igem.org/mediawiki/2010/8/82/ESBS-Strasbourg-moleculare-protein.png">
</center>
</center>
<br>
<br>
-
<p><b>Light Inducible Degradation</b></p>
+
<p><b>This picture shows the test protein GFP colored green with the PIF3/6 fused to the N-terminus of the protein colored violet and at the C-terminus the DAS tag colored yellow. The gray part is the fused 20 amino acid linker. In the little square at the right bottom of the image you can see the schematic image found in the animation.</b></p>
<br>
<br>
 +
</div>
<br>
<br>
-
bla bla bla
+
</td>
 +
</tr>
 +
 
 +
 
 +
<tr>
 +
<td width="750" height="10" bgcolor="#222222">
 +
</td>
 +
</tr>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<td width="750" bgcolor="#414141">
 +
<div class="desc">
 +
<div class="heading">
 +
<a name="mecadesc"></a>
 +
Mechanical description
 +
</div>
 +
<br><br>
 +
<center>
 +
<br>
 +
<body>
 +
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/Vb1Y7lsKEho?hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Vb1Y7lsKEho?hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
 +
</body>
 +
</center>
 +
<br>
 +
<p><b>This video shows the working system. In the beginning the Phytochrome B is not in its active Pfr state and so the tagged protein GFP is not degraded. After a short red light impulse the conformation of the phytochrome B changes to its active state. Now the six tagged GFP proteins can interact over the PIF- Phytochrome B system with the ClpX, which lead them to the ClpP. The ClpP is the catalytic core of the protease. </b></p>
<br>
<br>
</div>
</div>
Line 558: Line 707:
</tr>
</tr>
 +
 +
<tr>
 +
<td width="750" height="10" bgcolor="#222222">
 +
</td>
 +
</tr>
 +
 +
 +
 +
 +
 +
 +
<td width="750" bgcolor="#414141">
 +
<div class="desc">
 +
<div class="heading">
 +
<a name="workstation"></a>
 +
Workstation
 +
</div>
 +
<br><br>
 +
<center>
 +
<br>
 +
<img src="https://static.igem.org/mediawiki/2010/e/e9/ESBS-Strasbourg-Workstation.png "width="650" height="351">
 +
</center>
 +
<center>
 +
<a target="_blank" href="https://static.igem.org/mediawiki/2010/e/e9/ESBS-Strasbourg-Workstation.png">
 +
<i><font color="#E9AF03" size="2">click to enlarge</font></i></a></font>
 +
</center>
 +
<br>
 +
<p><b>This image shows how the work in blender 2.54beta looks like. It was taken during the modeling and animation of the mechanics video.</b></p>
 +
<br>
 +
</div>
 +
<br>
 +
</td>
 +
</tr>

Latest revision as of 16:59, 27 October 2010

{|

ESBS - Strasbourg



Visual explanation

  
Let me guide you
Animation


All animation were modeled in blender 2.54 beta. Blender is a open source program for 3D animation.
(http://www.blender.org/)
The two videos cover the assembly of the ClpXP system and the degradation of the tagged protein. It is important to note that protein proportions a molecular structure are not entirely respected in the animation. Also the change of the phytochrome B conformation from the Pf state into the Pfr state is symbolized by a change of color. However, the hexametric structure of ClpX and the heptametrical structure of ClpP were schematically shown. Picture 1 and Picture 2 give a better understanding between the molecular structure and the schematic animation. Picture 1 (Molecular Structure of the System) describes the modeled system in detail. Picture 2 (Tagged protein) describes the protein in detail.

 
Molecular Structure of the System




The left shows the molecular structure of the ClpX hexamere fused to the phytochrome B and the
schematic image in the animation

Molecular structure of one unit (assembled biobrick) of our system.




This shows the molecular structure of the trimetric unit of the ClpX fused to phytochrome B
and the schematic image in the animation.


System description




This picture shows a detailed information about the animated ClpXP system. Phytochrome B in the inactive state and the ClpP are in a bright petrol color. The ClpX unit is shown in a dark petrol color. The conformation change of the phytochrome B from the Pf to the Pfr state is shown with a color change.



Assembly




In this video the assembly of the ClpXP system in the inactive state is shown. First joining of the two trimetric subunit interconnected with a linker is shown. After the ClpX hexamere is created to the two units of the ClpP joins and built a multi protein complex.



Tagged protein (GFP)




This picture shows the test protein GFP colored green with the PIF3/6 fused to the N-terminus of the protein colored violet and at the C-terminus the DAS tag colored yellow. The gray part is the fused 20 amino acid linker. In the little square at the right bottom of the image you can see the schematic image found in the animation.



Mechanical description




This video shows the working system. In the beginning the Phytochrome B is not in its active Pfr state and so the tagged protein GFP is not degraded. After a short red light impulse the conformation of the phytochrome B changes to its active state. Now the six tagged GFP proteins can interact over the PIF- Phytochrome B system with the ClpX, which lead them to the ClpP. The ClpP is the catalytic core of the protease.



Workstation



click to enlarge

This image shows how the work in blender 2.54beta looks like. It was taken during the modeling and animation of the mechanics video.