non linear animators?

[whisperstorm]

The animator tag is very handy. I wonder, is it possible to have an animator use a formula or expression to determine the step values? I mean right now the implied formula is i++ or i--, it woudl be cool to be able to do things like sine waves or other expressions.

I guess I see that animators are really just shorthand ways of doing simple animations. If I wanted to say move a picture in a circle using some trig function is there a way to cause this to happen using an animator as the driving force?

Meaning the animator moves from 1-100 and every step I do something like sin(x) or something and assign that to the y value of some view.

Hmm. perhaps this is more of a feature request :)

[antun]

Right now there are no curve animation APIs, although as you said, they would make a nice feature. However, you can do your own "animations" manually by incrementing the x and y components, and they can be related to one another using any function you like. For example, a sine curve:


<canvas width="1200">
<script>
// Converts degrees to radians
function degToRad( deg ) {
var rad = ((2*Math.PI)/360) * deg;
return rad
}
</script>

<view id="foo" width="5" height="5" bgcolor="red"
x="0" y="100" >
<attribute name="interval" type="number" value="3" />
<attribute name="increment" type="number" value="1" />
<attribute name="moving" value="false" />

<method name="fire">
this.moving = !this.moving;
if ( this.moving ) this.moveProjectile();
</method>

<method name="moveProjectile">
this.setX( this.x + this.increment );
var newY = ((Math.sin(degToRad(this.x)))*100) + 100;
this.setY( Math.round(newY) );
if ( this.moving ) {
this.moveDel = new LzDelegate( this, "moveProjectile" );
LzTimer.addTimer( this.moveDel, this.interval );
}
</method>
</view>


<!-- x-axis -->
<view width="$once{canvas.width}" height="1" bgcolor="0xeaeaea"
y="100" />

<button y="125" x="25"
onclick="foo.fire()">Start/stop animation</button>
</canvas>


-Antun

[UV2003]

I modified that code to animate, and drop new View's with 1px height/width in the process, a circular motion.

I was trying figure out how to animate a Fibonacci spiral, but haven't quite figured that out yet.


<canvas width="1200" debug="true">
<script>
// Converts degrees to radians
function degToRad( deg ) {
var rad = ((2*Math.PI)/360) * deg;
return rad
}
</script>

<view id="foo" width="5" height="5" bgcolor="red"
x="0" y="100" >
<attribute name="interval" type="number" value="1" />
<attribute name="increment" type="number" value="1" />
<attribute name="degrees" type="number" value="0" />

<attribute name="moving" value="false" />

<method name="fire">
this.moving = !this.moving;
if ( this.moving ) this.moveProjectile();
</method>

<method name="moveProjectile">
var radius = 75;
var deg = this.getAttribute("degrees");
var angle = degToRad(deg);
deg += 1;
this.setAttribute("degrees", deg);

// Circle
var xpos = Math.cos(angle) * radius;
var ypos = Math.sin(angle) * radius;
// Fibonacci spiral: Not working
/*
var PHI = 1.618033989;
var xpos = (PHI*deg - Math.cos(Math.PI*deg)/PHI*deg)/Math.sqrt(5);
var ypos = (PHI*deg - Math.sin(Math.PI*deg)/PHI*deg)/Math.sqrt(5);
*/
this.setX(xpos + 100);
this.setY(ypos + 100);
// Create view to trace the motion
var v = new LZView(canvas);
v.setAttribute("bgcolor", "blue");
v.setHeight(1);
v.setWidth(1);
v.setX(xpos +100);
v.setY(ypos +100);

if ( this.moving ) {
this.moveDel = new LzDelegate( this, "moveProjectile" );
LzTimer.addTimer( this.moveDel, this.interval );
}
</method>
</view>
<!-- x-axis -->
<view width="$once{canvas.width}" height="1" bgcolor="0xeaeaea"
y="100" />

<button y="125" x="25"
onclick="foo.fire()">Start/stop animation</button>
</canvas>

[UVc]

Maybe I can make use of this link to get the right formula:
http://mathworld.wolfram.com/LogarithmicSpiral.html

Has anyone else tried something like this?

[pokermagic]

I'm horrible with math :D. How can I change the circle formula to plot an ellipse?