Team:ETH Zurich/project/overview/grid

From 2014.igem.org

(Difference between revisions)
(Created page with "<html> <script src="http://www.dyn-web.com/lib/js/page_v5.js" type="text/javascript"></script> <link rel="stylesheet" href="http://www.dyn-web.com/css/tip_demos.css" type="text/...")
(→Emergence of the pattern)
 
(142 intermediate revisions not shown)
Line 1: Line 1:
 +
== Emergence of the pattern ==
<html>
<html>
 +
<center>
 +
<div id='cont' style="text-align:justify; width:950px;">
 +
Every cell of the cellular automaton on the grid below computes an XOR of the two signals coming from above in the figure below. XOR means that if only one of the two signals (red or blue) is received, the cell receiving should turn ON (and show green fluorescence), whereas if none or both of the signals are received, the cell should stay OFF (do nothing).
 +
<br/>
 +
<br/>
 +
<center>
 +
<img src='https://static.igem.org/mediawiki/2014/6/6b/ETHZ_XOR-00.png' width='150px' style='padding:0 1em;'/>
 +
<img src='https://static.igem.org/mediawiki/2014/c/c2/ETHZ_XOR-01.png' width='150px' style='padding:0 1em;'/>
 +
<img src='https://static.igem.org/mediawiki/2014/e/e6/ETHZ_XOR-10.png' width='150px' style='padding:0 1em;'/>
 +
<img src='https://static.igem.org/mediawiki/2014/5/5c/ETHZ_XOR-11.png' width='150px' style='padding:0 1em;'/>
 +
</center>
 +
<br/>
 +
</div>
 +
 +
<div id='cont' style="background-image: url('https://static.igem.org/mediawiki/2014/d/d8/ETH_Zurich_background.png'); width:950px;">
 +
<br/>
 +
<br/>
 +
 +
<h3 style='font-size:14; color:#FFFFFF; padding:0 10%; text-align:center;'>
 +
Pass the mouse on the different colonies to understand how they process the signals coming from the top and make the pattern appear.
 +
<br/>
 +
<br/>
 +
Input<br/>
 +
3OC12HSL added to the first well
 +
</h3>
 +
<center>
 +
<img src='https://static.igem.org/mediawiki/2014/1/19/ETH_Zurich_Arrow.png' height='50px'/>
 +
</center>
 +
<IMG SRC="https://static.igem.org/mediawiki/2014/9/9a/ETH_Zurich_GridGlowing.gif" usemap="#map" id="mapTest">
 +
<map id="map" name="map"><area shape="circle" alt="" title="" coords="281,27,15" href="javascript:void" id="redonlas" name="redonlas" target="" /><area shape="circle" alt="" title="" coords="307,81,15" href="javascript:void" id="blueonlas" name="blueonlas" target="" /><area shape="circle" alt="" title="" coords="251,84,15" href="javascript:void" id="redonlas" name="redonlas" target="" /><area shape="circle" alt="" title="" coords="225,141,15" href="javascript:void" id="blueonlas" name="blueonlas" target="" /><area shape="circle" alt="" title="" coords="251,197,15" href="javascript:void" id="redonlux" name="redonlux" target="" /><area shape="circle" alt="" title="" coords="337,141,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="169,254,15" href="javascript:void" id="redonlux" name="redonlux" target="" /><area shape="circle" alt="" title="" coords="309,197,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="364,312,15" href="javascript:void" id="redonlas" name="redonlas" target="" /><area shape="circle" alt="" title="" coords="420,311,15" href="javascript:void" id="blueonlas" name="blueonlas" target="" /><area shape="circle" alt="" title="" coords="393,254,15" href="javascript:void" id="redonlas" name="redonlas" target="" /><area shape="circle" alt="" title="" coords="197,199,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="141,311,15" href="javascript:void" id="redonlas" name="redonlas" target="" /><area shape="circle" alt="" title="" coords="196,311,15" href="javascript:void" id="blueonlas" name="blueonlas" target="" /><area shape="circle" alt="" title="" coords="140,427,15" href="javascript:void" id="redonlux" name="redonlux" target="" /><area shape="circle" alt="" title="" coords="225,370,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="252,427,15" href="javascript:void" id="redonlux" name="redonlux" target="" /><area shape="circle" alt="" title="" coords="196,426,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="55,483,15" href="javascript:void" id="redonlux" name="redonlux" target="" /><area shape="circle" alt="" title="" coords="26,540,15" href="javascript:void" id="redonlas" name="redonlas" target="" /><area shape="circle" alt="" title="" coords="82,541,15" href="javascript:void" id="blueonlas" name="blueonlas" target="" /><area shape="circle" alt="" title="" coords="365,427,15" href="javascript:void" id="redonlux" name="redonlux" target="" /><area shape="circle" alt="" title="" coords="421,425,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="476,426,15" href="javascript:void" id="redonlux" name="redonlux" target="" /><area shape="circle" alt="" title="" coords="532,538,15" href="javascript:void" id="blueonlas" name="blueonlas" target="" /><area shape="circle" alt="" title="" coords="476,541,15" href="javascript:void" id="redonlas" name="redonlas" target="" /><area shape="circle" alt="" title="" coords="337,370,15" href="javascript:void" id="blueonlas" name="blueonlas" target="" /><area shape="circle" alt="" title="" coords="505,484,15" href="javascript:void" id="redonlas" name="redonlas" target="" /><area shape="circle" alt="" title="" coords="82,427,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="364,199,15" href="javascript:void" id="redonlux" name="redonlux" target="" /><area shape="circle" alt="" title="" coords="112,370,15" href="javascript:void" id="blueonlas" name="blueonlas" target="" /><area shape="circle" alt="" title="" coords="309,426,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="449,370,15" href="javascript:void" id="blueonlux" name="blueonlux" target="" /><area shape="circle" alt="" title="" coords="57,26,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="112,26,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="169,26,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="225,26,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="337,26,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="394,26,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="450,26,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="505,26,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="26,83,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="82,83,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="140,83,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="196,83,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="365,83,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="420,83,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="476,83,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="532,83,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="57,141,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="112,141,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="169,141,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="394,141,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="450,141,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="505,141,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="26,198,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="82,198,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="140,198,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="421,198,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="476,198,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="534,198,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="282,142,17" href="javascript:void" id="red2" name="red2" target="" /><area shape="circle" alt="" title="" coords="57,255,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="112,255,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="226,255,17" href="javascript:void" id="blue2" name="blue2" target="" /><area shape="circle" alt="" title="" coords="282,256,17" href="javascript:void" id="red2" name="red2" target="" /><area shape="circle" alt="" title="" coords="338,255,17" href="javascript:void" id="blue2" name="blue2" target="" /><area shape="circle" alt="" title="" coords="450,255,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="506,255,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="26,311,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="82,311,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="253,311,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="308,311,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="476,311,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="532,311,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="57,369,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="169,369,17" href="javascript:void" id="red2" name="red2" target="" /><area shape="circle" alt="" title="" coords="282,369,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="394,369,17" href="javascript:void" id="red2" name="red2" target="" /><area shape="circle" alt="" title="" coords="506,369,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="26,426,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="532,426,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="112,484,17" href="javascript:void" id="blue2" name="blue2" target="" /><area shape="circle" alt="" title="" coords="169,484,17" href="javascript:void" id="red2" name="red2" target="" /><area shape="circle" alt="" title="" coords="225,484,17" href="javascript:void" id="blue2" name="blue2" target="" /><area shape="circle" alt="" title="" coords="337,484,17" href="javascript:void" id="blue2" name="blue2" target="" /><area shape="circle" alt="" title="" coords="394,484,17" href="javascript:void" id="red2" name="red2" target="" /><area shape="circle" alt="" title="" coords="450,484,17" href="javascript:void" id="blue2" name="blue2" target="" /><area shape="circle" alt="" title="" coords="282,484,17" href="javascript:void" id="red2" name="red2" target="" /><area shape="circle" alt="" title="" coords="140,541,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="196,541,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="253,541,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="308,541,17" href="javascript:void" id="blue0" name="blue0" target="" /><area shape="circle" alt="" title="" coords="365,541,17" href="javascript:void" id="red0" name="red0" target="" /><area shape="circle" alt="" title="" coords="420,540,17" href="javascript:void" id="blue0" name="blue0" target="" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
 +
<br/>
 +
<br/>
 +
</div>
-
<script src="http://www.dyn-web.com/lib/js/page_v5.js" type="text/javascript"></script>
 
-
<link rel="stylesheet" href="http://www.dyn-web.com/css/tip_demos.css" type="text/css" />
 
-
<script src="http://www.dyn-web.com/js/dw_tooltip_c.js" type="text/javascript"></script>
 
<script type="text/javascript">
<script type="text/javascript">
-
// for iOS
+
(function($) {
-
DYN_WEB.Event.domReady( function(){ dw_Util.makeClickable('span.showTip'); } );
+
function img(url) {
 +
var i = new Image;
 +
i.src = url;
 +
return i;
 +
}
 +
 +
if ('naturalWidth' in (new Image)) {
 +
$.fn.naturalWidth = function() { return this[0].naturalWidth; };
 +
$.fn.naturalHeight = function() { return this[0].naturalHeight; };
 +
return;
 +
}
 +
$.fn.naturalWidth = function() { return img(this[0].src).width; };
 +
$.fn.naturalHeight = function() { return img(this[0].src).height; };
 +
})(jQuery);
-
dw_Tooltip.defaultProps = {
+
 
-
    supportTouch: true,
+
 
-
    klass: 'tooltip',
+
function onWindowResize()
-
    showCloseBox: true,
+
{
-
    closeBoxImage: '/images/btns/close.gif'
+
  var curWidth = $(window).width(),
 +
  curHeight = $(window).height(),
 +
  checking=false;
 +
  if (checking) {
 +
      return;
 +
  }
 +
  checking = true;
 +
  window.setTimeout(
 +
    function() {
 +
        var newWidth = $(window).width(),
 +
            newHeight = $(window).height();
 +
        if (!(newWidth !== curWidth ||
 +
            newHeight !== curHeight)) {
 +
            resize(false);
 +
        }
 +
        checking=false;
 +
    }, 300);
}
}
-
// different class for touch devices
+
function resize(initial) {
-
if ( dw_Util.isTouchDevice() ) {
+
if (!initial)
-
    dw_Tooltip.defaultProps['klass'] = 'tipWithX';
+
{
 +
    var container =  $('#cont');
 +
    var imgWidth = 0.8*container.width();
 +
 
 +
  $( "#mapTest").each(function() {
 +
      $(this).css('height', 'auto', 'width', 'auto');
 +
      $(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0); 
 +
  });
}
}
 +
}
-
dw_Tooltip.content_vars = {
 
-
    img: {
 
-
        img: '/images/common/mtnlake.jpg',
 
-
        w: 432,
 
-
        h: 346,
 
-
        wrapFn: dw_Tooltip.wrapImageToWidth
 
-
    },
 
-
   
 
-
    img_w: {
 
-
        img: '/images/common/falls.jpg',
 
-
        w: 321,
 
-
        h: 480,
 
-
        wrapFn: dw_Tooltip.wrapImageToWidth
 
-
    },
 
-
   
 
-
    img_txt1: {
 
-
        img: '/images/common/cranes.gif',
 
-
        txt: 'Cranes mandala',
 
-
        w: 160,
 
-
        wrapFn: dw_Tooltip.wrapImageOverText
 
-
    },
 
-
     img_txt2: {
+
$(document).ready(function(){
-
        img: '/images/common/mandala2.gif',
+
  $('#mapTest').mapster({
-
         txt: 'Yin-Yang mandala',
+
     fillOpacity: 0,
-
        w: 160,
+
    fillColor: 'FFFFFF',
-
        wrapFn: dw_Tooltip.wrapTextOverImage
+
    isSelectable: false,
-
    },
+
    showToolTip: true,
 +
    mapKey: 'name',
 +
toolTipContainer: '<div style="fillOpacity:1; border: 2px solid black; background: #EEEEEE; width:200px; padding:4px; margin: 4px; -moz-box-shadow: 3px 3px 5px #535353; ' +
 +
         '-webkit-box-shadow: 3px 3px 5px #535353; box-shadow: 3px 3px 5px #535353; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px; ' +
 +
        'border-radius: 6px 6px 6px 6px; opacity: 1;"></div>',
 +
    areas: [
 +
            {
 +
                key: "red0",
 +
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/8/8b/ETH_Zurich_Red0.png"/> ').contents()
 +
            },
-
    img_txt3: {
+
            {
-
        img: '/images/common/heron.gif',  
+
                key: "blue0",
-
        txt: 'Heron image created from a character font.',
+
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/0/06/ETH_Zurich_Blue0.png" />').contents()
-
        w: 210,
+
            },
-
        wrapFn: dw_Tooltip.wrapTextByImage
+
-
    },
+
-
    img_cap: {
+
            {
-
        caption: 'A Heron',
+
                key: "red2",
-
        img: '/images/common/heron.gif',
+
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/d/d7/ETH_Zurich_Red2.png" />').contents()
-
        txt: 'Heron image created from a character font.',
+
            },
-
        w: 210,
+
-
        wrapFn: dw_Tooltip.wrapTextByImage
+
-
    },
+
-
    img_stk: {
+
            {
-
        sticky: true,
+
                key: "blue2",
-
        klass: 'tipWithX',
+
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/f/f6/ETH_Zurich_Blue2.png" />').contents()
-
        caption: 'Image in a &quot;Sticky Tooltip&quot;',
+
            },
-
        img: '/images/common/mtnlake3.jpg',
+
-
        txt: 'Demonstrating with a sticky tooltip positioned in the center of the window.',
+
-
        w: 440,  
+
-
        wrapFn: dw_Tooltip.wrapImageOverText,
+
-
        positionFn: dw_Tooltip.positionWindowCenter
+
-
    }
+
-
}
+
            {
 +
                key: "redon",
 +
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/c/c5/ETH_Zurich_Redon.png" />').contents()
 +
            },
 +
 
 +
            {
 +
                key: "redonlux",
 +
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/7/7c/ETH_Zurich_Redonlux.png" />').contents()
 +
            },
 +
 
 +
            {
 +
                key: "redonlas",
 +
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/e/e5/ETH_Zurich_Redonlas.png" />').contents()
 +
            },
 +
 
 +
            {
 +
                key: "blueonlux",
 +
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/7/72/ETH_Zurich_Blueonlux.png" />').contents()
 +
            },
 +
 
 +
            {
 +
                key: "blueonlas",
 +
                toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/f/f3/ETH_Zurich_Blueonlas.png" />').contents()
 +
            }
 +
 
 +
            ]
 +
  });
 +
$(window).resize(
 +
  function() { onWindowResize(); });
 +
resize(true);
 +
});
</script>
</script>
-
<ul>
 
-
    <li>Tooltip with <span class="showTip img_w">image</span></li>
 
-
    <li>Tooltip with <span class="showTip img_txt1">image over text</span>, another with <span class="showTip img_txt2">text over image</span></li>
 
-
    <li>Tooltip with image and <span class="showTip img_txt3">text side by side</span>, another including a <span class="showTip img_cap">caption</span></li>
 
-
    <li>Large <span class="showTip img_stk">sticky</span> tooltip with image, caption and text description</li>
 
-
</ul>
 
-
<IMG SRC="https://static.igem.org/mediawiki/2014/d/d9/ETH_Zurich_GridGlowing.png" USEMAP="#map">
 
-
<map id="map" name="map"><area shape="circle" alt="" coords="281,26,17" href="" target=""id="age" class="showTip img_w" /></map>
 
-
<span class="showTip img_w"> fghjil </span>
 
</html>
</html>

Latest revision as of 02:00, 18 October 2014

Emergence of the pattern

Every cell of the cellular automaton on the grid below computes an XOR of the two signals coming from above in the figure below. XOR means that if only one of the two signals (red or blue) is received, the cell receiving should turn ON (and show green fluorescence), whereas if none or both of the signals are received, the cell should stay OFF (do nothing).




Pass the mouse on the different colonies to understand how they process the signals coming from the top and make the pattern appear.

Input
3OC12HSL added to the first well



Retrieved from "http://2014.igem.org/Team:ETH_Zurich/project/overview/grid"