Update about page.

Author: looshi2

css/index.scss

@@ -21,6 +21,11 @@ p {
   }
 }
 
+h2 {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
 .scroll-container {
   padding: 0;
   margin: 0;
@@ -44,9 +49,19 @@ header {
     margin: 0;
     padding: 0;
   }
+  a {
+    margin-left: 22px;
+    margin-top: 13px;
+    vertical-align: top;
+    display: inline-block;
+    text-decoration: underline;
+    &:hover {
+      cursor: pointer;
+    }
+  }
   .horizontal-slider {
     display: inline-block;
-    margin: -14px 0 0 92px;
+    margin: -14px 0 0 58px;
     vertical-align: middle;
     .slider-label {
       width: 53px;

src/App.js

@@ -83,6 +83,7 @@ class App extends React.Component {
           <header>
             <div>
               <h1>Wavetable</h1>
+              <a onClick={this.onOpenAboutModal.bind(this)}>About</a>
               <HorizontalSlider
                 id='master'
                 name='master gain'

src/views/Modals/AboutModal.js

@@ -16,8 +16,17 @@ export default class AboutModal extends React.Component {
             X
           </div>
           <div>
-            <h1 className='text-center'>About This Synth</h1>
-            <p className='about'>Loosely based on Wavetable synthesis.  More info to come...</p>
+            <h2 className='text-center'>Using The Arpeggiator</h2>
+            <p>This short video shows how to use the arpeggiator to play a long sequence of notes, it's fun!</p>
+            <p>
+              <iframe width='500' height='300' src='https://www.youtube.com/embed/jRgZfzzZiyE' frameBorder='0' allowFullScreen />
+            </p>
+            <h2 className='text-center'>Wavetable Synthesis</h2>
+            <p>A wavetable, in the simplest use of the term, is a list of samples for one period of a wave.  In practice, we store an array of 600 numbers for each waveform.  The more complicated use of the term "wavetable" synthesis refers to interpolating from one table to another over time.  Interpolating between these tables made it possible for digital synthesizers of the 1980s to generate complex and evolving sounds using very little processing power and memory.</p>
+            <p>All the interpolated values are precomputed into a potentially fairly long waveform ( what you see beneath each pair of waveform samples ). The "cycles" slider controls the amount of time it takes to change from one waveform to another.  The plus, minus, divide, and multiply buttons control the slope of interpolation.  Since we're not interpolating in real-time the loop time of each oscillator will change depending on pitch.  We would like to find a way to do this without it being dependent on pitch, if you happen to know please contact us!
+            </p>
+            <h2 className='text-center'>By No Means Perfect</h2>
+            <p>To add texture in a few places we add a bit of randomness.  On each note, the pitch is altered randomly between 0 and 6 cents per oscillator.  Also, our square LFO uses a custom square waveform sample versus the preset square available in the web audio api, which does some very subtle ramping up and down and has some wobble to it.  Our filter is actually using 10 filters in sequence, we figured it's a computer, so why not use 10 filters?</p>
           </div>
         </ReactModal>
       </div>