Difference between revisions of "Team:NYU Shanghai/Design"

 
(270 intermediate revisions by 2 users not shown)
Line 7: Line 7:
  
 
<style type="text/css">
 
<style type="text/css">
 +
  @font-face {
 +
    font-family: "helvetica neue light";
 +
    src: url("https://static.igem.org/mediawiki/2015/8/86/NYU_Shanghai_HelveticaNeue-Light.otf") format("opentype");
 +
}
 +
  h3 {
 +
    color: goldenrod;
 +
    text-decoration: none;
 +
    margin: 0px;
 +
    padding: 15px 0px;
 +
    font-size: 48px;
 +
    font-family: "bebas";
 +
  }
 +
  h4 {
 +
    font-family: "HelveticaNT";
 +
    color: white;
 +
    margin: 0px;
 +
    padding: 0px;
 +
    font-size: 24px; 
 +
    overflow: visible 
 +
  }
 +
  h5 {
 +
    font-size: 28px;
 +
    color: goldenrod;
 +
    font-family: "bebas";
 +
  }
 +
  h6 {
 +
    font-size: 22px;
 +
    color: white;
 +
    font-family: "helvetica neue light";
 +
  }
 +
  span {
 +
    font-size: 22px;
 +
    color: white;
 +
    font-family: "helvetica neue light";
 +
  }
 +
  p {
 +
    font-size: 22px;
 +
    color: white;
 +
    font-family: "helvetica neue light";
 +
}
 
   #video {
 
   #video {
 
     width: 982px;
 
     width: 982px;
 
     margin: 0 auto;
 
     margin: 0 auto;
 +
    margin-bottom: 28px;
 
   }
 
   }
 
   #video video {
 
   #video video {
−
    background-color: gray;
 
 
     margin: 0 auto;
 
     margin: 0 auto;
−
     margin-left
+
     margin-left: 90px;
 
     border: 1px solid goldenrod;
 
     border: 1px solid goldenrod;
 
     border-radius: 32px;
 
     border-radius: 32px;
−
     text-align: center;
+
     padding: 20px;
 +
    margin-bottom: 20px;
 
   }
 
   }
 
   #video p {
 
   #video p {
 
     color: white;
 
     color: white;
 
     text-align: justify;
 
     text-align: justify;
−
   }  
+
   }  
 +
  #overview {
 +
    width: 982px;
 +
    margin: 0 auto;
 +
    margin-bottom: 40px;
 +
  }
 +
  #overview img {
 +
    width: 480px;
 +
    margin: 0 auto;
 +
    padding: 20px;
 +
    margin-left: 230px;
 +
  }
 +
  #overview p {
 +
    background-color: transparent;
 +
    color: transparent;
 +
    opacity: 0.9;
 +
    position: absolute;
 +
    text-align: center;
 +
    font-size: 14px;
 +
  }
 +
  #overview p:hover {
 +
    background-color: white;
 +
    color: black;
 +
  }
 +
  #tubeOverlay {
 +
    width: 312px;
 +
    height: 114px;
 +
    margin: -305px 250px;
 +
    border-radius: 10px;
 +
    padding: 10px;
 +
  }
 +
  #cameraOverlay {
 +
    width: 108px;
 +
    height: 230px;
 +
    margin: -347px 600px;
 +
    border-radius: 10px;
 +
    padding: 10px;
 +
  }
 +
  #buttonOverlay {
 +
    width: 210px;
 +
    height: 45px;
 +
    margin: -150px 365px;
 +
    border-radius: 10px;
 +
    padding: 5px;
 +
  }
 +
  #smallOverlay {
 +
    width: 100px;
 +
    height: 50px;
 +
    margin: -155px 250px;
 +
    border-radius: 10px;
 +
    padding: 5px;
 +
  }
 +
  #stepSequencer{
 +
    margin-bottom: 40px;
 +
  }
 +
  #stepSequencer video {
 +
    vertical-align: top;
 +
    display: inline-block;
 +
  }
 +
  #stepSequencer ol {
 +
    font-size: 24px;
 +
    text-align: left;
 +
    margin: 0px;
 +
    padding: 0px;
 +
    margin-left: 20px;
 +
    vertical-align: top;
 +
  }
 +
  #stepSequencer li {
 +
    color: white;
 +
    font-family: "helveticaneue", Arial;
 +
    margin-left: 35px;
 +
  }
 +
  #stepSequencer li p {
 +
    color: white;
 +
    font-size: 18px;
 +
    margin-left: -35px;
 +
    display: none;
 +
  }
 +
  #stepSequencer a {
 +
    text-decoration: none;
 +
    color: #6db;
 +
  }
 +
 
 +
  #tubeRack {
 +
    margin-bottom: 40px;
 +
  }
 +
  #tubeRack img {
 +
    vertical-align: top;
 +
    display: inline-block;
 +
  }
 +
  #tubeRack ol {
 +
    font-size: 24px;
 +
    text-align: left;
 +
    margin: 0px;
 +
    padding: 0px;
 +
    margin-left: 20px;
 +
  }
 +
  #tubeRack li {
 +
    color: white;
 +
    font-family: Arial;
 +
    margin-left: 35px;
 +
  }
 +
  #tubeRack li p {
 +
    color: white;
 +
    font-size: 18px;
 +
    margin-left: -35px;
 +
    display: none;
 +
  }
 +
  #tubeRack a {
 +
    text-decoration: none;
 +
    color: #6db;
 +
  }
 +
 
 +
  #buttonControl {
 +
    margin-bottom: 40px;
 +
  }
 +
  #buttonControl img {
 +
    vertical-align: top;
 +
    display: inline-block;
 +
  }
 +
  #buttonControl ol {
 +
    font-size: 24px;
 +
    text-align: left;
 +
    margin: 0px;
 +
    padding: 0px;
 +
    margin-left: 20px;
 +
  }
 +
  #buttonControl li {
 +
    color: white;
 +
    font-family: Arial;
 +
    margin-left: 35px;
 +
  }
 +
  #buttonControl li p {
 +
    color: white;
 +
    font-size: 18px;
 +
    margin-left: -35px;
 +
    display: none;
 +
  }
 +
  #buttonControl a {
 +
    text-decoration: none;
 +
    color: #6db;
 +
  }
 +
  #minute {
 +
    margin-bottom: 40px;
 +
  }
 +
  #minute img {
 +
    vertical-align: top;
 +
    display: inline-block;
 +
  }
 +
  span:hover {
 +
    color: #6db;
 +
}
 +
  #sponsors a:hover {
 +
    color: goldenrod;
 +
  }
 
</style>
 
</style>
  
−
<div id="video">
+
<script type="text/javascript">
−
   <video width="800" height="400" autoplay>
+
  function collapse() {
−
     <source src="https://static.igem.org/mediawiki/2015/f/fb/NYU_Shanghai_Teamvideo42.7.mp4" type="video/mp4">
+
    /*document.getElementById("step1").style.color = "white";
 +
    document.getElementById("step2").style.color = "white";
 +
    document.getElementById("step3").style.color = "white";
 +
    document.getElementById("step4").style.color = "white";
 +
    document.getElementById("step5").style.color = "white";
 +
    document.getElementById("step1Text").style.display = "none";
 +
    document.getElementById("step2Text").style.display = "none";
 +
    document.getElementById("step3Text").style.display = "none";
 +
    document.getElementById("step4Text").style.display = "none";
 +
    document.getElementById("step5Text").style.display = "none";
 +
 
 +
    document.getElementById("tube1").style.color = "white";
 +
    document.getElementById("tube2").style.color = "white";
 +
    document.getElementById("tube3").style.color = "white";
 +
    document.getElementById("tube4").style.color = "white";
 +
    document.getElementById("tube5").style.color = "white";
 +
    document.getElementById("tube1Text").style.display = "none";
 +
    document.getElementById("tube2Text").style.display = "none";
 +
    document.getElementById("tube3Text").style.display = "none";
 +
    document.getElementById("tube4Text").style.display = "none";
 +
    document.getElementById("tube5Text").style.display = "none";
 +
 
 +
    document.getElementById("button1").style.color = "white";
 +
    document.getElementById("button2").style.color = "white";
 +
    document.getElementById("button1Text").style.display = "none";
 +
    document.getElementById("button2Text").style.display = "none";
 +
 
 +
    if (document.getElementsByClassName("expanded").length > 0) {
 +
    document.getElementsByClassName("expanded")[0].className = "collapsing";
 +
    };*/
 +
  }
 +
 
 +
  /*function expandStep1() {
 +
    if (document.getElementById("step1").className === "collapsing") {
 +
      document.getElementById("step1").className = "collapsed";
 +
    } else{
 +
      document.getElementById("step1Text").style.display = "inline-block";
 +
      document.getElementById("step1").style.color = "#6db";
 +
      document.getElementById("step1").className = "expanded";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandStep2() {
 +
    if (document.getElementById("step2").className === "collapsing") {
 +
      document.getElementById("step2").className = "collapsed";
 +
    } else{
 +
      document.getElementById("step2Text").style.display = "inline-block";
 +
      document.getElementById("step2").style.color = "#6db";
 +
      document.getElementById("step2").className = "expanded";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandStep3() {
 +
    if (document.getElementById("step3").className === "collapsing") {
 +
      document.getElementById("step3").className = "collapsed";
 +
    } else{
 +
      document.getElementById("step3Text").style.display = "inline-block";
 +
      document.getElementById("step3").style.color = "#6db";
 +
      document.getElementById("step3").className = "expanded";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandStep4() {
 +
    if (document.getElementById("step4").className === "collapsing") {
 +
      document.getElementById("step4").className = "collapsed";
 +
    } else{
 +
      document.getElementById("step4Text").style.display = "inline-block";
 +
      document.getElementById("step4").style.color = "#6db";
 +
      document.getElementById("step4").className = "expanded";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandStep5() {
 +
    if (document.getElementById("step5").className === "collapsing") {
 +
      document.getElementById("step5").className = "collapsed";
 +
    } else{
 +
      document.getElementById("step5Text").style.display = "inline-block";
 +
      document.getElementById("step5").style.color = "#6db";
 +
      document.getElementById("step5").className = "expanded";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
 
 +
  function expandTube1() {
 +
    if (document.getElementById("tube1").className === "collapsing") {
 +
      document.getElementById("tube1").className = "collapsed";
 +
    } else{
 +
      document.getElementById("tube1Text").style.display = "inline-block";
 +
      document.getElementById("tube1").style.color = "#6db";
 +
      document.getElementById("tube1").className = "expanded";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandTube2() {
 +
    if (document.getElementById("tube2").className === "collapsing") {
 +
      document.getElementById("tube2").className = "collapsed";
 +
    } else{
 +
      document.getElementById("tube2Text").style.display = "inline-block";
 +
      document.getElementById("tube2").style.color = "#6db";
 +
      document.getElementById("tube2").className = "expanded";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandTube3() {
 +
    if (document.getElementById("tube3").className === "collapsing") {
 +
      document.getElementById("tube3").className = "collapsed";
 +
    } else{
 +
      document.getElementById("tube3Text").style.display = "inline-block";
 +
      document.getElementById("tube3").style.color = "#6db";
 +
      document.getElementById("tube3").className = "expanded";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandTube4() {
 +
    if (document.getElementById("tube4").className === "collapsing") {
 +
      document.getElementById("tube4").className = "collapsed";
 +
    } else{
 +
      document.getElementById("tube4Text").style.display = "inline-block";
 +
      document.getElementById("tube4").style.color = "#6db";
 +
      document.getElementById("tube4").className = "expanded";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandTube5() {
 +
    if (document.getElementById("tube5").className === "collapsing") {
 +
      document.getElementById("tube5").className = "collapsed";
 +
    } else{
 +
      document.getElementById("tube5Text").style.display = "inline-block";
 +
      document.getElementById("tube5").style.color = "#6db";
 +
      document.getElementById("tube5").className = "expanded";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
 
 +
  function expandButton1() {
 +
    if (document.getElementById("button1").className === "collapsing") {
 +
      document.getElementById("button1").className = "collapsed";
 +
    } else{
 +
      document.getElementById("button1Text").style.display = "inline-block";
 +
      document.getElementById("button1").style.color = "#6db";
 +
      document.getElementById("button1").className = "expanded";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandButton2() {
 +
    if (document.getElementById("button2").className === "collapsing") {
 +
      document.getElementById("button2").className = "collapsed";
 +
    } else{
 +
      document.getElementById("button2Text").style.display = "inline-block";
 +
      document.getElementById("button2").style.color = "#6db";
 +
      document.getElementById("button2").className = "expanded";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        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>
 +
 
 +
<div id="overview">
 +
   <h3>Overview</h3>
 +
  <h4>We've created an interactive beat generating machine.</h4>
 +
  <br>
 +
  <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="buttonOverlay">Allows user to control cameras and volume.</p>
 +
    <p id="smallOverlay">Represents an oscillator.</p>
 +
  </img>
 +
</div>
 +
<div id="stepSequencer">
 +
  <h5>Step Sequencer</h5>
 +
  <video width="440" controls autoplay muted loop>
 +
  <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>
−
   <p>There are three main components to the music generator: (1) bacterial colonies (2) tube rack (3) button control. We engineer bacteria to express different colors and lights through chromoproteins, fluorescent proteins, luciferase, and oscillating amounts of luciferase. We then translate bacterial colonies on a plate into a step sequencer, which creates patterned expressions of sound. The tube rack and button control add extra layers of interaction and control, making the user the coolest DJ ever.</p>
+
   <div style="width: 440px; display: inline-block;">
 +
  <ol>
 +
    <h6 class="noselect">How did we make the step sequencer?</h6>
 +
    <li id="step1" class="collapsed" onclick="collapse();expandStep1()"><span class="noselect">Make bacteria plate</span>
 +
      <p id="step1Text">With bacteria expressing chromoproteins or fluorescent proteins. All parts taken from the Registry. See constructs <a href="Parts">here</a>. See protocols <a href="Protocols">here</a>.</p>
 +
    </li><li id="step2" class="collapsed" onclick="collapse();expandStep2()"><span class="noselect">Take picture</span>
 +
      <p id="step2Text">Using a webcam. Import the picture into the laptop and the Processing environment.</p>
 +
    </li><li id="step3" class="collapsed" onclick="collapse();expandStep3()"><span class="noselect">Processing</span>
 +
      <p id="step3Text">Processing is a coding language and environment that allows us to translate data from an image into binary data. Blob detection is an open-source code that allows us to detect areas of high contrast (bacterial colonies). We obtain the RGB value of the blobs detected, and convert the positions into a 16X16 grid. Click <a href="Code">here</a> to see our code.</p>
 +
    </li><li id="step4" class="collapsed" onclick="collapse();expandStep4()"><span class="noselect">Sound mapping</span>
 +
      <p id="step4Text">Each position on the grid is mapped to a different note. Each row is the same note. Notes increase by half-steps in the column.</p>
 +
    </li><li id="step5" class="collapsed" onclick="collapse();expandStep5()"><span class="noselect">Music<br></span>
 +
      <p id="step5Text" style="font-size: 22px;">&#x266a; &#x266b; &#x266a; &#x266b;</p>
 +
    </li>
 +
  </ol>
 +
  </div>
 +
</div>
 +
<div id="tubeRack">
 +
<h5>Tube Rack</h5>
 +
  <img src="https://static.igem.org/mediawiki/2015/thumb/7/7e/NYU_Shanghai_Tube_Rack.png/800px-NYU_Shanghai_Tube_Rack.png" width="440"></img>
 +
  <div style="width: 440px; display: inline-block;">
 +
  <ol><h6 class="noselect">How did we make the tube rack?</h6>
 +
    <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>
 +
    </li><li id="tube2" class="collapsed" onclick="collapse();expandTube2()"><span class="noselect">Fill tubes with colorful bacteria</span>
 +
      <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>
 +
      <p id="tube3Text">Using a webcam. Import the picture into the laptop and the Processing environment.</p>
 +
    </li><li id="tube4" class="collapsed" onclick="collapse();expandTube4()"><span class="noselect">Processing </span>
 +
      <p id="tube4Text">Processing is a coding language and environment that allows us to identify the RGB value of a specific position and correlate that value with a drum sound. Click <a href="Code">here</a> to see our code.</p>
 +
    </li><li id="tube5" class="collapsed" onclick="collapse();expandTube5()"><span class="noselect">Beats<br></span>
 +
      <p id="tube5Text">Boots and cats and boots and cats.</p>
 +
    </li>
 +
  </ol>
 +
  </div>
 +
</div>
 +
<div id="buttonControl">
 +
<h5>Button Control</h5>
 +
  <img src="https://static.igem.org/mediawiki/2015/thumb/5/5f/NYU_Shanghai_Arduino_UNO.png/800px-NYU_Shanghai_Arduino_UNO.png" width="440"></img>
 +
  <div style="width: 440px; display: inline-block;">
 +
  <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>
 +
      <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>
 +
      <p id="button2Text">Click <a href="Code">here</a> to see the code.</p>
 +
    </li>
 +
  </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 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

Overview

We've created an interactive beat generating machine.



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.

Bacterial colonies are translated into a step sequencer. Bacteria express fluorescent or chromoproteins. Different colors correspond to different instruments.

Allows user to control cameras and volume.

Represents an oscillator.

Step Sequencer
    How did we make the step sequencer?
Tube Rack
    How did we make the tube rack?
Button Control
    How did we make the button control?
40 Minute Sound

Hardware

These are our diagrams we made to laser-cut the hardware we needed.


Camera Stand



Button Box



Tube Rack



Tube Rack Bottom



Disk Rack