Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: nScale:

  1. #1
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts

    nScale:

    For moving/resizing stuff with a gliding effect, or whatever...
    Code:
    <html>
    <head>
    <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;
    color:buttontext;padding:4px;margin:0;}
    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;
    color:infotext;padding-left:0.5em;padding-right:0.5em}
    .box{font-size:1px;border:solid 1px red;background:black;
    width:15px;height:15px;position:relative;bottom:0;
    left:0;margin:0;}
    </style></head>
    
    <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">
    <span style="padding-left:5em;font-weight:bold">usage:</span>
    <code>var myArray = nScale(integer,'profile');</code>
    </div>
    <label class="info">test:</label>
    <form name="test">
    	<fieldset>
    		<legend>output</legend>
    		<div>
    			<input name="output" readonly style="width:100%">
    		<div>
    			<label>array sum: </label>
    			<input name="tot" size="8" readonly>
    		</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)">
    			<label style="padding-left:1em">profile: </label>
    			<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>
    
    Last edited by codegoboom; 12-19-2004 at 05:06 AM. Reason: formatting
    *this message will self destruct in n-seconds*

  • #2
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just thought to add relevant keywords for those searching:
    tween tweening easing motion velocity acceleration deceleration animation setTimeout setInterval rube-goldberg
    Last edited by codegoboom; 12-19-2004 at 01:55 AM. Reason: silliness
    *this message will self destruct in n-seconds*

  • #3
    op1
    op1 is offline
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This function was used for all of the fading, sliding, and rotation in my operatic animation sequence: Sacred Syllables. 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.
    Last edited by op1; 08-01-2011 at 09:50 PM. Reason: yes


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •