Team:ETH Zurich/project/overview/grid
From 2014.igem.org
(Difference between revisions)
(→Emergence of the pattern) |
|||
(122 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | + | == Emergence of the pattern == | |
- | + | ||
<html> | <html> | ||
- | |||
<center> | <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 type="text/javascript"> | <script type="text/javascript"> | ||
Line 52: | Line 78: | ||
if (!initial) | if (!initial) | ||
{ | { | ||
- | var container = $('# | + | var container = $('#cont'); |
- | var imgWidth = container.width(); | + | var imgWidth = 0.8*container.width(); |
$( "#mapTest").each(function() { | $( "#mapTest").each(function() { | ||
Line 66: | Line 92: | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
$('#mapTest').mapster({ | $('#mapTest').mapster({ | ||
- | fillOpacity: 0 | + | fillOpacity: 0, |
+ | fillColor: 'FFFFFF', | ||
isSelectable: false, | isSelectable: false, | ||
showToolTip: true, | showToolTip: true, | ||
mapKey: 'name', | 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: [ | areas: [ | ||
{ | { | ||
key: "red0", | key: "red0", | ||
- | + | toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/8/8b/ETH_Zurich_Red0.png"/> ').contents() | |
- | toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/d/ | + | }, |
+ | |||
+ | { | ||
+ | key: "blue0", | ||
+ | toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/0/06/ETH_Zurich_Blue0.png" />').contents() | ||
+ | }, | ||
+ | |||
+ | { | ||
+ | key: "red2", | ||
+ | toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/d/d7/ETH_Zurich_Red2.png" />').contents() | ||
+ | }, | ||
+ | |||
+ | { | ||
+ | key: "blue2", | ||
+ | toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/f/f6/ETH_Zurich_Blue2.png" />').contents() | ||
+ | }, | ||
+ | |||
+ | { | ||
+ | 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() | ||
} | } | ||
+ | |||
] | ] | ||
}); | }); | ||
Line 87: | Line 156: | ||
</script> | </script> | ||
- | |||
- | |||
</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).