Difference between revisions of "Team:Tsinghua/Model"

Line 184: Line 184:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
+
       
 
+
       
 
+
       
 
+
       
 
          
 
          
 
         <section class="py-0 overflow-hidden">
 
         <section class="py-0 overflow-hidden">
Line 209: Line 209:
 
                 <div class="row no-gutters">
 
                 <div class="row no-gutters">
 
                     <div class="col-md-7 col-lg-12">
 
                     <div class="col-md-7 col-lg-12">
                         <p class="dropcap">To give you a more intuitive understanding of the phase separation process and the effect of phase separation on the rate of enzymatic reactions, we have made an interactive interface. You can choose the different strengths of interactions between separation elements and different enzyme concentrations to see how the phase separation proceeds and how the rate of the enzymatic reaction changes. </p>
+
                         <p class="dropcap">In order to use theoretical caculation to guide experiment, we try to interpret our mathematical models in a visual version by design some virtual experiments and computer simulations. It is well known that, phase separation is a thermodynamic process which follows complex nonelinear physical law. To achieve precise but economical numerical calculation, we use Cahn-Hilliard equation and simplify some details in 2-dimensional simulation. And try a particle model as our 3-dimensional simulation. We also try artificial light-induce in our simulation. </p>
 
                          
 
                          
                         <p class="mb-0">The computation of enzymatic reaction rate changes in the user-interface is based on formula (2.17), which we made some modifications to. First, we assume that every protein cluster forms a real phase, which means 𝜒<sub>𝑖</sub>=1 for all 𝑖’s. Then, we get </p>
+
                    </div>
                         <div class="row my-4 my-lg-6">
+
                </div>
 +
                <div class="row">
 +
                    <div class="col-6">
 +
                         <h3 class="ls color-primary mb-4">Two-Dimensional Simulation</h3>
 +
                        <p class="dropcap">This part of our work is based on well-known Cahn-Hilliard equation, whose standard mathematical representation shows as follows: </p>
 +
                         <div class="row">
 
                             <div class="col-12">
 
                             <div class="col-12">
                                 <img src="https://static.igem.org/mediawiki/2019/4/4d/T--Tsinghua--model3form3_1.png" width="80%" alt="" />
+
                                 <img src="https://static.igem.org/mediawiki/2019/9/90/T--Tsinghua--form1_1.png" width="100%" alt="" />
 
                                  
 
                                  
 
                             </div>
 
                             </div>
 
                              
 
                              
 
                         </div>
 
                         </div>
                         <p class="dropcap">If we denote by 𝑆<sub>1</sub> the specific surface area of protein clusters (the ratio of surface area to volume) after phase separation and 𝑆<sub>0</sub> the specific surface area of protein all protein particles before phase separation, one will find the term 𝑞<sup>1/3</sup><sub>0</sub><sup>𝑛</sup><sub>𝑖=1</sub>𝑞<sup>2/3</sup><sub>𝑖</sub> is exactly equal to 𝑆<sub>1</sub>/𝑆<sub>0</sub>. We can use this relationship to extend the application of equation (3.1) to the case where the shape of the protein phase is arbitrary (i.e., not necessarily a sphere), just by replacing the term 𝑞<sup>1/3</sup><sub>0</sub><sup>𝑛</sup><sub>𝑖=1</sub>𝑞<sup>2/3</sup><sub>𝑖</sub> with 𝑆<sub>1</sub>/𝑆<sub>0</sub>. The phase-separated images are two-dimensional, where we can only obtain the ratio of the perimeter to the area of the protein phase (denoted by 𝐶<sub>1</sub> and 𝐶<sub>0</sub> after and before the phase separation respectively) rather than the surface area to volume ratio. We can roughly estimate the relationship between the two ratios using the relationship 3𝐶<sub>1</sub>/𝐶<sub>0</sub>=2𝑆<sub>1</sub>/𝑆<sub>0</sub>. Therefore, we can rewrite (3.1) as
+
                       
                        </p>
+
                         <p class="dropcap">In this formula, variable D is a diffusion coefficient, whose unit is 𝜇m<sup>2</sup>/ms,c is the concentration of the fluid. By referring to online open-source code, we utilize a time marching method to the equation. It can save a lot of time and provide a convenient data which is easy to visualize. The data is presented with four subplots. The top two plots show the solution as a function of space. The lower left plot shows a cross section of the solution, and the lower right plot shows a portion of the power spectrum of the solutions cosine transformation. </p>
 +
                        <div class="row">
 +
                            <div class="col-6">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/5/58/T--Tsinghua--2dsim1.jpg" width="100%" alt="" />
 +
                                    <center><p>while D=1</p></center>
 +
                            </div>
 +
                            <div class="col-6">
 +
                                    <img src="https://static.igem.org/mediawiki/2019/f/f1/T--Tsinghua--2dsim2.jpg" width="100%" alt="" />
 +
                                    <center><p>while D=0.5</p></center>
 +
                            </div>
 +
                        </div>
 +
                        <div class="row">
 +
                                <div class="col-6">
 +
                                        <img src="https://static.igem.org/mediawiki/2019/f/f2/T--Tsinghua--2dsim3.jpg" width="100%" alt="" />
 +
                                        <center><p>while D=0.1</p></center>
 +
                                </div>
 +
                                <div class="col-6">
 +
                                        <img src="https://static.igem.org/mediawiki/2019/3/3d/T--Tsinghua--2dsim4.jpg" width="100%" alt="" />
 +
                                        <center><p>while D=0.5</p></center>
 +
                                </div>
 +
                            </div>
 +
                    </div>
 +
                    <div class="col-6">
 +
                        <h3 class="ls color-primary mb-4">Expansion to three-dimensional space</h3>
 +
                        <p class="dropcap">In order to more realistically reflect the phase separation process in the cell, we simulated the phase separation process in the 3D grid space. The particles are set to move randomly within the three-dimensional grid space. When particles are gathered, the probability that they will separate at the next moment is inversely proportional to the strength of the interaction between them. Therefore, when particles have mutual attraction, they eventually tend to be in a state of being gathered into clusters. As shown in the following animation, the particles in the image on the right are set to have a stronger interaction than the particles in the image on the left. The difference in phase separation ability can be found in the simulation animation.</p>
 
                         <div class="row my-4 my-lg-6">
 
                         <div class="row my-4 my-lg-6">
 +
                            <div class="row">
 +
                                <div class="col-6">
 +
                                    <video width="100%"  controls>
 +
                                        <source src="https://static.igem.org/mediawiki/2019/b/b9/T--Tsinghua--model1_1not.mp4" type="video/mp4">
 +
                                           
 +
                                        </video>
 +
                                        <center><p>Without light-induce</p></center>
 +
                                    </div>
 +
                                    <div class="col-6">
 +
                                        <video width="100%"  controls>
 +
                                            <source src="https://static.igem.org/mediawiki/2019/5/5f/T--Tsinghua--model1_2has.mp4" type="video/mp4">
 +
                                               
 +
                                            </video>
 +
                                            <center><p>Light-induce</p></center>
 +
                                        </div>
 +
                                       
 +
                                       
 +
                                    </div>
 +
                                   
 +
                                </div>
 +
                                <p class="dropcap">To the best of our knowledge, this simulation is the first to apply three-dimensional random walks to phase separation simulations, although it is more qualitative than quantitative. It gives a well-considered interpretation of photo-activated phase separation, that is, light changes the conformation of the protein and then changes the strength of the interaction between proteins, thereby affecting the phase separation state.</p>
 +
                            </div> 
 +
                        </div>   
 +
                       
 +
                       
 +
                       
 +
                       
 +
                        <!--/.row-->
 +
                    </div>
 +
                    <!--/.container-->
 +
                </section>
 +
                <section class="text-center pb-3">
 +
                    <div class="background-holder overlay overlay-2" style="background-image:url(https://static.igem.org/mediawiki/2019/f/fb/T--Tsinghua--footimg.png);background-position: top;"> </div>
 +
                    <!--/.background-holder-->
 +
                    <div class="container">
 +
                        <div class="row justify-content-center">
 
                             <div class="col-12">
 
                             <div class="col-12">
                                 <img src="https://static.igem.org/mediawiki/2019/a/a8/T--Tsinghua--model3form3_2.png" width="80%" alt="" />
+
                                 <h4 class="mb-4 color-white">Thanks for your support !</h4>
 
                                  
 
                                  
 
                             </div>
 
                             </div>
                              
+
                             <div style="height: 30px;"></div>
                        </div>
+
                            <div class ="row">
                        <p class="dropcap">
+
                               
                            The value of 𝐶<sub>1</sub> can be calculated via image processing programs, while the value of 𝐶<sub>0</sub> can be inferred from the size of protein particles after scaling to the same scale as the image where we calculate 𝐶<sub>1</sub>.
+
                                <div class="col-2">
                        </p>
+
                                </div>
                        <p class="mb-0">
+
                                <div class="col-2">
                            Since there is not much prior knowledge of the solubility difference of the substrate between in the cytoplasm and in the phase, we conservatively assume that 𝑘<sup>∘</sup><sub>𝑓</sub>=1. As discussed previously, the term 1−𝑒<sup>−𝜆𝑉<sub>0</sub><sup>1/3</sup></sup> is the orientation factor. The orientation factors of different chemical reactions vary greatly, and the orientation factor data of enzymatic reactions are lacking. But as a proof of concept, we don’t need to be that precise and hence we can roughly estimate the orientation factor to be 1×10<sup>-3</sup>.
+
                                    <a href="https://2019.igem.org/Team:BIT-China/Collaborations" target="_blank">
                        </p>
+
                                        <img src="https://static.igem.org/mediawiki/2019/f/f2/T--Tsinghua--colab_bitlogo2.png" style="width: 50%;">
                    </div>
+
                                    </a>
                </div>
+
                                   
               
+
                                </div>
               
+
                                <div class="col-2">
                <!--/.row-->
+
                                    <a href="https://2019.igem.org/Team:Peking/Collaborations" target="_blank">
            </div>
+
                                        <img src="https://static.igem.org/mediawiki/2019/b/bf/T--Tsinghua--colab_pkulogo3.png" style="width:50%;">
            <!--/.container-->
+
                                    </a>
        </section>
+
                                </div>
        <section class="text-center pb-3">
+
                                <div class="col-2">
                <div class="background-holder overlay overlay-2" style="background-image:url(https://static.igem.org/mediawiki/2019/f/fb/T--Tsinghua--footimg.png);background-position: top;"> </div>
+
                                    <a href="https://2019.igem.org/Team:BIT-China/Collaborations" target="_blank">
                <!--/.background-holder-->
+
                                        <img src="https://static.igem.org/mediawiki/2019/1/16/T--Tsinghua--colab_bitlogo3.png" style="width:50%;">
                <div class="container">
+
                                    </a>
                    <div class="row justify-content-center">
+
                                </div>
                        <div class="col-12">
+
                               
                            <h4 class="mb-4 color-white">Thanks for your support !</h4>
+
                                <div class="col-2">
                           
+
                                    <a href="https://2019.igem.org/Team:SJTU-BioX-Shanghai/Collaborations#section4" target="_blank">
                        </div>
+
                                        <img src="https://static.igem.org/mediawiki/2019/1/12/T--Tsinghua--sj3.jpg" style="width: 50%;">
                        <div style="height: 30px;"></div>
+
                                    </a>
                        <div class ="row">
+
                                </div>
                           
+
                                <div class="col-2">
                            <div class="col-2">
+
                                </div>
                            </div>
+
                            <div class="col-2">
+
                                <a href="https://2019.igem.org/Team:BIT-China/Collaborations" target="_blank">
+
                                    <img src="https://static.igem.org/mediawiki/2019/f/f2/T--Tsinghua--colab_bitlogo2.png" style="width: 50%;">
+
                                </a>
+
 
                                  
 
                                  
 
                             </div>
 
                             </div>
                             <div class="col-2">
+
                            <div style="height: 1cm;"></div>
                                 <a href="https://2019.igem.org/Team:Peking/Collaborations" target="_blank">
+
                             <div class="row">
                                    <img src="https://static.igem.org/mediawiki/2019/b/bf/T--Tsinghua--colab_pkulogo3.png" style="width:50%;">
+
                                <div class="col-3"></div>
                                 </a>
+
                                 <div class="col-2">
 +
                                    <a href="https://2019.igem.org/Team:Peking/Collaborations" target="_blank">
 +
                                        <img src="https://static.igem.org/mediawiki/2019/2/2e/T--Tsinghua--colab_pkulogo.png">
 +
                                    </a>
 +
                                </div>
 +
                                <div class="col-2">
 +
                                    <a href="https://2019.igem.org/Team:BIT-China/Collaborations" target="_blank">
 +
                                        <img src="https://static.igem.org/mediawiki/2019/4/4a/T--Tsinghua--colab_bitlogo.png">
 +
                                    </a>
 +
                                 </div>
 +
                                <div class="col-2">
 +
                                    <a href="https://2019.igem.org/Team:SJTU-BioX-Shanghai/Collaborations#section4" target="_blank">
 +
                                        <img src="https://static.igem.org/mediawiki/2019/5/5b/T--Tsinghua--Colab_sj2.png">
 +
                                    </a>
 +
                                </div>
 +
                                <div class="col-3">
 +
                                </div>
 
                             </div>
 
                             </div>
                            <div class="col-2">
 
                                <a href="https://2019.igem.org/Team:BIT-China/Collaborations" target="_blank">
 
                                    <img src="https://static.igem.org/mediawiki/2019/1/16/T--Tsinghua--colab_bitlogo3.png" style="width:50%;">
 
                                </a>
 
                            </div>
 
                           
 
                            <div class="col-2">
 
                                <a href="https://2019.igem.org/Team:SJTU-BioX-Shanghai/Collaborations#section4" target="_blank">
 
                                    <img src="https://static.igem.org/mediawiki/2019/1/12/T--Tsinghua--sj3.jpg" style="width: 50%;">
 
                                </a>
 
                            </div>
 
                            <div class="col-2">
 
                            </div>
 
                           
 
 
                         </div>
 
                         </div>
                         <div style="height: 1cm;"></div>
+
                         <div class="row mt-8 fs--1">
                        <div class="row">
+
                            <div class="col-lg-auto ml-lg-auto order-lg-2 mb-2 mb-lg-0">
                            <div class="col-3"></div>
+
                                <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua">Home</a>
                            <div class="col-2">
+
                                <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Team">Team</a>
                                 <a href="https://2019.igem.org/Team:Peking/Collaborations" target="_blank">
+
                                 <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Description">Project</a>
                                    <img src="https://static.igem.org/mediawiki/2019/2/2e/T--Tsinghua--colab_pkulogo.png">
+
                                <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Model">Model</a>
                                 </a>
+
                                <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Improvement">Parts</a>
 +
                                <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Human_Practices">HP</a>
 +
                                <a class="d-inline-block mx-2 color-8" href="mailto:igem.thu@outlook.com"><span class="fa fa-envelope"></span> Contact Us</a>
 +
                                 <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Model2">Next Page <span class="fa fa-chevron-right"></span></span></a>
 
                             </div>
 
                             </div>
                             <div class="col-2">
+
                             <div class="col-lg text-lg-left">
                                <a href="https://2019.igem.org/Team:BIT-China/Collaborations" target="_blank">
+
                                 <div class="color-8">&copy; Tsinghua iGEM 2019
                                    <img src="https://static.igem.org/mediawiki/2019/4/4a/T--Tsinghua--colab_bitlogo.png">
+
                                 </div>
                                 </a>
+
                            </div>
+
                            <div class="col-2">
+
                                <a href="https://2019.igem.org/Team:SJTU-BioX-Shanghai/Collaborations#section4" target="_blank">
+
                                    <img src="https://static.igem.org/mediawiki/2019/5/5b/T--Tsinghua--Colab_sj2.png">
+
                                 </a>
+
                            </div>
+
                            <div class="col-3">
+
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
                     <div class="row mt-8 fs--1">
+
                     <!--/.row-->
                        <div class="col-lg-auto ml-lg-auto order-lg-2 mb-2 mb-lg-0">
+
                   
                            <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua">Home</a>
+
                    <!--/.container-->
                            <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Team">Team</a>
+
                </section>
                            <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Description">Project</a>
+
            </main>
                            <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Model">Model</a>
+
            <!--  -->
                            <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Improvement">Parts</a>
+
            <!--    JavaScripts-->
                            <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Human_Practices">HP</a>
+
            <!--    =============================================-->
                            <a class="d-inline-block mx-2 color-8" href="mailto:igem.thu@outlook.com"><span class="fa fa-envelope"></span> Contact Us</a>
+
            <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> -->
                            <a class="d-inline-block mx-2 color-8" href="https://2019.igem.org/Team:Tsinghua/Model2">Next Page <span class="fa fa-chevron-right"></span></span></a>
+
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/modernizr.min.js&action=raw&ctype=text/javascript"></script>
                        </div>
+
           
                        <div class="col-lg text-lg-left">
+
            <script src="assets/lib/jquery/dist/jquery.min.js"></script>
                            <div class="color-8">&copy; Tsinghua iGEM 2019
+
            <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> -->
                            </div>
+
            <!-- <script src="assets/lib/bootstrap/dist/js/bootstrap.min.js"></script> -->
                        </div>
+
            <!-- <script src="assets/js/googlemap.js"></script> -->
                    </div>
+
           
                </div>
+
            <!-- <script src="assets/lib/imagesloaded/imagesloaded.pkgd.min.js"></script> -->
                <!--/.row-->
+
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/imagesloaded.pkgd.min.js&action=raw&ctype=text/javascript"></script>
               
+
            <!-- <script src="assets/lib/jquery-menu-aim/jquery.menu-aim.js"></script> -->
                <!--/.container-->
+
            <!-- <script src="assets/lib/gsap/src/minified/TweenMax.min.js"></script> -->
            </section>
+
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/TweenMax.min.js&action=raw&ctype=text/javascript"></script>
        </main>
+
           
        <!--  -->
+
            <!-- <script src="assets/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script> -->
        <!--    JavaScripts-->
+
            <!-- <script src="assets/lib/CustomEase.min.js"></script> -->
        <!--    =============================================-->
+
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/CustomEase.min.js&action=raw&ctype=text/javascript"></script>
        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> -->
+
           
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/modernizr.min.js&action=raw&ctype=text/javascript"></script>
+
            <!-- <script src="assets/js/config.js"></script> -->
       
+
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/config.js&action=raw&ctype=text/javascript"></script>
        <!-- <script src="assets/lib/jquery/dist/jquery.min.js"></script> -->
+
           
        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> -->
+
            <!-- <script src="assets/lib/rellax/rellax.min.js"></script> -->
        <!-- <script src="assets/lib/bootstrap/dist/js/bootstrap.min.js"></script> -->
+
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/rellax.min.js&action=raw&ctype=text/javascript"></script>
        <!-- <script src="assets/js/googlemap.js"></script> -->
+
           
       
+
            <!-- <script src="assets/js/zanimation.js"></script> -->
        <!-- <script src="assets/lib/imagesloaded/imagesloaded.pkgd.min.js"></script> -->
+
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/zanimation.js&action=raw&ctype=text/javascript"></script>
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/imagesloaded.pkgd.min.js&action=raw&ctype=text/javascript"></script>
+
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/inertia.js&action=raw&ctype=text/javascript"></script>
        <!-- <script src="assets/lib/jquery-menu-aim/jquery.menu-aim.js"></script> -->
+
           
        <!-- <script src="assets/lib/gsap/src/minified/TweenMax.min.js"></script> -->
+
            <!-- <script src="assets/js/inertia.js"></script> -->
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/TweenMax.min.js&action=raw&ctype=text/javascript"></script>
+
            <!-- <script src="assets/lib/lightbox2/dist/js/lightbox.js"></script> -->
       
+
            <!-- <script src="assets/lib/flexslider/jquery.flexslider-min.js"></script> -->
        <!-- <script src="assets/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script> -->
+
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/jquery.flexslider-min.js&action=raw&ctype=text/javascript"></script>
        <!-- <script src="assets/lib/CustomEase.min.js"></script> -->
+
           
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/CustomEase.min.js&action=raw&ctype=text/javascript"></script>
+
            <!-- <script src="assets/js/core.js"></script> -->
       
+
            <!-- <script src="assets/js/main.js"></script> -->
        <!-- <script src="assets/js/config.js"></script> -->
+
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/main.js&action=raw&ctype=text/javascript"></script>
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/config.js&action=raw&ctype=text/javascript"></script>
+
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/core.js&action=raw&ctype=text/javascript"></script>
       
+
            <!-- <script src="assets/js/particleanimate.js"></script> -->
        <!-- <script src="assets/lib/rellax/rellax.min.js"></script> -->
+
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/particleanimate.js&action=raw&ctype=text/javascript"></script>
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/rellax.min.js&action=raw&ctype=text/javascript"></script>
+
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/remodal.js&action=raw&ctype=text/javascript"></script>
       
+
            <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/remodal.min.js&action=raw&ctype=text/javascript"></script>
        <!-- <script src="assets/js/zanimation.js"></script> -->
+
            <script>
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/zanimation.js&action=raw&ctype=text/javascript"></script>
+
                (function(){
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/inertia.js&action=raw&ctype=text/javascript"></script>
+
                    let pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight; // 页面总高度
       
+
                    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; // 浏览器视口高度
        <!-- <script src="assets/js/inertia.js"></script> -->
+
                    let scrollAvail = pageHeight - windowHeight; // 可滚动的高度
        <!-- <script src="assets/lib/lightbox2/dist/js/lightbox.js"></script> -->
+
                    console.log('可滚动的高度:', scrollAvail);
        <!-- <script src="assets/lib/flexslider/jquery.flexslider-min.js"></script> -->
+
                    window.onscroll = function () {
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/jquery.flexslider-min.js&action=raw&ctype=text/javascript"></script>
+
                        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  // 获取滚动条的高度
       
+
                        console.log('滚动条的高度:', scrollTop);
        <!-- <script src="assets/js/core.js"></script> -->
+
                        document.querySelector('.progress').style.width = (scrollTop/scrollAvail)*100 + '%';    // 计算占比
        <!-- <script src="assets/js/main.js"></script> -->
+
                    };
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/main.js&action=raw&ctype=text/javascript"></script>
+
                }());
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/core.js&action=raw&ctype=text/javascript"></script>
+
            </script>
        <!-- <script src="assets/js/particleanimate.js"></script> -->
+
        </body>
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/particleanimate.js&action=raw&ctype=text/javascript"></script>
+
        <body>
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/remodal.js&action=raw&ctype=text/javascript"></script>
+
            <div class="progress"></div>
        <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Team:Tsinghua/js/remodal.min.js&action=raw&ctype=text/javascript"></script>
+
            <div>
        <script>
+
                <div class="box">1</div>
            (function(){
+
            </div>
                let pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight; // 页面总高度
+
        </body>
                let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; // 浏览器视口高度
+
        </html>
                let scrollAvail = pageHeight - windowHeight; // 可滚动的高度
+
                console.log('可滚动的高度:', scrollAvail);
+
                window.onscroll = function () {
+
                    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  // 获取滚动条的高度
+
                    console.log('滚动条的高度:', scrollTop);
+
                    document.querySelector('.progress').style.width = (scrollTop/scrollAvail)*100 + '%';    // 计算占比
+
                };
+
            }());
+
        </script>
+
    </body>
+
    <body>
+
        <div class="progress"></div>
+
        <div>
+
            <div class="box">1</div>
+
        </div>
+
    </body>
+
    </html>
+

Revision as of 03:43, 22 October 2019

iGEM Tsinghua

Ⅰ. Simulation for Phase Separation System

In order to use theoretical caculation to guide experiment, we try to interpret our mathematical models in a visual version by design some virtual experiments and computer simulations. It is well known that, phase separation is a thermodynamic process which follows complex nonelinear physical law. To achieve precise but economical numerical calculation, we use Cahn-Hilliard equation and simplify some details in 2-dimensional simulation. And try a particle model as our 3-dimensional simulation. We also try artificial light-induce in our simulation.

Two-Dimensional Simulation

This part of our work is based on well-known Cahn-Hilliard equation, whose standard mathematical representation shows as follows:

In this formula, variable D is a diffusion coefficient, whose unit is 𝜇m2/ms,c is the concentration of the fluid. By referring to online open-source code, we utilize a time marching method to the equation. It can save a lot of time and provide a convenient data which is easy to visualize. The data is presented with four subplots. The top two plots show the solution as a function of space. The lower left plot shows a cross section of the solution, and the lower right plot shows a portion of the power spectrum of the solutions cosine transformation.

while D=1

while D=0.5

while D=0.1

while D=0.5

Expansion to three-dimensional space

In order to more realistically reflect the phase separation process in the cell, we simulated the phase separation process in the 3D grid space. The particles are set to move randomly within the three-dimensional grid space. When particles are gathered, the probability that they will separate at the next moment is inversely proportional to the strength of the interaction between them. Therefore, when particles have mutual attraction, they eventually tend to be in a state of being gathered into clusters. As shown in the following animation, the particles in the image on the right are set to have a stronger interaction than the particles in the image on the left. The difference in phase separation ability can be found in the simulation animation.

Without light-induce

Light-induce

To the best of our knowledge, this simulation is the first to apply three-dimensional random walks to phase separation simulations, although it is more qualitative than quantitative. It gives a well-considered interpretation of photo-activated phase separation, that is, light changes the conformation of the protein and then changes the strength of the interaction between proteins, thereby affecting the phase separation state.

Thanks for your support !

1