Difference between revisions of "Team:AHUT China/Demonstrate"

(Prototype team page)
 
 
(52 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{AHUT_China}}
+
{{:Team:AHUT_China/Template/CSS_RESET}}
<html>
+
<html lang="en">
 +
    <head>
 +
        <!-- Required meta tags -->
 +
        <meta charset="utf-8">
 +
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 +
        <link rel="icon" href="image/favicon.png" type="image/png">
 +
        <title>Royal Hotel</title>
 +
        <!-- Bootstrap CSS -->
 +
        <link rel="stylesheet" href="https://2018.igem.org/Team:AHUT_China/bootstrap_css?action=raw&ctype=text/css" type="text/css" />
 +
        <link rel="stylesheet" href="https://2018.igem.org/Team:AHUT_China/v_style_css?action=raw&ctype=text/css" type="text/css" />
 +
        <link rel="stylesheet" href="https://2018.igem.org/Team:AHUT_China/font-awesomemin_css?action=raw&ctype=text/css" type="text/css" />
 +
        <link rel="stylesheet" href="https://2018.igem.org/Team:AHUT_China/bootstrap-datetimepicker.min_css?action=raw&ctype=text/css" type="text/css" />
 +
        <link rel="stylesheet" href="https://2018.igem.org/Team:AHUT_China/nice-select_css?action=raw&ctype=text/css" type="text/css" />
 +
        <link rel="stylesheet" href="https://2018.igem.org/Team:AHUT_China/owl.carousel.min_css?action=raw&ctype=text/css" type="text/css" />
 +
        <!-- main css -->
  
 +
        <link rel="stylesheet" href="https://2018.igem.org/Team:AHUT_China/style_css?action=raw&ctype=text/css" type="text/css" />
 +
        <link rel="stylesheet" href="https://2018.igem.org/Team:AHUT_China/responsive_css?action=raw&ctype=text/css" type="text/css" />
 +
       
 +
    </head>
 +
   
 +
        <!--================Header Area =================-->
 +
     
 +
            <header class="header_area">
 +
            <div class="container">
 +
                <nav class="navbar navbar-expand-lg navbar-light">
 +
                    <!-- Brand and toggle get grouped for better mobile display -->
 +
                    <a class="navbar-brand logo_h" href="https://2018.igem.org/Team:AHUT_China/home"><img src="https://static.igem.org/mediawiki/2018/b/b0/T--AHUT_China--_newlogo.jpg" height="110" width="80" alt=""></a>
 +
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 +
                        <span class="icon-bar"></span>
 +
                        <span class="icon-bar"></span>
 +
                        <span class="icon-bar"></span>
 +
                    </button>
 +
                    <!-- Collect the nav links, forms, and other content for toggling -->
 +
                    <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
 +
                        <ul class="nav navbar-nav menu_nav ml-auto">
 +
                            <li class="nav-item "><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/home">Home</a></li>
 +
                            <li class="nav-item submenu dropdown">
 +
                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TEAM</a>
 +
                                <ul class="dropdown-menu">
 +
                                    <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Team
 +
">Team Members</a></li>
 +
                                    <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Attributions">Attribution</a>
 +
 +
                                </ul>
 +
                            </li>
 +
                            <li class="nav-item submenu dropdown">
 +
                                <a href="#" style="color:#52C5FD" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PROJECT</a>
 +
                                <ul class="dropdown-menu">
 +
                                    <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Overview">Overview</a></li>
 +
                                    <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Background">Background</a></li>
 +
                                    <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/protocol">Protocol</a></li>
 +
                                    <li class="nav-item"><a class="nav-link"
 +
href="https://2018.igem.org/Team:AHUT_China/design">Design</a></li>                                                     
 +
                                    <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Demonstrate">Demonstrate</a></li>
 +
    <li class="nav-item"><a class="nav-link" href="
 +
https://2018.igem.org/Team:AHUT_China/InterLab">Interlab</a></li>
 +
                                    <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Notebook">Notebook</a></li>
 +
                                    <li class="nav-item"><a class="nav-link"
 +
href="https://2018.igem.org/Team:AHUT_China/Result">Result</a></li>
 +
                                  </li>
 +
                                </ul>
 +
                            </li>
 +
                              <li class="nav-item submenu dropdown">
 +
                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PARTS</a>
 +
                                <ul class="dropdown-menu">
 +
                                    <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Improve">Improved parts</a></li>
 +
                                    <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/New_Parts">New Parts</a></li>
 +
 +
                                </ul>
 +
                            </li>
 +
<li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Model">Modeling</a></li>
 +
                            <li class="nav-item submenu dropdown">
 +
                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Human Practices</a>
 +
                                <ul class="dropdown-menu">
 +
                                    <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Human_Practices">Overview</a></li>
 +
                                    <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/HP_FOR_SILVER">HP for Silver</a></li>
 +
                                    <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/INTEGRATED_FOR_GOLD">Integrated HP for gold</a></li>
 +
                                    <li class="nav-item"><a class="nav-link" href="
 +
https://2018.igem.org/Team:AHUT_China/Public_Engagement">Public Engagement</a></li>
 +
                                </ul>
 +
                            </li>
 +
                            <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Collaborations">Collaboration</a></li>
 +
<!--                            <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>-->
 +
                        </ul>
 +
                    </div>
 +
                </nav>
 +
            </div>
 +
         
 +
        </header>
 +
       
 +
       
 +
       
 +
        <!--================Header Area =================-->
 +
     
 +
        <!--================Breadcrumb Area =================-->
 +
        <br> <br> <br> <br> <br> <br>
 +
        <!--================Breadcrumb Area =================-->
 +
        <div align="center" class="section4"><img src="https://static.igem.org/mediawiki/2018/8/8f/T--AHUT_China--_demonstrate1254.jpg" width="602"  alt=""/></div>
 +
        <!--================Breadcrumb Area =================-->
 +
        <!--================ Latest Blog Area  =================-->
 +
        <section class="latest_blog_area section_gap">
 +
            <div class="container">
 +
              <div class="section_title ">
 +
                <p style="font-family: 'Arial Unicode MS', 'Microsoft YaHei UI', 'Microsoft YaHei UI Light', '华文细黑', '微软雅黑', '幼圆'; font-style: normal; font-weight: 400; font-size: 36px; text-align: center;"><strong style="font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; font-style: normal; font-weight: 400;color: #000000;"> Demonstrate
 +
</strong></h2>
 +
                <hr>
 +
                <nbsp><nbsp>
 +
                  <p style="font-family: 'Arial Unicode MS', 'Microsoft YaHei UI', 'Microsoft YaHei UI Light', '华文细黑', '微软雅黑', '幼圆';  font-size: 18px;">In our project, we have improved the existing CO<span style="font-size: 12px">2</span> capture technology and optimized the existing carbonic anhydrase by molecular simulation to finally enable E. coli to express more active and stable carbonic anhydrase to capture CO<span style="font-size: 12px">2</span> from industrial waste gas. Now we have constructed and tested the CO<span style="font-size: 12px">2</span> capture system based on pET30-a (+) expression vectors and E. coli BL21(DE3) strains under simulated condition in laboratory. Our main achievements are as follows:
 +
<br>
 +
1. The CA2 with high and stable catalytic efficiency designed by molecular simulation was selected as the research object of our project, which provided the basis for further development of CO<span style="font-size: 12px">2</span> capture.<br>
 +
2. Using molecular simulation to optimize CA2 amino acid sequence, design a highly active and stable CA2 mutant with the 203th leucine changed to lysine (named CA2 (L203K))<br>
 +
3. Mutant CA2 (L203K) is more efficient than wild-type CA2(WT).<br>
 +
4. The mutant CA2(L203K) presents improved thermal stability compared to wild-type CA2(WT).
 +
</p>
 +
<br>
 +
<h3>Colorimetric assay of enzyme activity</h3>
 +
<h4>Detection device:</h4>
 +
<br><br><br>
 +
<div align="center"><img src="
 +
https://static.igem.org/mediawiki/2018/e/ee/T--AHUT_China--_demon12.jpg" width="800"  alt=""/></div>
 +
<p style="font-family: 'Arial Unicode MS', 'Microsoft YaHei UI', 'Microsoft YaHei UI Light', '华文细黑', '微软雅黑', '幼圆';  font-size: 14px;text-align: center;">Fig.1 Detection device:</p>   
 +
<br><br><br>
 +
<p style="font-family: 'Arial Unicode MS', 'Microsoft YaHei UI', 'Microsoft YaHei UI Light', '华文细黑', '微软雅黑', '幼圆';  font-size: 18px;">CA2 activity assay with CO<span style="font-size: 12px">2</span> as substrate was performed following the procedure described by Capasso. In brief, The CO<span style="font-size: 12px">2</span>-satured solution was prepared by bubbling CO<span style="font-size: 12px">2</span> into 100 mL distilled water for approximately 3 h. The CO<span style="font-size: 12px">2</span> solution was chilled in an ice-water bath. Add 1 mL of 25 mM Tris, pH 8.3, containing bromothymol blue as a dye (to give a distinct and visible blue color) to test tubes chilled in an ice bath. Indicated volume of purified enzyme were added to tubes, and an equivalent amount of buffer was added as control. Then, 1 mL of CO<span style="font-size: 12px">2</span> solution was added very quickly and simultaneously timing began. The time required for the solution to change from blue to yellow was recorded (transition point of bromothymol blue is pH 6-7.6). The time required for the color change is inversely related to the quantity of carbonic anhydrase presented in the sample.</p>
 +
<br><br><br>
 +
<div align="center"><img src="
 +
https://static.igem.org/mediawiki/2018/a/ab/T--AHUT_China--_demonstrate2.jpg" width="800"  alt=""/></div>
 +
<p style="font-family: 'Arial Unicode MS', 'Microsoft YaHei UI', 'Microsoft YaHei UI Light', '华文细黑', '微软雅黑', '幼圆';  font-size: 14px;text-align: center;">Fig.2 The color changes of the solution after adding  250 μLCO<span style="font-size: 12px">2</span> saturated solution.</p>
 +
<br><br><br>
 +
<div align="center"><img src="
 +
https://static.igem.org/mediawiki/2018/a/a0/T--AHUT_China--_demon45978.jpg" width="800"  alt=""/></div>
 +
<p style="font-family: 'Arial Unicode MS', 'Microsoft YaHei UI', 'Microsoft YaHei UI Light', '华文细黑', '微软雅黑', '幼圆';  font-size: 14px;text-align: center;">Fig.3 Comparison of color changing time of CO<span style="font-size: 12px">2</span> saturated solution
 +
</p>   
 +
<br><br><br>
 +
<div align="center"><img src="
 +
https://static.igem.org/mediawiki/2018/5/52/T--AHUT_China--_demon148.jpg" width="800"  alt=""/></div>
 +
<p style="font-family: 'Arial Unicode MS', 'Microsoft YaHei UI', 'Microsoft YaHei UI Light', '华文细黑', '微软雅黑', '幼圆';  font-size: 14px;text-align: center;">Fig.4 Comparison of unit carbonic anhydrase enzyme activity between wild type and mutant type of CA2
 +
</p>   
 +
<br><br><br>
 +
<p style="font-family: 'Arial Unicode MS', 'Microsoft YaHei UI', 'Microsoft YaHei UI Light', '华文细黑', '微软雅黑', '幼圆';  font-size: 18px;">As shown in Fig.3 and Fig.4, by the measurement of the enzyme activity, the result showed that the activity of the mutant CA2 was stronger than that of the wild type CA2.</p>
 +
<br><br><br>
 +
<h3>Determination of thermal stability of carbonic anhydrase by esterase activity analysis</h3>
 +
<p style="font-family: 'Arial Unicode MS', 'Microsoft YaHei UI', 'Microsoft YaHei UI Light', '华文细黑', '微软雅黑', '幼圆';  font-size: 18px;">In order to verify that our research results can be applied to higher temperature industrial environments in the future, we designed a gradient temperature to test the activity of wide type and mutant CA2 activity at different temperatures.</p>
 +
<br><br><br>
 +
<div align="center"><img src="
 +
https://static.igem.org/mediawiki/2018/7/73/T--AHUT_China--_demonstrate5.jpg" width="650"  alt=""/></div>
 +
<p style="font-family: 'Arial Unicode MS', 'Microsoft YaHei UI', 'Microsoft YaHei UI Light', '华文细黑', '微软雅黑', '幼圆';  font-size: 14px;text-align: center;">Fig.5 Activity of wild type and mutant CA2 at different temperatures
 +
</p>   
 +
<br><br>
 +
<p style="font-family: 'Arial Unicode MS', 'Microsoft YaHei UI', 'Microsoft YaHei UI Light', '华文细黑', '微软雅黑', '幼圆';  font-size: 18px;">As shown in Fig.5, the results exhibited that the thermal stability of mutant carbonic anhydrase was better than that of wild carbonic anhydrase.
 +
</p>
 +
<br><br><br><br>
 +
<h3>Reference</h3>
 +
<p style="font-family: 'Arial Unicode MS', 'Microsoft YaHei UI', 'Microsoft YaHei UI Light', '华文细黑', '微软雅黑', '幼圆';  font-size: 18px;">
 +
[1] Rahman F A, Aziz M M A, Saidur R, et al. Pollution to solution: Capture and sequestration of carbon dioxide (CO<span style="font-size: 12px">2</span>) and its utilization as a renewable energy source for a sustainable future[J]. Renewable & Sustainable Energy Reviews, 2017, 71:112-126. <br>
 +
[2] Hu G, Smith K H, Nicholas N J, et al. Enzymatic carbon dioxide capture using a thermally stable carbonic anhydrase as a promoter in potassium carbonate solvents[J]. Chemical Engineering Journal, 2017, 307:49-55.<br>
 +
[3] Yong J K J, Stevens G W, Caruso F, et al. The use of carbonic anhydrase to accelerate carbon dioxide capture processes[J]. Journal of Chemical Technology & Biotechnology, 2015, 90(1):3-10.<br>
 +
[4] Capasso C, De L V, Carginale V, et al. Biochemical properties of a novel and highly thermostable bacterial α-carbonic anhydrase from Sulfurihydrogenibium yellowstonense YO3AOP1[J]. Journal of Enzyme Inhibition & Medicinal Chemistry, 2012, 27(6):892.<br></p>
 +
           
  
 +
           
 +
        </section>
 +
        <!--================ Recent Area  =================-->
 +
       
 +
     
 +
       
 +
        <!--================ start footer Area  =================-->
  
<div class="column full_size judges-will-not-evaluate">
+
        <!-- Modals error -->
<h3>★  ALERT! </h3>
+
<p>This page is used by the judges to evaluate your team for the <a href="https://2018.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2018.igem.org/Judging/Awards"> award listed below</a>. </p>
+
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2018.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
</div>
+
  
 +
     
 +
        <!--================End Contact Success and Error message Area =================-->
 +
       
 +
       
 +
        <!-- Optional JavaScript -->
 +
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 +
        <script src="https://2018.igem.org/Team:AHUT_China/jquery-3.2.1.min_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
        <script src="https://2018.igem.org/Team:AHUT_China/popper_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
        <script src="https://2018.igem.org/Team:AHUT_China/bootstrap.min_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
        <script src="https://2018.igem.org/Team:AHUT_China/owl.carousel.min_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
        <script src="https://2018.igem.org/Team:AHUT_China/jquery.ajaxchimp.min_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
        <script src="https://2018.igem.org/Team:AHUT_China/bootstrap-datetimepicker.min_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
        <script src="https://2018.igem.org/Team:AHUT_China/jquery.nice-select.min_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
        <script src="https://2018.igem.org/Team:AHUT_China/mail-script_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
        <script src="https://2018.igem.org/Team:AHUT_China/stellar_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
        <script src="https://2018.igem.org/Team:AHUT_China/imagesloaded.pkgd.min_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
      <script src="https://2018.igem.org/Team:AHUT_China/isotope-min_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
        <script src="https://2018.igem.org/Team:AHUT_China/stellar_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
      <script src="https://2018.igem.org/Team:AHUT_China/simpleLightbox.min_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
        <!--gmaps Js-->
 +
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCjCGmQ0Uq4exrzdcL6rvxywDDOvfAu6eE?action=raw&ctype=text/css" type="text/css""></script>
 +
        <script src="https://2018.igem.org/Team:AHUT_China/gmaps.min_js?action=raw&ctype=text/css" type="text/css""></script>
 +
        <!-- contact js -->
 +
      <script src="https://2018.igem.org/Team:AHUT_China/jquery.form_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
      <script src="https://2018.igem.org/Team:AHUT_China/jquery.validate.min_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
      <script src="https://2018.igem.org/Team:AHUT_China/contact_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
      <script src="https://2018.igem.org/Team:AHUT_China/custom_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
      <script>
 +
// when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval
 +
// not supported in all browsers though and sometimes needs a prefix, so we need a shim
 +
window.requestAnimFrame = ( function() {
 +
return window.requestAnimationFrame ||
 +
window.webkitRequestAnimationFrame ||
 +
window.mozRequestAnimationFrame ||
 +
function( callback ) {
 +
window.setTimeout( callback, 1000 / 60 );
 +
};
 +
})();
  
<div class="clear"></div>
+
// now we will setup our basic variables for the demo
 +
var canvas = document.getElementById( 'canvas' ),
 +
ctx = canvas.getContext( '2d' ),
 +
// full screen dimensions
 +
cw = window.innerWidth,
 +
ch = window.innerHeight,
 +
// firework collection
 +
fireworks = [],
 +
// particle collection
 +
particles = [],
 +
// starting hue
 +
hue = 120,
 +
// when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks
 +
limiterTotal = 5,
 +
limiterTick = 0,
 +
// this will time the auto launches of fireworks, one launch per 80 loop ticks
 +
timerTotal = 80,
 +
timerTick = 0,
 +
mousedown = false,
 +
// mouse x coordinate,
 +
mx,
 +
// mouse y coordinate
 +
my;
 +
 +
// set canvas dimensions
 +
canvas.width = cw;
 +
canvas.height = ch;
  
 +
// now we are going to setup our function placeholders for the entire demo
  
 +
// get a random number within a range
 +
function random( min, max ) {
 +
return Math.random() * ( max - min ) + min;
 +
}
  
<div class="column full_size">
+
// calculate the distance between two points
<h1>Demonstrate</h1>
+
function calculateDistance( p1x, p1y, p2x, p2y ) {
<h3>Gold Medal Criterion #4</h3>
+
var xDistance = p1x - p2x,
 +
yDistance = p1y - p2y;
 +
return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
 +
}
  
<p>
+
// create firework
Teams that can show their system working under real world conditions are usually good at impressing the judges in iGEM. To achieve gold medal criterion #4, convince the judges that your project works. There are many ways in which your project working could be demonstrated, so there is more than one way to meet this requirement. This gold medal criterion was introduced in 2016, so check our what 2016 teams did to achieve their gold medals!
+
function Firework( sx, sy, tx, ty ) {
</p>
+
// actual coordinates
 +
this.x = sx;
 +
this.y = sy;
 +
// starting coordinates
 +
this.sx = sx;
 +
this.sy = sy;
 +
// target coordinates
 +
this.tx = tx;
 +
this.ty = ty;
 +
// distance from starting point to target
 +
this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
 +
this.distanceTraveled = 0;
 +
// track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails
 +
this.coordinates = [];
 +
this.coordinateCount = 3;
 +
// populate initial coordinate collection with the current coordinates
 +
while( this.coordinateCount-- ) {
 +
this.coordinates.push( [ this.x, this.y ] );
 +
}
 +
this.angle = Math.atan2( ty - sy, tx - sx );
 +
this.speed = 2;
 +
this.acceleration = 1.05;
 +
this.brightness = random( 50, 70 );
 +
// circle target indicator radius
 +
this.targetRadius = 1;
 +
}
  
<p>
+
// update firework
Please see the <a href="https://2018.igem.org/Judging/Medals">2018 Medals Page</a> for more information.
+
Firework.prototype.update = function( index ) {
</p>
+
// remove last item in coordinates array
 +
this.coordinates.pop();
 +
// add current coordinates to the start of the array
 +
this.coordinates.unshift( [ this.x, this.y ] );
 +
 +
// cycle the circle target indicator radius
 +
if( this.targetRadius < 8 ) {
 +
this.targetRadius += 0.3;
 +
} else {
 +
this.targetRadius = 1;
 +
}
 +
 +
// speed up the firework
 +
this.speed *= this.acceleration;
 +
 +
// get the current velocities based on angle and speed
 +
var vx = Math.cos( this.angle ) * this.speed,
 +
vy = Math.sin( this.angle ) * this.speed;
 +
// how far will the firework have traveled with velocities applied?
 +
this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
 +
 +
// if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached
 +
if( this.distanceTraveled >= this.distanceToTarget ) {
 +
createParticles( this.tx, this.ty );
 +
// remove the firework, use the index passed into the update function to determine which to remove
 +
fireworks.splice( index, 1 );
 +
} else {
 +
// target not reached, keep traveling
 +
this.x += vx;
 +
this.y += vy;
 +
}
 +
}
 +
 
 +
// draw firework
 +
Firework.prototype.draw = function() {
 +
ctx.beginPath();
 +
// move to the last tracked coordinate in the set, then draw a line to the current x and y
 +
ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
 +
ctx.lineTo( this.x, this.y );
 +
ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
 +
ctx.stroke();
 +
 +
ctx.beginPath();
 +
// draw the target for this firework with a pulsing circle
 +
ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
 +
ctx.stroke();
 +
}
 +
 
 +
// create particle
 +
function Particle( x, y ) {
 +
this.x = x;
 +
this.y = y;
 +
// track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails
 +
this.coordinates = [];
 +
this.coordinateCount = 5;
 +
while( this.coordinateCount-- ) {
 +
this.coordinates.push( [ this.x, this.y ] );
 +
}
 +
// set a random angle in all possible directions, in radians
 +
this.angle = random( 0, Math.PI * 2 );
 +
this.speed = random( 1, 10 );
 +
// friction will slow the particle down
 +
this.friction = 0.95;
 +
// gravity will be applied and pull the particle down
 +
this.gravity = 1;
 +
// set the hue to a random number +-20 of the overall hue variable
 +
this.hue = random( hue - 20, hue + 20 );
 +
this.brightness = random( 50, 80 );
 +
this.alpha = 1;
 +
// set how fast the particle fades out
 +
this.decay = random( 0.015, 0.03 );
 +
}
 +
 
 +
// update particle
 +
Particle.prototype.update = function( index ) {
 +
// remove last item in coordinates array
 +
this.coordinates.pop();
 +
// add current coordinates to the start of the array
 +
this.coordinates.unshift( [ this.x, this.y ] );
 +
// slow down the particle
 +
this.speed *= this.friction;
 +
// apply velocity
 +
this.x += Math.cos( this.angle ) * this.speed;
 +
this.y += Math.sin( this.angle ) * this.speed + this.gravity;
 +
// fade out the particle
 +
this.alpha -= this.decay;
 +
 +
// remove the particle once the alpha is low enough, based on the passed in index
 +
if( this.alpha <= this.decay ) {
 +
particles.splice( index, 1 );
 +
}
 +
}
 +
 
 +
 
 +
 
 +
// draw particle
 +
Particle.prototype.draw = function() {
 +
 
 +
  ctx. beginPath();
 +
// move to the last tracked coordinates in the set, then draw a line to the current x and y
 +
ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
 +
ctx.lineTo( this.x, this.y );
 +
ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
 +
ctx.stroke();
 +
 
 +
 
 +
}
  
 +
// create particle group/explosion
 +
function createParticles( x, y ) {
 +
// increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though
 +
var particleCount = 30;
 +
while( particleCount-- ) {
 +
particles.push( new Particle( x, y ) );
 +
}
 +
}
  
</div>
+
// main demo loop
 +
function loop() {
 +
// this function will run endlessly with requestAnimationFrame
 +
requestAnimFrame( loop );
 +
 +
// increase the hue to get different colored fireworks over time
 +
hue += 0.5;
 +
 +
// normally, clearRect() would be used to clear the canvas
 +
// we want to create a trailing effect though
 +
// setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely
 +
ctx.globalCompositeOperation = 'destination-out';
 +
// decrease the alpha property to create more prominent trails
 +
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
 +
ctx.fillRect( 0, 0, cw, ch );
 +
// change the composite operation back to our main mode
 +
// lighter creates bright highlight points as the fireworks and particles overlap each other
 +
ctx.globalCompositeOperation = 'lighter';
 +
 +
    var text = "Welcom to our pages"; 
 +
  ctx.font = "50px sans-serif";
 +
  var textData = ctx.measureText(text);
 +
  ctx.fillStyle = "rgba("+parseInt(random(0,255))+","+parseInt(random(0,255))+","+parseInt(random(0,255))+",0.3)";
 +
  ctx.fillText(text,cw /2-textData.width/2,ch/2);
 +
 
 +
// loop over each firework, draw it, update it
 +
var i = fireworks.length;
 +
while( i-- ) {
 +
fireworks[ i ].draw();
 +
fireworks[ i ].update( i );
 +
}
 +
 +
// loop over each particle, draw it, update it
 +
var i = particles.length;
 +
while( i-- ) {
 +
particles[ i ].draw();
 +
particles[ i ].update( i );
 +
}
 +
 +
// launch fireworks automatically to random coordinates, when the mouse isn't down
 +
if( timerTick >= timerTotal ) {
 +
if( !mousedown ) {
 +
// start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen
 +
     
 +
      for(var h=0;h<50;h++)
 +
      {
 +
          fireworks.push( new Firework( cw / 2, ch/2, random( 0, cw ), random( 0, ch  ) ) );
 +
      }
 +
     
 +
     
 +
timerTick = 0;
 +
}
 +
} else {
 +
timerTick++;
 +
}
 +
 +
// limit the rate at which fireworks get launched when mouse is down
 +
if( limiterTick >= limiterTotal ) {
 +
if( mousedown ) {
 +
// start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
 +
fireworks.push( new Firework( cw / 2, ch/2, mx, my ) );
 +
limiterTick = 0;
 +
}
 +
} else {
 +
limiterTick++;
 +
}
 +
}
  
 +
// mouse event bindings
 +
// update the mouse coordinates on mousemove
 +
canvas.addEventListener( 'mousemove', function( e ) {
 +
mx = e.pageX - canvas.offsetLeft;
 +
my = e.pageY - canvas.offsetTop;
 +
});
  
 +
// toggle mousedown state and prevent canvas from being selected
 +
canvas.addEventListener( 'mousedown', function( e ) {
 +
e.preventDefault();
 +
mousedown = true;
 +
});
  
 +
canvas.addEventListener( 'mouseup', function( e ) {
 +
e.preventDefault();
 +
mousedown = false;
 +
});
  
 +
// once the window loads, we are ready for some fireworks!
 +
window.onload = loop;
  
 +
</script>
 
</html>
 
</html>
 +
{{:Team:AHUT_China/footer}}
 +
{{:Team:AHUT_China/footercss}}

Latest revision as of 03:07, 18 October 2018

Royal Hotel Royal Hotel







Demonstrate


In our project, we have improved the existing CO2 capture technology and optimized the existing carbonic anhydrase by molecular simulation to finally enable E. coli to express more active and stable carbonic anhydrase to capture CO2 from industrial waste gas. Now we have constructed and tested the CO2 capture system based on pET30-a (+) expression vectors and E. coli BL21(DE3) strains under simulated condition in laboratory. Our main achievements are as follows:
1. The CA2 with high and stable catalytic efficiency designed by molecular simulation was selected as the research object of our project, which provided the basis for further development of CO2 capture.
2. Using molecular simulation to optimize CA2 amino acid sequence, design a highly active and stable CA2 mutant with the 203th leucine changed to lysine (named CA2 (L203K))
3. Mutant CA2 (L203K) is more efficient than wild-type CA2(WT).
4. The mutant CA2(L203K) presents improved thermal stability compared to wild-type CA2(WT).


Colorimetric assay of enzyme activity

Detection device:




Fig.1 Detection device:




CA2 activity assay with CO2 as substrate was performed following the procedure described by Capasso. In brief, The CO2-satured solution was prepared by bubbling CO2 into 100 mL distilled water for approximately 3 h. The CO2 solution was chilled in an ice-water bath. Add 1 mL of 25 mM Tris, pH 8.3, containing bromothymol blue as a dye (to give a distinct and visible blue color) to test tubes chilled in an ice bath. Indicated volume of purified enzyme were added to tubes, and an equivalent amount of buffer was added as control. Then, 1 mL of CO2 solution was added very quickly and simultaneously timing began. The time required for the solution to change from blue to yellow was recorded (transition point of bromothymol blue is pH 6-7.6). The time required for the color change is inversely related to the quantity of carbonic anhydrase presented in the sample.




Fig.2 The color changes of the solution after adding 250 μLCO2 saturated solution.




Fig.3 Comparison of color changing time of CO2 saturated solution




Fig.4 Comparison of unit carbonic anhydrase enzyme activity between wild type and mutant type of CA2




As shown in Fig.3 and Fig.4, by the measurement of the enzyme activity, the result showed that the activity of the mutant CA2 was stronger than that of the wild type CA2.




Determination of thermal stability of carbonic anhydrase by esterase activity analysis

In order to verify that our research results can be applied to higher temperature industrial environments in the future, we designed a gradient temperature to test the activity of wide type and mutant CA2 activity at different temperatures.




Fig.5 Activity of wild type and mutant CA2 at different temperatures



As shown in Fig.5, the results exhibited that the thermal stability of mutant carbonic anhydrase was better than that of wild carbonic anhydrase.





Reference

[1] Rahman F A, Aziz M M A, Saidur R, et al. Pollution to solution: Capture and sequestration of carbon dioxide (CO2) and its utilization as a renewable energy source for a sustainable future[J]. Renewable & Sustainable Energy Reviews, 2017, 71:112-126.
[2] Hu G, Smith K H, Nicholas N J, et al. Enzymatic carbon dioxide capture using a thermally stable carbonic anhydrase as a promoter in potassium carbonate solvents[J]. Chemical Engineering Journal, 2017, 307:49-55.
[3] Yong J K J, Stevens G W, Caruso F, et al. The use of carbonic anhydrase to accelerate carbon dioxide capture processes[J]. Journal of Chemical Technology & Biotechnology, 2015, 90(1):3-10.
[4] Capasso C, De L V, Carginale V, et al. Biochemical properties of a novel and highly thermostable bacterial α-carbonic anhydrase from Sulfurihydrogenibium yellowstonense YO3AOP1[J]. Journal of Enzyme Inhibition & Medicinal Chemistry, 2012, 27(6):892.