# Continue rotating a circular image with mouseDragged where it was left off

**URL:** <https://discourse.processing.org/t/continue-rotating-a-circular-image-with-mousedragged-where-it-was-left-off/20759>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [May 11, 2020, 10:32pm UTC](https://discourse.processing.org/t/continue-rotating-a-circular-image-with-mousedragged-where-it-was-left-off/20759 "2020-05-11T22:32:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![soraiaxb](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@soraiaxb](https://discourse.processing.org/u/soraiaxb)\
**Post date:** [May 11, 2020, 10:32pm UTC](https://discourse.processing.org/t/continue-rotating-a-circular-image-with-mousedragged-where-it-was-left-off/20759/1 "2020-05-11T22:32:16Z")

</div>

Hi, I’m trying to rotate a circular image on mouseDragged and I got the image to rotate when dragging the mouse but when I stop dragging and start dragging again from a different position of the image it doesn’t continue the drag where it was left off. How can I start dragging again from its end position. This is some of the code I have:

```auto
float rotAngle = 0;
void draw(){ 
    pushMatrix();
    translate(width/2, height/2);
    rotate(rotAngle);
    imageMode(CENTER);
    image(abc, 0, 0, ABC_SIZE, ABC_SIZE); //abc is the image and ABC_SIZE the size of the image
    popMatrix();  
}

void mouseDragged(){
    rotAngle = atan2(mouseY - height/2, mouseX - width/2);
}

```

---

<div class="post-metadata">

**Author:** ![soraiaxb](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@soraiaxb](https://discourse.processing.org/u/soraiaxb)\
**Post date:** [May 13, 2020, 12:43am UTC](https://discourse.processing.org/t/continue-rotating-a-circular-image-with-mousedragged-where-it-was-left-off/20759/2 "2020-05-13T00:43:33Z")

</div>

I was able to kinda do it with this code:

```auto
float rotAngle, originalRotAng, newRot, originalTouchAng = 0;
void draw() { 
    if (mousePressed == true) {
       originalTouchAng = atan2(mouseY - height/2, mouseX - width/2); //original angle at which the image was tapped
    }
    pushMatrix();
    translate(width/2, height/2);
    rotate(rotAngle);
    imageMode(CENTER);
    image(abc, 0, 0, ABC_SIZE, ABC_SIZE); //abc is the image and ABC_SIZE the size of the image
    popMatrix();  
}

void mouseDragged() {
    originalRotAng = rotAngle; // original angle of the image
    newRot = atan2(mouseY - height/2, mouseX - width/2); // 
    rotAngle = originalRotAng + newRot - originalTouchAng; // new angle for the rotation of the image
}

```

It does continue the rotation where it was left off but now it rotates way faster than the mouse drag the farther it is rotated from the center. Any ideas?

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [May 13, 2020, 4:43am UTC](https://discourse.processing.org/t/continue-rotating-a-circular-image-with-mousedragged-where-it-was-left-off/20759/3 "2020-05-13T04:43:07Z")

</div>

> [@soraiaxb](#):
>
> It does continue the rotation where it was left off but now it rotates way faster than the mouse drag the farther it is rotated from the center. Any ideas?

If you want it to “smoothly” rotate, maybe base the `newRot` off of the change of the mouse’s position (Something like mousex - pmousex).

Otherwise, just try different things! There’s no right way to do this haha

Edit: Welcome to the forums!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 15, 2020, 2:58am UTC](https://discourse.processing.org/t/continue-rotating-a-circular-image-with-mousedragged-where-it-was-left-off/20759/4 "2020-05-15T02:58:07Z")

</div>

See related:

> [@Creating sectors in a rotating circular image](https://discourse.processing.org/t/creating-sectors-in-a-rotating-circular-image/20781):
>
> Hi, I have a circular image that rotates on mouseDragged and the image has various letters around the circle, when I drag the image to a certain position, one of the letters goes on top of a box indicating i want to write that letter, but I’m having problems coding this last part. I don’t know how to create and identify each sector of the image when in rotation. Any ideas?