Full version: jsB@nk » Misc » xParaEq - Time-Based Parametric Equation Animation
URL: https://www.javascriptbank.com/sliders-xparaeq.html
Parametric equation animation.
Full version: jsB@nk » Misc » xParaEq - Time-Based Parametric Equation Animation
URL: https://www.javascriptbank.com/sliders-xparaeq.html
<link rel="stylesheet" type="text/css" href="v3.css"><style type="text/css">.peSlider { position:absolute; overflow:hidden; color:#ffc; background:#963; border:2px solid #ffc; text-align:center; z-index:20;}#container { position:absolute; overflow:hidden; background:transparent; z-index:10;/* border:2px solid #ffc; */}#marker { position:relative;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript">window.onload = function(){ if (window.winOnLoad) window.winOnLoad();}</script><script type="text/javascript" src="x_core.js"></script><script type="text/javascript" src="x_anim.js"></script><script type="text/javascript">var ele1, ele2, con;function winOnLoad(){ ele1 = xGetElementById('d1'); xResizeTo(ele1, 20, 20); con = xGetElementById('container'); xResizeTo(con, 300, 200); ele2 = xGetElementById('d2'); xResizeTo(ele2, 40, 40); resetDemo();}function resetDemo(){ stopDemo(); var cw = xClientWidth(); var ch = xClientHeight(); var ew = xWidth(ele1); var ew2 = xWidth(ele2); var conW = xWidth(con); var conH = xHeight(con); xMoveTo(ele1, (conW-ew)/2, (conH-ew)/2); xMoveTo(con, xWidth('leftColumn')-conW, xPageY('marker')+80); xMoveTo(ele2, (cw-ew2)/2+xScrollLeft(), (ch-ew2)/2+xScrollTop());}function startDemo(xe, ye, st){ var i, a1; var f = xGetElementById('peForm'); if (!arguments.length) { xe = f.xExpr.value; ye = f.yExpr.value; } st = parseInt(f.slideTime.value); if (isNaN(st)) { alert('Invalid Time Argument'); } else { xParaEq(ele1, xe, ye, st); xParaEq(ele2, xe, ye, st); }}function stopDemo(){ ele1.stop = true; ele2.stop = true;}function toggleBorder(){ if (xGetElementById('tog').checked) { con.style.border = '2px solid #ffc'; } else { con.style.border = 'none'; }}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="marker" class="collapsible"><p>Define your own values to pass to xParaEq(). The same arguments arepassed to each of the demo elements. The 'Reset' button repositions thedemo elements.</p><form id="peForm" onsubmit="return false"><p>X(t) <input id="xExpr" type="text" size="60" value="Math.sin(t*2)*Math.sin(t*4.2)*Math.sin(t*5.1)"></p><p>Y(t) <input id="yExpr" type="text" size="60" value="Math.sin(t*1.123)*Math.sin(t*7)*Math.sin(t*2.31)"></p><p>Duration (ms) <input id="slideTime" type="text" value="0" size="20"></p><p><input id="tog" type="checkbox" onclick="toggleBorder()" value="ON"> Toggle Container Border</p><p><input type="button" value="Start" onclick="startDemo()"> <input type="button" value="Stop" onclick="stopDemo()"> <input type="button" value="Reset" onclick="resetDemo()"></p></form><h4>Description</h4><p><b>X(t)</b> and <b>Y(t)</b> are expressions that generate the x and y coordinates during the slide. These expressions are evaluated with the javascript <b>eval()</b> function. Within the expression you may use any valid sub-expression that eval allows and that is <i>in scope</i>.For example, you may call methods of the Math object such asMath.sin(), Math.cos(), and Math.tan(). You may also reference anyglobal variables or functions.</p><p>One variable that is within scope for your expression is the parameter <b>t</b>. That is, <b>t</b> is the argument to the equations you provide. At each iteration, the variable <b>t</b> increments by .008 (default value).</p><p>The <b>Time</b> argument to parametricEquation() specifies the <i>total time</i> for the slide in milliseconds. If the value is zero, the slide will not <i>timeout</i>. You can stop any slide, at any time, by this assignment: <b>element.stop = true;</b>.</p><h4>The Coordinate System</h4><p>The values from your expressions are plotted on a coordinate systemwith it's origin at the center of the sliding element's container. Thecoordinates are then translated by the element's container's scrollLeftand scrollTop values. So the animation will remain visible if the userscrolls or resizes the element's container.</p></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/misc/Sliders/v3.csshttp://javascriptbank.com/javascript/misc/Sliders/x_core.jshttp://javascriptbank.com/javascript/misc/Sliders/x_anim.js