started to add about page

lshap · Apr 29, 2014 · 0ece3b2 · 0ece3b2
1 parent 775a88e
commit 0ece3b2
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 1 deletion.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.about.css.swp b/.about.css.swp
diff --git a/.about.html.swp b/.about.html.swp
diff --git a/.soundscene.html.swp b/.soundscene.html.swp
diff --git a/about.css b/about.css
@@ -0,0 +1,16 @@
+#home {
+	position:fixed;
+	top:40px;
+	left:5%;
+	width:40px;
+	height:40px;
+}
+
+.container {
+	padding-top:80px;
+}
+
+body {
+	background-color:rgba(127, 241, 227, 0.4);
+	padding-bottom:100px;
+}
diff --git a/about.html b/about.html
@@ -0,0 +1,33 @@
+<html>
+	<head>
+		<link rel='stylesheet' href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>
+		<link rel="stylesheet" type="text/css" href="about.css"/>
+	</head>
+	<body>
+		<div class = "container">
+			<a href="soundscene.html"><img src="images/home.png" id="home"></img></a>
+		<div class="row">
+			<div class="col-md-4 col-md-offset-4">
+				<h1>About SoundSketch</h1>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-md-4 col-md-offset-4">
+				<h3>Initial Visualization</h3>
+				<span>The initial visualization is based off of the frequency samples of the audio source. Each circle represents a frequency value, from 1 - 1023 Hz. The radius of each circle is proportional to the amplitude that the frequency represented by that circle has at a given sample time. The colors of the circles shift based off of whether the amplitude of the represented frequency has increased or decreased between the previous sample and the current sample. At the start of the visualization, the position of each circle is given by computing the x and y positions on a parametric spiral based off of the frequency parameter.<span>
+				<h3>Convolver Slider</h3>
+				<span>The first slider on the control panel convolves the current audio with one of four preloaded impulse wave responses. Although the audio transitions discretely between these four convolve effects, the visuals transition continuously between four parametric curves.</span>
+				<h3>Playback Slider</h3>
+				<span>The second slider on the control panel adjusts the playback speed of the audio source. Sliding to the right decreases the playback speed, while sliding to the left increases the playback speed. On the visual side, the parametric curve is altered with a scale adjustment: slower playback speeds are accompanied by a larger scale, and vice versa for faster playback speeds.</span>
+				<h3>Pencil Tool</h3>
+				<span>The pencil tool creates a new audio source with a frequency dependent on the position of drawing. The source is a sine oscillator with a frequency provided by the inverse function of the initial parametric curve used to position the frequency circles at the start of the visualization.</span>
+				<h3>Filter Tool</h3>
+				<span>The filter tool adds a lowpass filter to the audio source, with a frequency based off of the position of the center of the filter circle and a quality factor proportional to the radius of the filter circle. A lowpass filter cuts out all filters below a specified frequency.</span>
+				<h3>Color Wheel</h3>
+				<span>The color wheel doesn't change the sound quality in any way, but you have to admit it looks pretty slick.</span>
+			</div>
+		</div>
+		<p></p>
+		</div>
+	</body>
+</html>
diff --git a/soundscene.html b/soundscene.html
@@ -1135,7 +1135,7 @@
 		<div id="information">
 		<span><span style="font-weight:bold">Welcome to Sound Sketch!</span> Play with the sample sound or upload your own mp3 to begin an interactive
 		      music experience. Your sound will provide the visual base for your
-		      sketch, and by playing around with the visuals you will alter your sound! Learn more about this project <a href ="#">here</a>.
+		      sketch, and by playing around with the visuals you will alter your sound! Learn more about this project <a href ="about.html">here</a>.
 			<br></br>
 		      <span style="font-weight:bold">Hint</span>: once the visualization appears, move your mouse to the bottom of the screen to view your controls. </span>
 		</div>