Difference between revisions of "Team:NYU Shanghai/Design"
(90 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 45: | Line 46: | ||
color: white; | color: white; | ||
font-family: "helvetica neue light"; | font-family: "helvetica neue light"; | ||
− | + | } | |
#video { | #video { | ||
width: 982px; | width: 982px; | ||
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; | ||
} | } | ||
− | #stepSequencer | + | #stepSequencer video { |
vertical-align: top; | vertical-align: top; | ||
display: inline-block; | display: inline-block; | ||
Line 128: | Line 128: | ||
padding: 0px; | padding: 0px; | ||
margin-left: 20px; | margin-left: 20px; | ||
+ | vertical-align: top; | ||
} | } | ||
#stepSequencer li { | #stepSequencer li { | ||
Line 203: | 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> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
function collapse() { | function collapse() { | ||
− | document.getElementById("step1").style.color = "white"; | + | /*document.getElementById("step1").style.color = "white"; |
document.getElementById("step2").style.color = "white"; | document.getElementById("step2").style.color = "white"; | ||
document.getElementById("step3").style.color = "white"; | document.getElementById("step3").style.color = "white"; | ||
Line 240: | Line 251: | ||
if (document.getElementsByClassName("expanded").length > 0) { | if (document.getElementsByClassName("expanded").length > 0) { | ||
document.getElementsByClassName("expanded")[0].className = "collapsing"; | document.getElementsByClassName("expanded")[0].className = "collapsing"; | ||
− | }; | + | };*/ |
} | } | ||
− | function expandStep1() { | + | /*function expandStep1() { |
if (document.getElementById("step1").className === "collapsing") { | if (document.getElementById("step1").className === "collapsing") { | ||
document.getElementById("step1").className = "collapsed"; | document.getElementById("step1").className = "collapsed"; | ||
} else{ | } else{ | ||
− | document.getElementById("step1Text").style.display = "block"; | + | document.getElementById("step1Text").style.display = "inline-block"; |
document.getElementById("step1").style.color = "#6db"; | document.getElementById("step1").style.color = "#6db"; | ||
document.getElementById("step1").className = "expanded"; | document.getElementById("step1").className = "expanded"; | ||
Line 387: | Line 398: | ||
document.getElementsByClassName("collapsing")[0].className = "collapsed"; | document.getElementsByClassName("collapsing")[0].className = "collapsed"; | ||
}; | }; | ||
+ | }; | ||
+ | }*/ | ||
+ | |||
+ | //The functions below collapse and expand only when the specific item is clicked | ||
+ | |||
+ | function expandStep1() { | ||
+ | if (document.getElementById("step1").className === "expanded") { | ||
+ | document.getElementById("step1").style.color = "white"; | ||
+ | document.getElementById("step1Text").style.display = "none"; | ||
+ | document.getElementById("step1").className = "collapsed"; | ||
+ | } else{ | ||
+ | document.getElementById("step1Text").style.display = "inline-block"; | ||
+ | document.getElementById("step1").style.color = "#6db"; | ||
+ | document.getElementById("step1").className = "expanded"; | ||
+ | }; | ||
+ | } | ||
+ | function expandStep2() { | ||
+ | if (document.getElementById("step2").className === "expanded") { | ||
+ | document.getElementById("step2").style.color = "white"; | ||
+ | document.getElementById("step2Text").style.display = "none"; | ||
+ | document.getElementById("step2").className = "collapsed"; | ||
+ | } else{ | ||
+ | document.getElementById("step2Text").style.display = "inline-block"; | ||
+ | document.getElementById("step2").style.color = "#6db"; | ||
+ | document.getElementById("step2").className = "expanded"; | ||
+ | }; | ||
+ | } | ||
+ | function expandStep3() { | ||
+ | if (document.getElementById("step3").className === "expanded") { | ||
+ | document.getElementById("step3").style.color = "white"; | ||
+ | document.getElementById("step3Text").style.display = "none"; | ||
+ | document.getElementById("step3").className = "collapsed"; | ||
+ | } else{ | ||
+ | document.getElementById("step3Text").style.display = "inline-block"; | ||
+ | document.getElementById("step3").style.color = "#6db"; | ||
+ | document.getElementById("step3").className = "expanded"; | ||
+ | }; | ||
+ | } | ||
+ | function expandStep4() { | ||
+ | if (document.getElementById("step4").className === "expanded") { | ||
+ | document.getElementById("step4").style.color = "white"; | ||
+ | document.getElementById("step4Text").style.display = "none"; | ||
+ | document.getElementById("step4").className = "collapsed"; | ||
+ | } else{ | ||
+ | document.getElementById("step4Text").style.display = "inline-block"; | ||
+ | document.getElementById("step4").style.color = "#6db"; | ||
+ | document.getElementById("step4").className = "expanded"; | ||
+ | }; | ||
+ | } | ||
+ | function expandStep5() { | ||
+ | if (document.getElementById("step5").className === "expanded") { | ||
+ | document.getElementById("step5").style.color = "white"; | ||
+ | document.getElementById("step5Text").style.display = "none"; | ||
+ | document.getElementById("step5").className = "collapsed"; | ||
+ | } else{ | ||
+ | document.getElementById("step5Text").style.display = "inline-block"; | ||
+ | document.getElementById("step5").style.color = "#6db"; | ||
+ | document.getElementById("step5").className = "expanded"; | ||
+ | }; | ||
+ | } | ||
+ | |||
+ | function expandTube1() { | ||
+ | if (document.getElementById("tube1").className === "expanded") { | ||
+ | document.getElementById("tube1").style.color = "white"; | ||
+ | document.getElementById("tube1Text").style.display = "none"; | ||
+ | document.getElementById("tube1").className = "collapsed"; | ||
+ | } else{ | ||
+ | document.getElementById("tube1Text").style.display = "inline-block"; | ||
+ | document.getElementById("tube1").style.color = "#6db"; | ||
+ | document.getElementById("tube1").className = "expanded"; | ||
+ | }; | ||
+ | } | ||
+ | function expandTube2() { | ||
+ | if (document.getElementById("tube2").className === "expanded") { | ||
+ | document.getElementById("tube2").style.color = "white"; | ||
+ | document.getElementById("tube2Text").style.display = "none"; | ||
+ | document.getElementById("tube2").className = "collapsed"; | ||
+ | } else{ | ||
+ | document.getElementById("tube2Text").style.display = "inline-block"; | ||
+ | document.getElementById("tube2").style.color = "#6db"; | ||
+ | document.getElementById("tube2").className = "expanded"; | ||
+ | }; | ||
+ | } | ||
+ | function expandTube3() { | ||
+ | if (document.getElementById("tube3").className === "expanded") { | ||
+ | document.getElementById("tube3").style.color = "white"; | ||
+ | document.getElementById("tube3Text").style.display = "none"; | ||
+ | document.getElementById("tube3").className = "collapsed"; | ||
+ | } else{ | ||
+ | document.getElementById("tube3Text").style.display = "inline-block"; | ||
+ | document.getElementById("tube3").style.color = "#6db"; | ||
+ | document.getElementById("tube3").className = "expanded"; | ||
+ | }; | ||
+ | } | ||
+ | function expandTube4() { | ||
+ | if (document.getElementById("tube4").className === "expanded") { | ||
+ | document.getElementById("tube4").style.color = "white"; | ||
+ | document.getElementById("tube4Text").style.display = "none"; | ||
+ | document.getElementById("tube4").className = "collapsed"; | ||
+ | } else{ | ||
+ | document.getElementById("tube4Text").style.display = "inline-block"; | ||
+ | document.getElementById("tube4").style.color = "#6db"; | ||
+ | document.getElementById("tube4").className = "expanded"; | ||
+ | }; | ||
+ | } | ||
+ | function expandTube5() { | ||
+ | if (document.getElementById("tube5").className === "expanded") { | ||
+ | document.getElementById("tube5").style.color = "white"; | ||
+ | document.getElementById("tube5Text").style.display = "none"; | ||
+ | document.getElementById("tube5").className = "collapsed"; | ||
+ | } else{ | ||
+ | document.getElementById("tube5Text").style.display = "inline-block"; | ||
+ | document.getElementById("tube5").style.color = "#6db"; | ||
+ | document.getElementById("tube5").className = "expanded"; | ||
+ | }; | ||
+ | } | ||
+ | function expandButton1() { | ||
+ | if (document.getElementById("button1").className === "expanded") { | ||
+ | document.getElementById("button1").style.color = "white"; | ||
+ | document.getElementById("button1Text").style.display = "none"; | ||
+ | document.getElementById("button1").className = "collapsed"; | ||
+ | } else{ | ||
+ | document.getElementById("button1Text").style.display = "inline-block"; | ||
+ | document.getElementById("button1").style.color = "#6db"; | ||
+ | document.getElementById("button1").className = "expanded"; | ||
+ | }; | ||
+ | } | ||
+ | function expandButton2() { | ||
+ | if (document.getElementById("button2").className === "expanded") { | ||
+ | document.getElementById("button2").style.color = "white"; | ||
+ | document.getElementById("button2Text").style.display = "none"; | ||
+ | document.getElementById("button2").className = "collapsed"; | ||
+ | } else{ | ||
+ | document.getElementById("button2Text").style.display = "inline-block"; | ||
+ | document.getElementById("button2").style.color = "#6db"; | ||
+ | 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"; | ||
}; | }; | ||
} | } | ||
</script> | </script> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<div id="overview"> | <div id="overview"> | ||
<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> | ||
<div id="stepSequencer"> | <div id="stepSequencer"> | ||
<h5>Step Sequencer</h5> | <h5>Step Sequencer</h5> | ||
− | <video width=" | + | <video width="440" controls autoplay muted loop> |
− | <source src="https://static.igem.org/mediawiki/2015/ | + | <source src="https://static.igem.org/mediawiki/2015/9/92/NYU_Shanghai_New_Blue.mp4" type="video/mp4"> |
Your browser does not support the video tag. | Your browser does not support the video tag. | ||
</video> | </video> | ||
Line 438: | 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 456: | Line 608: | ||
<ol><h6 class="noselect">How did we make the button control?</h6> | <ol><h6 class="noselect">How did we make the button control?</h6> | ||
<li id="button1" class="collapsed" onclick="collapse();expandButton1()"><span class="noselect">Obtain equipment</span> | <li id="button1" class="collapsed" onclick="collapse();expandButton1()"><span class="noselect">Obtain equipment</span> | ||
− | <p id="button1Text">We used equipment from the awesome company DFRobot. An Arduino board allows us to take the data from physical interaction (i.e pushing a button) into commands such as adding a sound layer or decreasing the volume.</p> | + | <p id="button1Text">We used equipment from the awesome company DFRobot. An Arduino board allows us to take the data from physical interaction (i.e pushing a button) into commands such as adding a sound layer or decreasing the volume. |
+ | <br><br>Specifically we used: | ||
+ | <br>7 buttons | ||
+ | <br> 5 sliders | ||
+ | <br>1 Arduino Leonardo | ||
+ | <br>3 bread boards | ||
+ | <br>Lots of wires | ||
+ | <br>Lots of screws | ||
+ | <br>Lots of resistors | ||
+ | <br>Lots of sodering | ||
+ | </p> | ||
</li><li id="button2" class="collapsed" onclick="collapse();expandButton2()"><span class="noselect">Create code<br></span> | </li><li id="button2" class="collapsed" onclick="collapse();expandButton2()"><span class="noselect">Create code<br></span> | ||
<p id="button2Text">Click <a href="Code">here</a> to see the code.</p> | <p id="button2Text">Click <a href="Code">here</a> to see the code.</p> | ||
Line 462: | Line 624: | ||
</ol> | </ol> | ||
</div> | </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 id="hardware"> | ||
+ | <h3>Hardware</h3> | ||
+ | <h4>These are our diagrams we made to laser-cut the hardware we needed.</h4> | ||
+ | <br> | ||
+ | <h5>Camera Stand</h5> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/c/c2/NYU_Shanghai_Camstand.png" width="700"></img> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <h5>Button Box</h5> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/4/40/NYU_Shanghai_Buttonbox.png" width="700"></img> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <h5>Tube Rack</h5> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/8/87/NYU_Shanghai_New_Tube_Rack.png" width="700"></img> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <h5>Tube Rack Bottom</h5> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/a/a6/NYU_Shanghai_Tuberackbottom.png" width="700"></img> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | <h5>Disk Rack</h5> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/e/e3/NYU_Shanghai_diskrack.png" width="700"></img> | ||
</div> | </div> | ||
</html> | </html> | ||
+ | |||
+ | {{NYU_Shanghai/Sponsors}} |
Latest revision as of 01:24, 18 September 2015