Difference between revisions of "Team:NYU Shanghai/Design"
| (41 intermediate revisions by 2 users not shown) | |||
| Line 15: | Line 15: | ||
text-decoration: none; | text-decoration: none; | ||
margin: 0px; | margin: 0px; | ||
| − | padding: | + | padding: 15px 0px; |
font-size: 48px; | font-size: 48px; | ||
font-family: "bebas"; | font-family: "bebas"; | ||
} | } | ||
h4 { | h4 { | ||
| − | font-family: " | + | font-family: "HelveticaNT"; |
color: white; | color: white; | ||
margin: 0px; | margin: 0px; | ||
padding: 0px; | padding: 0px; | ||
| − | font-size: 24px; | + | font-size: 24px; |
| + | overflow: visible | ||
} | } | ||
h5 { | h5 { | ||
| Line 87: | Line 88: | ||
} | } | ||
#tubeOverlay { | #tubeOverlay { | ||
| − | width: | + | width: 312px; |
height: 114px; | height: 114px; | ||
| − | margin: - | + | margin: -305px 250px; |
border-radius: 10px; | border-radius: 10px; | ||
padding: 10px; | padding: 10px; | ||
| Line 96: | Line 97: | ||
width: 108px; | width: 108px; | ||
height: 230px; | height: 230px; | ||
| − | margin: - | + | margin: -347px 600px; |
border-radius: 10px; | border-radius: 10px; | ||
padding: 10px; | padding: 10px; | ||
} | } | ||
#buttonOverlay { | #buttonOverlay { | ||
| − | width: | + | width: 210px; |
height: 45px; | height: 45px; | ||
| − | margin: - | + | margin: -150px 365px; |
border-radius: 10px; | border-radius: 10px; | ||
padding: 5px; | padding: 5px; | ||
| Line 109: | Line 110: | ||
#smallOverlay { | #smallOverlay { | ||
width: 100px; | width: 100px; | ||
| − | height: | + | height: 50px; |
| − | margin: - | + | margin: -155px 250px; |
border-radius: 10px; | border-radius: 10px; | ||
padding: 5px; | padding: 5px; | ||
} | } | ||
| − | |||
#stepSequencer{ | #stepSequencer{ | ||
margin-bottom: 40px; | margin-bottom: 40px; | ||
| Line 204: | Line 204: | ||
text-decoration: none; | text-decoration: none; | ||
color: #6db; | color: #6db; | ||
| + | } | ||
| + | #minute { | ||
| + | margin-bottom: 40px; | ||
| + | } | ||
| + | #minute img { | ||
| + | vertical-align: top; | ||
| + | display: inline-block; | ||
} | } | ||
span:hover { | span:hover { | ||
color: #6db; | color: #6db; | ||
} | } | ||
| + | #sponsors a:hover { | ||
| + | color: goldenrod; | ||
| + | } | ||
</style> | </style> | ||
| Line 504: | Line 514: | ||
}; | }; | ||
} | } | ||
| − | |||
function expandButton1() { | function expandButton1() { | ||
if (document.getElementById("button1").className === "expanded") { | if (document.getElementById("button1").className === "expanded") { | ||
| Line 525: | Line 534: | ||
document.getElementById("button2").style.color = "#6db"; | document.getElementById("button2").style.color = "#6db"; | ||
document.getElementById("button2").className = "expanded"; | document.getElementById("button2").className = "expanded"; | ||
| + | }; | ||
| + | } | ||
| + | function expandforty() { | ||
| + | if (document.getElementById("forty").className === "collapsed") { | ||
| + | document.getElementById("forty").style.color = "white"; | ||
| + | document.getElementById("fortyText").style.display = "none"; | ||
| + | document.getElementById("forty").className = "expanded"; | ||
| + | } else{ | ||
| + | document.getElementById("fortyText").style.display = "inline-block"; | ||
| + | document.getElementById("forty").style.color = "#6db"; | ||
| + | document.getElementById("forty").className = "collapsed"; | ||
}; | }; | ||
} | } | ||
| Line 532: | Line 552: | ||
<h3>Overview</h3> | <h3>Overview</h3> | ||
<h4>We've created an interactive beat generating machine.</h4> | <h4>We've created an interactive beat generating machine.</h4> | ||
| − | <img src="https://static.igem.org/mediawiki/2015/thumb/ | + | <br> |
| − | <p id="tubeOverlay"><br>The tube rack generates the background beat. Tubes contain | + | <img src="https://static.igem.org/mediawiki/2015/thumb/c/cf/NYU_Shanghai_Designpage.png/767px-NYU_Shanghai_Designpage.png"> |
| + | <p id="tubeOverlay"><br>The tube rack generates the background beat. Tubes contain colorful bacteria, and each color corresponds to a different bass sound. Sound is read left to right.</p> | ||
<p id="cameraOverlay">Bacterial colonies are translated into a step sequencer. Bacteria express fluorescent or chromoproteins. Different colors correspond to different instruments.</p> | <p id="cameraOverlay">Bacterial colonies are translated into a step sequencer. Bacteria express fluorescent or chromoproteins. Different colors correspond to different instruments.</p> | ||
| − | <p id="buttonOverlay"> | + | <p id="buttonOverlay">Allows user to control cameras and volume.</p> |
| − | <p id="smallOverlay"> | + | <p id="smallOverlay">Represents an oscillator.</p> |
</img> | </img> | ||
</div> | </div> | ||
| Line 569: | Line 590: | ||
<li id="tube1" class="collapsed" onclick="collapse();expandTube1()"><span class="noselect">Laser cut tube rack </span> | <li id="tube1" class="collapsed" onclick="collapse();expandTube1()"><span class="noselect">Laser cut tube rack </span> | ||
<p id="tube1Text">Using a laser cutter, we created a custom tube rack. 8 slots allow our system to run on 4/4 time.</p> | <p id="tube1Text">Using a laser cutter, we created a custom tube rack. 8 slots allow our system to run on 4/4 time.</p> | ||
| − | </li><li id="tube2" class="collapsed" onclick="collapse();expandTube2()"><span class="noselect">Fill tubes with | + | </li><li id="tube2" class="collapsed" onclick="collapse();expandTube2()"><span class="noselect">Fill tubes with colorful bacteria</span> |
| − | <p id="tube2Text"> | + | <p id="tube2Text">Our initial intention was to use bioluminescent, luciferase-generating bacteria. We realized the light from these constructs was dim and could only be seen in the dark, and thus not practical for our music generator. In the end, we switched to chromoprotein expressing bacteria. See constructs <a href="Parts">here</a>. See protocols <a href="Protocols">here</a>.</p> |
</li><li id="tube3" class="collapsed" onclick="collapse();expandTube3()"><span class="noselect">Take picture </span> | </li><li id="tube3" class="collapsed" onclick="collapse();expandTube3()"><span class="noselect">Take picture </span> | ||
<p id="tube3Text">Using a webcam. Import the picture into the laptop and the Processing environment.</p> | <p id="tube3Text">Using a webcam. Import the picture into the laptop and the Processing environment.</p> | ||
| Line 602: | Line 623: | ||
</li> | </li> | ||
</ol> | </ol> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div id="minute"> | ||
| + | <h5>40 Minute Sound</h5> | ||
| + | <img src="https://static.igem.org/mediawiki/2015/3/31/NYU_Shanghai_Waves2.png" width="440"></img> | ||
| + | <div style="width: 440px; display: inline-block; margin-left: 20px;" > | ||
| + | <h6 id="forty" class="collapsed" onclick="collapse();expandforty()"><span class="noselect">What is the 40min sound?</span></h6> | ||
| + | <p id="fortyText" class="collapsed">We wanted to represent a real-time biological oscillator, the natural form of a beat-generator. It is an acknowledgement to the current limitations of biological systems due to time-scales of expression, inherent randomness, the lack of mainpulated synchronization, and the role of electronics in the future of synthetic biology.</p> | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 619: | Line 648: | ||
<br> | <br> | ||
<h5>Tube Rack</h5> | <h5>Tube Rack</h5> | ||
| − | <img src="https://static.igem.org/mediawiki/2015/ | + | <img src="https://static.igem.org/mediawiki/2015/8/87/NYU_Shanghai_New_Tube_Rack.png" width="700"></img> |
<br> | <br> | ||
<br> | <br> | ||
<br> | <br> | ||
| − | <h5> | + | <h5>Tube Rack Bottom</h5> |
| − | <img src="https://static.igem.org/mediawiki/2015/ | + | <img src="https://static.igem.org/mediawiki/2015/a/a6/NYU_Shanghai_Tuberackbottom.png" width="700"></img> |
<br> | <br> | ||
<br> | <br> | ||
Latest revision as of 01:24, 18 September 2015
-
-
Project
-
Team
-
Outreach
-
Notebook
