Rotating circle by mouse

**GrayFox** · January 31st, 2010, 12:18 PM

First, I am sorry if I posted this in the wrong section.

I have been working on this and thinking about it for days but I just can't seem to get it right. I want to have a circle that I can "pick up" with the mouse and then rotate (with the rotation point in the center). Currently I have done this with the following code:

PHP Code:


 var radians = Math.atan2(mouseY-circle.y, mouseX-circle.x);
 var degrees = Math.round((radians*180/Math.PI));
  circle.rotation = degrees + 90;

I have added a mouse listener for movement to the circle mc and then checked if a button was down. On button down this code would be executed on enter frame. This code works but the main problem is that I want to be able to "pick the circle up" at any angle and rotate it. If I pick it up with this code the circle automatically rotates to 90 degrees. Does anyone have an idea on how to do this?

**creatify** · January 31st, 2010, 01:58 PM

I'm not quite following you - are you trying to make is so when the circle is clicked, you can drag it aground, but depending on where the mouse cursor is when you click the circle, you want the circle to rotate around they mouse cursor x,y on the circle?

**GrayFox** · February 1st, 2010, 02:29 AM

Originally Posted by creatify

I'm not quite following you - are you trying to make is so when the circle is clicked, you can drag it aground, but depending on where the mouse cursor is when you click the circle, you want the circle to rotate around they mouse cursor x,y on the circle?

I don't want to be able to drag the circle. All I want to make is a Circle wich I can click by mouse and that rotates by moving the mouse (while mousedown). The rotation point of the circle should always be in the center of the circle and I need to be able to click the circle at any point.

**TheCanadian** · February 1st, 2010, 03:17 AM

It's AS2, but hopefully you get the idea:

Code:

circle.onPress = function():Void {
	this.offset = this._rotation - Math.atan2(_ymouse - circle._y, _xmouse - circle._x) * 180 / Math.PI;
	this.onMouseMove = function():Void {
		this._rotation = Math.atan2(_ymouse - circle._y, _xmouse - circle._x) * 180 / Math.PI + this.offset;
	}
}

circle.onRelease = circle.onReleaseOutside = function():Void {
	delete this.onMouseMove;
}

**GrayFox** · February 3rd, 2010, 08:19 AM

Originally Posted by TheCanadian

It's AS2, but hopefully you get the idea:

Thanks a lot that worked after I converted it to AS3.

But this script only works from document class, how do I get this to work from within a circle class?

**IQAndreas** · February 3rd, 2010, 03:58 PM

Originally Posted by GrayFox

Thanks a lot that worked after I converted it to AS3.

But this script only works from document class, how do I get this to work from within a circle class?

I did something similar a while back. Take a look at my volume knob class and see if it helps.
http://iqandreas.blogspot.com/2009/1...component.html

Sorry, it's a little messy, and I was too lazy to clean it up for public use...

**GrayFox** · February 5th, 2010, 04:37 AM

I managed to get it to work. Thanks a lot! Does anyone have experience with throw physics for rotation? I'm planning to implement those next.

**IQAndreas** · February 5th, 2010, 05:11 AM

This video briefly touches on how to use throw physics. It might be a little trickier implementing it into rotation, but it might be worth a look:
http://gotoandlearn.com/play?id=81

**TheCanadian** · February 5th, 2010, 05:40 AM

I'm just kinda making stuff up from my super duper extensive experience in physics (read 1 semester of mechanics), but try looking into stuff like torque and centre of mass. I was actually planning on doing some kind of rotation experiment but I don't have a whole lot of time at the moment.

**GrayFox** · February 5th, 2010, 08:43 AM

Originally Posted by IqAndreas

This video briefly touches on how to use throw physics. It might be a little trickier implementing it into rotation, but it might be worth a look:
http://gotoandlearn.com/play?id=81

I have already seen that video and tried to implement it but I can't get it to work for rotation.

**IQAndreas** · February 7th, 2010, 05:55 PM

Originally Posted by GrayFox

I have already seen that video and tried to implement it but I can't get it to work for rotation.

I'm not sure if you ever got this fixed or not, (sorry for the delay) but it shouldn't be too difficult to modify Lee's code a bit.

Just have a variable that stores "currentRotationSpeed", and each frame, reduce it by friction, and add the new rotation speed to the rotation of the dial.

Do you understand, or do you need a code example?

EDIT: Meh, code example here...

Code:

this.addEventListener(Event.ENTER_FRAME, updateRotation);

//Degrees of slowdown each frame
var friction = 3;

//Whenever the user rotates the knob, just update this value based on how many
//pixels they rotated the item.
var currentRotationSpeed;

function updateRotation(ev:Event)
{   
   //Make sure the rotation speed is not less than 0
   if (currentRotationSpeed < 0)
     { currentRotationSpeed = 0; }
   else
     { currentRotationSpeed -= friction; }

   volumeKnob.rotation += currentRotationSpeed; 
}

Note that you should probably remove the event listener once the currentRotationSpeed reaches 0, but I think you can handle that yourself, right?

**GrayFox** · February 8th, 2010, 03:22 PM

Originally Posted by IqAndreas

I'm not sure if you ever got this fixed or not, (sorry for the delay) but it shouldn't be too difficult to modify Lee's code a bit.

Just have a variable that stores "currentRotationSpeed", and each frame, reduce it by friction, and add the new rotation speed to the rotation of the dial.

Do you understand, or do you need a code example?

EDIT: Meh, code example here...
ActionScript Code:

this.addEventListener(Event.ENTER_FRAME, updateRotation);

//Degrees of slowdown each frame
var friction = 3;

//Whenever the user rotates the knob, just update this value based on how many
//pixels they rotated the item.
var currentRotationSpeed;

function updateRotation(ev:Event)
{
//Make sure the rotation speed is not less than 0
if (currentRotationSpeed < 0)
{ currentRotationSpeed = 0; }
else
{ currentRotationSpeed -= friction; }

volumeKnob.rotation += currentRotationSpeed;
}

Note that you should probably remove the event listener once the currentRotationSpeed reaches 0, but I think you can handle that yourself, right?

No I never managed to get it to work. I will try your idea soon and if I still can't get it to work I'll post back. Thanks a lot for the help.

**Shaedo** · February 8th, 2010, 05:42 PM

Here is an alternate way of doing it:
(copy and paste into a new .fla and run to see it work)

Code:

var sensitivity:Number = .3;
var friction:Number = .1;

var s:Sprite = new Sprite;/*Sprite to rotate*/
var p:Sprite = new Sprite;/*Sprite so can see rotation*/

var src:Number;/*Sprite Rotation Current*/
var srp:Number;/*Sprite Rotation Previous*/

/*Create Sprite to rotate*/
s.graphics.beginFill(0x00FF00);
s.graphics.drawCircle(0,0,50)
s.x=s.y=100;
s.buttonMode=true;
s.mouseChildren=false;
s.addEventListener(MouseEvent.MOUSE_DOWN, MD, false, 0, true);
stage.addEventListener(MouseEvent.MOUSE_UP, MU, false, 0, true);
addChild(s);
p.graphics.beginFill(0x0000FF);
p.graphics.drawCircle(0,0,10)
p.y=-25;
s.addChild(p);

function MD(e:MouseEvent):void
/*MOUSE DOWN - start rotation*/
{
	s.addEventListener(Event.ENTER_FRAME, Spin, false, 0, true);
}

function MU(e:MouseEvent):void
/*MOUSE UP - End Rotation*/
{
	s.removeEventListener(Event.ENTER_FRAME, Spin, false);
	s.addEventListener(Event.ENTER_FRAME, Momentum, false, 0, true);
}

function Spin(e:Event):void
/*Spin- rotates target*/
{
	srp = s.rotation;/*get previous rotation - used in 'Momentum()'*/
	s.rotation -= (s.x - mouseX) * sensitivity; /*changes the rotation based on where the mouse is*/
	src = s.rotation;/*get current rotation  - used in 'Momentum()'*/
}

function Momentum(e:Event):void
/*Momentum - carries on rotating momentum*/
{
	var d:int;/*difference in rotation*/
	d = src - srp;/*determine d*/
	s.rotation += d;/*change rotation*/

	if((d>0?d:-d)<2)/*(d>0?d:-d) this is saying '(is d > 0 ? yes then return d : no then return -d) : is this less than 2 ?*/
	/*This could also be 'if(Math.abs(d)<2)'*/
	{
		s.removeEventListener(Event.ENTER_FRAME, Momentum, false)/*Stops spinning*/
	}
	else
	{
		srp += d * friction;/*reduces momentum*/
	}
}

**Shaedo** · February 8th, 2010, 06:11 PM

I had another look at what was posted and I think that this variation is closer to the throw mechanics you are after:
(copy and paste into a new .fla and run to see it work)

Code:

var sensitivity:Number = .7;
var friction:Number = .1;

var s:Sprite = new Sprite;/*Sprite to rotate*/
var p:Sprite = new Sprite;/*Sprite so can see rotation*/

var mxs:Number = 0;/*Mouse X Start*/
var rc:Number = 0;/*Rotation Current*/
var rp:Number;/*Rotation Previous*/
var pp:Number;/*Previous Position*/

/*Create Sprite to rotate*/
s.graphics.beginFill(0x00FF00);
s.graphics.drawCircle(0,0,50)
s.x=s.y=100;
s.buttonMode=true;
s.mouseChildren=false;
s.addEventListener(MouseEvent.MOUSE_DOWN, MD, false, 0, true);
stage.addEventListener(MouseEvent.MOUSE_UP, MU, false, 0, true);
addChild(s);
p.graphics.beginFill(0x0000FF);
p.graphics.drawCircle(0,0,10)
p.y=-25;
s.addChild(p);

function MD(e:MouseEvent):void
/*MOUSE DOWN - start rotation*/
{
	s.addEventListener(Event.ENTER_FRAME, Movement, false, 0, true);
	s.removeEventListener(Event.ENTER_FRAME, Throw, false);
	mxs=mouseX;
	pp=s.rotation;
}

function MU(e:MouseEvent):void
/*MOUSE UP - End Rotation*/
{
	s.removeEventListener(Event.ENTER_FRAME, Movement, false);
	s.addEventListener(Event.ENTER_FRAME, Throw, false, 0, true);
}

function Movement(e:Event):void
/*MOVEMENT*/
{
	rp = rc;
	s.rotation = -sensitivity*( mxs -  mouseX) + pp;
	rc = s.rotation;
}

function Throw(e:Event):void
/*Momentum - carries on rotating momentum*/
{
	var d:int;/*delta rotation*/
	d = rc - rp;/*determine d*/
	s.rotation += d;/*change rotation*/

	if((d>0?d:-d)<1)/*(d>0?d:-d) this is saying '(is d > 0 ? yes then return d : no then return -d) : is this less than 2 ?*/
	/*This could also be 'if(Math.abs(d)<2)'*/
	{
		s.removeEventListener(Event.ENTER_FRAME, Throw, false)/*Stops spinning*/
	}
	else
	{
		rp += d * friction;/*reduces momentum*/
	}
}

**GrayFox** · February 15th, 2010, 02:51 PM

Originally Posted by Shaedo

I had another look at what was posted and I think that this variation is closer to the throw mechanics you are after:
(copy and paste into a new .fla and run to see it work)
ActionScript Code:

var sensitivity:Number = .7;
var friction:Number = .1;

var s:Sprite = new Sprite;/*Sprite to rotate*/
var p:Sprite = new Sprite;/*Sprite so can see rotation*/

var mxs:Number = 0;/*Mouse X Start*/
var rc:Number = 0;/*Rotation Current*/
var rp:Number;/*Rotation Previous*/
var pp:Number;/*Previous Position*/

/*Create Sprite to rotate*/
s.graphics.beginFill(0x00FF00);
s.graphics.drawCircle(0,0,50)
s.x=s.y=100;
s.buttonMode=true;
s.mouseChildren=false;
s.addEventListener(MouseEvent.MOUSE_DOWN, MD, false, 0, true);
stage.addEventListener(MouseEvent.MOUSE_UP, MU, false, 0, true);
addChild(s);
p.graphics.beginFill(0x0000FF);
p.graphics.drawCircle(0,0,10)
p.y=-25;
s.addChild(p);

function MD(e:MouseEvent):void
/*MOUSE DOWN - start rotation*/
{
    s.addEventListener(Event.ENTER_FRAME, Movement, false, 0, true);
    s.removeEventListener(Event.ENTER_FRAME, Throw, false);
    mxs=mouseX;
    pp=s.rotation;
}

function MU(e:MouseEvent):void
/*MOUSE UP - End Rotation*/
{
    s.removeEventListener(Event.ENTER_FRAME, Movement, false);
    s.addEventListener(Event.ENTER_FRAME, Throw, false, 0, true);
}

function Movement(e:Event):void
/*MOVEMENT*/
{
    rp = rc;
    s.rotation = -sensitivity*( mxs - mouseX) + pp;
    rc = s.rotation;
}

function Throw(e:Event):void
/*Momentum - carries on rotating momentum*/
{
    var d:int;/*delta rotation*/
    d = rc - rp;/*determine d*/
    s.rotation += d;/*change rotation*/

    if((d>0?d:-d)<1)/*(d>0?d:-d) this is saying '(is d > 0 ? yes then return d : no then return -d) : is this less than 2 ?*/
    /*This could also be 'if(Math.abs(d)<2)'*/
    {
       &nbsp ;s.removeEventListener(Event.ENTER_FRAME, Throw, false)/*Stops spinning*/
    }
    else
    {
       &nbsp ;rp += d * friction;/*reduces momentum*/
    }
}

Sorry for the late response but I have been a little busy. Thanks a lot for your reply Shaedo but your code seems to have some issues when I try to grab the circle and rotate it the full 360 degrees. Also when I spin the circle it seems to bounce back sometimes. Do you happen to have an idea on what causes this?

Again, thanks a lot!