Team:Hong Kong HKUST/astrid

From 2014.igem.org

(Difference between revisions)
 
(77 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<style>
+
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/anti-main.css&action=raw&ctype=text/css" type="text/css" >
-
      .pull-right{
+
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/indexpage.css&action=raw&ctype=text/css" type="text/css" >
-
      float: right}
+
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Team:Hong_Kong_HKUST/Achievements_page.css&action=raw&ctype=text/css" type="text/css" >
-
 
+
 
-
  .thumbnail {
+
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
-
    border: 1px solid #ddd;
+
<script src="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/access-menu.js&action=raw&ctype=text/css"></script>
-
    border-radius: 4px;
+
-
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
+
-
    display: block;
+
-
    line-height: 20px;
+
-
    padding: 4px;
+
-
    transition: all 0.2s ease-in-out 0s;
+
-
}
+
-
    img {
+
-
    vertical-align: middle;}
+
-
element.style {
+
                <meta http-equiv="Content-type" content="text/html; charset=utf-8">
-
    text-align: justify;
+
             
-
    width: 450px;
+
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/team_basic.css&action=raw&ctype=text/css" type="text/css" />
-
}
+
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/galleriffic-2.css&action=raw&ctype=text/css" type="text/css" />
-
.pull-left {
+
<script type="text/javascript" src="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/jquery-1.3.2.js&action=raw&ctype=text/css"></script>
-
    float: left;}
+
<script type="text/javascript" src="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/jquery.galleriffic.js&action=raw&ctype=text/css"></script>
 +
<script type="text/javascript" src="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/jquery.opacityrollover.js&action=raw&ctype=text/css"></script>
 +
<!-- We only want the thunbnails to display when javascript is disabled -->
 +
<script type="text/javascript">
 +
document.write('<style>.noscript { display: none; }</style>');
 +
</script>
-
 
-
</style>
 
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/indexpage.css&action=raw&ctype=text/css" type="text/css" >
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/indexpage.css&action=raw&ctype=text/css" type="text/css" >
-
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
 
-
<script>
 
-
$(document).ready(function(){
 
-
  $(window).scroll(function(){
 
-
var scrollTop = $(window).scrollTop();
 
-
if (scrollTop > 49) {
 
-
$('#menu').addClass('fixed');
 
-
} else {
 
-
$('#menu').removeClass('fixed');
 
-
}
 
-
  });
 
-
});
 
-
</script>
 
-
<script>
 
-
var on = true;
 
-
var myVar = setInterval(function(){ if(on) {slides()}on=true;},3000);
 
-
 
-
function slides(i) {
 
-
  document.getElementsByClassName("slide_pic")[1].style.width="0px";
 
-
  document.getElementsByClassName("slide_pic")[2].style.width="100%";
 
-
  var slide = document.getElementsByClassName("slide_pic")[0];
 
-
  document.getElementById("slide").appendChild(slide);
 
-
  if(i) {
 
-
  on = false;
 
-
  }
 
-
}
 
-
function back_slide(i) {
 
-
  document.getElementsByClassName("slide_pic")[1].style.width="0px";
 
-
  document.getElementsByClassName("slide_pic")[0].style.width="100%";
 
-
  var slide = document.getElementsByClassName("slide_pic")[4];
 
-
  var slide2 = document.getElementsByClassName("slide_pic")[0];
 
-
  document.getElementById("slide").insertBefore(slide,slide2);
 
-
  if(i) {
 
-
  on = false;
 
-
  }
 
-
}
 
-
</script>
 
</head>
</head>
 +
 +
<body>
 +
<nav role="navigation">
 +
<ul class="access-menu">
 +
<li><a href="#">Home</a></li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor">Pneumosensor</a>
 +
<ul class="access-submenu">
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/module_one">Sensing</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/module_two">Expressing</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/parts">Parts</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/data">Data</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/characterization">Characterization</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/results">Results</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/future_work">Future Work</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator">Riboregulator</a>
 +
<ul class="access-submenu">
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/CR_TA_Feature_Page">Feature Page</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/RNA_devices_catalog">Catalog Page</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/parts">Parts</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/data">Data</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/characterization">Characterization</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/results">Results</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/future_work">Future Work</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice">Human Practice</a>
 +
<ul class="access-submenu">
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit">Start-up Kit</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit/handbook" >--Handbook</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit/report" >--Report</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit/database" >--Database</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit/interview" >--Interview</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/outreach">Outreach</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/outreach/Workshop" >--Workshop</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/outreach/talks" >--Talk</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/outreach/isf_academy" >--ISF Academy</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/safety_and_ethics">Safety and Ethics</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team">Team</a>
 +
<ul class="access-submenu">
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/members">Members</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/advisors">Advisors</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/instructors">Instructors</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/attribution">Attributions</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/acknowledgement">Acknowledgement</a></li>
 +
<li><a href="https://igem.org/Team.cgi?year=2014">Official Team Profile</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/wetlab">Wetlab</a>
 +
<ul class="access-submenu">
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/wetlab/notebook">Notebook</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/wetlab/protocols">Protocols</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/wetlab/safety">Safety</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/Achievements">Achievements</a>
 +
<ul class="access-submenu">
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/acheivement/medal_requirement">Medal Requirements</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/acheivement/deliverable">Deliverable</a></li>
 +
</ul>
 +
</li>
 +
<li class="access_logo">
 +
<a href="https://2014.igem.org/Main_Page"><img src= "https://static.igem.org/mediawiki/2014/5/55/Hkust_logo.gif"></a>
 +
</li>
 +
<li class="access_logo">
 +
<a href="http://www.ust.hk/"><img src= "https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png"></a>
 +
</li>
 +
-
<body>
 
-
<div id='nav_container'>
 
-
<nav>
 
-
 
-
<ul id="menu">
 
-
<li><a href="#">Home</a></li>
 
-
        <li><a href="#">Team</a>
 
-
        <!-- First Tier Drop Down -->
 
-
        <ul>
 
-
            <li><a href="#">Members</a></li>
 
-
            <li><a href="#">Advisers</a></li>
 
-
            <li><a href="#">Instructor</a></li>
 
-
        </ul>       
 
-
        </li>
 
-
        <li><a href="#">Project</a>
 
-
        <!-- First Tier Drop Down -->
 
-
        <ul>
 
-
            <li><a href="#">Main Project</a>
 
-
<ul>
 
-
                <li><a href="#">Overview</a></li>
 
-
                <li><a href="#">Module one </a></li>
 
-
                <li><a href="#">Module two</a></li>
 
-
<li><a href="#">Data</a></li>
 
-
<li><a href="#">Characterization</a></li>
 
-
            </ul></li>
 
-
            <li><a href="#">Side Project</a>
 
-
<ul>
 
-
                <li><a href="#">Overview</a></li>
 
-
                <li><a href="#">Parts</a></li>
 
-
                <li><a href="#">Catalogue</a></li>
 
-
<li><a href="#">Feature pages</a></li>
 
-
            </ul></li>
 
-
       
 
-
        </ul>
 
-
        </li>
 
-
        <li><a href="#">Human Practice</a>
 
-
<ul>
 
-
                <li><a href="#">Overview</a></li>
 
-
                <li><a href="#">Start up kit</a>
 
-
<ul>
 
-
<li><a href="#">Interview</a></li>
 
-
<li><a href="#">Report</a></li>
 
-
<li><a href="#">Database</a></li>
 
-
</ul></li>
 
-
                <li><a href="#">Talks</a></li>
 
-
<li><a href="#">Outreach</a></li>
 
-
            </ul></li>
 
-
        <li><a href="#">wetlab</a>
 
-
<ul>
 
-
<li><a href="#">Protocol</a></li>
 
-
<li><a href="#">Notebook</a></li>
 
-
<li><a href="#">Safety</a></li>
 
-
</ul></li>
 
-
        <li><a href="#">Achievement</a>
 
-
<ul>
 
-
<li><a href="#">Medal Requirement</a></li>
 
-
<li><a href="#">Deliverable</a></li>
 
-
</ul></li>
 
</ul>
</ul>
-
 
</nav>
</nav>
-
</div>
+
<!-- ================ do not touch any thing above this, dont even think about it =========================-->
-
<h1> </h1>
+
-
 
+
-
 
+
<div id="content_container">
-
<div id="content_container">
+
<div class= "banner_area">
<div class= "banner_area">
-
<img src= 'banner_mod.png' />
+
<img src= 'https://static.igem.org/mediawiki/2014/archive/3/3c/20140930022303!HKUST_2014_pneumosensor_banner.jpg' />
-
 
+
<!--banner should be larger and height should be more than 400px-->
</div>
</div>
-
+
<div id="page">
-
<html>
+
<div id="container">
-
<script type="text/javascript" src="https://2013.igem.org/wiki/index.php?title=Template:Team:Valencia_Biocampus/Templates/js/slimbox2.js&action=raw&ctype=text/javascript"></script>
+
-
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/wiki/index.php?title=Template:Team:Valencia_Biocampus/Templates/css/slimbox2.css&action=raw&ctype=text/css" />
+
<div id="gallery" class="content">
-
<div class="container">
+
 +
<div class="slideshow-container">
 +
<div id="loading" class="loader"></div>
 +
<div id="slideshow" class="slideshow"></div>
 +
</div>
 +
<div id="caption" class="caption-container"></div>
 +
</div>
 +
<div id="thumbs" class="navigation">
 +
<ul class="thumbs noscript">
 +
<li>
 +
<a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
 +
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" >
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Haemin Cho</div>
 +
                              <div class="title" style="margin-top:0px">Team Leader</div>
 +
<div class="image-desc" style="font-size:15px;  margin-top: -10px;">Haemin is a second year student majoring in Biotechnology. She is one of the two leaders of this year's HKUST iGEM Team. In the lab, she works diligently and is very helpful when needed. But most of the times, she looks blank-minded and often makes small careless mistakes. Her trademark quote is "What did I just do? *blank face*" </div>
 +
</div>
 +
</li>
-
    <ul class="nav nav-tabs" id="myTab">
+
<li>
-
        <li class="active"><a href="#Modeling">Modeling overview</a></li>
+
<a class="thumb" name="drop" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">
-
    <li><a href="#BiobricksModeling">Biobricks Modeling</a></li>
+
<img src="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9_s.jpg" alt="Title #1" />
-
    <li><a href="#Single">Single worm behavior</a></li>
+
</a>
-
            <li><a href="#Group">Group behavior</a></li>
+
<div class="caption">
-
            <li><a href="#System">System performance</a></li>
+
                            <div class="image-title">BONGSO, Nadia Benedicta</div>
-
    </ul>
+
"She is one of the rare team member that does not major in Life Science, she is a year 2 student majoring Chemical and Biomolecular Engineering(but still, Bio is involved). She is one of the 3-man Indonesian gang, which contributes to most of the noise in lab. She is indeed very helpful in the lab, such as helping to fill boxes of tips just after a few hours she landed in HK. She also helped much in Human Practice work.
 +
She is quite absent-minded about her iPad, luckily she does not forget her lab work. She LOVES people calling her surname, and she really likes Hong Kong Disneyland."
 +
</div>
 +
</li>
-
    <div class="tab-content">
+
<li>
-
    <div class="tab-pane fade active in" id="Modeling">
+
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
-
</html>
+
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
-
== Modeling ==
+
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Jordy Evan Sulaiman</div>
 +
<div class="image-desc">Jordy is a year two student majoring in chemical and bimolecular engineering. He is hard-working, diligent, and creative. He also likes to eat, play basketball, and play computer games. Above all, he likes Doyle the most. Though Jordy is very funny, sometimes he can be extremely serious when doing something. The scary part of Jordy is that he is good at everything, even arts. Everyone likes Jordy. </div>
 +
</div>
 +
</li>
-
The main goal of our modeling project is to accurately predict the behavior of our system in several issues, from the mounting of bacteria on <i>C. elegans</i> to the performance of our worms reaching the place of interest. In order to do that, we use several modeling techniques.
+
<li>
-
<br/>
+
<a class="thumb" name="lizard" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
-
<br/>The movement of <i>C. elegans</i> in the presence of a chemoattractant in order to carry our bacteria to that source is the main issue of our project, so we consider modeling this aspect and employing it as scaffold for the whole modeling project. Several layers show up that it must be modeled in different ways. In our approach, we mathematically describe each layer, from the simplest to the most complex, integrating each one.
+
<img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" />
-
<br/>
+
</a>
-
<br/>The workflow in the <i>C. elegans</i> movement is the following:
+
<div class="caption">
-
<br/>
+
-
<br/>
+
<div class="image-title">WIDJAJA, Angeline</div>
-
<html>
+
<div class="image-desc">Angeline a.k.a Angie is the angel of iGEM. She is a cheerful lady who likes to work but also have fun at the same time. She loves to play basketball and play games with other people. She is excellent in making friends with other people. There's nothing bad about her except for her spontaneous randomness. But that characteristic of her is what makes iGEM fun in some way or another. Interesting and unique people are the ones who everyone should cherish. </div>
-
<!-- <center>
+
</div>
-
[[File:Primer_paso.jpg|150 px]] &nbsp; [[File:Segundo_paso.jpg|150 px]] &nbsp; [[File:Tercer_paso.jpg|150 px]] &nbsp; [[File:Cuarto_paso.jpg|150 px]] &nbsp; [[File:Quinto_paso.jpg|150 px]]
+
</li>
-
</center>
+
-
-->
+
-
<table class="table-modeling" border="0" style="background-color: #FFFFFF;" width="950">
+
-
    <thead>
+
-
        <tr>
+
-
            <th class="table-blank" colspan="2"> </th>
+
-
    <th>Single Worm Behavior</th>
+
-
            <th>Single Worm Chemotaxis</th>
+
-
            <th>Group Behavior</th>
+
-
            <th>System performance</th>
+
-
</tr>
+
-
    </thead>
+
-
    <tr>
+
-
        <td class="table-secondary" rowspan="2">Considerations</td>
+
-
        <td class="table-column">Chemoattractant</td>
+
-
        <td><img class="table-cross" src="https://static.igem.org/mediawiki/2013/c/c9/CrossIcon.gif" alt="No" height="24" width="24"/></td>
+
-
        <td><img class="table-check" src="https://static.igem.org/mediawiki/2013/0/01/CheckIcon.gif" alt="Yes" height="24" width="24"/></td>
+
-
        <td><img class="table-check" src="https://static.igem.org/mediawiki/2013/0/01/CheckIcon.gif" alt="Yes" height="24" width="24"/></td>
+
-
        <td><img class="table-check" src="https://static.igem.org/mediawiki/2013/0/01/CheckIcon.gif" alt="Yes" height="24" width="24"/></td>
+
-
    </tr>
+
-
    <tr>
+
-
        <td class="table-column">Bacteria</td>
+
-
        <td><img class="table-cross" src="https://static.igem.org/mediawiki/2013/c/c9/CrossIcon.gif" alt="No" height="24" width="24"/></td>
+
-
        <td><img class="table-cross" src="https://static.igem.org/mediawiki/2013/c/c9/CrossIcon.gif" alt="No" height="24" width="24"/></td>
+
-
        <td><img class="table-cross" src="https://static.igem.org/mediawiki/2013/c/c9/CrossIcon.gif" alt="No" height="24" width="24"/></td>
+
-
        <td><img class="table-check" src="https://static.igem.org/mediawiki/2013/0/01/CheckIcon.gif" alt="Yes" height="24" width="24"/></td>
+
-
    </tr>
+
-
    <tr>
+
-
        <td class="table-secondary" colspan="2">Modeling approach</td>
+
-
        <td> Random Walk </td>
+
-
        <td> Biased Random Walk </td>
+
-
        <td> Partial Differential Equations </td>
+
-
        <td> Ordinary Differential Equations </td>
+
-
    </tr>
+
-
</table>
+
-
</html>
+
-
<br/>
+
-
<br/>The model is improved adding the data obtained from the experiments in order to achieve a holistic model which can predict the distribution of our worms, the kinetics of the present bacteria and the concentration of the substrate in each moment.
+
-
<html>
+
<li>
-
</div><div class="tab-pane fade" id="BiobricksModeling">
+
<a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">
-
</html>
+
<img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title" style="margin-left: auto;margin-right: auto;width: 70%;background-color: #b0e0e6>Haemin Cho</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
-
== Biobricks modeling ==
+
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">
 +
<img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #5</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
-
In this section, PHA production is modeled.
+
<li>
-
<br/>
+
<a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">
-
<br/>
+
<img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #6</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
-
== PHA production ==
+
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">
 +
<img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #7</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
-
By extracting data from fermentation assays we obtained a good <i>simple linear regression</i> by means of the <i>least squares</i> method between the dry weight of the microorganismos (<i>Pseudomona Putida</i>) and the PHA weight produced, the relationship we obtained is as follows:<br/>
+
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">
 +
<img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #8</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
-
$$ PHA = 0.2022 \cdot CellDryWeight $$
+
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">
 +
<img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #9</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
-
Where $ PHA $ and $ CellDryWeight $ are in grams ($ g $). The average for the prediction error is $\mu = 0.2008$ and the variance $\sigma^2 = 1.9005$. The coefficient of determination is $R^2 = 0.9374 (93.74\%)$.<br/> The equation with all the data is represented below: <br/><br/>
+
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">
 +
<img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #10</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
-
<html>
+
<li>
-
<div style="display: block; text-align:center;">
+
<a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">
-
    <a href="https://static.igem.org/mediawiki/2013/0/0b/PHA_cellweight.jpg" rel="lightbox-modelpha" title="Simple Linear Regression Model">
+
<img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" />
-
        <img src="https://static.igem.org/mediawiki/2013/0/0b/PHA_cellweight.jpg" width="512" height="384" alt="Simple Linear Regression Model" class="thumbnail" style="display: inline; float: none;"/>
+
</a>
-
    </a>
+
<div class="caption">
-
</div>
+
-
<div clas="clearfix"></div>
+
<div class="image-title">Title #11</div>
-
<br/>
+
<div class="image-desc">Description</div>
-
</html>
+
</div>
-
The red dots near the origin correspond to a batch fermented in a flask, the blue dots correspond to an assay with two fedbatches in a fermenter of 2 liters. The black line is the linear regression line obtained by the least squares' method.
+
</li>
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">
 +
<img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #12</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
-
<html>
+
<li>
-
</div><div class="tab-pane fade" id="Single">
+
<a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">
-
</html>
+
<img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" />
-
 
+
</a>
-
== <i>C. elegans</i> behavior ==
+
<div class="caption">
-
 
+
-
In order to understand the system as a whole, we started with the simplest case, so our first study is based on the behavior of a single worm, initially in the absence of chemoattractant and later adding it. <br/><br/>
+
<div class="image-title">Title #13</div>
-
Our first approach consists in the study of a single worm in a surface without chemoattractant, under this condition it is observed that a <i>C. elegans</i> moves randomly, this is defined as a Random Walk. <br/><br/>
+
<div class="image-desc">Description</div>
-
Random Walk is the mathematical formalization of a trajectory that consists of taking successive random steps. We ran several simulations in <i>Scilab</i> and <i>C++</i>, in order to represent a single <i>C. elegans</i> moving this way in the absence of attractants. <br/><br/>
+
</div>
-
Random walks are used to describe the trajectories of many motile animals and microorganisms. They are useful for both qualitative and quantitative descriptions of the behavior of such creatures. In our case a single <i>C. elegans</i> was simulated as a point: $(x_t, y_t)$
+
</li>
-
<br/>
+
-
At each instant $t$ in the simulation, step length $l_t$ and direction $\theta_t$ the equations are the following: 
+
-
<br/>
+
-
$$l_t = \Delta t\;\nu_t$$
+
-
$$\theta_t = \theta_{t-1} + \Delta t \left(\frac{d\theta_t}{dt} + \delta\right) $$
+
-
Where $\Delta t$ is the duration of the time step, $\nu_t$ is the instantaneous speed, <span style="font-size: 140%;">$\frac{d\theta_t}{dt}$</span> $(= \dot{\theta_t})$ is the instantaneous turning rate (using the convention that <span style="font-size: 140%;">$\frac{d\theta_t}{dt}$</span>$ > 0$ is a right turn and <span style="font-size: 140%;">$\frac{d\theta_t}{dt}$</span>$ < 0$ is a left turn) and $\delta$ is the turning bias.
+
-
The values of these variables were taken randomly from different gaussian distributions, that we identified by sampling but also obtained from some papers:
+
-
<br/>
+
-
<br/>$\nu_t$: normal distribution with $\sigma = 0.0152\;cm/s$ and $\mu = 0.00702\;cm/s$
+
-
<br/>$\dot{\theta_t}$: normal distribution with $\sigma = 0.0150273\;rad/s$ and $\mu = 0.6789331\;rad/s$
+
-
<br/>$\delta$: normal distribution with $\sigma = 0.0076969\;rad/s$ and $\mu = 0.0370010\;rad/s$
+
-
<br/><br/>Simulations were performed in <i>Scilab</i> and <i>C++</i>, proceeding as described in (Pierce-Shimomura <i>et al.</i>, 1999). We contacted the authors but they could not provide us with the code, so we developed our own script based on the article, obtaining similar results:
+
-
<br/>
+
-
<br/>
+
-
<html><div style="text-align:center;position:relative;"><iframe width="560" height="315" src="//www.youtube.com/embed/ctFwcPK6P-8?rel=0&amp;wmode=transparent" frameborder="0" wmode="Opaque" allowfullscreen></iframe><a style="position:absolute;z-index:3;top:65px;right:0;width:160px;padding:10px;" class="alert alert-info" href="https://2013.igem.org/Team:Valencia_Biocampus/Simuelegans"><img src="https://static.igem.org/mediawiki/2013/5/58/Info_icon.png" alt="info" /><br/>You can also simulate <i>C.elegans</i> random walk in our Simuelegans online application </a><br/>Simulated with our own software </html>[[Team:Valencia_Biocampus/Devices#Software|SimuElegans]].<html></div></html>
+
-
<br/>
+
-
<br/>
+
-
Please note that the actual movements of <i>C. elegans</i> are much slower and thus the simulation in this video is accelerated for convenience.
+
-
<br/>
+
-
<br/>
+
-
In these simulations we considered $\Delta t = 1\;s$, but actually we simulated it every $0.01\;s$, so its $\frac{1\;s}{0.01\;s} = 100$ times accelerated.
+
-
<br/>
+
-
<br/>
+
-
 
+
-
== Chemotaxis of a single worm ==
+
-
However, we are interested in the movement of the nematode in a gradient of chemoattractant.
+
-
Studies revealed that the behavior of <i>E. coli</i> during chemotaxis is remarkably similar to the behavior of a single <i>C. elegans</i> in the presence of a chemotactic source (Bargmann, 2006), a mechanism called the <i>pirouette model</i> in <i>C. elegans</i> (Pierce-Shimomura et al., 1999) and the <i>biased random walk</i> in bacteria (Berg, 1993; Berg, 1975). The basis of these models is a strategy that uses a short-term memory of attractant concentration to decide whether to maintain the current direction of movement or to change to a new one. <br/>
+
-
Following this model, we defined the turning rate as a function of <span style="font-size: 140%;">$\frac{\partial [C]}{\partial t}$</span>. Where $[C]$ is the concentration ($[\;]$) of chemoattracant ($C$). Simulations were performed as expected, showing a bias in the random walk:
+
-
<br/>
+
-
<br/>
+
-
<html><div style="text-align: center;position:relative;"><iframe width="560" height="315" src="//www.youtube.com/embed/3_2cZOkgyuY?wmode=transparent" frameborder="0" wmode="Opaque" allowfullscreen></iframe><a style="position:absolute;z-index:3;top:65px;right:0;width:160px;padding:10px;" class="alert alert-info" href="https://2013.igem.org/Team:Valencia_Biocampus/Simuelegans-Chemotaxis"><img src="https://static.igem.org/mediawiki/2013/5/58/Info_icon.png" alt="info" /><br/>You can also simulate <i>C.elegans</i> chemotaxis in our Simuelegans online application </a><br/>
+
-
<br/>Simulated with our own software </html>[[Team:Valencia_Biocampus/Devices#Software|SimuElegans]].<html></div></html>
+
-
<br/>
+
-
 
+
-
== Chemotaxis of a single worm consuming attractant ==
+
-
As a last step of the study of a single worm, we decided to modelize the most realistic behavior. This behavior happens when, in addition to moving randomly but biased toward the gradient of chemoattractant, we consider the fact that it is constantly consuming its “food”, so these gradients will not be any more constants in time.
+
-
<br/>
+
-
<br/>
+
-
In order to implement this model, we realized that was impossible to study still considering the space as an attractant function, cause it changes its shape in every time step, and it made simulations really slow (maybe, days of computation). So, we meshed the space, and gave every point a different weight, depending on time: that was the starting of the matrix and approximated (numerical) calculations. What we obtained was close to have relevant impacts in the course of our project, because we could interfere in the <i>C. elegans</i> path, and not only in its final position, making it moving from one source of chemoattractant to another:
+
-
<br/>
+
-
<br/>
+
-
<html><div style="text-align: center;"><iframe width="560" height="315" src="//www.youtube.com/embed/0b26FkL6lSk?wmode=transparent" frameborder="0" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
+
-
<br/>Simulated using Scilab</div>
+
-
<br/>
+
-
</html>
+
-
Note that this simulation has been speeded 600%.
+
-
<br/>
+
-
<br/>
+
-
Moreover, these numerical methods opened our eyes to study their movement as a whole, with partial differential equations.
+
-
<br/>
+
-
<br/>
+
-
 
+
-
----<br/>
+
-
Bargmann CI (2006) <i>Chemosensation in </i>C. elegans. Wormbook <br/>
+
-
Berg HC (1993) <i>Random walks in biology</i>. Princeton, NJ: Princeton UP.<br/>
+
-
Pierce-Shimomura JT, Morse TM, Lockery SR (1999) <i>The Fundamental Role of Pirouettes in </i>C. elegans<i> Chemotaxis</i>. The journal of Neuroscience, 19(21):9557-9569<br/>
+
-
 
+
-
<html>
+
-
</div><div class="tab-pane fade" id="Group" style="padding-bottom:30px;">
+
-
</html>
+
-
 
+
-
== Group behavior ==
+
-
 
+
-
<html>
+
-
<div style="text-align:center; display: block;">
+
-
<iframe width="480" height="320" src="//www.youtube.com/embed/93LK9EVeT3o?wmode=transparent" frameborder="0" wmode="Opaque" allowfullscreen></iframe>
+
-
<br/>
+
-
<span style="font-size:10px;"><i>One of the 3D simulations performed in SciLab.</i></span>
+
-
</div>
+
-
</html>
+
-
<br/>
+
-
 
+
-
In practice, a single <i>C. elegans</i> is not employed to perform the task but a group of worms. In this case, the random walk equations obtained for a single worm behavior can be transformed into partial differential equations (PDEs), using Taylor series, to depict the distribution of the population, as the ones describing a diffusion process (<html><b><a href="https://2013.igem.org/Team:Valencia_Biocampus/Demonstration/Diffusion3"><img src="https://static.igem.org/mediawiki/2013/7/79/WarningIcon.gif" alt="Note:" height="24" width="24"/> Click here for a mathematical proof of one dimensional diffusion process using PDEs from random walk</a></b></html>)
+
-
 
+
-
<br/>However, in our case we face a diffusion system with drift, in which the last term arises from the biased movement of <i>C. elegans</i>. To obtain a PDE that reflects this behavior, we employed difference equations also using Taylor series and apropiate limits (<html><b><a href="https://2013.igem.org/Team:Valencia_Biocampus/Demonstration/Diffusion1"><img src="https://static.igem.org/mediawiki/2013/7/79/WarningIcon.gif" alt="Note:" height="24" width="24"/> Click here for a mathematical proof of two dimensional biased diffusion process (C. elegans chemotaxis behavior) using PDEs from biased random walk</a></b></html>)
+
-
<br/>The equation is the following:
+
-
$$\frac{\partial [C]}{\partial t} = D\;\nabla^2[C] - \nabla\cdot(\underline{\nu}\;[C]) $$
+
-
<br/>Once obtanied the equation that governs our system, we proceed to study if it works correctly for our purpose. However, analytical solutions for this equation are known for few ideal cases. For example, for a monodimensional bistable potential the stationary state is the following (<i>Okopinska, 2002</i>):
+
-
$$ P_{ss}=\mathscr{N}^{-1} e^{\left(-V(x)/D\right)}$$ where $ \mathscr{N} $ is the normalization constant.
+
-
<br/>
+
-
<br/>
+
-
<html>
+
-
<div style="text-align: center; display: block;">
+
-
<a href="https://static.igem.org/mediawiki/2013/3/36/Empl.jpg" rel="lightbox-groupb" title="Solution">
+
-
<img src="https://static.igem.org/mediawiki/2013/3/36/Empl.jpg" class="thumbnail" width="300" height="187" style="float: none; display: inline" alt="Solution"/>
+
-
</a>
+
-
</div>
+
-
</html>
+
-
<br/>
+
-
<b>As seen, our system, can theoretically work as expected, depending on the shape of the chemoattractant only. This is a great result because it shows our worms are capable of reaching each region.</b>
+
-
<br>
+
-
<br>Our final goal in this section is predicting the temporal and spatial behavior in 2D for non-ideal problems. In this case, using numerical methods is the only way to solve the system.
+
-
<br>
+
-
<br>For the 2-dimensional case, $[C] = [C(x, y, t)]$ is the concentration of <i>C. elegans</i> at a given instant $t$ and at a given point $(x, y)$, $D$ is the diffusion coefficient and $\overrightarrow{\nu}$ is the attraction field for the <i>C. elegans</i>, which basically stands for its velocity. This expression naturally expands to:
+
-
$$\frac{\partial [C]}{\partial t} = D \; \left(\frac{\partial^2 [C]}{\partial x^2} + \frac{\partial^2 [C]}{\partial y^2}\right) - \left(\frac{\partial\nu_x}{dx}[C] + \nu_x\frac{\partial [C]}{\partial x} + \frac{\partial\nu_y}{dy}[C] + \nu_y\frac{\partial [C]}{\partial y}\right) $$
+
-
 
+
-
We first started by building up an <i>explicit finite difference method</i>, this is numerically fast but it is prone to instabilities in the solutions. Therefore, we decided to develop a <i>Crank-Nicolson</i> method which is <i>unconditionally stable</i>, thus being suitable to carry out <i>parameter identification</i> of a model. Nevertheless, it has the drawback of being numerically more intensive, because a set of algebraic equations must be solved in each iteration (<html><b><a href="https://2013.igem.org/Team:Valencia_Biocampus/Demonstration/Diffusion2"><img src="https://static.igem.org/mediawiki/2013/7/79/WarningIcon.gif" alt="Note:" height="24" width="24"/> Click here for a mathematical explanation of the Crank-Nicolson method</a></b></html>).
+
-
 
+
-
<br/>Now, we can predict the behavior of a set of worms in presence of a chemoatractant. One must have into account that the system may behave differently depending on some variables, for example, the diffusion coefficient $D$, a constant $k$ that determines the <i>weight</i> that the drift variable $\nu$ has and the time constants for the chemoattractant diffusion $t_1$ and $t_2$, where $t_1$ is the elapsed time since a first chemoattractant drop is put into the petri plate, $t_2$ stands for the elapsed time since a second drop of chemoattractant is put into the petri plate until a <i>C.elegans</i> initial distribution is added, the diffusion of chemoattractants is then assumed to be negligible for simplicity reasons. According to these parameters, we performed a lot of simulations using <i>SciLab</i>, what they all have in common is the position of the four chemotactic sources. The simulations were performed by first varying only $t_1$ and $t_2$ for some given $D$ and $k$ ($D = 0.2$ &amp; $k = 0.001$):<br/><br/>
+
-
<html>
+
-
 
+
-
<div class="clearfix"></div>
+
-
<div style="display: block; text-align: center;">
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/2/26/T1_5-t2_6.jpg" rel="lightbox-groupbsims1" title="t1 = 5, t2 = 6">
+
-
<img src="https://static.igem.org/mediawiki/2013/2/26/T1_5-t2_6.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="t1 = 5, t2 = 6"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">$t_1$ = 5, $t_2$ = 6</span>
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/0/0a/T1_5-t2_12.jpg" rel="lightbox-groupbsims1" title="t1 = 5, t2 = 12">
+
-
<img src="https://static.igem.org/mediawiki/2013/0/0a/T1_5-t2_12.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="t1 = 5, t2 = 12"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">$t_1$ = 5, $t_2$ = 12</span>
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/8/83/T1_10-t2_12.jpg" rel="lightbox-groupbsims1" title="t1 = 10, t2 = 12">
+
-
<img src="https://static.igem.org/mediawiki/2013/8/83/T1_10-t2_12.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="t1 = 10, t2 = 12"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">$t_1$ = 10, $t_2$ = 12</span>
+
-
</div>
+
-
<br/>
+
-
<div style="text-align: center; display: block;">
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/f/f6/T1_10-t2_24.jpg" rel="lightbox-groupbsims1" title="t1 = 10, t2 = 24">
+
-
<img src="https://static.igem.org/mediawiki/2013/f/f6/T1_10-t2_24.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="t1 = 10, t2 = 24"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">$t_1$ = 10, $t_2$ = 24</span>
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/e/ea/T1_15-t2_24.jpg" rel="lightbox-groupbsims1" title="t1 = 15, t2 = 24">
+
-
<img src="https://static.igem.org/mediawiki/2013/e/ea/T1_15-t2_24.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="t1 = 15, t2 = 24"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">$t_1$ = 15, $t_2$ = 24</span>
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/a/a5/T1_15-t2_48.jpg" rel="lightbox-groupbsims1" title="t1 = 15, t2 = 48">
+
-
<img src="https://static.igem.org/mediawiki/2013/a/a5/T1_15-t2_48.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="t1 = 15, t2 = 48"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">$t_1$ = 15, $t_2$ = 48</span>
+
-
 
+
-
</div>
+
-
<div class="clearfix"></div>
+
-
<br/>
+
-
</html>
+
-
 
+
-
<div class="clearfix"></div>
+
-
<br/>
+
-
It can be observed by ploting the <i>drift field</i> for each case, that the final distribution is mostly dependent on the mentioned <i>drift field</i>, which in fact is mostly dependent on $t_1$ and $t_2$. Here we present the <b>drift fields</b> for each case:<br/><br/>
+
-
<html>
+
-
<div class="accordion" id="Images2-accordion">
+
-
  <div class="accordion-group">
+
-
    <div class="accordion-heading">
+
-
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#Images2-accordion" href="#collapseim2">
+
-
        <i>Click here to open / close the simulations</i>
+
-
      </a>
+
-
    </div>
+
-
    <div id="collapseim2" class="accordion-body collapse">
+
-
      <div class="accordion-inner">
+
-
<div class="clearfix"></div>
+
-
<div style="display: block; text-align: center;">
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/4/4d/T1_5-t2_6v.jpg" rel="lightbox-groupbsims2" title="t1 = 5, t2 = 6">
+
-
<img src="https://static.igem.org/mediawiki/2013/4/4d/T1_5-t2_6v.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="t1 = 5, t2 = 6"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">$t_1$ = 5, $t_2$ = 6</span>
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/6/65/T1_5-t2_12v.jpg" rel="lightbox-groupbsims2" title="t1 = 5, t2 = 12">
+
-
<img src="https://static.igem.org/mediawiki/2013/6/65/T1_5-t2_12v.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="t1 = 5, t2 = 12"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">$t_1$ = 5, $t_2$ = 12</span>
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/d/db/T1_10-t2_12v.jpg" rel="lightbox-groupbsims2" title="t1 = 10, t2 = 12">
+
-
<img src="https://static.igem.org/mediawiki/2013/d/db/T1_10-t2_12v.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="t1 = 10, t2 = 12"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">$t_1$ = 10, $t_2$ = 12</span>
+
-
</div>
+
-
<br/>
+
-
<div style="text-align: center; display: block;">
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/2/29/T1_10-t2_24v.jpg" rel="lightbox-groupbsims2" title="t1 = 10, t2 = 24">
+
-
<img src="https://static.igem.org/mediawiki/2013/2/29/T1_10-t2_24v.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="t1 = 10, t2 = 24"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">$t_1$ = 10, $t_2$ = 24</span>
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/b/b9/T1_15-t2_24v.jpg" rel="lightbox-groupbsims2" title="t1 = 15, t2 = 24">
+
-
<img src="https://static.igem.org/mediawiki/2013/b/b9/T1_15-t2_24v.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="t1 = 15, t2 = 24"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">$t_1$ = 15, $t_2$ = 24</span>
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/3/35/T1_15-t2_48v.jpg" rel="lightbox-groupbsims2" title="t1 = 15, t2 = 48">
+
-
<img src="https://static.igem.org/mediawiki/2013/3/35/T1_15-t2_48v.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="t1 = 15, t2 = 48"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">$t_1$ = 15, $t_2$ = 48</span>
+
-
 
+
-
</div>
+
-
<div class="clearfix"></div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<br/>
+
-
</html>
+
-
 
+
-
<div class="clearfix"></div>
+
-
 
+
-
Qualitatively, it can be seen through these simulations that incrementing $t_1$ <i>or</i> $t_2$ disperses and smoothes the drift field which actually affects the final distribution of <i>C.elegans</i> by dispersing it.<br/><br/>
+
-
 
+
-
Videos corresponding to each simulation can also be seen here:<br/><br/>
+
-
 
+
-
<html>
+
-
<div class="accordion" id="Videos1-accordion">
+
-
  <div class="accordion-group">
+
-
    <div class="accordion-heading">
+
-
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#Videos1-accordion" href="#collapse1">
+
-
        <i>Click here to open / close the simulations</i>
+
-
      </a>
+
-
    </div>
+
-
    <div id="collapse1" class="accordion-body collapse">
+
-
      <div class="accordion-inner">
+
-
<div style="text-align: center; display: block;">
+
-
 
+
-
<iframe width="300" height="168" src="//www.youtube.com/embed/q5Mw16EGiSo?wmode=transparent" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
+
-
 
+
-
<iframe width="300" height="168" src="//www.youtube.com/embed/2Re2WLowjps?wmode=transparent" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
+
-
 
+
-
<iframe width="300" height="168" src="//www.youtube.com/embed/b6FE2VyWx5w?wmode=transparent" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
+
-
 
+
-
</div>
+
-
 
+
-
<div style="text-align: center; display: block;">
+
-
 
+
-
<iframe width="300" height="168" src="//www.youtube.com/embed/7x-aWoxKfOw?wmode=transparent" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
+
-
 
+
-
<iframe width="300" height="168" src="//www.youtube.com/embed/Zb4gmPRlXfA?wmode=transparent" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
+
-
 
+
-
<iframe width="300" height="168" src="//www.youtube.com/embed/HIIH7HvdaZw?wmode=transparent" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
+
-
 
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</html>
+
-
 
+
-
<br/>
+
-
And then by varying only $D$ and $k$ (separately, of course) for some given $t_1$ and $t_2$ ($t_1 = 10$ hours &amp; $t_2 = 12$ hours):<br/><br/>
+
-
 
+
-
<html>
+
-
<div class="accordion" id="Images3-accordion">
+
-
  <div class="accordion-group">
+
-
    <div class="accordion-heading">
+
-
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#Images3-accordion" href="#collapseim3">
+
-
        <i>Click here to open / close the simulations</i>
+
-
      </a>
+
-
    </div>
+
-
    <div id="collapseim3" class="accordion-body collapse">
+
-
      <div class="accordion-inner">
+
-
<br/>
+
-
<div class="clearfix"></div>
+
-
<div style="display: block; text-align: center;">
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/d/d3/T1_10-t2_12D0-05k0-001.jpg" rel="lightbox-groupbsims" title="D = 0.05, k = 0.001">
+
-
<img src="https://static.igem.org/mediawiki/2013/d/d3/T1_10-t2_12D0-05k0-001.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="D = 0.05, k = 0.001"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">D = 0.05, k = 0.001, <b>D/k = 50</b></span>
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/1/14/T1_10-t2_12D0-1k0-001.jpg" rel="lightbox-groupbsims" title="D = 0.1, k = 0.001">
+
-
<img src="https://static.igem.org/mediawiki/2013/1/14/T1_10-t2_12D0-1k0-001.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="D = 0.1, k = 0.001"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">D = 0.1, k = 0.001, <b>D/k = 100</b></span>
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/c/cd/T1_10-t2_12D0-2k0-001.jpg" rel="lightbox-groupbsims" title="D = 0.2, k = 0.001">
+
-
<img src="https://static.igem.org/mediawiki/2013/c/cd/T1_10-t2_12D0-2k0-001.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="D = 0.2, k = 0.001"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">D = 0.2, k = 0.001, <b>D/k = 200</b></span>
+
-
</div>
+
-
<br/>
+
-
<div style="text-align: center; display: block;">
+
-
<a href="https://static.igem.org/mediawiki/2013/4/4d/T1_10-t2_12D0-05k0-0005.jpg" rel="lightbox-groupbsims" title="D = 0.05, k = 0.0005">
+
-
<img src="https://static.igem.org/mediawiki/2013/4/4d/T1_10-t2_12D0-05k0-0005.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="D = 0.05, k = 0.0005"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">D = 0.05, k = 0.0005, <b>D/k = 100</b></span>
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/b/bd/T1_10-t2_12D0-1k0-0005.jpg" rel="lightbox-groupbsims" title="D = 0.1, k = 0.0005">
+
-
<img src="https://static.igem.org/mediawiki/2013/b/bd/T1_10-t2_12D0-1k0-0005.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="D = 0.1, k = 0.0005"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">D = 0.1, k = 0.0005, <b>D/k = 200</b></span>
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/5/50/T1_10-t2_12D0-2k0-0005.jpg" rel="lightbox-groupbsims" title="D = 0.2, k = 0.0005">
+
-
<img src="https://static.igem.org/mediawiki/2013/5/50/T1_10-t2_12D0-2k0-0005.jpg" class="thumbnail" width="150" height="113" style="float: none; display: inline" alt="D = 0.2, k = 0.0005"/>
+
-
</a>
+
-
<span style="font-size:10px; text-align:center; padding: 6px;">D = 0.2, k = 0.0005, <b>D/k = 400</b></span>
+
-
 
+
-
</div>
+
-
<div class="clearfix"></div>
+
-
<br/>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</html>
+
-
 
+
-
 
+
-
According to these results, qualitatively, higher values of $D$ <i>or</i> lower values of $k$ (and thus a greater $D/k$ relation) give a much more disperse distribution of <i>C.elegans</i>.<br/><br/>
+
-
 
+
-
Videos corresponding to each simulation can be seen here:<br/>
+
-
<html>
+
-
<div class="accordion" id="Videos2-accordion">
+
-
  <div class="accordion-group">
+
-
    <div class="accordion-heading">
+
-
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#Videos2-accordion" href="#collapse2">
+
-
        <i>Click here to open / close the simulations</i>
+
-
      </a>
+
-
    </div>
+
-
    <div id="collapse2" class="accordion-body collapse">
+
-
      <div class="accordion-inner">
+
-
<br/>
+
-
<div style="text-align: center; display: block;">
+
-
 
+
-
<iframe width="300" height="168" src="//www.youtube.com/embed/4EkeLWBuReg?wmode=transparent" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
+
-
 
+
-
<iframe width="300" height="168" src="//www.youtube.com/embed/gOSlr_uuk6g?wmode=transparent" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
+
-
 
+
-
<iframe width="300" height="168" src="//www.youtube.com/embed/b6FE2VyWx5w?wmode=transparent" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
+
-
 
+
-
</div>
+
-
<br/>
+
-
<div style="text-align: center; display: block;">
+
-
 
+
-
<iframe width="300" height="168" src="//www.youtube.com/embed/OdvyX5NXfw4?wmode=transparent" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
+
-
 
+
-
<iframe width="300" height="168" src="//www.youtube.com/embed/Gy6tG9IYTQg?wmode=transparent" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
+
-
 
+
-
<iframe width="300" height="168" src="//www.youtube.com/embed/nEiVlqN5qUg?wmode=transparent" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
+
-
 
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</html>
+
-
<br/>
+
-
 
+
-
We also carried out some simulations with different number of attractant sources. One can find simulations with $1$, $2$ and $3$ sources, and parameters $D\;=\;0.2$, $k\;=\;0.001$ (thus $D/k\;=\;200$) here:<br/>
+
-
<html>
+
-
<div class="accordion" id="Videos3-accordion">
+
-
  <div class="accordion-group">
+
-
    <div class="accordion-heading">
+
-
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#Videos3-accordion" href="#collapse3">
+
-
        <i>Click here to open / close the simulations</i>
+
-
      </a>
+
-
    </div>
+
-
    <div id="collapse3" class="accordion-body collapse">
+
-
      <div class="accordion-inner">
+
-
<br/>
+
-
<div style="text-align: center; display: block;">
+
-
 
+
-
<iframe width="300" height="168" src="//www.youtube.com/embed/-YuMvpzCx14" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
+
-
 
+
-
<iframe width="300" height="168" src="//www.youtube.com/embed/8rZEZxwdriQ" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
+
-
 
+
-
<iframe width="300" height="168" src="//www.youtube.com/embed/YK7JeH4Jeyg" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
+
-
 
+
-
</div>
+
-
</div>
+
-
    </div>
+
-
  </div>
+
-
</div>
+
-
</html>
+
-
 
+
-
<div class="clearfix"></div><br/>
+
-
 
+
-
Parameter identification in PDEs is a rather complex topic, we did some research concerning our Group Behavior Model which is a <html><a href="http://en.wikipedia.org/wiki/Fokker%E2%80%93Planck_equation"><i>Fokker-Planck Equation</i></a></html> with a somewhat complex drift term $\nu$, which depends on position in our model (it could also depend on more factors which would add even more complexity to the system and therefore we didn't study them). We weren't lucky enough to find anything related to the topic (at least with the time we had), so we thought about implementing our own algorithms, based on an <i>educated guess</i> (As usual all the code we wrote can be found under the <html><a href="https://2013.igem.org/Team:Valencia_Biocampus/Devices#Software">Software section</a></html>). We wanted to study the <i>spatial time constant</i> of the system, that is, <b>how long does it take for the system to reach an stable spatial distribution?</b> We thought about a obtaining a variable <span style="font-size:14px;">$\mathcal{V}$</span> that would grow asimptotically after some time <span style="font-size:14px;">$\tau_{xy}$</span> (the spatial time constant). That is, our variable $\mathcal{V} \rightarrow C$ as $\tau_{xy} \rightarrow +\infty$. We then came up with the idea that local maxima would be a good way to define when the spatial distribution was stable, so we decided that the slower local maximum (that is the local maximum which is the slowest in stabilizing to its final position) would be a good approach to define the spatial time constant $\tau_{xy}$.
+
-
<br/>
+
-
Therefore we needed an algorithm to calculate all the local maxima at a given instant and also to determine when they have "stopped" moving, so we programmed an approximate algorithm to find the local maxima in <i>SciLab</i> and used a more or less small band centered around the final value to determine $\tau_{xy}$. An example of the graphs we obtained through this process can be seen here:
+
-
<br/>
+
-
<br/>
+
-
<html>
+
-
<div style="text-align:center; display: block;">
+
-
<a href="https://static.igem.org/mediawiki/2013/d/d4/TauD1k001ident.png" rel="lightbox-group132" title="Identifying tau_xy">
+
-
<img src="https://static.igem.org/mediawiki/2013/d/d4/TauD1k001ident.png" class="thumbnail" width="300" height="226" style="float: none; display: inline" alt="tau_xy identification"/>
+
-
</a>
+
-
</div>
+
-
<div class="clearfix"></div>
+
-
</html>
+
-
<br/>
+
-
 
+
-
So we carried out several simulations with different values for our parameters $D$ and $k$, in order to obtain the forementioned relationship between $D$, $k$ and $\tau_{xy}$.
+
-
<br/>
+
-
<br/>
+
-
First of all, we managed to plot and obtain the function that relates $D$ with $\tau_{xy}$, for $k=0.00025,\;0.0003,\;0.000375,\;0.0005$ and $0.001$. And as one can observe, different values of $k$ just move the curves but the main shape of the functionals remains the same, that is, exponential (with rather great coefficients of determination).
+
-
<br/>
+
-
<br/>
+
-
<html>
+
-
<div style="text-align: center; display: block;">
+
-
<a href="https://static.igem.org/mediawiki/2013/1/12/Tau_vs_D.png" rel="lightbox-groupb" title="tau_vs_D">
+
-
<img src="https://static.igem.org/mediawiki/2013/1/12/Tau_vs_D.png" class="thumbnail" width="550" height="280" style="float: none; display: inline" alt="Solution"/>
+
-
</a>
+
-
</div>
+
-
</html>
+
-
<br/>
+
-
From the results we hypothesized that the general form of the functional (depending on $k$) was as follows:
+
-
<br/>
+
-
<br/>
+
-
$$D(\tau_{xy},k) = f(k)e^{\left(g(k)\tau_{xy}\right)}$$
+
-
<br/>
+
-
We then plotted the coefficients $f(k)$ and $g(k)$ vs. $k$, as shown here:
+
-
<br/>
+
-
 
+
-
<html>
+
-
<div style="text-align: center;">
+
-
<a href="https://static.igem.org/mediawiki/2013/d/d9/F%28k%29.png" rel="lightbox-groupb" title="tau_vs_D">
+
-
<img src="https://static.igem.org/mediawiki/2013/d/d9/F%28k%29.png" class="thumbnail" width="550" height="280" style="float: none; display: inline" alt="Solution"/>
+
-
</a>
+
-
</div>
+
-
<br/>
+
-
<div style="text-align: center;">
+
-
<a href="https://static.igem.org/mediawiki/2013/e/ee/G%28k%29.png" rel="lightbox-groupb" title="tau_vs_D">
+
-
<img src="https://static.igem.org/mediawiki/2013/e/ee/G%28k%29.png" class="thumbnail" width="550" height="280" style="float: none; display: inline" alt="Solution"/>
+
-
</a>
+
-
</div>
+
-
</html>
+
-
<br/>
+
-
 
+
-
We first obtained a quadratic regression and the resulting equations for $f(k)$ and $g(k)$ were:
+
-
$$f(k) = 3e6\;k^2 - 4658.1\;k+1.9523$$
+
-
$$g(k) = 6177.4\;k^2 - 11.907\;k-0.0013$$
+
-
But $R^2$ was about $80.17\%$ for $f(k)$, way too low, so then we decided to obtain a better model by using Lagrange's Interpolating Polynomials, which are represented by the green curves on the graphs above. Thus we obtained the following final equation for $D$:
+
-
<br/>
+
-
<span style="font-size:11px;">$$D(\tau_{xy},k) = \left(-3.4061e13\;k^4+4.22776e10\;k^3+3.2955e6\;k^2-15277\;k+4.19004 \right)\;e^{\left(2.31802e11\;k^4-4.23644e8\;k^3+241467\;k^2-57.5001\;k+0.0008832 \right)\;\tau_{xy}}$$</span>
+
-
From this the equation for $\tau_{xy}$ can be obtained:
+
-
<br/>
+
-
<span style="font-size:11px;">$$\tau_{xy}(D,k) = \frac{1}{0.0008832 - 57.5001\; k + 241467\; k^2 - 4.23644e8\; k^3+2.31802e11\; k^4} log\left(\frac{D}{4.19004 - 15277\; k + 3.2955e6\; k^2 + 4.22776e10\; k^3 - 3.4061e13\; k^4}\right)$$</span>
+
-
<br/>
+
-
Where $D$ and $k$ are the mentioned parameters of the model and $\log$ refers to the natural logarithm (base $e$).
+
-
<br/>
+
-
<br/>
+
-
The average of the relative error is somewhat lower (at least in the studied region), about $8.00677\%$, compared to about $9.4\%$ for the first approximation.
+
-
<br/>
+
-
<br/>
+
-
From this equations we tried to obtain the parameters $D$ and $k$ for our model by stablishing a relationship that would not lead to dirac deltas in the final solution, which is what usually happened and is the theoretical solution provided the initial distribution of worms is also a dirac delta. Therefore we obtained the relationship $\frac{D}{k} = 502.2$ that would lead to a temporal stabilisation of the distribution, meaning no dirac deltas would arise. The intention was to provide our wetlab mates with theoretical data to improve their experiments and therefore creating a feedback loop in which they could provide data to us to improve our model even more and they would receive result back and so on. But, in fact, with the obtained relationship and our data we weren't able to find correct values for $D$ and $k$. We think this maybe due to the restricted region for $\tau_{xy}$, $D$ and $k$ that we studied. We also think that through the same process we would be able to achieve correct relationships for the variables in other regions of interests the problem is with increasingly small $D$ and $k$ parameters, come increasingly large times for the simulations to run and we weren't able to do so in our personal computers. This would therefore be a future task, to carry out more simulations maybe on a computer cluster with parallelization. We think that then the principles we followed would still hold.
+
-
<br/>
+
-
<br/>
+
-
 
+
-
-----
+
-
Okopinska A. (2002) <i>Fokker-Planck equation for bistable potential in the optimized expansion</i>. Physical review E, Volume 65, 062101 <br/>
+
-
 
+
-
<html>
+
-
</div><div class="tab-pane fade" id="System">
+
-
</html>
+
-
 
+
-
== System performance ==
+
-
 
+
-
All this modeling part was made to track a set of worms in a given soil. This can be used to compare our system, a non-stirred solid bioreactor, with a conventional stirred liquid bioreactor. Simple ODEs for bacterial growth and substrate consumpton are used in a cualitative fashion to determinate the industrial applications.
+
-
<br/>
+
-
<br/>Modelling this part is difficult because there are a lot of factors involved. Therefore, asumptions must be made. Our first approach is the study of the stationary state in both systems: In a stirred bioreactor, the concentration of both bacteria and substrate are constant whereas in a non-stirred one exists a determinated distribution. For the concentration distribution in the non-stirred bioreactor is gaussian and the bacteria distribution (consecuence of the attraction of C. elegans for the substrate) is given by the stationary state distribution for an one-dimensional case.
+
-
<br/>
+
-
<br/> The pictures are graphical examples of both situations: Stirred case (left) and non-stirred (rigth). Substrate is shown in purple, bacteria in blue, and the relation between them in grey. The total concentration is the area below the curve. Values are arbitrary.
+
-
<br/>
+
-
<br/>
+
-
<html>
+
-
<div style="text-align: center; display: block;">
+
-
<a href="https://static.igem.org/mediawiki/2013/b/b0/IGEM2.jpg" rel="lightbox-systemperf" title="System performance">
+
-
<img src="https://static.igem.org/mediawiki/2013/b/b0/IGEM2.jpg" class="thumbnail" widht="300" height="203" style="float: none; display: inline" alt="System Performance 1"/>
+
-
</a>
+
-
 
+
-
<a href="https://static.igem.org/mediawiki/2013/7/7e/IGEM1.jpg" rel="lightbox-systemperf" title="System performance">
+
-
<img src="https://static.igem.org/mediawiki/2013/7/7e/IGEM1.jpg" class="thumbnail" widht="300" height="203" style="float: none; display: inline" alt="System Performance 1"/>
+
-
</a>
+
-
</div>
+
-
<div class="clearfix"></div>
+
-
</html>
+
-
<br/>
+
-
<br/>As can be seen, a higher bacteria/concentration ratio is achieved in our system than the conventional one. Anyone can appreaciate that the ratio tends to one, being lower than the conventional case ratio, but in that region the substrate concentration is nearly zero. So it is not interesting to study.
+
-
<br/><br/>But one question arises: Is this significant? In fact, it is not. In both cases, the average ratio in the non-stirred case is the same as the stirred one. But it is not a drawback. <b>It means that our system can perform the same as a conventional bioreactor but with the advantages of a higher concentration. Therefore, the production yield in higher.</b>
+
-
<br/><br/>In general, our system behaves as well as a conventional one for the stationary, linear, ideal case. Particular cases are not studied because they have to be analyzed independently. A complex model can be developed for each case to study its viability for its practical use, but it needs more time. Because of that, we made a cualitative study for the system. While time is a problem (stirring is faster than nematode crawling), higher yields and better suitability for several problems are important advantages of our system. Also, the combination of our model and the tracking device helps to determinate the final result.
+
-
 
+
-
<html>
+
-
</div>
+
-
<script type="text/javascript">
+
-
$(document).ready(function() {
+
-
  // cache the id
+
-
  var navbox = $('#myTab');
+
-
  // activate tab on click
+
-
  navbox.on('click', 'a', function (e) {
+
-
      // add a hash to the URL when the user clicks on a tab
+
-
      history.pushState(null, null, $(this).attr('href'));
+
-
      var $this = $(this);
+
-
      // prevent the Default behavior
+
-
      e.preventDefault();
+
-
      // set the hash to the address bar
+
-
      window.location.hash = $this.attr('href');
+
-
      // activate the clicked tab
+
-
      $this.tab('show');
+
-
      //return false;
+
-
  })
+
-
 
+
-
  // if we have a hash in the address bar
+
-
  if(window.location.hash){
+
-
    // show right tab on load (read hash from address bar)
+
-
    $('a[href="'+window.location.hash+'"]').tab('show');
+
-
  }
+
-
 
+
-
  // navigate to a tab when the history changes
+
-
  window.addEventListener("popstate", function(e) {
+
-
    var activeTab = $('[href=' + location.hash + ']');
+
-
    if (activeTab.length) {
+
-
        activeTab.tab('show');
+
-
    } else {
+
-
        $('.nav-tabs a:first').tab('show');
+
-
    }
+
-
  });
+
-
});
+
-
</script>
+
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">
 +
<img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #14</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
<li>
 +
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
 +
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #2</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
<li>
 +
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
 +
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #2</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
<li>
 +
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
 +
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #2</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
                        <li>
 +
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
 +
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #2</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
                        <li>
 +
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
 +
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #2</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
                       
 +
                        <li>
 +
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
 +
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #2</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
                       
 +
</ul>
 +
</div>
 +
<div style="clear: both;"></div>
 +
</div>
 +
</div>
 +
<div id="footer">&copy; 2009 Trent Foley</div>
 +
<script type="text/javascript">
 +
jQuery(document).ready(function($) {
 +
// We only want these styles applied when javascript is enabled
 +
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
 +
$('div.content').css('display', 'block');
 +
// Initially set opacity on thumbs and add
 +
// additional styling for hover effect on thumbs
 +
var onMouseOutOpacity = 0.67;
 +
$('#thumbs ul.thumbs li').opacityrollover({
 +
mouseOutOpacity:  onMouseOutOpacity,
 +
mouseOverOpacity:  1.0,
 +
fadeSpeed:        'fast',
 +
exemptionSelector: '.selected'
 +
});
 +
 +
// Initialize Advanced Galleriffic Gallery
 +
var gallery = $('#thumbs').galleriffic({
 +
delay:                    2500,
 +
numThumbs:                21,
 +
preloadAhead:              10,
 +
enableTopPager:            true,
 +
enableBottomPager:        true,
 +
maxPagesToShow:            7,
 +
imageContainerSel:        '#slideshow',
 +
controlsContainerSel:      '#controls',
 +
captionContainerSel:      '#caption',
 +
loadingContainerSel:      '#loading',
 +
renderSSControls:          true,
 +
renderNavControls:        true,
 +
playLinkText:              'Play Slideshow',
 +
pauseLinkText:            'Pause Slideshow',
 +
prevLinkText:              '&lsaquo; Previous Photo',
 +
nextLinkText:              'Next Photo &rsaquo;',
 +
nextPageLinkText:          'Next &rsaquo;',
 +
prevPageLinkText:          '&lsaquo; Prev',
 +
enableHistory:            false,
 +
autoStart:                false,
 +
syncTransitions:          true,
 +
defaultTransitionDuration: 900,
 +
onSlideChange:            function(prevIndex, nextIndex) {
 +
// 'this' refers to the gallery, which is an extension of $('#thumbs')
 +
this.find('ul.thumbs').children()
 +
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
 +
.eq(nextIndex).fadeTo('fast', 1.0);
 +
},
 +
onPageTransitionOut:      function(callback) {
 +
this.fadeTo('fast', 0.0, callback);
 +
},
 +
onPageTransitionIn:        function() {
 +
this.fadeTo('fast', 1.0);
 +
}
 +
});
 +
});
 +
</script>
 +
</body>
</html>
</html>

Latest revision as of 18:03, 30 September 2014