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

Line 212: Line 212:
 
<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 241: Line 241:
 
     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";
Line 380: Line 380:
 
   function expandButton2() {
 
   function expandButton2() {
 
     if (document.getElementById("button2").className === "collapsing") {
 
     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 === "collapsing") {
 +
      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";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandStep3() {
 +
    if (document.getElementById("step3").className === "collapsing") {
 +
      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";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandStep4() {
 +
    if (document.getElementById("step4").className === "collapsing") {
 +
      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";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandStep5() {
 +
    if (document.getElementById("step5").className === "collapsing") {
 +
      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";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
 +
  function expandTube1() {
 +
    if (document.getElementById("tube1").className === "collapsing") {
 +
      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";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandTube2() {
 +
    if (document.getElementById("tube2").className === "collapsing") {
 +
      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";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandTube3() {
 +
    if (document.getElementById("tube3").className === "collapsing") {
 +
      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";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandTube4() {
 +
    if (document.getElementById("tube4").className === "collapsing") {
 +
      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";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandTube5() {
 +
    if (document.getElementById("tube5").className === "collapsing") {
 +
      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";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
 +
  function expandButton1() {
 +
    if (document.getElementById("button1").className === "collapsing") {
 +
      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";
 +
      if (document.getElementsByClassName("collapsing").length > 0) {
 +
        document.getElementsByClassName("collapsing")[0].className = "collapsed";
 +
      };
 +
    };
 +
  }
 +
  function expandButton2() {
 +
    if (document.getElementById("button2").className === "collapsing") {
 +
      document.getElementById("button2").style.color = "white";
 +
      document.getElementById("button2Text").style.display = "none";
 
       document.getElementById("button2").className = "collapsed";
 
       document.getElementById("button2").className = "collapsed";
 
     } else{
 
     } else{

Revision as of 12:26, 8 September 2015

Overview

We've created an interactive beat generating machine.


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.

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

Button control allows the user to control each sound layer.

Analyzes tube positions

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?

Hardware

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


Camera Stand



Button Box



Tube Rack



Camera Case



Disk Rack