"
Team:ETH Zurich/project/overview/grid
From 2014.igem.org
(Difference between revisions)
(→Emergence of the pattern) |
|||
| (28 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;"> | |
| - | <div id='cont' style="text-align:justify; width: | + | 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). |
| - | Every cell on the grid below | + | |
<br/> | <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/> | <br/> | ||
</div> | </div> | ||
| - | <div id='cont' style="background-image: url('https://static.igem.org/mediawiki/2014/d/d8/ETH_Zurich_background.png'); width: | + | <div id='cont' style="background-image: url('https://static.igem.org/mediawiki/2014/d/d8/ETH_Zurich_background.png'); width:950px;"> |
<br/> | <br/> | ||
<br/> | <br/> | ||
<h3 style='font-size:14; color:#FFFFFF; padding:0 10%; text-align:center;'> | <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 | + | 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/> | ||
<br/> | <br/> | ||
| - | Input | + | Input<br/> |
| + | 3OC12HSL added to the first well | ||
</h3> | </h3> | ||
<center> | <center> | ||
| Line 23: | Line 30: | ||
</center> | </center> | ||
<IMG SRC="https://static.igem.org/mediawiki/2014/9/9a/ETH_Zurich_GridGlowing.gif" usemap="#map" id="mapTest"> | <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/> | ||
<br/> | <br/> | ||
| Line 85: | 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, | ||
| Line 92: | Line 100: | ||
'-webkit-box-shadow: 3px 3px 5px #535353; box-shadow: 3px 3px 5px #535353; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px; ' + | '-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>', | '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/8/8b/ETH_Zurich_Red0.png"/> ').contents() | ||
}, | }, | ||
| Line 102: | Line 108: | ||
{ | { | ||
key: "blue0", | key: "blue0", | ||
| - | |||
toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/0/06/ETH_Zurich_Blue0.png" />').contents() | toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/0/06/ETH_Zurich_Blue0.png" />').contents() | ||
}, | }, | ||
| Line 108: | Line 113: | ||
{ | { | ||
key: "red2", | key: "red2", | ||
| - | |||
toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/d/d7/ETH_Zurich_Red2.png" />').contents() | toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/d/d7/ETH_Zurich_Red2.png" />').contents() | ||
}, | }, | ||
| Line 114: | Line 118: | ||
{ | { | ||
key: "blue2", | key: "blue2", | ||
| - | |||
toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/f/f6/ETH_Zurich_Blue2.png" />').contents() | toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/f/f6/ETH_Zurich_Blue2.png" />').contents() | ||
}, | }, | ||
| Line 120: | Line 123: | ||
{ | { | ||
key: "redon", | key: "redon", | ||
| - | |||
toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/c/c5/ETH_Zurich_Redon.png" />').contents() | toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/c/c5/ETH_Zurich_Redon.png" />').contents() | ||
}, | }, | ||
| Line 126: | Line 128: | ||
{ | { | ||
key: "redonlux", | key: "redonlux", | ||
| - | |||
toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/7/7c/ETH_Zurich_Redonlux.png" />').contents() | toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/7/7c/ETH_Zurich_Redonlux.png" />').contents() | ||
}, | }, | ||
| Line 132: | Line 133: | ||
{ | { | ||
key: "redonlas", | key: "redonlas", | ||
| - | |||
toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/e/e5/ETH_Zurich_Redonlas.png" />').contents() | toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/e/e5/ETH_Zurich_Redonlas.png" />').contents() | ||
}, | }, | ||
| Line 138: | Line 138: | ||
{ | { | ||
key: "blueonlux", | key: "blueonlux", | ||
| - | |||
toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/7/72/ETH_Zurich_Blueonlux.png" />').contents() | toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/7/72/ETH_Zurich_Blueonlux.png" />').contents() | ||
}, | }, | ||
| Line 144: | Line 143: | ||
{ | { | ||
key: "blueonlas", | key: "blueonlas", | ||
| - | |||
toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/f/f3/ETH_Zurich_Blueonlas.png" />').contents() | toolTip: $('<div/>').html('<img src="https://static.igem.org/mediawiki/2014/f/f3/ETH_Zurich_Blueonlas.png" />').contents() | ||
} | } | ||
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
