Difference between revisions of "Team:NUDT CHINA/Model"

Line 4: Line 4:
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
−
     <title>Team:NUDT_CHINA</title>
+
     <link rel="stylesheet" href="basic.css">
−
</head>
+
    <style type="text/css">
 +
p {font-variant: stacked-fractions;
 +
font-size: large;}
 +
.pure-g p{font-variant: stacked-fractions;
 +
font-size: large;}
 +
.main-title{padding-top:50%; padding-bottom:50%;width:100%;}
 +
.main{width:90%;}
 +
.main-title::before {
 +
content: '';
 +
width: 20vw;
 +
height: 20vw;
 +
min-width: 3.5em;
 +
min-height: 3.5em;
 +
background: url(https://static.igem.org/mediawiki/2017/f/fe/T-NUDT_CHINA-BigTitle.svg) no-repeat center center;
 +
background-size: cover;
 +
position: absolute;
 +
top: 50%;
 +
left: 50%;
 +
border-radius: 50%;
 +
z-index: 3;
 +
-webkit-transform: translate3d(-50%,-50%,0);
 +
transform: translate3d(-50%,-50%,0);}
 +
.large-header {
 +
background-image: url('https://static.igem.org/mediawiki/2017/d/d3/T-NUDT_CHINA-bigheader-Model1.jpg');}
  
−
 
+
    </style>
 +
</head>
 +
 
 
   <div id="layout">
 
   <div id="layout">
 
         <a href="#menu" id="menuLink" class="menu-link">
 
         <a href="#menu" id="menuLink" class="menu-link">
Line 15: Line 40:
 
         <div class="pure-menu"><img src="https://static.igem.org/mediawiki/2017/4/4f/T-NUDT_CHINA-icon01.png" width=240px height=190px alt="">
 
         <div class="pure-menu"><img src="https://static.igem.org/mediawiki/2017/4/4f/T-NUDT_CHINA-icon01.png" width=240px height=190px alt="">
 
           <ul class="pure-menu-list">
 
           <ul class="pure-menu-list">
−
             <li class="pure-menu-item"><a class="pure-menu-heading" href="https://2017.igem.org/Team:NUDT_CHINA" class="pure-menu-link">HOME</a></li>               
+
             <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA" class="pure-menu-link">HOME</a></li>               
 
            
 
            
 
             <li class="pure-menu-item pure-menu-has-children">
 
             <li class="pure-menu-item pure-menu-has-children">
Line 32: Line 57:
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Notebook" class="pure-menu-link">Notebook</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Notebook" class="pure-menu-link">Notebook</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/InterLab" class="pure-menu-link">InterLab</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/InterLab" class="pure-menu-link">InterLab</a></li>
−
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Contribution" class="pure-menu-link">Contribution</a></li>
+
                 <li class="pure-menu-item"><a class="pure-menu-heading" href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
+
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Results" class="pure-menu-link">Results</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Results" class="pure-menu-link">Results</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Demonstrate" class="pure-menu-link">Demonstrate</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Demonstrate" class="pure-menu-link">Demonstrate</a></li>
Line 61: Line 85:
 
               <a  class="pure-menu-link"onclick="Show('award_show')">AWARDS</a>
 
               <a  class="pure-menu-link"onclick="Show('award_show')">AWARDS</a>
 
               <ul class="pure-menu-children" id="award_show">
 
               <ul class="pure-menu-children" id="award_show">
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Applied_Design" class="pure-menu-link">Applied Design</a></li>
 
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Entrepreneurship" class="pure-menu-link">Enterpreneurship</a></li>
 
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Hardware" class="pure-menu-link">Hardware</a></li>
 
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Measurement" class="pure-menu-link">Measurement</a></li>
 
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Plant" class="pure-menu-link">Plant</a></li>
 
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Software" class="pure-menu-link">Software</a></li>
 
 
             </ul>
 
             </ul>
 
             </li>
 
             </li>
Line 74: Line 92:
 
         </div>   
 
         </div>   
 
         </div>
 
         </div>
−
 
−
 
 
 
         <div id="main">
 
         <div id="main">
−
         <div class="Myheader">
+
         <div id="large-header" class="large-header">
−
            <h5>Model</h5>
+
                    <canvas id="demo-canvas"></canvas>
−
            <h2>Development of A Novel Blood-MicroRNA Handy Detection System with CRISPR</h2>
+
                    <h1 class="main-title">Model</span></h1>
−
        </div>
+
−
 
+
−
        <div class="content">
+
−
            <h2 class="content-subhead">Abstract</h2>
+
−
            <p>
+
−
                This model is created to evaluate the effectiveness of initial design, and offers guidelines on how the system can (or must) be improved. (You can go to <a href="https://2016.igem.org/Team:NUDT_CHINA/Design">PROJECT. page</a> to see more
+
−
            </p>
+
−
            <h2 class="content-subhead">Introduction</h2>
+
−
            <p>
+
−
                We create mathematical models of two aspects of our project, a RCA model and a signal detection model.
+
−
            </p>
+
−
            <h2 class="content-subhead">Assumption and Justification</h2>
+
−
            <h2 class="content-subsub">About model </h2>
+
−
            <p>1. MiRNA is not degraded throughout the reaction process.</p>
+
−
<p>2. The two fusion proteins of dCas9 and split-HRP fragments have the same ability to combine with the stem-loop structure, and only when two different proteins next to each other, can they have the ability to catalyze substrate and produce signal.</p>
+
−
<p>3. The number of stem-loop structures in each RCA product is equal under a certain reaction time.</p>
+
−
<p>4. The enzymatic activity remains unchanged with time under the premise of excessive amount of enzymes or a short-time reaction. </p>
+
−
            <h2 class="content-subsub">About the data </h2>
+
−
            <p>1. The data we obtain from wet-lab experiment are reliable.</p>
+
−
<p>2. All the results are trustworthy in the process of statistical processing and data calculation.</p>
+
−
 
+
−
            <h2 class="content-subhead">Model</h2>
+
−
            <h2 class="content-subsub">Notations</h2>
+
−
           
+
−
            <table class="MsoTableGrid" border="1" cellspacing="0" cellpadding="0" style="border:none;">
+
−
<tbody>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">Symbol </span>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">Definition </span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">x</span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<a name="OLE_LINK7"></a><a name="OLE_LINK6"></a><span style="font-family:&quot;">The
+
−
  concentration of</span><span style="font-family:&quot;"> miRNA (pM)</span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">C<sub>1</sub></span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">The
+
−
  concentration of initiated probe (Abbreviated to iprobe)</span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">k<sub>1</sub></span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<a name="OLE_LINK8"></a><span style="font-family:&quot;">A constant representing the scale factor</span><span style="font-family:&quot;"></span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">K<sub>m </sub></span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">One
+
−
  of the characteristic constants of phi29 DNA polymerase</span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">V<sub>max</sub></span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">One
+
−
  of the characteristic constants of phi29 DNA polymerase</span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">k<sub>2</sub></span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">A
+
−
  constant representing the scale factor</span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">V</span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">The initial
+
−
  speed of RCA </span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<a name="OLE_LINK9"></a><i><span style="font-family:&quot;">n<sub>1</sub></span></i><i><sub><span style="font-family:&quot;"></span></sub></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">The
+
−
  moles of RCA product</span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">n<sub>2</sub></span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<a name="OLE_LINK10"></a><span style="font-family:&quot;">The number of stem-loop structures in each RCA product</span><span style="font-family:&quot;"></span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">n</span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">The total
+
−
  amount of <a name="OLE_LINK23"></a><a name="OLE_LINK22"></a>stem-loop structures</span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">N</span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<a name="OLE_LINK41"></a><a name="OLE_LINK16"></a><span style="font-family:&quot;">The
+
−
  molecule number of the fusion protein of dCas9 and split-HRP fragments</span><span style="font-family:&quot;"></span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">k<sub>3</sub></span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">A
+
−
  constant representing the scale factor</span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">y<sub>1</sub></span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">The fluorescence
+
−
  intensity of DNA-dye-complex (RFU)</span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">N<sub>1</sub></span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">The
+
−
  molecule number of the fusion protein of dCas9 and split-HRP fragments in the
+
−
  solution</span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">N<sub>2</sub></span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<a name="OLE_LINK45"></a><span style="font-family:&quot;">The molecule number of the fusion protein of dCas9 and
+
−
  split-HRP fragments binding with stem-loop structure</span><span style="font-family:&quot;"></span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">k<sub>4</sub></span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">A
+
−
  constant representing the scale factor</span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">k<sub>5</sub></span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">A
+
−
  constant representing the scale factor</span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">ρ</span></i><i><span style="font-family:&quot;"></span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">Signal
+
−
  to noise ratio(Abbreviated to SNR)</span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">I</span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">The
+
−
  molecule number of formed intact HRP proteins </span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">I<sub>1</sub></span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">The
+
−
  molecule number of formed intact HRP proteins in the solution</span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">I<sub>2</sub></span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<a name="OLE_LINK43"></a><span style="font-family:&quot;">The molecule number of formed intact HRP proteins through
+
−
  binding with stem-loop structure</span><span style="font-family:&quot;"></span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">t</span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">Reaction
+
−
  time</span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
<tr>
+
−
<td width="66" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<i><span style="font-family:&quot;">y<sub>2</sub></span></i>
+
−
</p>
+
−
</td>
+
−
<td width="487" valign="top" style="border:solid windowtext 1.0pt;">
+
−
<p class="MsoNormal">
+
−
<span style="font-family:&quot;">The
+
−
  signal intensity (OD<sub>450</sub>)</span>
+
−
</p>
+
−
</td>
+
−
</tr>
+
−
</tbody>
+
−
</table>
+
−
<div class="pure-g">
+
−
                  <div class="pure-u-1-1">
+
−
                    <img class="pure-img-responsive" src="show_test.jpg" alt="Peyto Lake">
+
 
                 </div>
 
                 </div>
−
                </div>
+
       
−
                <p><br>
+
−
<span style="line-height:2;font-family:Perpetua;font-
+
  
−
size:18px;"><b>Figure 1. Schematic diagram</b></span>  
+
        <div class="content" style="width: 74%">
−
</p>
+
       
 +
</div>
 +
</div></div>
  
−
     
+
<script type="text/javascript">
−
        </div>
+
function send(num) {
−
     </div>
+
  var openClass = 'is-open';
 +
var add1=document.getElementById(num);
 +
var add2=document.getElementById('Lay'+num);
 +
addClass(add1,openClass);
 +
addClass(add2,openClass);
 +
function hasClass(element,csName){
 +
　　　　　　return　　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)'));
 +
　　　　};
 +
function addClass(element,csName){
 +
　　　　　　　if(!hasClass(element,csName)){
 +
 +
　　　　　　　　　element.className+=' '+csName;
 +
 +
　　　　　　}
 +
};}
 +
function show(num) {
 +
var openClass = 'is-open';
 +
var remove1=document.getElementById(num);
 +
var remove2=document.getElementById('Lay'+num);
 +
deleteClass(remove1,openClass);
 +
deleteClass(remove2,openClass);
 +
function hasClass(element,csName){
 +
　　　　　　return　　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)'));
 +
　　　　};
 +
　 function deleteClass(element,csName){   
 +
if (hasClass(element,csName)) {
 +
        var reg = new RegExp("(\\s|^)" + csName + "(\\s|$)");
 +
        element.className = element.className.replace(reg, " ");
 +
     }
 +
};
 +
}
  
−
</div>
+
</script>
−
 
+
−
</div>
+
 
<script type="text/javascript">
 
<script type="text/javascript">
 
( function(window,document){
 
( function(window,document){
Line 495: Line 198:
 
     }
 
     }
 
     }
 
     }
 +
</script>
 +
<script type="text/javascript" >
 +
(function() {
 +
 +
    var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
 +
 +
    // Main
 +
    initHeader();
 +
    addListeners();
 +
 +
    function initHeader() {
 +
        width = window.innerWidth;
 +
        height = window.innerHeight;
 +
        target = {x: 0, y: height};
 +
 +
        largeHeader = document.getElementById('large-header');
 +
        largeHeader.style.height = height+'px';
 +
 +
        canvas = document.getElementById('demo-canvas');
 +
        canvas.width = width;
 +
        canvas.height = height;
 +
        ctx = canvas.getContext('2d');
 +
 +
        // create particles
 +
        circles = [];
 +
        for(var x = 0; x < width*0.5; x++) {
 +
            var c = new Circle();
 +
            circles.push(c);
 +
        }
 +
        animate();
 +
    }
 +
 +
    // Event handling
 +
    function addListeners() {
 +
        window.addEventListener('scroll', scrollCheck);
 +
        window.addEventListener('resize', resize);
 +
    }
 +
 +
    function scrollCheck() {
 +
        if(document.body.scrollTop > height) animateHeader = false;
 +
        else animateHeader = true;
 +
    }
 +
 +
    function resize() {
 +
        width = window.innerWidth;
 +
        height = window.innerHeight;
 +
        largeHeader.style.height = height+'px';
 +
        canvas.width = width;
 +
        canvas.height = height;
 +
    }
 +
 +
    function animate() {
 +
        if(animateHeader) {
 +
            ctx.clearRect(0,0,width,height);
 +
            for(var i in circles) {
 +
                circles[i].draw();
 +
            }
 +
        }
 +
        requestAnimationFrame(animate);
 +
    }
 +
 +
    // Canvas manipulation
 +
    function Circle() {
 +
        var _this = this;
 +
 +
        // constructor
 +
        (function() {
 +
            _this.pos = {};
 +
            init();
 +
            console.log(_this);
 +
        })();
 +
 +
        function init() {
 +
            _this.pos.x = Math.random()*width;
 +
            _this.pos.y = height+Math.random()*100;
 +
            _this.alpha = 0.1+Math.random()*0.3;
 +
            _this.scale = 0.1+Math.random()*0.3;
 +
            _this.velocity = Math.random();
 +
        }
 +
 +
        this.draw = function() {
 +
            if(_this.alpha <= 0) {
 +
                init();
 +
            }
 +
            _this.pos.y -= _this.velocity;
 +
            _this.alpha -= 0.0005;
 +
            ctx.beginPath();
 +
            ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
 +
            ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
 +
            ctx.fill();
 +
        };
 +
    }
 +
 +
})();
 
</script>
 
</script>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 02:08, 28 October 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM