<!DOCTYPE html>
<html>
<head>
<title>Zebra Rate Calculator by Andre Loker</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
body{font:.85em verdana,helvetica,sans-serif;background:#fff;color:#232323}a:visited,a:link,a:active,a{color:#c44}a:hover{color:#f44}.myslider{margin:10px 0}input[type="text"]{width:5em;text-align:right}label,.tmplCont{clear:both}label{display:block;width:12em;text-align:right;margin:0 0.4em}.col,label,.tmpl{float:left}.col{width:47%;margin:0 1%}dt{font-style:italic}dd{margin-bottom:1em}.footnotes,.tmplCont,.credits,.toggleLink{font-size:80%}.tmplCont{display:none;margin-left:20px}.tmpl{list-style-type:none;margin:10px}.tmpl,.tmpl li{padding:0}.tmpl li{margin:0}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>
Zebra Rate Calculator</h1>
<div class="col">
<div id="knobSlider" class="myslider"></div>
<div><label for="knobValue">Knob value</label><input type='text' id="knobValue" /></div>
</div>
<div class="col">
<div id="freqSlider" class="myslider">
</div>
<div>
<p><label for="togglePerc">Use percentages</label><input type="checkbox" id="togglePerc"/></p>
<label for="knobValue">Speed scaling factor</label><input type='text' id="freqValue" /><span id="freqInfo">x</span>
<a href="" id="toggleTmplS" class="toggleLink" >Toggle templates</a>
<div class="tmplCont" id="tmplS" >
<ul class="tmpl">
<li><a href="" class="tmplS">1/1<input type="hidden" value="1" /></a></li>
<li><a href="" class="tmplS">2/1<input type="hidden" value="2" /></a></li>
</ul><ul class="tmpl">
<li><a href="" class="tmplS">1/2<input type="hidden" value="0.5" /></a></li>
<li><a href="" class="tmplS">3/2<input type="hidden" value="1.5" /></a></li>
</ul><ul class="tmpl">
<li><a href="" class="tmplS">1/3<input type="hidden" value="0.333333333333333" /></a></li>
<li><a href="" class="tmplS">2/3<input type="hidden" value="0.666666666666667" /></a></li>
<li><a href="" class="tmplS">4/3<input type="hidden" value="1.33333333333333" /></a></li>
<li><a href="" class="tmplS">5/3<input type="hidden" value="1.66666666666667" /></a></li>
</ul><ul class="tmpl">
<li><a href="" class="tmplS">1/4<input type="hidden" value="0.25" /></a></li>
<li><a href="" class="tmplS">2/4<input type="hidden" value="0.5" /></a></li>
<li><a href="" class="tmplS">3/4<input type="hidden" value="0.75" /></a></li>
<li><a href="" class="tmplS">5/4<input type="hidden" value="1.25" /></a></li>
<li><a href="" class="tmplS">6/4<input type="hidden" value="1.5" /></a></li>
<li><a href="" class="tmplS">7/4<input type="hidden" value="1.75" /></a></li>
</ul><ul class="tmpl">
<li><a href="" class="tmplS">1/5<input type="hidden" value="0.2" /></a></li>
<li><a href="" class="tmplS">2/5<input type="hidden" value="0.4" /></a></li>
<li><a href="" class="tmplS">3/5<input type="hidden" value="0.6" /></a></li>
<li><a href="" class="tmplS">4/5<input type="hidden" value="0.8" /></a></li>
<li><a href="" class="tmplS">6/5<input type="hidden" value="1.2" /></a></li>
<li><a href="" class="tmplS">7/5<input type="hidden" value="1.4" /></a></li>
<li><a href="" class="tmplS">8/5<input type="hidden" value="1.6" /></a></li>
<li><a href="" class="tmplS">9/5<input type="hidden" value="1.8" /></a></li>
</ul><ul class="tmpl">
<li><a href="" class="tmplS">1/6<input type="hidden" value="0.166666666666667" /></a></li>
<li><a href="" class="tmplS">5/6<input type="hidden" value="0.833333333333333" /></a></li>
<li><a href="" class="tmplS">7/6<input type="hidden" value="1.16666666666667" /></a></li>
<li><a href="" class="tmplS">11/6<input type="hidden" value="1.83333333333333" /></a></li>
</ul><ul class="tmpl">
<li><a href="" class="tmplS">1/8<input type="hidden" value="0.125" /></a></li>
<li><a href="" class="tmplS">3/8<input type="hidden" value="0.375" /></a></li>
<li><a href="" class="tmplS">5/8<input type="hidden" value="0.625" /></a></li>
<li><a href="" class="tmplS">7/8<input type="hidden" value="0.875" /></a></li>
<li><a href="" class="tmplS">9/8<input type="hidden" value="1.125" /></a></li>
<li><a href="" class="tmplS">11/8<input type="hidden" value="1.375" /></a></li>
<li><a href="" class="tmplS">13/8<input type="hidden" value="1.625" /></a></li>
<li><a href="" class="tmplS">15/8<input type="hidden" value="1.875" /></a></li>
</ul></div>
</div>
<div style="clear: both;">
<label for="knobValue">Duration scaling factor</label><input type='text' id="durValue" /><span id="durInfo">x</span>
<a href="" id="toggleTmplD" class="toggleLink" >Toggle templates</a>
<div class="tmplCont" id="tmplD" >
<ul class="tmpl">
<li><a href="" class="tmplD">1/1<input type="hidden" value="1" /></a></li>
<li><a href="" class="tmplD">2/1<input type="hidden" value="2" /></a></li>
</ul><ul class="tmpl">
<li><a href="" class="tmplD">1/2<input type="hidden" value="0.5" /></a></li>
<li><a href="" class="tmplD">3/2<input type="hidden" value="1.5" /></a></li>
</ul><ul class="tmpl">
<li><a href="" class="tmplD">1/3<input type="hidden" value="0.333333333333333" /></a></li>
<li><a href="" class="tmplD">2/3<input type="hidden" value="0.666666666666667" /></a></li>
<li><a href="" class="tmplD">4/3<input type="hidden" value="1.33333333333333" /></a></li>
<li><a href="" class="tmplD">5/3<input type="hidden" value="1.66666666666667" /></a></li>
</ul><ul class="tmpl">
<li><a href="" class="tmplD">1/4<input type="hidden" value="0.25" /></a></li>
<li><a href="" class="tmplD">2/4<input type="hidden" value="0.5" /></a></li>
<li><a href="" class="tmplD">3/4<input type="hidden" value="0.75" /></a></li>
<li><a href="" class="tmplD">5/4<input type="hidden" value="1.25" /></a></li>
<li><a href="" class="tmplD">6/4<input type="hidden" value="1.5" /></a></li>
<li><a href="" class="tmplD">7/4<input type="hidden" value="1.75" /></a></li>
</ul><ul class="tmpl">
<li><a href="" class="tmplD">1/5<input type="hidden" value="0.2" /></a></li>
<li><a href="" class="tmplD">2/5<input type="hidden" value="0.4" /></a></li>
<li><a href="" class="tmplD">3/5<input type="hidden" value="0.6" /></a></li>
<li><a href="" class="tmplD">4/5<input type="hidden" value="0.8" /></a></li>
<li><a href="" class="tmplD">6/5<input type="hidden" value="1.2" /></a></li>
<li><a href="" class="tmplD">7/5<input type="hidden" value="1.4" /></a></li>
<li><a href="" class="tmplD">8/5<input type="hidden" value="1.6" /></a></li>
<li><a href="" class="tmplD">9/5<input type="hidden" value="1.8" /></a></li>
</ul><ul class="tmpl">
<li><a href="" class="tmplD">1/6<input type="hidden" value="0.166666666666667" /></a></li>
<li><a href="" class="tmplD">5/6<input type="hidden" value="0.833333333333333" /></a></li>
<li><a href="" class="tmplD">7/6<input type="hidden" value="1.16666666666667" /></a></li>
<li><a href="" class="tmplD">11/6<input type="hidden" value="1.83333333333333" /></a></li>
</ul><ul class="tmpl">
<li><a href="" class="tmplD">1/8<input type="hidden" value="0.125" /></a></li>
<li><a href="" class="tmplD">3/8<input type="hidden" value="0.375" /></a></li>
<li><a href="" class="tmplD">5/8<input type="hidden" value="0.625" /></a></li>
<li><a href="" class="tmplD">7/8<input type="hidden" value="0.875" /></a></li>
<li><a href="" class="tmplD">9/8<input type="hidden" value="1.125" /></a></li>
<li><a href="" class="tmplD">11/8<input type="hidden" value="1.375" /></a></li>
<li><a href="" class="tmplD">13/8<input type="hidden" value="1.625" /></a></li>
<li><a href="" class="tmplD">15/8<input type="hidden" value="1.875" /></a></li>
</ul></div>
</div>
</div>
<p><a id="toggle" class="toggleLink" href="">Toggle manual and information</a></p>
<div id="info" style="display: none;">
<h2>
Manual</h2>
<p>
This tool calculates how the "Rate" knob found on the LFOs and global LFOs affects
the frequency/duration<sup><a href="#foot-1">[1]</a></sup> of the LFO cycles in
U-HE's magnificent <a href="http://www.u-he.com/cms/zebra">Zebra</a> software synthesizer.
The idea came to me when I read <a href="http://www.kvraudio.com/forum/viewtopic.php?t=318470">
this thread at kvraudio.com</a>.
</p>
<p>
Note: the Rate knob scales the speed of the LFO relative to the value set for the
"Sync" parameter. E.g. if you set the "Sync" value to 10s (10 seconds), a Rate value
of 100 - the neutral setting - means that one cycle of the LFO takes 10 seconds.
A Rate value of 200 (the maximum, which is a speed scaling factor of 8.0) will cause
the LFO to run 8 times faster (that is, each cycle takes only 1.25 seconds). A Rate
value of 50 corresponds to a speed scaling factor of 0.125, ie. each cycles takes
eight times as long (80 seconds).</p>
<p>
Basically, this tool answers three questions:</p>
<dl>
<dt>What is the speed/duration scaling factor for a given knob value?</dt>
<dd>
Use the slider on the left hand side to set the knob value or enter the value directly
in the text box next to "Knob value". The text boxes on the left now show how much
the speed and the duration of the cycle respectively affect the base value (the
"Sync" parameter).
<br />
<strong>Example</strong>: you want to know what the speed/duration scaling factor
is for the knob value "150". Set the knob value to "150". The "Speed scaling factor"
value is 3.375, that is, the frequency is actually 3.375 times faster than the "Sync"
value. Likewise, the duration of one LFO cycle is scaled by 0.296, ie. each LFO
cycle takes only 29.6% of the time of the base value.</dd>
<dt>Whats is the knob value for a given speed relative to the base value?</dt>
<dd>
Use the slider on the right side to set the "Speed scaling factor" value or enter
the value directly in the corresponding text box. The "Knob value" text box on the
left hand side now shows the value you need the "Rate" knob to.
<br />
<strong>Example</strong>: you want the LFO to go 50% faster than the "Sync" value.
Set "Speed scaling factor" to 1.5 (1.5 times faster than sync value). The "Knob
value" shows 114.471, so set the Rate knob to 114.47 to achieve a (roughly) 50%
speed up.</dd>
<dt>Whats is the knob value for a given duration relative to the base value?</dt>
<dd>
Use the slider on the right side to set the "Duration scaling factor" value or enter
the value directly in the corresponding text box. The "Knob value" text box on the
left hand side now shows the value you need to set the "Rate" knob to.
<br />
<strong>Example</strong>: you want the LFO to take 3/4 of the time of the sync value.
Set "Duration scaling factor" to 0.75. The "Knob value" shows 110.064, so set the
Rate knob to 110.064 to make one LFO cycle last roughly 3/4 of the time of the base
value.</dd>
</dl>
<h2>
The formula</h2>
<p>
The relationship between the knob value and the actual speed scaling factor is as
follows:</p>
<p>
<code>SpeedScale = (KnobValue/100) ^ 3 </code><em>(ie. the cube of a hundredth of the
knob value)</em></p>
<p>
-- or respectively --</p>
<p>
<code>KnobValue = 100 * SpeedScale ^ (1/3) </code><em>(ie. 100 times the cube root of
the speed scaling factor)</em></p>
<p>
Where <code>KnobValue</code> is the value of the Rate knob and <code>SpeedScale</code>
is the scaling factor of the LFO frequency.</p>
<p>
NB: <code>SpeedScale</code> can be replaced by <code>(1/DurationScale)</code> (where
<code>DurationScale</code> is the duration scaling factor applied to the duration
of the cycles of the LFO) if necessary.</p>
<h2>
Credits and Licence</h2>
<p>
This tool was originally developed by <a href="http://andreloker.de">Andre Loker</a>
and is provided as-is without any express or implied warranties. Use at own risk.
You may copy the code of this website and use it for your own purposes in its original
or in modified form. Attribution of the original author (Andre Loker) is highly
appreciated but not strictly necessary.
</p>
<div class="footnotes">
<p id="foot-1">
<sup>[1]</sup> We use the term "speed" for an LFO's frequency (cycles per second)
and the term "duration" for its period (duration of one cycle) in this text. Frequency
and period of a wave are closely related. The frequency is the inverse of the period
(and vice versa): if the frequency is F, the period is 1/F.
</p>
</div>
</div>
<p class="credits">
Created by Andre Loker. <a href="http://u-he.com/cms/zebra">Zebra</a> is a product
of <a href="http://u-he.com">u-he</a>.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript">
function knobToSpeed(value) {
return Math.pow(value / 100.0, 3.0);
}
function speedToKnob(value) {
return 100.0 * Math.pow(value, 1.0 / 3.0);
}
var SLIDER_SCALE = 100.0;
var KNOB_MIN = 5.0;
var KNOB_MAX = 200.0;
var SPEED_MIN = knobToSpeed(KNOB_MIN);
var SPEED_MAX = knobToSpeed(KNOB_MAX);
var DUR_MIN = 1.0 / SPEED_MAX;
var DUR_MAX = 1.0 / SPEED_MIN;
var model = {
knob: 100.0,
speed: 1.0,
duration: 1.0,
uiScale: 1.0
};
function round(value) {
var ROUNDING = 1000.0;
return Math.floor((value * ROUNDING) + 0.5) / ROUNDING;
}
function updateGui() {
$("#knobSlider").slider('option', 'value', model.knob * SLIDER_SCALE);
$("#freqSlider").slider('option', 'value', model.speed * SLIDER_SCALE);
$("#knobValue").val(round(model.knob));
$("#freqValue").val(round(model.speed * model.uiScale));
$("#durValue").val(round(model.duration * model.uiScale));
}
function updateFromKnob(value) {
value = Math.min(KNOB_MAX, Math.max(KNOB_MIN, value));
model.knob = value;
model.speed = knobToSpeed(value);
model.duration = 1.0 / model.speed;
updateGui();
}
function updateFromSpeed(value) {
value = Math.min(SPEED_MAX, Math.max(SPEED_MIN, value));
model.knob = speedToKnob(value);
model.speed = value;
model.duration = 1.0 / model.speed;
updateGui();
}
function updateFromDuration(value) {
value = Math.min(DUR_MAX, Math.max(DUR_MIN, value));
var speed = 1.0 / value;
model.knob = speedToKnob(speed);
model.speed = speed;
model.duration = value;
updateGui();
}
function getFloatValue(id) {
var parsed = parseFloat($(id).val());
if (isNaN(parsed)) {
alert('Enter a number');
$(id).select().focus();
return NaN;
}
return parsed / model.uiScale;
}
function getTemplateValue(link) {
return $(link).children("input").val();
}
$(function () {
$("#togglePerc").change(function (e) {
var checked = $(this).is(":checked");
model.uiScale = checked ? 100.0 : 1.0;
$("#durInfo, #freqInfo").html(checked?'%':'x');
updateGui();
});
$(".tmplD").click(function (e) {
e.preventDefault();
var val = getTemplateValue(this);
updateFromDuration(val);
});
$(".tmplS").click(function (e) {
e.preventDefault();
var val = getTemplateValue(this);
updateFromSpeed(val);
});
$("#toggleTmplD").click(function (e) {
e.preventDefault();
$("#tmplD").toggle();
$("#tmplS").hide();
});
$("#toggleTmplS").click(function (e) {
e.preventDefault();
$("#tmplS").toggle();
$("#tmplD").hide();
});
$("#knobSlider").slider({
max: KNOB_MAX * SLIDER_SCALE,
min: KNOB_MIN * SLIDER_SCALE,
slide: function (event, ui) { updateFromKnob(ui.value / SLIDER_SCALE); }
});
$("#freqSlider").slider({
max: SPEED_MAX * SLIDER_SCALE,
min: SPEED_MIN * SLIDER_SCALE,
slide: function (event, ui) { updateFromSpeed(ui.value / SLIDER_SCALE); }
});
$("#freqValue").change(function () {
var value = getFloatValue(this);
if (!isNaN(value)) {
updateFromSpeed(value);
}
});
$("#knobValue").change(function () {
var value = getFloatValue(this);
if (!isNaN(value)) {
updateFromKnob(value);
}
});
$("#durValue").change(function () {
var value = getFloatValue(this);
if (!isNaN(value)) {
updateFromDuration(value);
}
});
$("#toggle").click(function (e) {
e.preventDefault();
$("#info").toggle();
});
$("#info").hide();
updateGui();
});
</script>
</body>
</html>