Rotating an object based upon mouse position

Processing Coding Questions
1

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.

// 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);
  }
}
1 Like
2

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

// 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();
  }

}
1 Like
3

i see the easing and remember we play here
Rotation and Easing ,check it out.

2 Likes
4

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 :slight_smile: