# Rotating an object based upon mouse position

**URL:** https://discourse.processing.org/t/rotating-an-object-based-upon-mouse-position/9236
**Category:** Coding Questions
**Created:** [March 12, 2019, 5:04pm UTC](https://discourse.processing.org/t/rotating-an-object-based-upon-mouse-position/9236 "2019-03-12T17:04:30Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![P1505](https://avatars.discourse-cdn.com/v4/letter/p/58f4c7/32.png) [@P1505](https://discourse.processing.org/u/P1505)
#### Post date: [March 12, 2019, 5:04pm UTC](https://discourse.processing.org/t/rotating-an-object-based-upon-mouse-position/9236/1 "2019-03-12T17:04:31Z")

</div>

Hi all.

I have a couple of questions I’m stumped on. I’m trying to make a basic dial control, where rotation outputs a +1 or -1 so I can update a number on the screen. Before I get to that though I’m struggling with the basics. I have an object I want to rotate which is working but I want to rotate it around it’s own centre. I also want to clear and redraw the screen as it rotates. Any ideas?

Cheers.

```auto
// variables
DialControl dialControl;
float angle = 0;
float targetAngle = 0;
float easing = 0.25f;

void setup() {
  size(375,812);
  background(255);
  dialControl = new DialControl(375, 490, 242, 0, 255);
}

void draw() {
  dialControl.update();
  dialControl.display();
}

class DialControl {
  float xPos, yPos;
  float dialSize;
  color dialFill = color(0);
  color fingerFill = color(255);
  boolean selected, moving;
  
  void mouseDragged() {
    update();
  }
  
  DialControl(int _x, int _y, int _size, color _col, color _fcol) {
    xPos = _x;
    yPos = _y;
    dialSize = _size;
    dialFill = _col;
    fingerFill = _fcol;
  }
  
  void update() {
    angle = atan2( mouseY - height/2, mouseX - width/2 );
  
    float dir = (angle - targetAngle) / TWO_PI;
    dir -= round( dir );
    dir *= TWO_PI;
    
    targetAngle += dir * easing;
    
    noFill();
    stroke( 200 );
    pushMatrix();
    translate( width/2, height/2 );
    rotate( targetAngle );
    popMatrix();
  }
  
  void display() {
    PShape dial = createShape(GROUP);
    //create the main circle
    fill(dialFill);
    PShape dialBody = createShape(ELLIPSE, xPos/2, yPos+(dialSize/2), dialSize, dialSize);
    
    //create the smaller circle
    fill(fingerFill);
    PShape dialFinger = createShape(ELLIPSE, xPos/2, yPos+(dialSize/4), dialSize/4, dialSize/4);
    
    dial.addChild(dialBody);
    dial.addChild(dialFinger);
    
    rotate(targetAngle);
    shape(dial);
  }
}

```

---

<div class="post-metadata">

### Author: ![P1505](https://avatars.discourse-cdn.com/v4/letter/p/58f4c7/32.png) [@P1505](https://discourse.processing.org/u/P1505)
#### Post date: [March 12, 2019, 10:40pm UTC](https://discourse.processing.org/t/rotating-an-object-based-upon-mouse-position/9236/2 "2019-03-12T22:40:43Z")

</div>

I got it sort of working, but it rotates twice as much as I’d like.

```auto
// variables
DialControl dialControl;
float angle = 0;
float targetAngle = 0;
float easing = 0.15f;

void setup() {
  size(375,812);
  background(255);
  dialControl = new DialControl(375, 490, 242, 0, 255);
}

void draw() {
  dialControl.update();
}

class DialControl {
  float xPos, yPos;
  float dialSize;
  color dialFill = color(0);
  color fingerFill = color(255);
  boolean selected, moving;
  
  void mouseDragged() {
    update();
  }
  
  DialControl(int _x, int _y, int _size, color _col, color _fcol) {
    xPos = _x;
    yPos = _y;
    dialSize = _size;
    dialFill = _col;
    fingerFill = _fcol;
  }
  
  void update() {
    angle = atan2( mouseY - height/2, mouseX - width/2 );
  
    float dir = (angle - targetAngle) / TWO_PI;
    dir -= round( dir );
    dir *= TWO_PI;
    
    targetAngle += dir * easing;
    
    pushMatrix();
    translate(width/2, height/2 );
    rotate( targetAngle );
    
    PShape dial = createShape(GROUP);
    //create the main circle
    fill(dialFill);
    PShape dialBody = createShape(ELLIPSE, 0, 0, dialSize, dialSize);
    
    //create the smaller circle
    fill(fingerFill);
    PShape dialFinger = createShape(ELLIPSE, 0, 0 +(dialSize/4), dialSize/4, dialSize/4);
    
    dial.addChild(dialBody);
    dial.addChild(dialFinger);
    
    rotate(targetAngle);
    shape(dial);
    
    popMatrix();
  }

}

```

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [March 13, 2019, 3:27am UTC](https://discourse.processing.org/t/rotating-an-object-based-upon-mouse-position/9236/3 "2019-03-13T03:27:16Z")

</div>

i see the easing and remember we play here  
[Rotation and Easing](https://discourse.processing.org/t/rotation-and-easing/5704/4) ,check it out.

---

<div class="post-metadata">

### Author: ![P1505](https://avatars.discourse-cdn.com/v4/letter/p/58f4c7/32.png) [@P1505](https://discourse.processing.org/u/P1505)
#### Post date: [March 13, 2019, 9:12am UTC](https://discourse.processing.org/t/rotating-an-object-based-upon-mouse-position/9236/4 "2019-03-13T09:12:33Z")

</div>

Ohh that’s neat. But it doesn’t work if you move the circle off-centre. I need to grab a coffee and play, I’m being lazy 🙂