Want to move a fly (sprite) like a 8.

[survivant]

hello everyone,

 

I want to create a sprite that represent a fly flying.  The want the fly to follow the same path, like a 8.  Start at one point, and fly down to right, do a loop and come back at the origin point.  Something like a 8, or if horizontaly it's a infinity sign.

 

I don't know where to look for this kind of animation algorythm.

 

Someone have of web site references ?

 

thanks

[Olle]

Ought to be done quickly by simply pulsating the x and y coordinates with Math.sin with different increments

[alex_h]

Hmmm, it's harder than I expected to get a proper figure of 8 though!

I quickly modified a pixi.js example to make a bunny move around the screen with sin and cos but I can't work out what the proper cos increment should be. Here's what I have so far:

    // create an new instance of a pixi stage    var stage = new PIXI.Stage(0x66FF99);    // create a renderer instance    var renderer = PIXI.autoDetectRenderer(400, 300);    // add the renderer view element to the DOM    document.body.appendChild(renderer.view);    requestAnimFrame(animate);    // create a texture from an image path    var texture = PIXI.Texture.fromImage("bunny.png");    // create a new Sprite using the texture    var bunny = new PIXI.Sprite(texture);    // center the sprites anchor point    bunny.anchor.x = 0.5;    bunny.anchor.y = 0.5;    // move the sprite to the center of the screen    bunny.position.x = 200;    bunny.position.y = 100;    stage.addChild(bunny);    //counters for cos and sin    var s = 0;    var c = 0;    function animate() {        requestAnimFrame(animate);        s += 0.01;        c += 0.015707;//PI * 0.005        bunny.y = 100 + (Math.sin(s) * 100);        bunny.x = 200 + (Math.cos(c) * 50);        // render the stage        renderer.render(stage);    }

But it doesn't quite make a figure of 8...

[Gio]

A simple and elegant way of achieving that is using a Lissajous curve with a=1, b=2 and delta=pi/2

[alex_h]

Ah - I wasn't far off, just needed to use sin for both axis and make the x increment be double the y:

function animate() {        requestAnimFrame(animate);        // just for fun, let's rotate mr rabbit a little        s += 0.01;        c += 0.02;        bunny.y = 100 + (Math.sin(s) * 100);        bunny.x = 200 + (Math.sin(c) * 50);        // render the stage        renderer.render(stage);    }

Now the bunny moves in a nice figure of 8.

 

Interesting read about the lissajous curve stuff by the way, thanks for that!

[survivant]

thanks Gio for the link.  It's very interesting to read.  Not sure I will have been able to find that information by myself. 

 

alex_h can you provide a sample with asset for that ?  I'll like to play around with it.  I'm learning faster that way.

[survivant]

I found this nice demo to test parameters for lissajous curves

 

http://www.ascolteo.fr/en/courbes/lissajous

 

I hope that can help someone else.

[alex_h]

alex_h can you provide a sample with asset for that ?  I'll like to play around with it.  I'm learning faster that way.

 

Sure (sorry for the delay, only just saw this!)

 

http://www.alexh.org/figure_8/

 

Source: http://www.alexh.org/figure_8/figure_8.zip