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

 
(88 intermediate revisions by 4 users not shown)
Line 17: Line 17:
 
         <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/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" />
 
         <link rel="stylesheet" href="https://2018.igem.org/Team:AHUT_China/responsive_css?action=raw&ctype=text/css" type="text/css" />
−
         <link rel="stylesheet" href="https://2018.igem.org/Team:AHUT_China/zzsc_css?action=raw&ctype=text/css" >
+
         <style>
 +
/* basic styles for black background and crosshair cursor */
 +
body {
 +
background: rgba(0,0,0,1.00);
 +
margin: 0;
 +
}
 +
 
 +
canvas {
 +
cursor: crosshair;
 +
display: block;
 +
}
 +
</style>
 
     </head>
 
     </head>
 +
   
 +
 
 
      
 
      
 
         <!--================Header Area =================-->
 
         <!--================Header Area =================-->
−
        <header class="header_area">
+
            <header class="header_area">
 
             <div class="container">
 
             <div class="container">
 
                 <nav class="navbar navbar-expand-lg navbar-light">
 
                 <nav class="navbar navbar-expand-lg navbar-light">
 
                     <!-- Brand and toggle get grouped for better mobile display -->
 
                     <!-- Brand and toggle get grouped for better mobile display -->
−
                     <a class="navbar-brand logo_h" href="index.html"><img src="https://static.igem.org/mediawiki/2018/e/ec/T--AHUT_China--_logo.jpg" height="100" width="80" alt=""></a>
+
                     <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">
 
                     <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>
Line 34: Line 47:
 
                     <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
 
                     <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
 
                         <ul class="nav navbar-nav menu_nav ml-auto">
 
                         <ul class="nav navbar-nav menu_nav ml-auto">
−
                             <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>  
+
                             <li class="nav-item active"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/home">Home</a></li>  
 
                             <li class="nav-item submenu dropdown">
 
                             <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>
 
                                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TEAM</a>
 
                                 <ul class="dropdown-menu">
 
                                 <ul class="dropdown-menu">
−
                                     <li class="nav-item"><a class="nav-link" href="team.html">Team Members</a></li>
+
                                     <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Team
−
                                     <li class="nav-item"><a class="nav-link" href="blog-single.html">Attribution</a>
+
">Team Members</a></li>
−
<li class="nav-item"><a class="nav-link" href="blog-single.html">Sponsoring</a></li>
+
                                     <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Attributions">Attribution</a>
 +
 
                                 </ul>
 
                                 </ul>
 
                             </li>  
 
                             </li>  
Line 46: Line 60:
 
                                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PROJECT</a>
 
                                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PROJECT</a>
 
                                 <ul class="dropdown-menu">
 
                                 <ul class="dropdown-menu">
−
                                     <li class="nav-item"><a class="nav-link" href="blog.html">Overview</a></li>
+
                                     <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="blog-single.html">Background</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="blog.html">Our lab</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>
 
                                   </li>
 
                                 </ul>
 
                                 </ul>
Line 55: Line 77:
 
                                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PARTS</a>
 
                                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PARTS</a>
 
                                 <ul class="dropdown-menu">
 
                                 <ul class="dropdown-menu">
−
                                     <li class="nav-item"><a class="nav-link" href="blog.html">Improved parts</a></li>
+
                                     <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="blog-single.html">New 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>
 
                                 </ul>
 
                             </li>  
 
                             </li>  
−
<li class="nav-item"><a class="nav-link" href="elements.html">Modeling</a></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">
 
                             <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>
 
                                 <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">
 
                                 <ul class="dropdown-menu">
−
                                     <li class="nav-item"><a class="nav-link" href="Human Practice.html">HP for Silver</a></li>
+
                                     <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="blog-single.html">Integrated HP for gold</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>
 
                                 </ul>
 
                             </li>  
 
                             </li>  
−
                             <li class="nav-item"><a class="nav-link" href="elements.html">Collaboration</a></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>-->
 
<!--                            <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>-->
 
                         </ul>
 
                         </ul>
Line 74: Line 99:
 
                 </nav>
 
                 </nav>
 
             </div>
 
             </div>
 +
         
 
         </header>
 
         </header>
−
        <!--================Header Area =================-->
 
 
          
 
          
 +
       
 +
        <!--================Header Area =================-->
 +
     
 
         <!--================Breadcrumb Area =================-->
 
         <!--================Breadcrumb Area =================-->
−
        <section class="breadcrumb_area">
+
      <!--  <section class="breadcrumb_area">
 
             <div class="overlay bg-parallax" data-stellar-ratio="0.8" data-stellar-vertical-offset="0" data-background=""></div>
 
             <div class="overlay bg-parallax" data-stellar-ratio="0.8" data-stellar-vertical-offset="0" data-background=""></div>
−
            <div class="page-cover text-center">
+
         
−
                    <h2 class="page-cover-tittle">INTER LAB</h2>
+
                <canvas id="canvas"></canvas>  
−
                    <ol class="breadcrumb">
+
                  
−
                        <li><a href="index.html">Home</a></li>
+
−
                        <li class="active">INTER LAB</li>
+
−
                    </ol>
+
−
                 </div>
+
 
             </div>
 
             </div>
−
         </section>
+
         </section>-->
 
         <!--================Breadcrumb Area =================-->
 
         <!--================Breadcrumb Area =================-->
 +
     
 +
 
 +
 +
<div align="center"><video  width="100%"  controls="controls"><source src="https://static.igem.org/mediawiki/2018/b/bc/T--AHUT_China--_home1475852.jpg" type="video/mp4"></div>
 +
 +
        <img width="100%" src="https://static.igem.org/mediawiki/2018/3/3a/T--AHUT_China--_home145532.jpg"  alt=""/>
 +
 +
             
 +
           
 +
           
 +
         
 +
   
 
          
 
          
−
        <!--================ Latest Blog Area  =================-->
+
 
−
        <section class="latest_blog_area section_gap">
+
−
            <div class="container">
+
−
                <div id="level">
+
−
<div id="content">
+
−
<div id="gears">
+
−
<div id="gears-static"></div>
+
−
<div id="gear-system-1">
+
−
<div class="shadow" id="shadow15"></div>
+
−
<div id="gear15"></div>
+
−
<div class="shadow" id="shadow14"></div>
+
−
<div id="gear14"></div>
+
−
<div class="shadow" id="shadow13"></div>
+
−
<div id="gear13"></div>
+
−
</div>
+
−
<div id="gear-system-2">
+
−
<div class="shadow" id="shadow10"></div>
+
−
<div id="gear10"></div>
+
−
<div class="shadow" id="shadow3"></div>
+
−
<div id="gear3"></div>
+
−
</div>
+
−
<div id="gear-system-3">
+
−
<div class="shadow" id="shadow9"></div>
+
−
<div id="gear9"></div>
+
−
<div class="shadow" id="shadow7"></div>
+
−
<div id="gear7"></div>
+
−
</div>
+
−
<div id="gear-system-4">
+
−
<div class="shadow" id="shadow6"></div>
+
−
<div id="gear6"></div>
+
−
<div id="gear4"></div>
+
−
</div>
+
−
<div id="gear-system-5">
+
−
<div class="shadow" id="shadow12"></div>
+
−
<div id="gear12"></div>
+
−
<div class="shadow" id="shadow11"></div>
+
−
<div id="gear11"></div>
+
−
<div class="shadow" id="shadow8"></div>
+
−
<div id="gear8"></div>
+
−
</div>
+
−
<div class="shadow" id="shadow1"></div>
+
−
<div id="gear1"></div>
+
−
<div id="gear-system-6">
+
−
<div class="shadow" id="shadow5"></div>
+
−
<div id="gear5"></div>
+
−
<div id="gear2"></div>
+
−
</div>
+
−
<div class="shadow" id="shadowweight"></div>
+
−
<div id="chain-circle"></div>
+
−
<div id="chain"></div>
+
−
<div id="weight"></div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
              <div class="section_title ">
+
−
                <div align="center"> <h2 class="title_color">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Introduction</h2></div>
+
−
                  <p>We took part in the Fifth International InterLab Measurement Study which ains to achieve the purpose of comparative measurement. The goal of this study is to obtain large amounts of data from labs across the world,to develop absolute units for measurements GFP in a plate reader to eliminate variation between labs.</p><br>
+
−
<div align="center"><h2 class="title_color">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Materials</h2></div>
+
−
                  <p>Plate reader: Synergy H1 (Biotek)<br>
+
−
Plate reader plates: Corning 3603 96-Well Microplates (black plates with clear flat bottom)<br>
+
−
Cell culture shaker: ZWYR-200D<br><br>
+
−
Devices:<br>
+
−
Negative control ：BBa_R0040 <br>
+
−
Positive control ：BBa_I20270 <br>
+
−
Device 1： BBa_J364000  <br>
+
−
Device 2： BBa_J364001  <br>
+
−
Device 3： BBa_J364002  <br>
+
−
Device 4： BBa_J364007  <br>
+
−
Device 5： BBa_J364008  <br>
+
−
Device 6： BBa_J364009  <br>
+
−
Note: for Device 5, we have not transformed it into DH5⍺ competent cells successfully for many times, therefore, we thank IGEM team of Nanjing University for providing the Device 5.<br>
+
−
Calibration material: Provided in the 2018 IGEM distribution kit <br>
+
−
Microorganism: Escherichia coli DH5⍺ strains<br>
+
−
</p><br>
+
−
<div align="center"><h2 class="title_color">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Methods</h2></div>
+
−
                  <p>Following iGEM requirements, Team AHUT_China performed measurements according to these 2018 InterLab Protocols <a href="https://static.igem.org/mediawiki/2018/0/09/2018_InterLab_Plate_Reader_Protocol.pdf">https://static.igem.org/mediawiki/2018/0/09/2018_InterLab_Plate_Reader_Protocol.pdf</a> </p><br>
+
−
<div align="center"><h2 class="title_color">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Results</h2></div>
+
−
                  <h4>1.OD 600 reference point</h4><p>
+
−
Using OD 600 and H2O to generate the conversion factor for the transformation later. The average of OD600 is 0.063; the correction factor (OD600/ABS600) is 3.500
+
−
</p><br>
+
−
  <div align="center"><img src="https://static.igem.org/mediawiki/2018/c/cb/T--AHUT_China--_LUDOX_correct_result.jpg" width="317" height="234" alt=""/></div><br><div align="center">Fig. 1 LUDOX correct value
+
−
  </div>
+
−
  <h4>2.Particle standard curve</h4>
+
−
                  <p>
+
−
We obtained the two Particle Standard Curve (normal and log scale).
+
−
</p><br>
+
−
  <div align="center"><img src="https://static.igem.org/mediawiki/2018/6/65/T--AHUT_China--_Fig._2_Particle_Standard_Curve.jpg" width="701" height="440" alt=""/></div><br><div align="center">Fig. 2 Particle Standard Curve
+
−
  </div>
+
−
<div align="center"><img src="https://static.igem.org/mediawiki/2018/7/7e/T--AHUT_China--_Fig._3_Particle_Standard_Curve_%28log_scale%29.jpg" width="701" height="440" alt=""/></div><br><div align="center">
+
−
  Fig. 3 Particle Standard Curve (log scale)
+
−
</div>
+
−
<h4>3.Fluorescein standard curve</h4><p>
+
−
Dilution serious of fluorescein were prepared and measured in a 96 well plate. A standard curve is generated to correct the cell based readings to an equivalent fluorescein concentration.<br>
+
−
We obtained the two Fluorescein Standard Curve (normal and log scale).
+
−
</p><br>
+
−
 
+
−
<div align="center"><img src="https://static.igem.org/mediawiki/2018/2/24/T--AHUT_China--_Fig._4_Fluorescein_Standard_Curve.jpg" width="701" height="440" alt=""/></div><br><div align="center">
+
−
  Fig. 4 Fluorescein Standard Curve
+
−
</div>
+
−
<div align="center"><img src="https://static.igem.org/mediawiki/2018/a/a9/T--AHUT_China--_Fig._5_Fluorescein_Standard_Curve_%28log_scale%29.jpg" width="701" height="440" alt=""/></div><br><div align="center">
+
−
  <div align="center" >Fig. 5 Fluorescein Standard Curve (log scale) </div>
+
−
</div>
+
−
+
−
  <h4>4.Cell measurements</h4>
+
−
  </ol>
+
−
<p>&nbsp;</p><br>
+
−
 
+
−
<div align="center"><img src="https://static.igem.org/mediawiki/2018/2/21/T--AHUT_China--_Fig._6_Fluorescence_Measurements_Curve_.jpg" width="732" height="492" alt=""/></div><br><div align="center">
+
−
  <div align="center">Fig. 6 Fluorescence Measurements Curve</div>
+
−
</div>
+
−
    <p>Test devices 1 and 4 show high fluorescence intensity. Test devices 2 show a modest fluorescence intensity alone with positive control group, while devices3,5,6 barely show low fluorescence intensity alone with the negative control group.
+
−
</p><br>
+
−
 
+
−
<div align="center"><img src="https://static.igem.org/mediawiki/2018/3/36/T--AHUT_China--_Fig._7_Raw_OD600_Curve_.jpg" width="724" height="484" alt=""/></div><br><div align="center">
+
−
  <div align="center">Fig. 7 Raw OD600 Curve</div>
+
−
</div>
+
−
    <h4>5.We obtained the Colony Forming Units per 0.1 OD600 E. coli cultures</h4>  
+
−
<div align="center"><img src="https://static.igem.org/mediawiki/2018/f/f1/T--AHUT_China--_Fig._8_CFU_Result.jpg" width="724" height="420" alt=""/></div><br>
+
−
    <div align="center"><img src="https://static.igem.org/mediawiki/2018/e/e5/T--AHUT_China--_Fig._8_CFU_Result1.jpg" width="732" height="492" alt=""/></div><br>
+
−
    <div align="center">
+
−
  <div align="center" >Fig. 8 CFU Result</div>
+
−
  <p >&nbsp;</p>
+
−
<div align="center"><h2 class="title_color">Discussion</h2></div>
+
−
                <p>For Figure 3, the log graph isn’t a straight line but not 1:1 slope. In figure 6, highest fluorescence was obtained from device 4, closely followed by test device 1. Test device 2 and positive control group show a modest fluorescence intensity and device 5,6 show low fluorescence intensity, while test devices 3 barely have any fluorescence signal as well as the negative group.
+
−
</p>           
+
−
<div align="center"><h2 class="title_color">Conclusion</h2></div>
+
−
                <p>It was certainly a technical challenge to Participate in the InterLab Study. Performing the prescribed protocols with adherence to all the InterLab guidelines yielded parts of expected results, and with the completed InterLab Google Forms, confirms our team participation in this InterLab Study.
+
−
</p>
+
−
               
+
−
                 
+
−
            </div>
+
−
          </div>
+
−
            </div>
+
−
        </section>
+
−
        <!--================ Recent Area  =================-->
+
 
          
 
          
 
        
 
        
 
          
 
          
 
         <!--================ start footer Area  =================-->
 
         <!--================ start footer Area  =================-->
−
         <DIV style="background: rgba(1,1,1,1.00)"><div align="center"><video height="200px" width="800px" controls="controls"><source src="https://static.igem.org/mediawiki/2018/9/91/T--AHUT_China--_foot.mp4" type="video/mp4" ></div>
+
          
−
                  <br></div>
+
 
        
 
        
  
Line 263: Line 164:
 
       <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/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 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 );
 +
};
 +
})();
 +
 +
// 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;
 +
}
 +
 +
// calculate the distance between two points
 +
function calculateDistance( p1x, p1y, p2x, p2y ) {
 +
var xDistance = p1x - p2x,
 +
yDistance = p1y - p2y;
 +
return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
 +
}
 +
 +
// create firework
 +
function Firework( sx, sy, tx, ty ) {
 +
// 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;
 +
}
 +
 +
// update firework
 +
Firework.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 ] );
 +
 +
// 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 ) );
 +
}
 +
}
 +
 +
// 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>
 +
<script language="javascript"> 
 +
                        $(document).ready(function(){
 +
                            video.play(); 
 +
                        });
 +
                         
 +
                        var vList = ['001.mp4', 'video//1.mp4', 'video//02.mp4']; // 初始化播放列表 
 +
                        var vLen = vList.length; 
 +
                        var curr = 0; 
 +
                        var video = document.getElementById("myvideo"); 
 +
                        video.addEventListener('ended', function(){
 +
                            play();
 +
                        }); 
 +
                           
 +
                        function play() { 
 +
                            video.src = vList[curr]; 
 +
                            video.load();   
 +
                            video.play(); 
 +
                            curr++; 
 +
                            if(curr >= vLen){ 
 +
                                curr = 0; //重新循环播放
 +
                            } 
 +
                           
 +
                        } 
 +
</script> 
 
</html>
 
</html>
 +
{{:Team:AHUT_China/footer}}
 +
{{:Team:AHUT_China/footercss}}

Latest revision as of 09:17, 17 October 2018

Royal Hotel Royal Hotel