PDA

View Full Version : nScale:

codegoboom
10-21-2004, 03:51 AM
For moving/resizing stuff with a gliding effect, or whatever...

<html>
<title>nScale</title>
<script type="text/javascript">

function nScale(integer, profile)
{
var n, a, u, excess, i = ii = 0, negative = integer < 0;

integer = Math.floor(Math.abs(integer));

return {ascend:ascend, descend:descend, plateau:plateau}[profile]();

function ascend(){
return scale(integer);}

function descend(){
return scale(integer).reverse();}

function plateau()
{
a = scale(Math.round(integer / 2)).concat(a.slice().reverse());
if(ii * 2 > integer)
{
n = Math.round(a.length / 2);
while(a[n + 1] == a[n])
++n;
if(!(a[n] += (negative ? 1 : -1)))
a.splice(n, 1);
}
return a;
}

function scale(num)
{
a = [];
while(ii < num)
{
ii += ++i;
a.push(i);
}
if(ii > num)
{
excess = ii - num;
ii -= excess;
n = a.length - 1;
while(excess)
{
u = --n;
while(a[u + 1])
{
if(excess)
{
a[u + 1] -= 1;
--excess;
}
else
break;
++u;
}
}
}
if(negative)
{
n = a.length;
while(n--)
a[n] = -a[n];
}
return a;
}
}

</script>

<style>
body{margin:2px;}
form{text-align:center;white-space:nowrap;
border:solid 1px graytext;background:buttonface;
input{text-align:center;vertical-align:middle;}
select{vertical-align:middle;}
div{margin-top:1em;margin-bottom:1em;}
label{font-size:small;font-family:caption;}
.info{font-weight:bold;border:solid 1px graytext;
border-bottom:0px;background:infobackground;
.box{font-size:1px;border:solid 1px red;background:black;
width:15px;height:15px;position:relative;bottom:0;
left:0;margin:0;}

<body>
<dl style="margin-bottom:0">
<dt>
<span style="font-size:large;font-weight:bold">nScale</span>
</dt>
<dd>
The function returns a graded array from an integer.
</dd>
</dl>
<div style="margin-bottom:1em;margin-top:0;text-align:left">
<code>var myArray = nScale(integer,'profile');</code>
</div>
<label class="info">test:</label>
<form name="test">
<fieldset>
<legend>output</legend>
<div>
<div>
<label>array sum: </label>
</div>
</fieldset>
<fieldset>
<legend>input</legend>
<div>
<label>integer: </label>
<input name="num" size="8" value="-112">
<input name="run" type="button" value="enter"
onclick="test_nScale(form, +num.value, funcall.options[funcall.selectedIndex].text)">
<select size="3" name="funcall" onchange="if(cb.checked) run.click()">
<option>ascend</option>
<option selected>descend</option>
<option>plateau</option>
</select>
<input type="checkbox" checked name="cb" onclick="funcall.onchange()" style="vertical-align:top">
<label style="vertical-align:top;font-size:xx-small">onchange</label>
</div>
</fieldset>
<div style="text-align:left;margin-bottom:0">
<label class="info">use:</label>
</div>
<div style="text-align:left;margin-top:0;border:1px solid graytext;background:white">
<div id="mover" class="box"></div>
</div>
<select name="example" onchange="if(cx.checked) exfun.click()">
<option>ascend</option>
<option selected>descend</option>
<option>plateau</option>
</select>
<input type="checkbox" name="cx" checked style="vertical-align:top">
<label style="vertical-align:top;font-size:xx-small">onchange</label>
<input name="exfun" type="button" value ="toggle-l/r"
onclick="toggleH(document.getElementById('mover'), example.options[example.selectedIndex].text)">
</form>
<script type="text/javascript">

// test thing...
function test_nScale(outputTest,integer,profile)
{
var a = nScale(integer,profile);
outputTest.output.value = a;
outputTest.tot.value = (function()
{
var n = 0;
while(a.length)
n += a.shift();
return n;
})();
}

// demo thing...
var timeout, left = false;
function toggleH(el, prof)
{
clearTimeout(timeout);
var eStyle = el.style;
var n = (eStyle.left ? parseInt(eStyle.left) : el.offsetLeft);
var extent = (left ? 0 : el.parentNode.offsetWidth - el.offsetWidth - 2);
left = !left;
var x = extent - n;
if(x)
{
var scale = nScale(x, prof);
function repeat()
{
if(scale.length)
{
n += scale.shift();
eStyle.left = n + "px";
timeout = setTimeout(repeat, 15);
}
}
repeat();
}
}
</script>
</body>
</html>

codegoboom
10-23-2004, 11:55 AM
I just thought to add relevant keywords for those searching:

tween tweening easing motion velocity acceleration deceleration animation setTimeout setInterval rube-goldberg ;)

op1
08-01-2011, 09:38 PM
This function was used for all of the fading, sliding, and rotation in my operatic animation sequence: Sacred Syllables (http://www.youtube.com/watch?v=1df-PkVqQ3k). I posted the nscale script here a few years ago but never got around to using it until arranging this. Ironically, my screen capture software competed for resources while I recorded the animation, so it isn't perfectly represented, but this could be of interest as script demonstration.