Deviant Login Shop
 Join deviantART for FREE Take the Tour


Submitted on
April 10, 2012
Image Size
7.0 KB


6 (who?)
Another small interactive SWF I made, inspired by organic movements.

This was made for the sake of testing movement in 2D-Coordinate Systems along with testing stepwise rotation from one point to another.

If anyone wants to know how to calculate these things, ask me.

If anyonre has suggetions what I might add to the bug's behaviour or change about it, please comment and I (probably) will!

DeviantART FTW :3


Click to de/activate following

dA-logo @ deviantART
Add a Comment:
VulcemTheLoneWolf Featured By Owner Apr 29, 2012
Wha-? How did I miss this? o__O
This stuff is great Fecary! :la:
FecarytheLion Featured By Owner Apr 30, 2012  Student General Artist
Thanks alot <3 xD
Missed it? Can happen *shrugs* I'm glad you found it after all ;P

And there will be more... soon. ;]
kirbymaster3 Featured By Owner Apr 11, 2012  Hobbyist Artist
Mini will mehr von diesem Zeug :bounce:
FecarytheLion Featured By Owner Apr 11, 2012  Student General Artist
Jajaja, gedulde dich xD Bin ja gerade auch am machen. Keine kleine Interaktive Anwendung allerdings, eher ein neues Spiel.^^
Und vll doch noch eine Ansammlung an Cursor-Ideen...
kirbymaster3 Featured By Owner Apr 12, 2012  Hobbyist Artist
YAY!! :la: :la: :la:
FecarytheLion Featured By Owner Apr 12, 2012  Student General Artist
YAY²!! :la: :la: :la:
MrYviandivi Featured By Owner Apr 11, 2012
ok I tried to resist myself but can't help it.
HOW have you done that :la:.? it really is some sort of biomimicry, the movements look so natural. don't know wether it falls under the term artificial intelligence, but it sure is awesome!
FecarytheLion Featured By Owner Apr 11, 2012  Student General Artist
Hmm.. actually its not that hard.

Trigonometry is the answer.
First, I build a timer. It throws an event every 100 miliseconds.
The event is catched by a function calculating a new value between -2 and 2. Let's call this value a.
Then I build an EventListener which calls another function every frame (I used 24 fps). The function itself adds a to the rotation of the bug.
Then, afterwards, the function adds
cos(radianRotation)*speed to the x
sin(radianRotation)*speed to the y
coordinates. Since Flash uses degrees for the rotation we first need to convert the degrees into radians which is done with the formula (PI/180)*degrees. So instead calculating
we need to calculate

(I set the speed for these bugs at 6)

Since I'm using a new (and small) value for a and add a every frame to the rotation, it makes the movement look smooth.
And every 0.1 seconds there is the chance the bugs change direction, which makes the whole thing look more realistic. We don't want them to move just in one direction, right?

When you click, these little things smoothly rotate to the mouse.
How does one do that? Lets look at the basics first: rotation to the mouse without smoothing.

We know both the coordinates of the bug and the mouse.
That helps us calculating the distance and the angle between bug and mouse.
The difference between mouseX and bugX is mouseX-bugX and mouseY and bugY mouseY-bugY
Since we know a²+b²=c² (a and b being opposite and adjacent) c would be the square root of a²+b², so the distance (since mouseX-bugX is a and mouseY-bugY is b) would be sqrt(mouseX-bugX*mouseX-bugX + mouseY-bugY*mouseY-bugY). Not really useful for us right now.

an angle on the unit circle is calculated by using arcus tangens/sinus/cosinus. We use atan here, because calculating an angle with the atan only uses mouseX-bugX (calling it deltaX from now on) and mouseY-bugY (calling it deltaY from now on) (atan(opposite/adjacent)).
So the angle would be atan(deltaX/deltaY) (deltaX = opposite).
Since Flash uses a - for us, at least - unusual way to express angles (not 0°-360° but -180°-180°) there will have to be done several new calculations. We prevent this by using the function Math.atan2, which simply does these calculations for us.

Right. Now we have the angle.
Every frame we'll update the rotation of the bug and equate it with the angle we got.
Thats pretty much it . . .

For a smoother movement we simply use the formula "rotation += (angle (the final rotation) - rotation) / const (used 5 here)". This calculates the addition to the rotation depending on the difference of the final rotation (angle) and the rotation. Simply said: It makes it look smooth.

But thats not all. . . I'm not even sure if you could follow me that far, I hope you could (I'm not good at explaining)
There still are several calculations to be done before we smooth the movement to prevent a certain issue, I'll simply post the formula:

if (finalRotation > rotation + 180) substract 360 from finalRotation;
if (finalRotation < rotation - 180) add 360 to finalRotation;

Yeah. It keeps the rotation positive or else the bug would jump from one rotation to another sometimes. (since there is a huge difference between 180° and -180° and the computer automatically transforms 181° into -179° without informing our functions)

And thats all there is.
Hopefully you understand it. Unit circle trigonometry is pretty useful~
kirbymaster3 Featured By Owner Apr 11, 2012  Hobbyist Artist
sehhr viel text XP
FecarytheLion Featured By Owner Apr 11, 2012  Student General Artist
Nja, nicht wirklich xD In Chats schon so einiges mehr geschrieben ;P
Add a Comment: