How do you change a AS objects diameter of rotation dependant on position of mouse?

[eLyfe]

Hi guys,

This is for a personal art project, however I have hit a potential (Actionscript) brick wall!

I want the diameter of the 'balls' orbit to change dependant on the position of the mouse but keep the point of rotation exactly the middle of the stage at all times.

I.e. if the mouse is hovering over the exact center (both X+Y) of the stage then the 'ball' should have a tiny diameter of rotation (but contstantly follows the orbit in clockwise direction) whilst if you move the mouse towards the edge of the stage then the diameter of the orbit of the ball will increase.

Here is the AS which controls a blank movieclip;


var sp:Sprite = new Sprite();
orb1.addChild(sp)
var g: Graphics =sp.graphics
orb1.x = (stage.mouseX);
orb1.y = (stage.mouseY);

g.moveTo(stage.mouseX, stage.mouseY);
//stage.stageWidth/2,stage.stageHeight/2)
g.lineStyle(1.5,0x000000,10);
g.beginFill(0x000000,0.2)
g.drawCircle(stage.mouseX,stage.mouseY,10)
g.endFill();


stage.addEventListener(Event.ENTER_FRAME,test)
stop();


function test(Evt:Event):void{
orb1.rotation +=5;

orb1.x = (stage.mouseX);
orb1.y = (stage.mouseY);

}


If it help's, here is the .swf, .fla AND an image with an explanation:

http://www.taylormadeclubbing.co.uk/flash/test.swf
http://www.taylormadeclubbing.co.uk/flash/test.png
http://www.taylormadeclubbing.co.uk/flash/test.fla

Hope this helps!

[sneakyimp]

I see that you have your ball orbiting but it doesn't quite do what you want. I was hoping to start with the code you have written so far but that FLA link you sent is not a valid flash file...just garbled something. Your code here refers to an object orb1 which is not defined.

My approach would be to define an x/y point as the center of your movie. Have an enter frame or timer event that
1) increases the rotational angle of your ball in degrees or radians.
2) detects the distance of the mouse from your x/y point
3) assigns the same distance to your ball but modifies it according to the rotational angle of the ball using sin/cos/tan functions.

[sneakyimp]

Try this code:

// create the center point
var pt:Point = new Point(stage.stageWidth/2, stage.stageHeight/2);

// create the orb
var orb1 = new MovieClip();
addChild(orb1);

// place the orb at the center of the stage
orb1.x = pt.x;
orb1.y = pt.y;

// assign a property to the orb
orb1.rotAngle = 0;

// draw a circle on the orb
var g: Graphics = orb1.graphics
g.lineStyle(1.5,0x000000,10);
g.beginFill(0x000000,0.2)
g.drawCircle(stage.height/2,stage.width/2,10)
g.endFill();

// add the rotateFunc to run every frame
stage.addEventListener(Event.ENTER_FRAME, rotateFunc)
stop();


function rotateFunc(Evt:Event):void{
var mousePoint:Point = new Point(stage.mouseX, stage.mouseY);
var orbitDistance:Number = Point.distance(mousePoint, pt);

orb1.x = pt.x + (Math.cos(orb1.rotAngle)*orbitDistance);
orb1.y = pt.y + (Math.sin(orb1.rotAngle)*orbitDistance);

orb1.rotAngle += 15/180 * Math.PI;
}

[Greg SS]

You can do it with less math using double transform ;)

// create the center point
var pt:Point = new Point(stage.stageWidth/2, stage.stageHeight/2);

//orb container
var container:Sprite = new Sprite();
addChild(container);

// create the orb
var orb1:Shape = new Shape();
container.addChild(orb1);

// draw a circle on the orb
var g: Graphics = orb1.graphics
g.lineStyle(1.5,0x000000,10);
g.beginFill(0x000000,0.2)
g.drawCircle(stage.height/2,stage.width/2,10)
g.endFill();

// add the rotateFunc to run every frame
stage.addEventListener(Event.ENTER_FRAME, rotateFunc)
stop();


function rotateFunc(Evt:Event):void{
var mousePoint:Point = new Point(stage.mouseX, stage.mouseY);
orb1.x = Point.distance(mousePoint, pt);
container.rotation += 1;
}

[eLyfe]

sneakyimp: thankyou very much! works exactly how I wanted it to :)

GregSS: I appreciate using less maths; would definately be of help as I understand your method much easier however when I used your method the center of rotation is 0,0 i.e the orb does not rotate around the center of the stage? Also, the direction that the mouse controls the diameter of the orbit is backwards i.e. when you move the mouse towards 0,0 (top left of stage) it gets larger instead of a smaller diameter.

Did that make any sense?! I cannot seem to amend this? thanks all!

[Greg SS]

oh yeah... lol... forgot to move the container to the center XD

just add this just under or above addChild(container):

container.x = pt.x;
container.y = pt.y;