Circular collision detection Blog’s movin’ sometime
Nov 05

In the last circular collision tutorial we could find when the circle hits the other one, but nothing more.
So this tutorial will contain how to make the circles un-overlappable.

To read the first tutorial in these series isn’t compulsory, but you could do that if you want.

I’ll start all over, with a new .fla file, mostly because thats simpler.

So. Create an ActionScript 3.0 .fla file. Good good. As far everything is just good.

Lets create 2 circle MovieClips by opening up the ActionScript panel (F9) and typing in this there:

?View Code ACTIONSCRIPT
var c1:MovieClip=new MovieClip();//Circle 1
var c1r:uint=new uint(30);//Circle 1 Radius
c1.graphics.beginFill(0xCCCCCC);//Fill color 
c1.graphics.drawEllipse(-c1r,-c1r,c1r*2,c1r*2);//Draws the circle
c1.x=275;
c1.y=200;
addChild(c1);
 
var c2:MovieClip=new MovieClip();//Circle 2
var c2r:uint=new uint(100);//Circle 2 Radius
c2.graphics.beginFill(0xCCFFCC);//Fillcolor
c2.graphics.drawEllipse(-c1r,-c1r,c1r*2,c1r*2);//Draws circle
c2.x=100;
c2.y=100;
addChild(c2);

Now this creates the circles, and places them on the stage.

Then we need the code for moving the other circle.
And its here:

?View Code ACTIONSCRIPT
var dx:int=new int();//Distance x
var dy:int=new int();//Distanve y
 
var len:Number=new Number();//Length
var df:Number=new Number();//Force off
 
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouse_move);
function mouse_move(event:MouseEvent):void {
 
 
	dx=c1.x-mouseX;//Distance x
	dy=c1.y-mouseY;//Dist. y
 
	len=Math.sqrt(dx*dx+dy*dy);//Length
 
	if (len<=(c1r+c2r)) {//if the length is shorter than the 2 added radiuses
		df=len-(c1r+c2r);//set the force to dist minus the 2 radiuses
		dx=dx/len*df;//Divide distance x with the length, this makes the dx a value of "1", and then multiplies with df, which makes it as long as its overlapping.
		dy=dy/len*df;//Same here.
	} else {//Else dx and dy is nothing
		dx=0;
		dy=0;
	}
 
	c2.x=mouseX+dx;//Sets the x pos of the circle to mouseX+ the x-distance thats left.
	c2.y=mouseY+dy;//Same with y-position
 
}

This code is almost the same, but with small differences. It doesn’t set the moving circles x, and y directly.

First it calculates the offset for it.
The code describes how it works, but not so fantastically. If you experiment with it a little and think a bit I think you could understand what happens with the code.

It should be like this anyways:


If you couldn’t get this to work click here for the source.

A follow up will be written, probably.

Hopefully you liked this tutorial. And if you did, I’m happy :)

Bye bye.

Share this:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • BarraPunto
  • co.mments
  • Fleck
  • Furl
  • feedmelinks
  • Live
  • Spurl
  • StumbleUpon

written by torskmunken \\ tags: , , , , , , , ,

2 Responses to “Circular collision detection 2”

  1. Zuhair Says:

    Brilliant!

  2. JJPSONIC Says:

    If you put your cursor right in the middle it will go in middle

Leave a Reply