The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Results 1 to 15 of 15

Thread: Rotating circle by mouse

  1. #1

    Rotating circle by mouse

    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.ymouseX-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?
    Last edited by GrayFox; January 31st, 2010 at 01:21 PM.

  2. #2
    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?

  3. #3
    Quote Originally Posted by creatify View Post
    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.

  4. #4
    TheCanadian's Avatar
    10,305
    posts
    Noo doot aboot it, eh?
    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;
    }
    Proud Montanadian
    We tolerate living and breathing. And niches.

    Name Brand Watches

    Maybe getTimer() or TweenMax is the answer to your problem . . .

  5. #5
    Quote Originally Posted by TheCanadian View Post
    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?

  6. #6
    Quote Originally Posted by GrayFox View Post
    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...
    Blog article of the month: Why My One Line 'if' Statements Are Unusual
    Twitter: @IQAndreas
    GitHub: IQAndreas

  7. #7
    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.

  8. #8
    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
    Blog article of the month: Why My One Line 'if' Statements Are Unusual
    Twitter: @IQAndreas
    GitHub: IQAndreas

  9. #9
    TheCanadian's Avatar
    10,305
    posts
    Noo doot aboot it, eh?
    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.
    Proud Montanadian
    We tolerate living and breathing. And niches.

    Name Brand Watches

    Maybe getTimer() or TweenMax is the answer to your problem . . .

  10. #10
    Quote Originally Posted by IqAndreas View Post
    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.

  11. #11
    Quote Originally Posted by GrayFox View Post
    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?
    Blog article of the month: Why My One Line 'if' Statements Are Unusual
    Twitter: @IQAndreas
    GitHub: IQAndreas

  12. #12
    Quote Originally Posted by IqAndreas View Post
    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.

  13. #13
    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*/
    	}
    }

  14. #14
    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*/
    	}
    }
    Last edited by Shaedo; February 8th, 2010 at 08:01 PM.

  15. #15
    Quote Originally Posted by Shaedo View Post
    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*/
    {
    &nbsp;&nbsp;&nbsp;&nbsp;s.addEventListener(Event.ENTER_FRAME, Movement, false, 0, true);
    &nbsp;&nbsp;&nbsp;&nbsp;s.removeEventListener(Event.ENTER_FRAME, Throw, false);
    &nbsp;&nbsp;&nbsp;&nbsp;mxs=mouseX;
    &nbsp;&nbsp;&nbsp;&nbsp;pp=s.rotation;
    }

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

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

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

    &nbsp;&nbsp;&nbsp;&nbsp;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 ?*/
    &nbsp;&nbsp;&nbsp;&nbsp;/*This could also be 'if(Math.abs(d)<2)'*/
    &nbsp;&nbsp;&nbsp;&nbsp;{
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;s.removeEventListener(Event.ENTER_FRAME, Throw, false)/*Stops spinning*/
    &nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;&nbsp;else
    &nbsp;&nbsp;&nbsp;&nbsp;{
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;rp += d * friction;/*reduces momentum*/
    &nbsp;&nbsp;&nbsp;&nbsp;}
    }
    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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012