Team:UCLA/sams extra css

From 2014.igem.org

(Difference between revisions)
 
(174 intermediate revisions not shown)
Line 1: Line 1:
 +
{{:Team:UCLA/Template/Javascript}}
{{:Team:UCLA/Template/CSS_test}}
{{:Team:UCLA/Template/CSS_test}}
<html lang="en">
<html lang="en">
-
<head>
+
  <head>
-
<style>
+
    <!-- META TAGS -->
-
* {
+
     <meta charset="utf-8">
-
    margin: 0;
+
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
    overflow: hidden;
+
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
    -webkit-user-select: none;
+
     <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
-
    -moz-user-select: none;
+
     <title>iGEM UCLA</title>
-
     -ms-user-select: none;
+
  </head>
-
     -o-user-select: none;
+
 
-
    user-select: none;
+
-
}
+
-
body {
+
-
    background: #F2F2F2;
+
-
}
+
-
#c {
+
-
    display: block;
+
-
    margin: 20px auto 0;
+
-
}
+
-
#info {
+
-
    position: absolute;
+
-
    left: -1px;
+
-
    top: -1px;
+
-
     width: auto;
+
-
    max-width: 420px;
+
-
    height: auto;
+
-
    background: #f2f2f2;
+
-
    border-bottom-right-radius: 10px;
+
-
    border:1px solid #333;
+
-
}
+
-
#top {
+
-
    background: #fff;
+
-
    width: 100%;
+
-
    height: auto;
+
-
    position: relative;
+
-
    border-bottom: 1px solid #eee;
+
-
}
+
-
p {
+
-
    font-family: Arial, sans-serif;
+
-
     color: #666;
+
-
    text-align: justify;
+
-
    font-size: 16px;
+
-
    margin: 10px;
+
-
}
+
-
#github {
+
-
  color:#3377ee;
+
-
  font-family: Helvetica, Arial, sans-serif;
+
-
  font-size: 19px;
+
-
  display: block;
+
-
  margin: 0 auto;
+
-
  text-align: center;
+
-
  text-decoration:none;
+
-
}
+
-
#net {
+
-
  text-align:center;
+
-
  white-space:nowrap;
+
-
  font-size:19px;
+
-
  background:rgba(0,0,0,0.1);
+
-
  padding:8px 12px;
+
-
  border-radius:8px;
+
-
  display:block;
+
-
  color:#888;
+
-
}
+
-
#net > span {
+
-
  color:#3377ee;
+
-
  font-family: Helvetica, Arial, sans-serif;
+
-
  font-size: 14px;
+
-
  display: block;
+
-
  margin: 0 auto;
+
-
  text-align: center;
+
-
  text-decoration:none;
+
-
}
+
-
a {
+
-
     font-family: sans-serif;
+
-
    color: #444;
+
-
    text-decoration: none;
+
-
    font-size: 20px;
+
-
}
+
-
#site {
+
-
    float: left;
+
-
    margin: 10px;
+
-
    color: #ff9900;
+
-
  border-bottom: 1px dashed #ccc;
+
-
  padding-bottom:3px
+
-
}
+
-
#site:hover {
+
-
    color: #ffaa11;
+
-
}
+
-
#close {
+
-
    float: right;
+
-
    margin: 10px;
+
-
}
+
-
#p {
+
-
    font-family: Verdana, sans-serif;
+
-
    position: absolute;
+
-
    right: 10px;
+
-
    bottom: 10px;
+
-
    color: #4099ff;
+
-
    border: 1px dashed #4099ff;
+
-
    padding: 4px 8px;
+
-
}
+
-
</style>
+
-
</head>
+
<body>
<body>
-
<canvas id="c"></canvas>
+
<!--TOP NAVIGATION MENU BAR-->
-
</body>
+
<div id = "top_menu" >
 +
<ul id = "menu">
 +
<li><a href="/Team:UCLA">Home</a></li>
 +
 +
        <li><a href="/Team:UCLA/Team">Team</a>
 +
        <ul>
 +
    <li><a href="/Team:UCLA/meet_the_team">Meet the Team</a></li>
 +
    <li><a href="https://igem.org/Team.cgi?year=2014&team_name=UCLA">Official Profile</a></li>
 +
        </ul>
 +
        </li>
 +
 +
        <li><a href="/Team:UCLA/Project">Project</a>
 +
<ul>
 +
    <li><a href="/Team:UCLA/Project/Customizing Silk">Customizing Silk Properties</a></li>
 +
    <li><a href="/Team:UCLA/Project/Functionalizing Fibers">Functionalizing Fibers</a></li>
 +
    <li><a href="/Team:UCLA/Project/Spinning Silk">Spinning Silk</a></li>
 +
            <li><a href="#">Human Practices</a></li>
 +
</ul>
 +
</li>
 +
       
 +
        <li><a href="/Team:UCLA/Parts">Parts</a>
 +
<!--<ul>
 +
    <li><a href="#">Page1</a></li>
 +
    <li><a href="#">Page2</a></li>
 +
    <li><a href="#">Page3</a></li>
 +
</ul>-->
 +
</li>
-
<script>
+
        <li><a href="/Team:UCLA/Modeling">Modeling</a></li>
-
document.getElementById('close').onmousedown = function(e) {
+
-
  e.preventDefault();
+
-
  document.getElementById('info').style.display = 'none';
+
-
  return false;
+
-
};
+
-
var physics_accuracy  = 3,
+
         <li><a href="/Team:UCLA/Notebook">Notebook</a>
-
    mouse_influence  = 20,
+
<ul>
-
    mouse_cut         = 5,
+
    <li><a href="/Team:UCLA/Notebook/Protocols">Protocols</a></li>
-
    gravity          = 1200,
+
    <li><a href="/Team:UCLA/Notebook/Calendar">Calendar</a></li>
-
    cloth_height      = 30,
+
    <li><a href="/Team:UCLA/Notebook/Weekly Notes">Weekly Notes</a></li>
-
    cloth_width      = 50,
+
</ul>
-
    start_y          = 20,
+
        </li>
-
    spacing          = 7,
+
-
    tear_distance    = 60;
+
 +
        <li><a href="/Team:UCLA/Safety">Safety</a></li>
-
window.requestAnimFrame =
+
        <li><a href="/Team:UCLA/Attributions">Attributions</a></li>
-
    window.requestAnimationFrame ||
+
</ul>
-
    window.webkitRequestAnimationFrame ||
+
<a href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/igem.org/1/17/IGEM_basic_Logo_white_stylized.png" width="55px"/></a>
-
    window.mozRequestAnimationFrame ||
+
</div><br><br><br>
-
    window.oRequestAnimationFrame ||
+
-
    window.msRequestAnimationFrame ||
+
-
    function (callback) {
+
-
        window.setTimeout(callback, 1000 / 60);
+
-
};
+
-
var canvas,
+
<!--SIDEBAR NAV-->
-
    ctx,
+
<div id="side_menu">
-
    cloth,
+
<h3>1</h3>
-
    boundsx,
+
<h3>2</h3>
-
    boundsy,
+
<h3>3</h3>
-
    mouse = {
+
<h3>4</h3>
-
        down: false,
+
<h3>5</h3>
-
        button: 1,
+
<h3>6</h3>
-
        x: 0,
+
</div>
-
        y: 0,
+
-
        px: 0,
+
-
        py: 0
+
-
    };
+
-
var Point = function (x, y) {
 
-
    this.x     = x;
+
<!-- Spider click to top button -->
-
    this.y     = y;
+
     <img class= "spiderbutton" src= "https://static.igem.org/mediawiki/2014/a/ac/Spiderbutton2.png">
-
    this.px    = x;
+
     <img class= "spiderline" src= "https://static.igem.org/mediawiki/2014/6/66/Line2.png">
-
    this.py    = y;
+
    <img class= "spiderweb" src= "https://static.igem.org/mediawiki/2014/b/bb/Web3.png">
-
    this.vx    = 0;
+
<!-- TITLE BANNER-->
-
    this.vy    = 0;
+
<br><center><img src="http://www.achickwithbaggage.com/storage/site_graphics/ad_placeholder_banner.jpg?__SQUARESPACE_CACHEVERSION=1297808765522"></center><br>
-
    this.pin_x  = null;
+
-
    this.pin_y  = null;
+
-
   
+
-
    this.constraints = [];
+
-
};
+
-
Point.prototype.update = function (delta) {
+
<!--SUMMARY TILES-->
 +
<div class="container">
 +
<div class="expandedContent">
 +
    <div class="boxgrid contentBorder boxgridMedium" id="box1" style="margin-left:-55px">
 +
  <img src="https://static.igem.org/mediawiki/2013/0/06/SDU2013_LabHigh.jpg">
 +
  <a class="cover boxcaption" style="top: 340px" href="#anch1">
 +
    <h2 class="onBlack">Goals</h2>
 +
    <p class="onBlackIntro">
-
     if (mouse.down) {
+
If you wish to see how, click here to start the interactive tour.
 +
     </p>
 +
    <p class="onBlack">
 +
Just days before the deadline of iGEM 2013, we got the peaks that our entire summer built towards: Two small bumps on the NMR indicating the presence of bacterially produced rubber in our strain of E. coli. With a mad scramble to the finish line, our initial indication was reinforced. Click anywhere along this text to start the interactive tour, which will guide you along the path to rubber.
 +
    </p>
 +
  </a>
 +
</div>
 +
<div class="boxgrid contentBorder boxgridMedium" id="box2" style="margin-left:20px">
 +
  <img src="https://static.igem.org/mediawiki/2013/0/06/SDU2013_LabHigh.jpg">
 +
  <a class="cover boxcaption" style="top: 340px" href="#anch2">
 +
    <h2 class="onBlack">Methods</h2>
 +
    <p class="onBlackIntro">
-
        var diff_x = this.x - mouse.x,
+
If you wish to see how, click here to start the interactive tour.
-
            diff_y = this.y - mouse.y,
+
    </p>
-
            dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);
+
    <p class="onBlack">
 +
Just days before the deadline of iGEM 2013, we got the peaks that our entire summer built towards: Two small bumps on the NMR indicating the presence of bacterially produced rubber in our strain of E. coli. With a mad scramble to the finish line, our initial indication was reinforced. Click anywhere along this text to start the interactive tour, which will guide you along the path to rubber.
 +
    </p>
 +
  </a>
 +
</div>
 +
<div class="boxgrid contentBorder boxgridMedium" id="box3" style="margin-left:20px">
 +
  <img src="https://static.igem.org/mediawiki/2013/0/06/SDU2013_LabHigh.jpg">
 +
  <a class="cover boxcaption" style="top: 340px" href="#anch3">
 +
    <h2 class="onBlack">Results</h2>
 +
    <p class="onBlackIntro">
-
        if (mouse.button == 1) {
+
If you wish to see how, click here to start the interactive tour.
 +
    </p>
 +
    <p class="onBlack">
 +
Just days before the deadline of iGEM 2013, we got the peaks that our entire summer built towards: Two small bumps on the NMR indicating the presence of bacterially produced rubber in our strain of E. coli. With a mad scramble to the finish line, our initial indication was reinforced. Click anywhere along this text to start the interactive tour, which will guide you along the path to rubber.
 +
    </p>
 +
  </a>
 +
</div>
 +
<div class="boxgrid contentBorder boxgridMedium" id="box4" style="margin-left:20px">
 +
  <img src="https://static.igem.org/mediawiki/2013/0/06/SDU2013_LabHigh.jpg">
 +
  <a class="cover boxcaption" style="top: 340px" href="#anch4">
 +
    <h2 class="onBlack">Discussion</h2>
 +
    <p class="onBlackIntro">
-
            if (dist < mouse_influence) {
+
If you wish to see how, click here to start the interactive tour.
-
                this.px = this.x - (mouse.x - mouse.px) * 1.8;
+
    </p>
-
                this.py = this.y - (mouse.y - mouse.py) * 1.8;
+
    <p class="onBlack">
-
            }
+
Just days before the deadline of iGEM 2013, we got the peaks that our entire summer built towards: Two small bumps on the NMR indicating the presence of bacterially produced rubber in our strain of E. coli. With a mad scramble to the finish line, our initial indication was reinforced. Click anywhere along this text to start the interactive tour, which will guide you along the path to rubber.
 +
    </p>
 +
  </a>
 +
</div>
 +
</div>
 +
</div>
-
        } else if (dist < mouse_cut) this.constraints = [];
+
<!--CONTENT SECTIONS-->
-
    }
+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 +
<hr id="anch1" class = "style-one"><br>
 +
<p class="style">GOALS</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 +
    <a href="YOUR IMAGE URL" style="clear: left; float: right; margin-top: 1em; margin-bottom: 0.1em; margin-right: 1em;"><img border="0"  src="YOUR IMAGE URL" width="225" height="120"/></a>
 +
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
    this.add_force(0, gravity);
+
    <a href="YOUR IMAGE URL" style="clear: left; float: left; margin-top: 1em; margin-bottom: 0.1em; margin-right: 1em;"><img border="0"  src="YOUR IMAGE URL" width="325" height="300"/></a>
-
    delta *= delta;
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
-
    nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);
+
-
    ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);
+
-
    this.px = this.x;
+
<br><hr id="anch2" class = "style-one"><Br>
-
    this.py = this.y;
+
<p class="style">METHODS</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 +
    <a href="YOUR IMAGE URL" style="clear: left; float: right; margin-top: 1em; margin-bottom: 0.1em; margin-right: 1em;"><img border="0"  src="YOUR IMAGE URL" width="225" height="120"/></a>
 +
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
-
    this.x = nx;
+
    <a href="YOUR IMAGE URL" style="clear: left; float: left; margin-top: 1em; margin-bottom: 0.1em; margin-right: 1em;"><img border="0"  src="YOUR IMAGE URL" width="325" height="300"/></a>
-
    this.y = ny;
+
-
    this.vy = this.vx = 0
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
-
};
+
-
Point.prototype.draw = function () {
+
<br><hr id="anch3" class = "style-one"><br>
 +
<p class="style">RESULTS</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
 +
    <a href="YOUR IMAGE URL" style="clear: left; float: right; margin-top: 1em; margin-bottom: 0.1em; margin-right: 1em;"><img border="0"  src="YOUR IMAGE URL" width="225" height="120"/></a>
 +
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
    if (!this.constraints.length) return;
+
    <a href="YOUR IMAGE URL" style="clear: left; float: left; margin-top: 1em; margin-bottom: 0.1em; margin-right: 1em;"><img border="0"  src="YOUR IMAGE URL" width="325" height="300"/></a>
-
    var i = this.constraints.length;
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
-
    while (i--) this.constraints[i].draw();
+
-
};
+
-
Point.prototype.resolve_constraints = function () {
+
<br><hr id="anch4" class = "style-one"><br>
 +
<p class="style">DISCUSSION</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
 +
    <a href="YOUR IMAGE URL" style="clear: left; float: right; margin-top: 1em; margin-bottom: 0.1em; margin-right: 1em;"><img border="0"  src="YOUR IMAGE URL" width="225" height="120"/></a>
 +
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
    if (this.pin_x != null && this.pin_y != null) {
+
    <a href="YOUR IMAGE URL" style="clear: left; float: left; margin-top: 1em; margin-bottom: 0.1em; margin-right: 1em;"><img border="0"  src="YOUR IMAGE URL" width="325" height="300"/></a>
-
        this.x = this.pin_x;
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
-
        this.y = this.pin_y;
+
          
-
         return;
+
-
    }
+
-
    var i = this.constraints.length;
+
</div>
-
    while (i--) this.constraints[i].resolve();
+
</div>
-
 
+
</body>
-
    this.x > boundsx ? this.x = 2 * boundsx - this.x : 1 > this.x && (this.x = 2 - this.x);
+
-
    this.y < 1 ? this.y = 2 - this.y : this.y > boundsy && (this.y = 2 * boundsy - this.y);
+
-
};
+
-
 
+
-
Point.prototype.attach = function (point) {
+
-
 
+
-
    this.constraints.push(
+
-
        new Constraint(this, point)
+
-
    );
+
-
};
+
-
 
+
-
Point.prototype.remove_constraint = function (constraint) {
+
-
 
+
-
    this.constraints.splice(this.constraints.indexOf(constraint), 1);
+
-
};
+
-
 
+
-
Point.prototype.add_force = function (x, y) {
+
-
 
+
-
    this.vx += x;
+
-
    this.vy += y;
+
-
};
+
-
 
+
-
Point.prototype.pin = function (pinx, piny) {
+
-
    this.pin_x = pinx;
+
-
    this.pin_y = piny;
+
-
};
+
-
 
+
-
var Constraint = function (p1, p2) {
+
-
 
+
-
    this.p1    = p1;
+
-
    this.p2    = p2;
+
-
    this.length = spacing;
+
-
};
+
-
 
+
-
Constraint.prototype.resolve = function () {
+
-
 
+
-
    var diff_x  = this.p1.x - this.p2.x,
+
-
        diff_y  = this.p1.y - this.p2.y,
+
-
        dist    = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
+
-
        diff    = (this.length - dist) / dist;
+
-
 
+
-
    if (dist > tear_distance) this.p1.remove_constraint(this);
+
-
 
+
-
    var px = diff_x * diff * 0.5;
+
-
    var py = diff_y * diff * 0.5;
+
-
 
+
-
    this.p1.x += px;
+
-
    this.p1.y += py;
+
-
    this.p2.x -= px;
+
-
    this.p2.y -= py;
+
-
};
+
-
 
+
-
Constraint.prototype.draw = function () {
+
-
 
+
-
    ctx.moveTo(this.p1.x, this.p1.y);
+
-
    ctx.lineTo(this.p2.x, this.p2.y);
+
-
};
+
-
 
+
-
var Cloth = function () {
+
-
 
+
-
    this.points = [];
+
-
 
+
-
    var start_x = canvas.width / 2 - cloth_width * spacing / 2;
+
-
 
+
-
    for (var y = 0; y <= cloth_height; y++) {
+
-
 
+
-
        for (var x = 0; x <= cloth_width; x++) {
+
-
 
+
-
            var p = new Point(start_x + x * spacing, start_y + y * spacing);
+
-
 
+
-
            x != 0 && p.attach(this.points[this.points.length - 1]);
+
-
            y == 0 && p.pin(p.x, p.y);
+
-
            y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])
+
-
 
+
-
            this.points.push(p);
+
-
        }
+
-
    }
+
-
};
+
-
 
+
-
Cloth.prototype.update = function () {
+
-
 
+
-
    var i = physics_accuracy;
+
-
 
+
-
    while (i--) {
+
-
        var p = this.points.length;
+
-
        while (p--) this.points[p].resolve_constraints();
+
-
    }
+
-
 
+
-
    i = this.points.length;
+
-
    while (i--) this.points[i].update(.016);
+
-
};
+
-
 
+
-
Cloth.prototype.draw = function () {
+
-
 
+
-
    ctx.beginPath();
+
-
 
+
-
    var i = cloth.points.length;
+
-
    while (i--) cloth.points[i].draw();
+
-
 
+
-
    ctx.stroke();
+
-
};
+
-
 
+
-
function update() {
+
-
 
+
-
    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
-
 
+
-
    cloth.update();
+
-
    cloth.draw();
+
-
 
+
-
    requestAnimFrame(update);
+
-
}
+
-
 
+
-
function start() {
+
-
 
+
-
    canvas.onmousedown = function (e) {
+
-
        mouse.button  = e.which;
+
-
        mouse.px      = mouse.x;
+
-
        mouse.py      = mouse.y;
+
-
        var rect      = canvas.getBoundingClientRect();
+
-
        mouse.x      = e.clientX - rect.left,
+
-
        mouse.y      = e.clientY - rect.top,
+
-
        mouse.down    = true;
+
-
        e.preventDefault();
+
-
    };
+
-
 
+
-
    canvas.onmouseup = function (e) {
+
-
        mouse.down = false;
+
-
        e.preventDefault();
+
-
    };
+
-
 
+
-
    canvas.onmousemove = function (e) {
+
-
        mouse.px  = mouse.x;
+
-
        mouse.py  = mouse.y;
+
-
        var rect  = canvas.getBoundingClientRect();
+
-
        mouse.x  = e.clientX - rect.left,
+
-
        mouse.y  = e.clientY - rect.top,
+
-
        e.preventDefault();
+
-
    };
+
-
 
+
-
    canvas.oncontextmenu = function (e) {
+
-
        e.preventDefault();
+
-
    };
+
-
 
+
-
    boundsx = canvas.width - 1;
+
-
    boundsy = canvas.height - 1;
+
-
 
+
-
    ctx.strokeStyle = '#888';
+
-
 
+
-
    cloth = new Cloth();
+
-
 
+
-
    update();
+
-
}
+
-
 
+
-
window.onload = function () {
+
-
 
+
-
    canvas  = document.getElementById('c');
+
-
    ctx    = canvas.getContext('2d');
+
-
 
+
-
    canvas.width  = 560;
+
-
    canvas.height = 350;
+
-
    start();
 
-
};
 
-
</script>
 
-
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
</html>
</html>

Latest revision as of 21:25, 18 September 2014

iGEM UCLA




1

2

3

4

5

6






























GOALS

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.



METHODS

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.



RESULTS

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.



DISCUSSION

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Retrieved from "http://2014.igem.org/Team:UCLA/sams_extra_css"