title: Stereo Panner
---
-<h2>Stereo Panner</h2>
+<p>
+The default stereo panner distributes 2 inputs to 2 outputs. Its
+behaviour is controlled by two parameters, width and position. The
+default settings for the stereo panner
+are width=100%>, position=center (L=50%,
+R=50%). This panner assumes that you have 2 uncorrelated,
+independent signals that you wish to distribute to two outputs.
+</p>
+<div class="well">
+<p>
+ With the default values it is not possible to alter the position,
+ since the width is already spread entirely across both outputs. To
+ alter the position, you must first reduce the width.
+</p>
+</div>
+<h2>Stereo Panner User Interface</h2>
+
+<img src="/images/stereo-panner-annotated.png" alt=""/>
+
+<p>
+ The panner user interface consists of 3 elements, divided between
+ the top and bottom half. Click and/or drag in the top half to
+ control position; click and/or drag in the bottom half to control
+ width (see below for details).
<p>
-The stereo panner distributes 2 inputs to 2 outputs. Its behaviour is
-controlled by two parameters, <code>width</code>
-and <code>position</code> (the latter could also be referred to as
-"direction", or "azimuth" without loss of accuracy).
+<p>
+ In the top half is the position indicator, which shows where the
+ center of the stereo image is relative to the left and right
+ edges. When this is the middle of the panner, the stereo image is
+ centered between the left and right outputs. When it all the way to
+ the left, the stereo image collapses to just the left speaker.
+</p>
+<p>
+ In the bottom half are two signal indicators, one marked "L" and the
+ other "R". The distance between these two shows the width of the
+ stereo image. If the width is reduced to zero, there will only be a
+ single signal indicator marked "M" (for mono), and whose color will
+ change to indicate the special state.
</p>
<p>
-The default settings for the stereo panner
-are <code>width=100%</code>, <code>position=center</code>. With these
-values it is not possible to alter the position, since the width is
-already spread entirely across both outputs. To alter the position,
-you must first reduce the width.
+ It is possible to invert the outputs (see below) so that whatever
+ would have gone to the right channel goes to the left and vice
+ versa. When this happens, the entire movable part of the panner
+ changes color to indicate clearly that this is the case.
</p>
-<h4>Using the mouse</h4>
+<h3>Position vs. L/R</h3>
+
+<p>
+ Although the implementation of the panner uses the "position"
+ parameter, when the user interface displays it numerically, it shows a pair of numbers that
+ will be familiar to most audio engineers.
+</p>
+
+<table>
+<tr><th>Position</th><th>L/R</th><th>English</th></tr>
+<tr><td>0</td><td>L=50% R=50%</td><td>signal image is midway between
+ left and right speakers</td></tr>
+
+<tr><td>-1</td><td>L=100% R=0%</td><td>signal image is entirely
+ at the left speaker </td></tr>
+
+<tr><td>1</td><td>L=0% R=100%</td><td>signal image is entirely
+ at the right speaker</td></tr>
+</table>
+
+<p>
+One way to remember this sort of convention is that the middle of the
+USA is not Kansas, but "Los Angeles: 50% New York: 50%".
+</p>
+
+<h2>Examples In Use</h2>
+
+<table>
+<tr><th>Appearance</th><th>Settings</th></tr>
+<tr><td><img src="/images/stereo-panner.png"></td><td>Width=100%,
+ L=50 R=50</td></tr>
+<tr><td><img src="/images/stereo-panner-zero.png"></td><td>Width=0%,
+ L=50 R=50</td></tr>
+<tr><td><img src="/images/stereo-panner-inverted.png"></td><td>Width=-100%, Position = 0 (center)</td></tr>
+<tr><td><img src="/images/stereo-panner-right.png"></td><td>Width=36%,
+ L=44 R=56</td></tr>
+<tr><td><img src="/images/stereo-panner-hard-right.png"></td><td>Width=0%,
+ L=0 R=100</td></tr>
+</table>
+
+<h2>Using the mouse</h2>
<p>Mouse operations in the upper half of the panner adjust the position
parameter, constrained by the current width setting.
parameter, constrained by the current position setting.
</p>
-
<p>To change the position smoothly, press the right button and drag
within the top half of the panner, then release. The position will
- be limited by the current width setting.
+ be limited by the current width setting. <em>Note: you do not need
+ to grab the position indicator in order to drag</em>
</p>
<p>To change the width smoothly, press the right button and drag
within the lower half of the panner, then release. The width will be
- limited by the current position setting.
+ limited by the current position setting.<em>Note: you do not need to
+ grab the L/R indicators in order to drag</em>
</p>
<dl class="faq">
<dt>Reset to defaults</dt>
-<dd>Click <key class="mod3">button 1</key></dd>
+<dd>Click <key class="mod3">right button</key></dd>
<dt>Change to a "hard left"</dt>
-<dd>Double click <key class="mod1">button 1</key> in the upper left half
+<dd>Double click <key class="mod2">right button</key> in the upper left half
of the panner</dd>
<dt>Change to a "hard right"</dt>
-<dd>Double click <key class="mod1">button 1</key> in the upper right half
+<dd>Double click <key class="mod2">right button</key> in the upper right half
of the panner</dd>
<dt>Move position as far left as possible, given width</dt>
-<dd>Double click <key>button 1</key> in the upper left half of the
+<dd>Double click <key>right button</key> in the upper left half of the
panner</dd>
<dt>Move position as far right as possible, given width</dt>
-<dd>Double click <key>button 1</key> in the upper right half of the
+<dd>Double click <key>right button</key> in the upper right half of the
panner</dd>
<dt>Set the position to center</dt>
-<dd>Click <key>button 1</key> in the upper middle of the panner</dd>
+<dd>Click <key>right button</key> in the upper middle of the panner</dd>
-<dt>Reset width to 180° (100%)</dt>
-<dd>Double click <key>button 1</key> on the lower left side</dd>
+<dt>Reset to maximum possible width</dt>
+<dd>Double click <key>right button</key> on the lower left side</dd>
-<dt>Reset width to -180° (inverted 100%)</dt>
-<dd>Double click <key>button 1</key> on the lower right side</dd>
+<dt>Invert (flip channel assignments)</dt>
+<dd>Double click <key>right button</key> on the lower right side</dd>
<dt>Set width to 0°</dt>
-<dd>Double click <key>button 1</key> in the lower middle</dd>
+<dd>Double click <key>right button</key> in the lower middle</dd>
</dl>
<h4>Keyboard bindings</h4>
keybindings are available to operate on that panner:
<dl>
-<dt><key>↑</key></dt>
-<dd>increase width by 1°</dd>
-<dt><key class="mod1">↑</key></dt>
-<dd>increase width by 5°</dd>
-<dt><key>↓</key></dt>
-<dd>decrease width by 1°</dd>
-<dt><key class="mod1">↓</key></dt>
-<dd>decrease width by 5°</dd>
-<dt><key class="mod2">↑</key></dt>
-<dd>reset width to 180° (100%)</dd>
-<dt><key>←</key></dt>
-<dd>move position 1° to the left</dd>
-<dt><key>→</key></dt>
-<dd>move position 1° to the right</dd>
-<dt><key>0</key></dt>
-<dd>reset position to center</dd>
+ <dt><key>↑</key> / <key class="mod1">↑</key></dt>
+ <dd>increase width by 1° / 5°</dd>
+ <dt><key>↓</key> / <key class="mod1">↓</key></dt>
+ <dd>decrease width by 1° / 5°</dd>
+ <dt><key>←</key> / <key class="mod1">←</key></dt>
+ <dd>move position 1° / 5° to the left</dd>
+ <dt><key>→</key> / <key class="mod1">→</key></dt>
+ <dd>move position 1° / 5° to the right</dd>
+ <dt><key>0</key></dt>
+ <dd>reset position to center</dd>
+ <dt><key class="mod2">↑</key></dt>
+ <dd>reset width to 180° (100%)</dd>
</dl>
-<h4>Using the scroll wheel</h4>
+<h4>Using the scroll wheel/touch scroll</h4>
When the pointer is within a stereo panner user interface, the scroll
wheel may be used as follows:
<dl>
-<dt>scroll left</dt>
-<dd>increase width by 1°</dd>
-
-<dt><key class="mod1">scroll left</key></dt>
-<dd>increase width by 5°</dd>
-
-<dt>scroll left</dt>
-<dd>decrease width by 1°</dd>
+<dt>left / <key class="mod1">left</key></dt>
+<dd>increase width by 1° / 5°</dd>
-<dt><key class="mod1">scroll left<key></dt>
-<dd>decrease width by 5°</dd>
+<dt>right / <key class="mod1">right</key></dt>
+<dd>decrease width by 1° / 5°</dd>
-<dt>scroll up</dt>
-<dd>move position 1° to the right</dd>
+<dt>up / <key class="mod1">up</key></dt>
+<dd>move position 1° / 5° to the left</dd>
-<dt>scroll down</dt>
-<dd>move position 1° to the right</dd>
+<dt>down / <key class="mod1">down</key></dt>
+<dd>move position 1° / 5°to the right</dd>
</dl>
+++ /dev/null
----
-layout: default
-title: Stereo Panner
----
-
-<h2>Panning</h2>
-
-<h3>Stereo Panner</h3>
-
-<p>
-The stereo panner distributes 2 inputs to 2 outputs. Its behaviour is
-controlled by two parameters, <code>width</code>
-and <code>position</code> (the latter could also be referred to as
-"direction", or "azimuth" without loss of accuracy).
-</p>
-
-<p>
-The default settings for the stereo panner
-are <code>width=100%</code>, <code>position=center</code>. With these
-values it is not possible to alter the position, since the width is
-already spread entirely across both outputs. To alter the position,
-you must first reduce the width.
-</p>
-
-<h4>Using the mouse</h4>
-
-<p>Mouse operations in the upper half of the panner adjust the position
- parameter, constrained by the current width setting.
-</p>
-
-<p>Mouse operations in the lower half of the panner adjust the width
- parameter, constrained by the current position setting.
-</p>
-
-
-<p>To change the position smoothly, press the right button and drag
- within the top half of the panner, then release. The position will
- be limited by the current width setting.
-</p>
-
-<p>To change the width smoothly, press the right button and drag
- within the lower half of the panner, then release. The width will be
- limited by the current position setting.
-</p>
-
-<dl class="faq">
-
-<dt>Reset to defaults</dt>
-<dd>Click <key class="mod3">button 1</key></dd>
-
-<dt>Change to a "hard left"</dt>
-<dd>Double click <key class="mod1">button 1</key> in the upper left half
- of the panner</dd>
-
-<dt>Change to a "hard right"</dt>
-<dd>Double click <key class="mod1">button 1</key> in the upper right half
- of the panner</dd>
-
-<dt>Move position as far left as possible, given width</dt>
-<dd>Double click <key>button 1</key> in the upper left half of the
- panner</dd>
-
-<dt>Move position as far right as possible, given width</dt>
-<dd>Double click <key>button 1</key> in the upper right half of the
- panner</dd>
-
-<dt>Set the position to center</dt>
-<dd>Click <key>button 1</key> in the upper middle of the panner</dd>
-
-<dt>Reset width to 180° (100%)</dt>
-<dd>Double click <key>button 1</key> on the lower left side</dd>
-
-<dt>Reset width to -180° (inverted 100%)</dt>
-<dd>Double click <key>button 1</key> on the lower right side</dd>
-
-<dt>Set width to 0°</dt>
-<dd>Double click <key>button 1</key> in the lower middle</dd>
-</dl>
-
-<h4>Keyboard bindings</h4>
-
-When the pointer is within a stereo panner user interface, the following
-keybindings are available to operate on that panner:
-
-<dl>
-<dt><key>↑</key></dt>
-<dd>increase width by 1°</dd>
-<dt><key class="mod1">↑</key></dt>
-<dd>increase width by 5°</dd>
-<dt><key>↓</key></dt>
-<dd>decrease width by 1°</dd>
-<dt><key class="mod1">↓</key></dt>
-<dd>decrease width by 5°</dd>
-<dt><key class="mod2">↑</key></dt>
-<dd>reset width to 180° (100%)</dd>
-<dt><key>←</key></dt>
-<dd>move position 1° to the left</dd>
-<dt><key>→</key></dt>
-<dd>move position 1° to the right</dd>
-<dt><key>0</key></dt>
-<dd>reset position to center</dd>
-</dl>
-
-<h4>Using the scroll wheel</h4>
-
-When the pointer is within a stereo panner user interface, the scroll
-wheel may be used as follows:
-
-<dl>
-<dt>scroll left</dt>
-<dd>increase width by 1°</dd>
-
-<dt><key class="mod1">scroll left</key></dt>
-<dd>increase width by 5°</dd>
-
-<dt>scroll left</dt>
-<dd>decrease width by 1°</dd>
-
-<dt><key class="mod1">scroll left<key></dt>
-<dd>decrease width by 5°</dd>
-
-<dt>scroll up</dt>
-<dd>move position 1° to the right</dd>
-
-<dt>scroll down</dt>
-<dd>move position 1° to the right</dd>
-</dl>