.

Examples/ParkExample.js

@@ -2,7 +2,7 @@
 //  ParkExample.js
 //  Tangle
 //
-//  Created by Bret Victor on 6/10/11.
+//  Created by Bret Victor on 3/10/11.
 //  (c) 2011 Bret Victor.  MIT open-source license.
 //
 

index.html

@@ -23,6 +23,7 @@
     <!-- examples -->
     <script type="text/javascript" src="Examples/CookieExample.js"></script>
     <script type="text/javascript" src="Examples/ParkExample.js"></script>
+    <script type="text/javascript" src="Examples/FilterExample.js"></script>
 
 </head>
 
@@ -158,6 +159,86 @@ <h6>Analysis:</h6>
 </div>
 
 
+
+<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+<!-- filter example -->
+
+<div class="example">
+<div class="exampleTop"></div>
+<div class="exampleCenter">
+<div id="filterExample">
+
+	<p>Below is a simplified digital adaptation of the analog state variable filter.</p>
+
+	<p class="filterSidebar">This topology is particularly useful for embedded audio processing, because <i>F<sub>c</sub></i> (cutoff frequency) and <i>Q</i> (resonance) are controlled by independent coefficients, <i>k<sub>f</sub></i> and <i>k<sub>q</sub></i>.  (With most filters, the coefficients are functions of both parameters, which precludes pre-calculated lookup tables.)</p>
+
+	<div class="filterIndent">
+		<canvas class="FilterStepPlot showOnDrag" data-var="kf kq" style="left:-50px;top:-10px;" width="48" height="64"></canvas>
+		<canvas class="FilterTimePlot showOnDrag" data-var="kf kq" style="left:324px;top:-10px;" width="128" height="64"></canvas>
+
+		<div class="filterDynamicLabel showOnDrag" data-var="kf" data-format="p3" style="left:70px; top:4px;"></div>
+		<div class="filterDynamicLabel showOnDrag" data-var="kf" data-format="p3" style="left:180px; top:4px;"></div>
+		<div class="filterDynamicLabel showOnDrag" data-var="kq" data-format="neg_p3" style="left:71px; top:48px;"></div>
+
+		<img src="Images/FilterSchematic.png" width="325" height="110">
+	</div>
+
+	<p>The coefficients and transfer function are:</p>
+
+	<div class="filterIndent">
+		<div class="filterDynamicCoef showOnDrag" style="left:34px;top:0px;width:70px;height:35px;">
+			<div style="position:relative;top:9px;left:2px;"><span data-var="kf" data-format="p3"></span></div>
+		</div>
+		<div class="filterDynamicCoef showOnDrag" style="left:141px;top:0px;width:40px;height:35px;">
+			<div style="position:relative;top:9px;left:2px;"><span data-var="kq" data-format="p3"></span></div>
+		</div>
+
+		<div class="filterDynamicCoef showOnDrag" style="left:141px;top:46px;width:40px;height:16px;">
+			<div style="position:relative;top:0px;left:2px;"><span data-var="b0" data-format="p3"></span></div>
+		</div>
+		<div class="filterDynamicCoef showOnDrag" style="left:72px;top:67px;width:91px;height:16px;">
+			<div style="position:relative;top:0px;left:58px;"><span data-var="a1neg" data-format="p3"></span></div>
+		</div>
+		<div class="filterDynamicCoef showOnDrag" style="left:196px;top:67px;width:56px;height:16px;">
+			<div style="position:relative;top:0px;left:22px;"><span data-var="a2" data-format="p3"></span></div>
+		</div>
+
+		<canvas class="FilterPolePlot showOnDrag" data-var="pole1Real pole1Imag pole2Real pole2Imag" 
+		        width="160" height="160" style="left:276px;top:-36px;"></canvas>
+
+		<img src="Images/FilterEquations.png" width="281" height="92">
+	</div>
+
+
+	<p>Some example frequency responses:</p>
+
+	<div class="filterIndent" style="position:relative;">
+		<div class="filterFreqPlot">
+			<canvas class="FilterFreqPlot" data-var="kf1 kq1" width="256" height="128"></canvas>
+			<div class="FilterKnob" data-var="fc1 q1"></div>
+			<div class="filterParams" style="left:5px;top:0px;">
+				<i>F<sub>c</sub></i> = <span data-var="fc1" data-format="freq"></span><br>
+				<i>Q</i> = <span data-var="q1" data-format="p2"></span>
+			</div>
+			<div class="filterUnstable TKIf" data-var="unstable1">Unstable</div>
+		</div>
+		<div class="filterFreqPlot" style="position:absolute; top:0px; left:274px;">
+			<canvas class="FilterFreqPlot" data-var="kf2 kq2" width="256" height="128"></canvas>
+			<div class="FilterKnob" data-var="fc2 q2"></div>
+			<div class="filterParams" style="left:5px;top:0px;">
+				<i>F<sub>c</sub></i> = <span data-var="fc2" data-format="freq"></span><br>
+				<i>Q</i> = <span data-var="q2" data-format="p2"></span>
+			</div>
+			<div class="filterUnstable TKIf" data-var="unstable2">Unstable</div>
+		</div>
+	</div>
+
+</div>
+</div>
+<div class="exampleBottom"></div>
+</div>
+
+
 </div> <!-- body -->
 
 

style.css

@@ -270,15 +270,10 @@ h6 {
 	position:relative;
 	font: 13px "Times New Roman", "Times", serif;
 	color: #111;
-	padding-left:20px;
 	margin-left:0px;
-	border: 1px solid #aaa;
 	margin-top:20px;
 	margin-bottom:20px;
 	width:598px;
-	-webkit-box-shadow:0px 4px 8px rgba(0,0,0,0.4);
-	-moz-box-shadow:0px 4px 8px rgba(0,0,0,0.4);
-	box-shadow:0px 4px 8px rgba(0,0,0,0.4);
 }
 
 #filterExample p {
@@ -327,29 +322,22 @@ h6 {
 	display:none;
 }
 
-.v_stepPlot {
+.FilterStepPlot {
 	position:absolute;
 	display:none;
 }
 
-.v_timePlot {
+.FilterTimePlot {
 	position:absolute;
 	display:none;
 }
 
-.v_polePlot {
+.FilterPolePlot {
 	position:absolute;
 	display:none;
 }
 
-.v_audioPlayer {
-	width:1px;
-	height:1px;
-	margin:0;
-	padding:0;
-}
-
-.filterFreqPlot canvas {
+.filterFreqPlot {
 	position:relative;
 	width:256px;
 	height:128px;
@@ -374,7 +362,7 @@ h6 {
 	pointer-events:none;
 }
 
-.c_filterKnobHelp {
+.FilterKnobHelp {
 	position:absolute;
 	display:none;
 	left:0px;
@@ -385,17 +373,6 @@ h6 {
 	pointer-events:none;
 }
 
-#filterAudioSwitch {
-	background-image:url(Media/FilterRockOff.png);
-	width:166px;
-	height:34px;
-	margin-left:30px;
-	margin-right:24px;
-	margin-top:6px;
-	cursor:pointer;
-	float:left;
-}
-
 .cursorDrag {
 	cursor: pointer;
 	cursor: move;