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

 
(95 intermediate revisions by 2 users not shown)
Line 15: Line 15:
 
     text-decoration: none;
 
     text-decoration: none;
 
     margin: 0px;
 
     margin: 0px;
−
     padding: 20px 0px;
+
     padding: 15px 0px;
 
     font-size: 48px;
 
     font-size: 48px;
 
     font-family: "bebas";
 
     font-family: "bebas";
 
   }
 
   }
 
   h4 {
 
   h4 {
−
     font-family: "helvetica neue light";
+
     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: 308px;
+
     width: 312px;
 
     height: 114px;
 
     height: 114px;
−
     margin: -270px 252px;
+
     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: -310px 595px;
+
     margin: -347px 600px;
 
     border-radius: 10px;
 
     border-radius: 10px;
 
     padding: 10px;
 
     padding: 10px;
 
   }
 
   }
 
   #buttonOverlay {
 
   #buttonOverlay {
−
     width: 235px;
+
     width: 210px;
 
     height: 45px;
 
     height: 45px;
−
     margin: -118px 335px;
+
     margin: -150px 365px;
 
     border-radius: 10px;
 
     border-radius: 10px;
 
     padding: 5px;
 
     padding: 5px;
Line 109: Line 110:
 
   #smallOverlay {
 
   #smallOverlay {
 
     width: 100px;
 
     width: 100px;
−
     height: 45px;
+
     height: 50px;
−
     margin: -118px 220px;
+
     margin: -155px 250px;
 
     border-radius: 10px;
 
     border-radius: 10px;
 
     padding: 5px;
 
     padding: 5px;
 
   }
 
   }
−
 
 
   #stepSequencer{
 
   #stepSequencer{
 
     margin-bottom: 40px;
 
     margin-bottom: 40px;
 
   }
 
   }
−
   #stepSequencer img {
+
   #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 = "#6db";
+
     /*document.getElementById("step1").style.color = "white";
−
     document.getElementById("step2").style.color = "#6db";
+
     document.getElementById("step2").style.color = "white";
−
     document.getElementById("step3").style.color = "#6db";
+
     document.getElementById("step3").style.color = "white";
−
     document.getElementById("step4").style.color = "#6db";
+
     document.getElementById("step4").style.color = "white";
−
     document.getElementById("step5").style.color = "#6db";
+
     document.getElementById("step5").style.color = "white";
 
     document.getElementById("step1Text").style.display = "none";
 
     document.getElementById("step1Text").style.display = "none";
 
     document.getElementById("step2Text").style.display = "none";
 
     document.getElementById("step2Text").style.display = "none";
Line 222: Line 233:
 
     document.getElementById("step5Text").style.display = "none";
 
     document.getElementById("step5Text").style.display = "none";
  
−
     document.getElementById("tube1").style.color = "#6db";
+
     document.getElementById("tube1").style.color = "white";
−
     document.getElementById("tube2").style.color = "#6db";
+
     document.getElementById("tube2").style.color = "white";
−
     document.getElementById("tube3").style.color = "#6db";
+
     document.getElementById("tube3").style.color = "white";
−
     document.getElementById("tube4").style.color = "#6db";
+
     document.getElementById("tube4").style.color = "white";
−
     document.getElementById("tube5").style.color = "#6db";
+
     document.getElementById("tube5").style.color = "white";
 
     document.getElementById("tube1Text").style.display = "none";
 
     document.getElementById("tube1Text").style.display = "none";
 
     document.getElementById("tube2Text").style.display = "none";
 
     document.getElementById("tube2Text").style.display = "none";
Line 233: Line 244:
 
     document.getElementById("tube5Text").style.display = "none";
 
     document.getElementById("tube5Text").style.display = "none";
  
−
     document.getElementById("button1").style.color = "6db";
+
     document.getElementById("button1").style.color = "white";
−
     document.getElementById("button2").style.color = "6db";
+
     document.getElementById("button2").style.color = "white";
 
     document.getElementById("button1Text").style.display = "none";
 
     document.getElementById("button1Text").style.display = "none";
 
     document.getElementById("button2Text").style.display = "none";
 
     document.getElementById("button2Text").style.display = "none";
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="video">
 
−
  <video width="760" height="400" controls>
 
−
    <source src="https://static.igem.org/mediawiki/2015/1/1f/NYU_Shanghai_Projectmov.mp4" type="video/mp4">
 
−
  Your browser does not support the video tag.
 
−
  </video>
 
−
  <p style="font-size:15px">There are three main components to the music generator: (1) bacteria colonies (2) tube rack (3) button control. We engineered bacteria to express different colors and lights through chromoproteins, fluorescent proteins, luciferase, and oscillating amounts of luciferase. We then translated 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>
 
 
<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/f/fc/NYU_Shanghai_BGM_Diagram.png/800px-NYU_Shanghai_BGM_Diagram.png">
+
  <br>
−
     <p id="tubeOverlay"><br>The tube rack generates the background beat. Tubes contain bioluminescent bacteria, and each color corresponds to a different bass sound. Sound is read left to right.</p>
+
   <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">Button control allows the user to control each sound layer.</p>
+
     <p id="buttonOverlay">Allows user to control cameras and volume.</p>
−
     <p id="smallOverlay">Analyzes tube positions</p>
+
     <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="500" height="278" controls autoplay muted>
+
   <video width="440" controls autoplay muted loop>
−
   <source src="https://static.igem.org/mediawiki/2015/f/fb/NYU_Shanghai_Teamvideo42.7.mp4" type="video/mp4">
+
   <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 bioluminescent bacteria</span>
+
     </li><li id="tube2" class="collapsed" onclick="collapse();expandTube2()"><span class="noselect">Fill tubes with colorful bacteria</span>
−
       <p id="tube2Text">Using luciferase generators from the registry, we created red, green, orange, and yellow colored bacteria. See constructs <a href="Parts">here</a>. See protocols <a href="Protocols">here</a>.</p>
+
       <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

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