Create fireflies in Javascript?

Question

I want to create some randomly flying objects in a 3D game. You can imagine them like fireflies. Now there're some tasks to do with them, include:

• They usually fly randomly (of course).
• They can fly away or fly back in some conditions.

I have to write some Javascript to do these things, but I don't know how to do. Can you help me? Thank you very much!

EDIT: I think I'll need these functions:

function Fly()
{
   //control the gameObject to fly randomly
}

function FlyAway()
{

}

function FlyBack()
{

}

Answer 1

I would suggest that you look at the canvas tag, but then it will not work on IE as I don't know if 3D effects will work on excanvas well.

This gives you a drawable surface to do your graphics.

You will probably need to write your own primitive functions for the graphics, but it is very doable.

EDIT: You will need to use object oriented javascript for each of your fireflies, which will help you to move each of them each frame.

If you show your attempt at drawing graphics you can get more help.

Answer 2

As much as I hate condoning the use of Flash, this really sounds like a Flash job.

However, if you insist on using JavaScript, I'd thumb through some Chrome Experiments for 3D examples (w/canvas): http://www.chromeexperiments.com/

Answer 3

I've done an abstraction library that may help here:

DP_PanelManager

The library makes moving objects pretty simple - at the bottom of the page there's an example called "Useless Animation" - it's basically a checkerboard where each square randomly moves, changes size and changes opacity.

Something like that with fewer panels and a little math to do smoother travel (something like this should be easy enough to modify) should get you close.

The component also has simplified functions for collision detection and distance between panels (with bearing - the function will tell you how far apart two panels are AND in which direction they lay).

Hopes this gives you a headstart.

Answer 4

My approach would be

1. randomly create a x/y equation (may be from a given set, if you don't know how to 100% randomize this).
2. Decide, randomly if you go by the x or by the y.
3. decide the number of steps you take on the axis you chose in step 2.
4. move your element according to the x/y you get from the equation in step 1.
5. When you finished to move all the steps (number of steps is given in step 3), go back to step 1. In a loop.