Difference between revisions of "Team:Peking/Model"

 
(117 intermediate revisions by 5 users not shown)
Line 6: Line 6:
 
     <head>
 
     <head>
 
         <!--- Basic Page Needs========================================================================= -->
 
         <!--- Basic Page Needs========================================================================= -->
−
         <meta charset="utf-8">
+
         <meta charset="utf-8"/>
−
            <title>Overview</title>
+
        <title></title>
−
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.2, user-scalable=yes" />
+
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.2, user-scalable=yes" />
−
            <meta name="description" content="Wiki of Peking iGEM 2016" />
+
        <meta name="description" content="Wiki of Peking iGEM 2018" />
−
            <meta name="author" content="Li Jiamian & Wang Yuqing">
+
        <meta name="author" content="Peking iGEM"/>
−
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
                <!-- Mobile Specific Metas===================================================================== -->
+
        <!-- Mobile Specific Metas===================================================================== -->
−
                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
−
                    <!-- Fix  Overwrite the original iGEM style=================================================== -->
+
        <!-- Fix  Overwrite the original iGEM style=================================================== -->
−
                    <link href="https://2016.igem.org/Template:Peking/css/fix?action=raw&ctype=text/css" rel="stylesheet" />
+
        <link href="https://2018.igem.org/Template:Peking/css/fix?action=raw&ctype=text/css" rel="stylesheet" />
−
                    <!-- CSS======================================================================================= -->
+
        <!-- CSS======================================================================================= -->
−
                    <link href="https://2016.igem.org/Template:Peking/css/bootstrap_min?action=raw&ctype=text/css" rel="stylesheet" />
+
        <link href="https://2018.igem.org/Template:Peking/css/bootstrap_min?action=raw&ctype=text/css" rel="stylesheet" />
−
                    <link href="https://2016.igem.org/Template:Peking/css/style?action=raw&ctype=text/css" rel="stylesheet" />
+
        <link href="https://2018.igem.org/Template:Peking/css/style?action=raw&ctype=text/css" rel="stylesheet" />
−
                    <!-- CSS======================================================================================= -->
+
        <!-- CSS======================================================================================= -->
−
                    <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/default?action=raw&ctype=text/css">
+
        <link rel="stylesheet" href="https://2018.igem.org/Template:Peking/css/default?action=raw&ctype=text/css"/>
−
                        <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/layout?action=raw&ctype=text/css">
+
        <link rel="stylesheet" href="https://2018.igem.org/Template:Peking/css/layout?action=raw&ctype=text/css"/>
−
                            <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/media-queries?action=raw&ctype=text/css">
+
        <link rel="stylesheet" href="https://2018.igem.org/Template:Peking/css/media-queries?action=raw&ctype=text/css"/>
−
                                <link rel="stylesheet" href="https://2016.igem.org/Template:Peking/css/priorstyle?action=raw&ctype=text/css">
+
        <link rel="stylesheet" href="https://2018.igem.org/Template:Peking/css/notebook_panel?action=raw&ctype=text/css"/>
−
                                    <style>
+
        <style>
−
                                        .home_img{
+
                        body { background: #D2D8D8 url(https://static.igem.org/mediawiki/2018/7/78/T--Peking--images_bodyBackground.jpeg); background-attachment:fixed;}
−
                                            padding: 10px;
+
            .texttitle{
−
                                            margin: 10px;
+
                color:#6495ED;
−
                                            width: 420px;
+
                font-size: 32px;
−
                                            float: left;
+
                line-height: 48px;
−
                                            height: 300px;
+
                margin-bottom: 12px;
−
                                        }
+
                font-family: raleway-bold, sans-serif !important;
−
                                    .home_text{
+
                background: transparent;
−
                                        padding-top: 20px;
+
                letter-spacing: 3px;
−
                                        margin: 10px;
+
                text-transform: uppercase;
−
                                        float: left;
+
                font-weight: 350;
−
                                        height: 300px;
+
                text-align: center;
−
                                    }
+
                padding-top:40px;
−
                                    .texttitle{
+
            }
−
                                        color: #11abb0;
+
        sup{font-size:11px;}
−
                                        font-size: 38px;
+
        .references{margin-top:150px;margin-bottom:40px;}
−
                                        line-height: 48px;
+
        .references p{font-size:14px !important; color:#666161 !important;}
−
                                        margin-bottom: 12px;
+
        .classic-title {font-weight: 300;padding-top:30px;}
−
                                        font-family: raleway-bold, sans-serif;
+
        .classic-title span {
−
                                        background: transparent;
+
            padding-bottom: 8px;
−
                                        letter-spacing: 3px;
+
            border-bottom: 1px solid #383232;
−
                                        text-transform: uppercase;
+
            font-weight: 400;
−
                                        font-weight: 350;
+
        }
−
                                        text-align: center;
+
        figure{margin-top:40px;margin-bottom:40px;height:auto;}
−
                                    }
+
        .anchor{padding-top:100px;margin-top:-100px;}
−
                                    sup{
+
            </style>
−
                                        font-size:11px;
+
       
−
                                    }
+
    </head>
−
                                    .references{margin-top:150px;margin-bottom:40px;}
+
−
                                    .references p{font-size:14px !important; color:#666161 !important;}
+
−
                                   
+
−
                                    .classic-title {font-weight: 300;}
+
−
                                    .classic-title span {
+
−
                                        padding-bottom: 8px;
+
−
                                        border-bottom: 1px solid #383232;
+
−
                                        font-weight: 400;
+
−
                                    }
+
−
                                    figure{margin-top:40px;margin-bottom:40px;height:auto;}
+
−
                                        </style>
+
−
                                   
+
−
                                    </head>
+
−
   
+
 
     <body>
 
     <body>
 +
        <!--sidebar 引用==============================================================================-->
 +
        <style>
 +
            #primary span{
 +
                display:block;
 +
                word-break:break-all
 +
            }
 +
       
 +
        #page-wrap {
 +
            width: 25%;
 +
            margin: 0px;
 +
            position: relative;
 +
        }
 +
        #page-wrap a:hover {color:#6495ED;}
 +
       
 +
        #sidebar {
 +
            width: 25%;
 +
            margin-left: 0px;
 +
        }
 +
        @media (min-width:1024px){
 +
            #sidebar{position:relative;top:120px;max-width:200px;}}
 +
        @media (max-width: 1023px){
 +
            #sidebar{display:none;
 +
            }
 +
            #page-wrap{display:none;}
 +
        }
 +
        </style>
 +
       
 +
       
 +
        <script type="text/javascript">
 +
            function menuFixed(id){
 +
                var obj = document.getElementById(id);
 +
                var _getHeight = obj.offsetTop;
 +
               
 +
                window.onscroll = function(){
 +
                    changePos(id,_getHeight);
 +
                }
 +
            }
 +
        function changePos(id,height){
 +
            var obj = document.getElementById(id);var windowBottom = $(window).scrollTop() + $(window).innerHeight();
 +
            if(w>=1024){
 +
                if($(window).scrollTop() + $(window).height() > $(document).height() - 230){
 +
                    $('#sidebar').fadeOut("fast");}else{$('#sidebar').fadeIn("fast");}
 +
            }
 +
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop -230;
 +
            var windowBottom = $(window).scrollTop() + $(window).innerHeight();
 +
            var w = window.innerWidth;
 +
           
 +
            if(scrollTop < height){ obj.style.position = 'relative';
 +
            }else{
 +
                obj.style.position = 'fixed';
 +
            }
 +
        }
 +
        </script>
 +
       
 +
        <script type="text/javascript">
 +
            window.onload = function(){
 +
                menuFixed('sidebar');
 +
            }
 +
        </script>
 +
        <script>
 +
            function naver(id){
 +
                var obj=document.getElementById(id);
 +
                var oPos=obj.offsetTop;
 +
                return window.scrollTo(0,oPos+250);
 +
            }
 +
        </script>
 +
        <!--sidebar 引用 end ==============================================================================-->
 +
        <!--panel 引用==================================================================================-->
 +
        <style type="text/css">
 +
            .panel-default .panel-heading a{
 +
                text-decoration: none;
 +
                display:block;
 +
                padding:10px;
 +
            }
 +
        .panel-heading.panel-title{
 +
            text-decoration: none;
 +
            padding-top:0px;
 +
            padding-bottom:0px;
 +
            padding-left:0px;
 +
            padding-right:0px;
 +
            text-align:center;
 +
            font-size:19px;
 +
           
 +
        }
 +
        a[aria-expanded="true"] {
 +
            background-color:rgba(70, 73, 76, 0.95);
 +
            text-decoration: none;
 +
            color:white;
 +
        }
 +
       
 +
        .panel-default .panel-heading a[aria-expanded="false"]{
 +
            -o-transition: background-color 1s linear;
 +
            -moz-transition: background-color 1s linear;
 +
            -khtml-transition: background-color 1s linear;
 +
            -webkit-transition: background-color 1s linear;
 +
            -ms-transition: background-color 1s linear;
 +
            transition: background-color 1s linear;
 +
        }
 +
        .panel-default .panel-heading a[aria-expanded="false"]:hover{
 +
            background-color:rgba(70, 73, 76, 0.95);
 +
            text-decoration: none;
 +
            color:white;
 +
        }
 +
        .panel-default .panel-heading a[aria-expanded="true"]{
 +
            -o-transition: opacity 1s linear;
 +
            -moz-transition: opacity 1s linear;
 +
            -khtml-transition: opacity 1s linear;
 +
            -webkit-transition: opacity 1s linear;
 +
            -ms-transition: opacity 1s linear;
 +
            transition: opacity 0.7s linear;
 +
        }
 +
        .panel-default .panel-heading a[aria-expanded="true"]:hover{
 +
            opacity:0.7;
 +
        }
 +
       
 +
        .coll p a{
 +
            color:#6495ED !important;
 +
        }
 +
        .coll p a:hover{
 +
            color:#6495ED !important;
 +
        }
 +
        .coll {
 +
            width:100%;
 +
            float:left;
 +
        }
 +
        .coll .info {
 +
            width:6%;
 +
            font-size:11px;
 +
            color:#a4a4a4;
 +
            margin-top:0px;
 +
            float:left;
 +
           
 +
        }
 +
        .coll .content {
 +
            width:94%;
 +
            float:left;
 +
            margin-left:40px;
 +
            margin-top:-3px;
 +
        }
 +
        .coll .ordi {
 +
            width;100%;
 +
            margin:0px 0px 0px 0px;
 +
            font-size:35px;
 +
            font-style:italic;
 +
            float:left;
 +
            color:#11abb0;
 +
            opacity:0.8;
 +
        }
 +
       
 +
            </style>
 +
       
 +
        <script type="text/javascript">
 +
            $(document).ready(function(){
 +
                              $("#button1").click(function(){
 +
                                                  $(".panel-collapse").collapse("show");
 +
                                                  });
 +
                              });
 +
                              $(document).ready(function(){
 +
                                                $("#button2").click(function(){
 +
                                                                    $(".panel-collapse").collapse("hide");
 +
                                                                    });
 +
                                                });
 +
                                                $("#notebook").addClass("navbar-active");
 +
            </script>
 +
        <!--panel 引用 end ==================-->
 +
       
 
           <!-- Navigation -->
 
           <!-- Navigation -->
 
         <div id="navigation" class="navbar navbar-fixed-top">
 
         <div id="navigation" class="navbar navbar-fixed-top">
Line 75: Line 227:
 
                     </a>
 
                     </a>
 
                     <div id="logo" style="max-width:0px"><a class="" href="https://2018.igem.org/Team:Peking"><img
 
                     <div id="logo" style="max-width:0px"><a class="" href="https://2018.igem.org/Team:Peking"><img
−
                     src="https://static.igem.org/mediawiki/2018/e/e2/T--Peking--_toolbar.jpeg" width="45%"></a></div>
+
                     src="https://static.igem.org/mediawiki/2018/3/36/T--Peking--Logo.png"></a></div>
 
                    
 
                    
 
                     <div class="nav-collapse collapse">
 
                     <div class="nav-collapse collapse">
−
                         <ul class="nav">
+
                         <ul class="nav">                          
−
                             <li class="dropdown menu-1"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;Project</a>
+
 
 +
                             <li class="menu-1"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking">Home</a>
 +
                            </li>
 +
 
 +
                            <li class="dropdown menu-2"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Project</a>
 
                                 <ul class="dropdown-menu">
 
                                 <ul class="dropdown-menu">
−
                                     <li><a href="https://2018.igem.org/Team:Peking/Project">Project</a></li>
+
                                     <li><a href="https://2018.igem.org/Team:Peking/Project" class="barfont1">Description</a></li>
−
                                    <li><a href="https://2018.igem.org/Team:Peking/Description" class="barfont1">Description</a></li>
+
 
                                     <li><a href="https://2018.igem.org/Team:Peking/Design" class="barfont1">Design</a></li>
 
                                     <li><a href="https://2018.igem.org/Team:Peking/Design" class="barfont1">Design</a></li>
 
                                     <li><a href="https://2018.igem.org/Team:Peking/Demonstrate" class="barfont1">Demonstration</a></li>
 
                                     <li><a href="https://2018.igem.org/Team:Peking/Demonstrate" class="barfont1">Demonstration</a></li>
−
                                     <li><a href="https://2018.igem.org/Team:Peking/Future_Plan" class="barfont1">Future Plan</a></li>
+
                                     <li><a href="https://2018.igem.org/Team:Peking/Perspective" class="barfont1">Perspective</a></li>
 
                                 </ul>
 
                                 </ul>
 
                             </li>
 
                             </li>
−
                             <li class="dropdown menu-2"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Data Page</a>
+
                             <li class="menu-3"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking/Model">Modeling</a>
−
                                <ul class="dropdown-menu">
+
−
                                    <li><a href="https://2018.igem.org/Team:Peking/Results">Data Page</a></li>
+
−
                                    <li><a href="https://2018.igem.org/Team:Peking/Phase_Separation_D" class="barfont1">Phase Separation</a></li>
+
−
                                    <li><a href="https://2018.igem.org/Team:Peking/Functions_D" class="barfont1">Functions</a></li>
+
−
                                </ul>
+
 
                             </li>
 
                             </li>
−
                             <li class="dropdown menu-3"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Model</a>
+
                             <li class="menu-4"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking/Software">Software</a>
−
                                <ul class="dropdown-menu">
+
−
                                    <li><a href="https://2018.igem.org/Team:Peking/Model">Model</a></li>
+
−
                                    <li><a href="https://2018.igem.org/Team:Peking/Phase_Separation_M" class="barfont1">Phase Separation</a></li>
+
−
                                    <li><a href="https://2018.igem.org/Team:Peking/Functions_M" class="barfont1">Functions</a></li>
+
−
                                </ul>
+
 
                             </li>
 
                             </li>
−
                             <li class="menu-4"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking/Software" >Software</a>
+
 
 +
 
 +
                             <li class="menu-6"><a class="colapse-menu1" href="https://2018.igem.org/Team:Peking/Human_Practices">Human Practices</a>
 
                             </li>
 
                             </li>
−
                            <li class="dropdown menu-5"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Human Practices</a>
+
                                 <li class="dropdown menu-7"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Achievement</a>
−
                                <ul class="dropdown-menu">
+
−
                                    <li><a href="https://2018.igem.org/Team:Peking/Human_Practices/Gold" class="barfont1">Human Practices</a></li>
+
−
                                    <li><a href="https://2018.igem.org/Team:Peking/Public_Engagement" class="barfont1">Public Engagement</a></li>
+
−
                                </ul>
+
−
                            </li>
+
−
                                 <li class="dropdown menu-6"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Team</a>
+
 
                                     <ul class="dropdown-menu">
 
                                     <ul class="dropdown-menu">
−
                                         <li><a href="https://2018.igem.org/Team:Peking/Team_Members" class="barfont1">Team Members</a></li>
+
                                         <li><a href="https://2018.igem.org/Team:Peking/Judging_Form" class="barfont1">Judging Form</a></li>
−
                                         <li><a href="https://2018.igem.org/Team:Peking/Attributions" class="barfont1">Attributions</a></li>
+
                                         <li><a href="https://2018.igem.org/Team:Peking/Parts" class="barfont1">Parts</a></li>
−
                                         <li><a href="https://2018.igem.org/Team:Peking/Safety" class="barfont1">Safety</a></li>
+
                                         <li><a href="https://2018.igem.org/Team:Peking/Improve" class="barfont1">Improvement</a></li>
−
                                         <li><a href="https://2018.igem.org/Team:Peking/Notebook" class="barfont1">Notebook</a></li>
+
                                         <li><a href="https://2018.igem.org/Team:Peking/InterLab" class="barfont1">InterLab</a></li>
 +
 
 
                                     </ul>
 
                                     </ul>
 
                                 </li>
 
                                 </li>
−
                                 <li class="dropdown menu-7"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Collaborations</a>
+
                                 <li class="dropdown menu-8"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Lab</a>
 
                                     <ul class="dropdown-menu">
 
                                     <ul class="dropdown-menu">
 +
                                        <li><a href="https://2018.igem.org/Team:Peking/Team_Members">Team Members</a></li>
 +
                                        <li><a href="https://2018.igem.org/Team:Peking/Attributions" class="barfont1">Attributions</a></li>
 +
                                        <li><a href="https://2018.igem.org/Team:Peking/Notebook" class="barfont1">Notebook</a></li>
 
                                         <li><a href="https://2018.igem.org/Team:Peking/Collaborations" class="barfont1">Collaborations</a></li>
 
                                         <li><a href="https://2018.igem.org/Team:Peking/Collaborations" class="barfont1">Collaborations</a></li>
 +
                                        <li><a href="https://2018.igem.org/Team:Peking/Safety" class="barfont1">Safety</a></li>
 
                                         <li><a href="https://2018.igem.org/Team:Peking/Acknowledgement" class="barfont1">Acknowledgement</a></li>
 
                                         <li><a href="https://2018.igem.org/Team:Peking/Acknowledgement" class="barfont1">Acknowledgement</a></li>
−
                                         <li><a href="https://2018.igem.org/Team:Peking/InterLab" class="barfont1">InterLab</a></li>
+
                                          
−
                                    </ul>
+
−
                                </li>
+
−
                                <li class="dropdown menu-8"><a class="dropdown-toggle" data-toggle="dropdown" href="#" >Parts</a>
+
−
                                    <ul class="dropdown-menu">
+
−
                                        <li><a href="https://2018.igem.org/Team:Peking/Parts">Parts</a></li>
+
−
                                        <li><a href="https://2018.igem.org/Team:Peking/Favorite_Parts" class="barfont1">Favorite Parts</a></li>
+
−
                                        <li><a href="https://2018.igem.org/Team:Peking/Part_Table" class="barfont1">Part Table</a></li>
+
−
                                        <li><a href="https://2018.igem.org/Team:Peking/Part_Collection" class="barfont1">Part Collection</a></li>
+
 
                                     </ul>
 
                                     </ul>
 
                                 </li>
 
                                 </li>
Line 138: Line 276:
 
         </div>
 
         </div>
 
         <!--/Navigation -->
 
         <!--/Navigation -->
−
 
 
          
 
          
−
 
 
          
 
          
−
          
+
         <!-- Page Title======================================================================== -->
−
         <div class="content-outer">
+
         <div id="page-title">
−
             <div id="page-content" class="row page">
+
            <div class="row">
 +
                <div class="twelve columns centered text-center">
 +
                    <h1>Modeling</h1>
 +
                </div>
 +
             </div>
 +
        </div><!-- Page Title End-->
 +
        <div id="page-content" class="row page">
 +
            <div id="primary" class="twelve columns">
 +
                <section>
 +
                    <div class="row">
 +
                       
 +
                       
 +
                       
 +
                       
 +
                        <div class="three columns">
 +
                            <div id="page-wrap">
 +
                                <div id="sidebar" style="color:#000000">
 +
                                    <h4><a href="javascript:void(0);" onclick="naver('A')">&bull;Overview</a></h4>
 +
                                    <h4><a href="javascript:void(0);" onclick="naver('B')">&bull;SPOT&#160;Formation</a></h4>
 +
                                    <h4><a href="javascript:void(0);" onclick="naver('C')">&bull;Regulation</a></h4>
 +
                                    <h4><a href="https://static.igem.org/mediawiki/2018/3/30/T--Peking--Modelling_Revise.pdf">&bull;PDF&#160;Version&#160;Download</a></h4>                                 
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                       
 +
                       
 +
                       
 +
                       
 +
                        <div class="nine columns">
  
  
 +
           
 +
                            <div class="texttitle"><a id="A"></a>Overview
 +
</div>
 +
                            <hr style="border:2px dashed; height:2px" color="#666666">
  
−
Modelling part for wiki
+
                            <div class="coll">
−
Simulation for phase separation
+
                               
−
Considering our project is mainly predicated on liquid-liquid phase separation, we simulated phase separation of a ternary mixture in silico for deeper understanding and approximate predictions of our experiments. To better demonstrate, we start with a binary mixture to see why and when will two components separate.
+
                                <div class="content">
 +
                                    <div align="center"><img src="https://static.igem.org/mediawiki/2018/2/20/T--Peking--mod_fig1.png"></div>
 +
                                </div>
 +
                            </div>
 +
    <div class="texttitle"><a id="B"></a>SIMULATION FOR PHASE SEPARATION
 +
</div>
 +
                            <hr style="border:2px dashed; height:2px" color="#666666">
 +
          <div class="coll">
 +
                               
 +
                                <div class="content">
 +
<div align="center">
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/3/31/T--Peking--mod_fig2.png"></div>                                 
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/d/d9/T--Peking--mod_fig40.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/0/08/T--Peking--mod_fig4.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/9/94/T--Peking--mod_fig5.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/e/ec/T--Peking--mod_fig6.png"></div> 
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/a/a3/T--Peking--mod_fig7.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/2/24/T--Peking--mod_fig8.png"></div> 
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/f/f6/T--Peking--mod_fig9.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/2/25/T--Peking--mod_fig10.png"></div> 
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/1/1e/T--Peking--mod_fig11.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/4/48/T--Peking--mod_fig12.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/e/e4/T--Peking--mod_fig13.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/f/f0/T--Peking--mod_fig14.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/e/e4/T--Peking--mod_fig15.gif"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/b/b1/T--Peking--mod_fig16.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/a/a7/T--Peking--mod_fig17.gif"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/5/5e/T--Peking--mod_fig18.png"></div>
 +
<br/></div>
 +
                                </div>
 +
                            </div>
 +
<div class="texttitle"><a id="C"></a>Simulation for metabolic regulation with phase separation
  
−
Generally, when intermolecular interaction is neglected (i.e. all molecules can be treated independently), two components tend to mix with each other where entropy reaches its maximum. Homogeneous mixed state remains stable in this case, for instance, water and alcohol mix at random ratio.  
+
                           
 +
          <div class="coll">
 +
</div>
 +
                               
 +
                                <div class="content">
 +
<div align="center">
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/e/e5/T--Peking--mod_fig19.png"></div>                                 
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/8/8d/T--Peking--mod_fig20.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/7/7d/T--Peking--mod_fig21.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/9/91/T--Peking--mod_fig22.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/4/46/T--Peking--mod_fig23.png"></div> 
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/c/c2/T--Peking--mod_fig24.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/3/37/T--Peking--mod_fig25.png"></div> 
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/4/4e/T--Peking--mod_fig26.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/f/fa/T--Peking--mod_fig27.png"></div> 
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/9/94/T--Peking--mod_fig28.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/b/bb/T--Peking--mod_fig29.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/1/12/T--Peking--mod_fig30.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/7/7d/T--Peking--mod_fig31.gif"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/7/74/T--Peking--mod_fig32.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/9/95/T--Peking--mod_fig33.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/f/f1/T--Peking--mod_fig34.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/e/e5/T--Peking--mod_fig35.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/a/a0/T--Peking--mod_fig36.gif"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/6/63/T--Peking--mod_fig37.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/5/57/T--Peking--mod_fig38.png"></div>
 +
<div align="center"><img src="https://static.igem.org/mediawiki/2018/c/c8/T--Peking--mod_fig39.png"></div>
 +
<br/></div>
 +
                                </div>
 +
                            </div>
  
−
fig1(left): mixed binary mixture, rounds with different colors denote different molecules
 
  
−
 
−
fig1(right): demixed binary mixture, one component forms a dense liquid droplet
 
  
−
Things might get a little different when interaction among molecules are considered. Under the conditions of constant temperature, volume and particle numbers, the system is at equilibrium when the Helmholtz free energy F is the lowest. Based on regular solution model, the free energy density f takes the following form in the unit of k_B T[1]:
+
<div class="coll">
−
f=ϕ ln⁡ϕ+(1-ϕ)  ln⁡(1-ϕ)++χϕ(1-ϕ)+λ/2 |∇ϕ|^2,            (1)
+
                                <div class="content">
−
where ϕ is the volume fraction of one component (let us say component A), χ is a parameter characterizing the strength of intermolecular interactions and λ is related to the surface tension between interfaces. The volume fraction of A is defined as the volume of A molecules divided by the total volume of the system. In a binary system, the volume fraction of the other component, let us say component B, becomes naturally 1-ϕ.
+
                                    <p> You can see the pdf version of our modelling <a href="https://static.igem.org/mediawiki/2018/9/9e/T--Peking--Modeling.pdf"> here</a></p>
−
    First let’s focus on the symmetric part of f , i.e f_0=ϕ ln⁡ϕ+(1-ϕ) ln⁡(1-ϕ)+χϕ(1-ϕ), and see how its shape changes as we vary χ. When A and B attract, χ is less than 0; on the contrary, when A and B repulse, χ is greater than 0. Easily seen from fig2, when χ<2, f_0 only has one minimum; when χ>2, f_0 has two minima and one maximum. A bifurcation takes place when χ=2 and essentially alters the feature of free energy density.
+
                                </div>
−
+
</div>
−
fig2: plot of symmetric part of free energy density under various χ
+
<!--
 +
<div class="coll">
 +
<div class="content">
 +
<div class="left" text-align="center">
 +
<div class="right" text-align="center">
 +
<object class="center" data="https://static.igem.org/mediawiki/2018/9/9e/T--Peking--Modeling.pdf" style="height: 626px; width: 602px; margin-top: 48px; margin-right: 0px;margin-left: 0px; float: left" max-width="600px" max-height="100px"><p>no pdf, download here<a href="https://static.igem.org/mediawiki/2018/9/9e/T--Peking--Modeling.pdf">click here to
 +
  download the PDF file.</a></p>    </object>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
-->
  
−
    For better illustration, we scrutinize two typical cases, χ=0 and χ=4. Fig3 shows the free energy density for mixed state in blue solid line and demixed state in green dotted line. Obviously seen from fig3, when χ=0, for any initial concentration represented by ϕ_0, it always requires extra free energy for the system to demix into any two separate states ϕ_1 and ϕ_2, where the green dotted line is higher than any point on the blue solid line between ϕ_1 and ϕ_2; when χ=4, there exists a range of ϕ_0 to separate into two demixed compositions ϕ_1 and ϕ_2, where the green dotted line is lower than any point on the blue solid line between ϕ_1 and ϕ_2. This is the situation where phase separation could happen spontaneously.
+
         
−
 
+
                           
−
+
                        </div><!--9 columns end-->
−
fig3: The blue solid line and the green dotted line represent the free energy density for mixed state and demixed state respectively. (A)χ=0. The green dotted line is always higher than the blue solid line, indicating an extra energy for separation; (B)χ=4. The green dotted line is below the blue solid line, making spontaneous phase separation possible.
+
                       
−
 
+
                    </div>
−
To be more precious, we can specify the conditions where separation could happen. According to fundamental work on liquid-liquid phase separation, when d^2 f/dϕ^2<0, any local perturbation will result in spontaneous separation, such a formation is named spinodal decomposition; when d^2 f/dϕ^2>0 and between the two minima, only sufficiently large global perturbation can make phase separation happen, such an approach is called nucleation; and their boundary is named spinodal line. Now, if the free energy density function is symmetric, when ϕ lies outside the two minima, phase separation cannot happen. The boundary between whether phase separation can take place or not is called binodal line.
+
                   
−
 
+
                                   
−
Based on the criteria above, we plot the phase diagram of a binary mixture. In fig4, we represent the initial concentration by ϕ in the x-axis and vary χ in the y-axis. The region confined by spinodal line is the unstable region, for separation can take place under any local perturbation. In contrast, the region between the binodal line and the spinodal line is the metastable region, where only sufficiently large global perturbation can initiate separation.
+
                   
−
+
                    </div><!--row end-->
−
fig4: Binary phase diagram. Binodal line shows the boundary between whether phase can separate or not. Spinidal line shows the boundary between two different formations: spinodal decomposition and nucleation. The area confined by spinodal line is the unstable region while the area between bimodal line and spinodal line is the metastable region.
+
            </section>
−
 
+
        </div><!--12 columes end-->
−
As aforementioned, our system is a ternary mixture system consisting of two multivalent proteins and water, which is a bit more complicated. To capture the basic feature of three-component phase separation, we use a similar theoretical model for simulation. The free energy density f is now written in the unit of k_B T as:
+
         </div><!--page-content end-->
−
f=ϕ_1  ln⁡〖ϕ_1 〗+ϕ_2  ln⁡〖ϕ_2 〗+ϕ_3  ln⁡〖ϕ_3 〗+χ_(1-2) ϕ_1 ϕ_2+χ_(1-3) ϕ_1 ϕ_3+χ_(2-3) ϕ_2 ϕ_3+λ_1/2 |∇ϕ_1 |^2+λ_2/2 |∇ϕ_2 |^2+λ_3/2 |∇ϕ_3 |^2,
+
−
where ϕ_1 denotes the first multivalent protein (FKBP for example), ϕ_2 denotes the second multivalent protein (Frb for example) and ϕ_3 denotes water. An intrinsic relation of the three is given by:
+
−
ϕ_1+ϕ_2+ϕ_3=1
+
−
Phenomenologically speaking, ϕ_1 and ϕ_2 condensate together and separate from ϕ_3. For computational convenience, χ_(1-2) and χ_(1-3) are taken value above 2 and χ_(2-3) below 2. A ternary phase diagram is calculated in a similar way by determining whether ϕ_1 and ϕ_3 separate and whether ϕ_2 and ϕ_3 separate. The results are shown in fig5. 
+
−
 
+
−
fig5: Ternary phase diagrams. (A)χ_(1-2)=0; χ_(1-3)=8; χ_(2-3)=3; (B) χ_(1-2)=0; χ_(1-3)=8; χ_(2-3)=4.
+
−
 
+
−
  The phase diagram only provides a rough approximation on where phase separation can happen, it is insufficient to predict what happens after the separation. Hence, we further recur to the continuum model first proposed by Cahn and Hilliard to simulate a dynamic process.
+
−
∂c/∂t=∇⋅(M∇μ)
+
−
μ=df/dc-λ∇^2 c
+
−
We use finite element method in a 100×100 mesh and select Neumann boundary condition to solve the partial differential equations above. Crank-Nicolson method is used for time-stepping with a footstep of 2.0×〖10〗^(-3). The initial composition is given by adding a perturbation of strength 〖10〗^(-2) to a homogenous sate. A typical result is given as followed:
+
−
+
−
fig6: Simulation for dynamic evolution of phase separation under χ_(1-2)=0, χ_(1-3)=3, χ_(2-3)=4. (A) The concentration distribution of ϕ_1; (B) The centration of ϕ_1 on the sampled red dotted line in (A). （wiki上用gif）
+
−
 
+
−
We further adjust the interaction strength between two proteins, thus affecting both χ_(1-3) and χ_(2-3). As χ increases, indicating a stronger interaction, the time for phase separation to occur is decreased, which is in accordance with our experimental results.
+
−
 
+
−
+
−
fig7: Simulation for phase separation under different interaction strengths. The stronger the interaction, the faster separation emerges.
+
−
 
+
−
 
+
−
 
+
−
References:
+
−
[1] Joel Berry el.al (2018). Physical principles of intracellular organization via active and passive phase transitions
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
            </div> <!-- page-content End-->
+
−
         </div> <!-- Content End-->
+
−
       
+
−
       
+
−
       
+
−
       
+
−
       
+
 
          
 
          
 
          
 
          
Line 221: Line 422:
 
          
 
          
 
          
 
          
−
        <!-- footer============================================================================== -->
+
                                <!-- footer============================================================================== -->
 
         <style>
 
         <style>
 
             footer .copyright span:before {
 
             footer .copyright span:before {
Line 237: Line 438:
 
         </style>
 
         </style>
 
         <footer id="page-footer">
 
         <footer id="page-footer">
 +
<footer id="page-footer">
 +
                <div class="row,row1">
 +
                    <ul class="footer-social">
 +
                        <li class="col-md-6" id="PKU-administration" style="margin-bottom:25px;max-width:300px">
 +
                            <a href="http://dean.pku.edu.cn/pkudean/index.html"><img src="https://static.igem.org/mediawiki/2018/7/7a/T--Peking--images_PKU_Administration_logo.png"></a>
 +
                        </li>
 +
                        <li class="col-md-6" id="PKU-SLS" style="margin-bottom:25px;max-width:300px">
 +
                            <a href="http://www.bio.pku.edu.cn/"><img src="https://static.igem.org/mediawiki/2018/0/04/T--Peking--images_PKU_SLS_logo.png"></a>
 +
                        </li>
 +
                     
 +
                        <li class="col-md-6" id="PKU-CQB" style="margin-bottom:25px;max-width:300px">
 +
                            <a href="http://cqb.pku.edu.cn/en/"><img src="https://static.igem.org/mediawiki/2018/e/e1/T--Peking--images_PKU_CQB_logo.png"></a>
 +
                        </li>
 +
 +
                    </ul>
 +
                </div>
 
             <div class="row">
 
             <div class="row">
 
                 <div class="twelve columns" >
 
                 <div class="twelve columns" >
 
                     <ul class="copyright">
 
                     <ul class="copyright">
 
                         <!--<li>&copy; 2014 Sparrow</li> -->
 
                         <!--<li>&copy; 2014 Sparrow</li> -->
−
                         <li><a href="2018.igem.org/Team:Peking">Home</a>&nbsp;&nbsp;&nbsp;<a href="mailto:pkuigem2016@126.com">Contact</a></li>
+
                         <li><a href="https://2018.igem.org/Team:Peking">Home</a>&nbsp;&nbsp;&nbsp;<a href="mailto:pekingigem2018@126.com">Contact</a></li>
 
                         <span> &copy;2018 PEKING IGEM. All Rights Reserved.</span>
 
                         <span> &copy;2018 PEKING IGEM. All Rights Reserved.</span>
 
                         <li><a href="http://getbootstrap.com/2.3.2/">Based on Bootstrap</a></li>
 
                         <li><a href="http://getbootstrap.com/2.3.2/">Based on Bootstrap</a></li>
Line 248: Line 465:
 
                 <div id="go-top" style="display: block;"><a title="Back to Top" href="#">Go To Top</a></div>
 
                 <div id="go-top" style="display: block;"><a title="Back to Top" href="#">Go To Top</a></div>
 
             </div>
 
             </div>
−
        </footer> <!-- Footer End-->
+
 
−
       
+
 
−
       
+
<!-- Footer End-->
−
        <!-- Java Script======================================================================= -->
+
                       
−
        <script>window.jQuery || document.write('<script src="https://2016.igem.org/Template:Peking/Javascript/jquery_1_10_2_min?action=raw&ctype=text/javascript"><\/script>')</script>
+
                       
−
        <script type="text/javascript" src="https://2016.igem.org/Template:Peking/Javascript/jquery_migrate_1_2_1_min?action=raw&ctype=text/javascript"></script>
+
            <!-- Java Script======================================================================= -->
−
       
+
            <script>window.jQuery || document.write('<script src="https://2018.igem.org/Template:Peking/Javascript/jquery_1_10_2_min?action=raw&ctype=text/javascript"><\/script>')</script>
−
        <script src="https://2016.igem.org/Template:Peking/Javascript/jquery_flexslider?action=raw&ctype=text/javascript"></script>
+
            <script type="text/javascript" src="https://2018.igem.org/Template:Peking/Javascript/jquery_migrate_1_2_1_min?action=raw&ctype=text/javascript"></script>
−
        <script src="https://2016.igem.org/Template:Peking/Javascript/doubleaptogo?action=raw&ctype=text/javascript"></script>
+
           
−
        <script src="https://2016.igem.org/Template:Peking/Javascript/init?action=raw&ctype=text/javascript"></script>
+
            <script src="https://2018.igem.org/Template:Peking/Javascript/jquery_flexslider?action=raw&ctype=text/javascript"></script>
−
       
+
            <script src="https://2018.igem.org/Template:Peking/Javascript/doubleaptogo?action=raw&ctype=text/javascript"></script>
−
       
+
            <script src="https://2018.igem.org/Template:Peking/Javascript/init?action=raw&ctype=text/javascript"></script>
−
        <!--quotations from black: start-->
+
           
−
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery?action=raw&ctype=text/javascript"></script>
+
            <!--quotations from flexslider: start-->
−
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_sticky?action=raw&ctype=text/javascript"></script>
+
            <script src='https://2018.igem.org/Template:Peking/Javascript/modernizr_js?action=raw&ctype=text/javascript'></script>
−
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_easing_1_3_pack?action=raw&ctype=text/javascript"></script>
+
                <script type='text/javascript' src='https://2018.igem.org/Template:Peking/Javascript/fjquery_polaroid?action=raw&ctype=text/javascript'></script>
−
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/bootstrap_min?action=raw&ctype=text/javascript"></script>
+
                <script type='text/javascript' src='https://2018.igem.org/Template:Peking/Javascript/fjquery_easing?action=raw&ctype=text/javascript'></script>
−
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_patallax_1_1_3?action=raw&ctype=text/javascript"></script>
+
                <script type='text/javascript' src='https://2018.igem.org/Template:Peking/Javascript/fjquery_transform_0_8_0_min?action=raw&ctype=text/javascript'></script>
−
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/appear?action=raw&ctype=text/javascript"></script>
+
                <script type='text/javascript' src='https://2018.igem.org/Template:Peking/Javascript/fjquery_preloader?action=raw&ctype=text/javascript'></script>
−
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/modernizr?action=raw&ctype=text/javascript"></script>
+
                <!--quotations from flexslider: end-->
−
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_prettyPhoto?action=raw&ctype=text/javascript"></script>
+
               
−
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/isotope?action=raw&ctype=text/javascript"></script>
+
                <!--quotations from black: start-->
−
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_bxslider_min?action=raw&ctype=text/javascript"></script>
+
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/jquery?action=raw&ctype=text/javascript"></script>
−
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_cycle_all?action=raw&ctype=text/javascript" ></script>
+
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/jquery_sticky?action=raw&ctype=text/javascript"></script>
−
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/jquery_maximage?action=raw&ctype=text/javascript"></script>
+
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/jquery_easing_1_3_pack?action=raw&ctype=text/javascript"></script>
−
        <script type='text/javascript' src="https://2016.igem.org/Template:Peking/Javascript/scripts?action=raw&ctype=text/javascript "></script>
+
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/bootstrap_min?action=raw&ctype=text/javascript"></script>
−
        <!--quotations from black: end-->
+
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/jquery_patallax_1_1_3?action=raw&ctype=text/javascript"></script>
−
       
+
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/appear?action=raw&ctype=text/javascript"></script>
−
       
+
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/modernizr?action=raw&ctype=text/javascript"></script>
−
    </body>
+
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/jquery_prettyPhoto?action=raw&ctype=text/javascript"></script>
 +
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/isotope?action=raw&ctype=text/javascript"></script>
 +
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/jquery_bxslider_min?action=raw&ctype=text/javascript"></script>
 +
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/jquery_cycle_all?action=raw&ctype=text/javascript" ></script>
 +
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/jquery_maximage?action=raw&ctype=text/javascript"></script>
 +
                <script type='text/javascript' src="https://2018.igem.org/Template:Peking/Javascript/scripts?action=raw&ctype=text/javascript "></script>
 +
                <!--quotations from black: end-->
 +
                           
 +
                           
 +
                            </body>
 
</html>
 
</html>

Latest revision as of 03:04, 18 October 2018

Modeling

Overview
SIMULATION FOR PHASE SEPARATION

Simulation for metabolic regulation with phase separation

You can see the pdf version of our modelling here