# Realistic Bug Effect ala 24-7 media

**URL:** <https://forum.kirupa.com/t/realistic-bug-effect-ala-24-7-media/113256>\
**Category:** Uncategorized\
**Created:** [June 16, 2004, 10:44am UTC](https://forum.kirupa.com/t/realistic-bug-effect-ala-24-7-media/113256 "2004-06-16T10:44:35Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![as\_clark20](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@as\_clark20](https://forum.kirupa.com/u/as_clark20)\
**Post date:** [June 16, 2004, 10:44am UTC](https://forum.kirupa.com/t/realistic-bug-effect-ala-24-7-media/113256/1 "2004-06-16T10:44:35Z")

</div>

Ok, first things first. Check out [24-7 media](http://www.24-7media.de) so y’all will see what I’m talking about.

Do you see the fly which runs away from your mouse? I’d like to come up with the same thing, but for a spider. Does anyone have any ideas how I can make this look realistic? Please help I’d really like a spider on my website.

Thanks very much.

Ads.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 16, 2004, 3:43pm UTC](https://forum.kirupa.com/t/realistic-bug-effect-ala-24-7-media/113256/2 "2004-06-16T15:43:33Z")

</div>

I don’t know if it’s just me, but it looks like it always goes in the same path.

I’d use tweens and a guide layer.

Make it stop in some places and wait for your mouse to go over it again to move to the next frames.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 16, 2004, 4:19pm UTC](https://forum.kirupa.com/t/realistic-bug-effect-ala-24-7-media/113256/3 "2004-06-16T16:19:09Z")

</div>

I think Lost did an actionscripted spider some time ago. You could try and ask him.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 16, 2004, 6:34pm UTC](https://forum.kirupa.com/t/realistic-bug-effect-ala-24-7-media/113256/4 "2004-06-16T18:34:40Z")

</div>

24-7 uses tweens. when you roll over the mc, it just plays the next few frames and soon.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 16, 2004, 6:51pm UTC](https://forum.kirupa.com/t/realistic-bug-effect-ala-24-7-media/113256/5 "2004-06-16T18:51:31Z")

</div>

[li0n.net](http://li0n.net) my son  
🙂 I’ll send it to you if you want.  
PM me.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 16, 2004, 10:05pm UTC](https://forum.kirupa.com/t/realistic-bug-effect-ala-24-7-media/113256/6 "2004-06-16T22:05:38Z")

</div>

```auto
LEG_LENGTH = 40 ;
NUM_LEGS = 6 ;

legs_arr = [] ;
for (var l = 0; l < NUM_LEGS; l++) legs_arr.push(l) ;
legs_copy_arr = legs_arr.concat() ;

dot_arr = [] ;
Array.prototype.removeAt = function ( pint_pos ) {
	return this.slice(0, pint_pos).concat(this.slice(pint_pos+1, this.length)) ;
}
changeSpeed = function () {
	var dx = body._x - _xmouse ;
	var dy = body._y - _ymouse ;
	ang = Math.atan2(dy, dx) ;
//	ang += ( Math.random() - .5 ) * Math.PI ;
	targx += Math.cos(ang) * 30 ;
	targy += Math.sin(ang) * 30 ;
	targx = (targx > 400) ? 400 : (targx < 100) ? 100 : targx ;
	targy = (targy > 300) ? 300 : (targy < 100) ? 100 : targy ;
}
function drawBody ( pc_col ) {
	body.lineStyle (20, pc_col, 60) ;
	body.lineTo (.45, .15) ;
}
function moveBody () {
	var myO = {} ;
	myO = getCenterLegs () ;
	var dx = myO.x - this._x ;
	var dy = myO.y - this._y ;
	this._x += dx / 5 ;
	this._y += dy / 5 ;
}
function moveLegs () {
	if (legs_copy_arr.length == 0) {
		legs_copy_arr = legs_arr.concat() ;
	}
	var int_leg = random (legs_copy_arr.length) ;
	var leg_mc = dot_arr[legs_copy_arr[int_leg] ] ;
	legs_copy_arr = legs_copy_arr.removeAt (int_leg) ;
	leg_mc.targx = targx + LEG_LENGTH * Math.cos ( leg_mc.ang ) ;
	leg_mc.targy = targy + LEG_LENGTH * Math.sin ( leg_mc.ang ) ;
	leg_mc.onEnterFrame = function () {
		var dx = this.targx - this._x ;
		var dy = this.targy - this._y ;
		this._x += dx / 5 ;
		this._y += dy / 5 ;
		if ( Math.abs(dx) + Math.abs(dy) < 1 ) {
			delete this.onEnterFrame ;
		}
	}
}
function generateLegs () {
	for ( var i = 0 ; i < NUM_LEGS ; i++ ) {
		dot_arr.push ( body.duplicateMovieClip ( "d" + i, i ) ) ;
		dot_arr*._xscale = dot_arr*._yscale = 50 ;
		dot_arr*._visible = false ;
		dot_arr*.ang = 2*Math.PI * i / NUM_LEGS ;
	}
}
function getCenterLegs () {
	var cx, cy ;
	for ( var j = 0; j < NUM_LEGS; j++ ) {
		cx += dot_arr[j]._x ;
		cy += dot_arr[j]._y ;
	}
	cx /= NUM_LEGS ;
	cy /= NUM_LEGS ;
	return {x:cx, y:cy} ;
}
this.createEmptyMovieClip ( "drawing", -3 ) ;

this.createEmptyMovieClip ( "body", -2 ) ;
drawBody( a = Math.random() * 0xffffff ) ;
body._x = targx = 250 ;
body._y = targy = 200 ;
/*body.lineStyle ( 50, 0, 100 ) ;
body.lineTo ( .45, .15 ) ;*/
body.v = 5 ;
body.angx = 2*Math.PI*Math.random() ;
body.angy = 2*Math.PI*Math.random() ;
body.onEnterFrame = moveBody ;
setInterval ( changeSpeed, 1000 ) ;
setInterval ( moveLegs, 500 ) ;
function renderLines () {
	drawing.clear () ;
	drawing.lineStyle ( 0, a, 50 ) ;
	for ( var j = 0 ; j < NUM_LEGS ; j++ ) {
		drawing.moveTo ( body._x, body._y ) ;
		drawing.lineTo ( dot_arr[j]._x, dot_arr[j]._y ) ;
	}
}
generateLegs () ;
this.onEnterFrame = renderLines ;

```

Maybe this will help 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 17, 2004, 8:08am UTC](https://forum.kirupa.com/t/realistic-bug-effect-ala-24-7-media/113256/7 "2004-06-17T08:08:54Z")

</div>

Yeah liOn could you please send me an example, that would be fantastic. Thank you very much.

Adam

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 17, 2004, 8:10am UTC](https://forum.kirupa.com/t/realistic-bug-effect-ala-24-7-media/113256/8 "2004-06-17T08:10:15Z")

</div>

Ilyas le Pom,

you are one crazy coding guy! I like your code but it confuses the hell out of a novice like me!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 18, 2004, 8:04am UTC](https://forum.kirupa.com/t/realistic-bug-effect-ala-24-7-media/113256/9 "2004-06-18T08:04:34Z")

</div>

Yes, I’m sorry it got so complicated :-/

So here’s the idea:  
My spider has a global speed that is handled by the changeSpeed function. That function sets the variables targx and targy, the target destination, by checking the Mouse position and taking the opposite direction. I used setInterval to update the speed and direction every 1000 ms:

```auto
changeSpeed = function () {
	var dx = body._x - _xmouse ;
	var dy = body._y - _ymouse ;
	ang = Math.atan2(dy, dx) ;
	targx += Math.cos(ang) * 30 ;
	targy += Math.sin(ang) * 30 ;
	targx = (targx > 400) ? 400 : (targx < 100) ? 100 : targx ;
	targy = (targy > 300) ? 300 : (targy < 100) ? 100 : targy ;
}
setInterval ( changeSpeed, 1000 ) ;

```

Then the legs will move around this global target destination, on a circle. They are created with the generateLegs function that duplicates the clip called ‘body’ (or nothing if it doesn’t exist). The motion is handled by the moveLegs: it takes one of the legs, feeds the destination according to the global destination and the given leg, and makes the leg ease to that destination. The reason I used legs\_copy\_arr is that I wanted the legs to move in sequence. Using this system, after a leg has moved, a different leg will move.

```auto
LEG_LENGTH = 40 ;
NUM_LEGS = 6 ;

legs_arr = [] ;
for (var l = 0; l < NUM_LEGS; l++) legs_arr.push(l) ;
legs_copy_arr = legs_arr.concat() ;

dot_arr = [] ;
function moveLegs () {
	if (legs_copy_arr.length == 0) {
		legs_copy_arr = legs_arr.concat() ;
	}
	var int_leg = random (legs_copy_arr.length) ;
	var leg_mc = dot_arr[legs_copy_arr[int_leg] ] ;
	legs_copy_arr = legs_copy_arr.removeAt (int_leg) ;
	leg_mc.targx = targx + LEG_LENGTH * Math.cos ( leg_mc.ang ) ;
	leg_mc.targy = targy + LEG_LENGTH * Math.sin ( leg_mc.ang ) ;
	leg_mc.onEnterFrame = function () {
		var dx = this.targx - this._x ;
		var dy = this.targy - this._y ;
		this._x += dx / 5 ;
		this._y += dy / 5 ;
		if ( Math.abs(dx) + Math.abs(dy) < 1 ) {
			delete this.onEnterFrame ;
		}
	}
}
function generateLegs () {
	for ( var i = 0 ; i < NUM_LEGS ; i++ ) {
		dot_arr.push ( body.duplicateMovieClip ( "d" + i, i ) ) ;
		dot_arr*._xscale = dot_arr*._yscale = 50 ;
		dot_arr*._visible = false ;
		dot_arr*.ang = 2*Math.PI * i / NUM_LEGS ;
	}
}
generateLegs () ;
setInterval ( moveLegs, 500 ) ;

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 18, 2004, 8:18am UTC](https://forum.kirupa.com/t/realistic-bug-effect-ala-24-7-media/113256/10 "2004-06-18T08:18:17Z")

</div>

Then I draw the body and make it move to the center of the legs.

```auto
function drawBody ( pc_col ) {
	body.lineStyle (20, pc_col, 60) ;
	body.lineTo (.45, .15) ;
}
function moveBody () {
	var myO = {} ;
	myO = getCenterLegs () ;
	var dx = myO.x - this._x ;
	var dy = myO.y - this._y ;
	this._x += dx / 5 ;
	this._y += dy / 5 ;
}
function getCenterLegs () {
	var cx, cy ;
	for ( var j = 0; j < NUM_LEGS; j++ ) {
		cx += dot_arr[j]._x ;
		cy += dot_arr[j]._y ;
	}
	cx /= NUM_LEGS ;
	cy /= NUM_LEGS ;
	return {x:cx, y:cy} ;
}
this.createEmptyMovieClip ( "body", -2 ) ;
drawBody( a = Math.random() * 0xffffff ) ;
body._x = targx = 250 ;
body._y = targy = 200 ;
body.v = 5 ;
body.angx = 2*Math.PI*Math.random() ;
body.angy = 2*Math.PI*Math.random() ;
body.onEnterFrame = moveBody ;

```

Eventually, the lines between the body and the legs are drawn with the renderLine function.

I hope it’s a bit clearer now 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 18, 2004, 8:39am UTC](https://forum.kirupa.com/t/realistic-bug-effect-ala-24-7-media/113256/11 "2004-06-18T08:39:24Z")

</div>

thats crazy stuff 🙂

I picked this little spider up on my travels ages ago, the animation is superb!!

Hope it helps…at least with the actual spider anyways 😜

Jain

Yay-just reached 100 posts! :party: