"
Team:ETH Zurich/project/overview/grid
From 2014.igem.org
(Difference between revisions)
(→Emergence of the pattern) |
|||
| (45 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/> | <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<br/> | |
| - | <IMG SRC="/ | + | 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/> | ||
<br/> | <br/> | ||
| Line 83: | 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 90: | 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 100: | 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 106: | 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 112: | 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 118: | 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 124: | 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 130: | 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 136: | 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 142: | 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
