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

 
(30 intermediate revisions by the same user not shown)
Line 88: 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 97: 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 110: 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;
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 {
Line 507: Line 514:
 
     };
 
     };
 
   }
 
   }
−
 
 
   function expandButton1() {
 
   function expandButton1() {
 
     if (document.getElementById("button1").className === "expanded") {
 
     if (document.getElementById("button1").className === "expanded") {
Line 528: 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 534: Line 551:
 
<div id="overview">
 
<div id="overview">
 
   <h3>Overview</h3>
 
   <h3>Overview</h3>
−
  <br>
 
 
   <h4>We've created an interactive beat generating machine.</h4>
 
   <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">
 
   <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 bioluminescent bacteria, and each color corresponds to a different bass sound. Sound is read left to right.</p>
+
     <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">The 40minute sound represents a biological light oscillator.</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>
Line 606: 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 623: Line 648:
 
   <br>
 
   <br>
 
   <h5>Tube Rack</h5>
 
   <h5>Tube Rack</h5>
−
   <img src="https://static.igem.org/mediawiki/2015/7/74/NYU_Shanghai_Tuberack.png" width="700"></img>
+
   <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>Camera Case</h5>
+
   <h5>Tube Rack Bottom</h5>
−
   <img src="https://static.igem.org/mediawiki/2015/c/c1/NYU_Shanghai_Camcase.png" width="700"></img>
+
   <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

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