Related question: is it possible to reverse-translate mouseX and mouseY?

Here's my basic scenario: I'm building a graphing application, and my graphing coordinate system should be centered on the window. So during setup() I translate the whole matrix to (width/2,height/2). Easy enough.

Now I want to instantiate a complex shape centered on arbitrary coordinates on said graph, and rotated an arbitrary amount. So I pushMatrix(), use translate/rotate, and then draw my complex shape from the new origin. Also great!

Now I want to be able to click/drag the object. Hmm, this is where it's tricky. My mouse coordinates seem to be absolute, so the two nested matrixes that define my complex shape do not transform my mouse position

Any ideas?

yconst: Beautiful. Thank you SO MUCH for your thorough answer. ScreenX, ModelX, and PVector are all new to me, and exactly what I needed. Thanks a ton!

AdamTheNoob wrote on Mar 20^th, 2010, 4:34pm:

A comment on this specific question:

I think in general the answer is no.  

In 3D, it's not possible, because a pixel doesn't correspond to a specific x,y,z location--rather, it corresponds to a line (ray) of points extending outwards from the camera.  Since there's no way to specify depth with the mouse (at least until 3D mice become standardized and popular) there's no generic way to go from mouse coordinates to a location in the modelview.

In 2D, it should be possible in theory, but I haven't seen any easy way to do it.  Whenever I've run into this issue, I've always either found a workaround (like yconsts' code above--instead of translating the mouse to model coordinates, translate the things you might want to select into screen coordinates), or tracked all my transformations "manually" with global variables like currentScaleFactor, currentXTranslation, or whatever and inverted the mouse position myself.

FYI, here's what I've got so far. Just mocked up; it will need to be streamlined a bit, especially since my end-goal is to have a whole array of these drag-able objects, but it's a start:

**NOTE: Updated since original posting:

Code:

   PFont fontA;
  PFont fontB;
  
  grid grid1;
  clickRect[] items = new clickRect[1];
  
  void setup()
  {
    size(600,400); smooth();
    
    fontA = loadFont("HelveticaNeue-Bold-48.vlw");
    fontB = loadFont("HelveticaNeue-12.vlw");
    textFont(fontB, 12);
    
    grid1 = new grid(0,0,width-10,height-10);
    items[0] = new clickRect(100, 150, 200, 100,32);
  }
  
  void draw()
  {
    background(255);
    translate(width/2, height/2);
    
    grid1.display();
    
    for(int i=0; i<items.length; i++){
	items[i].display();
    }
  }
  
  void mousePressed()
  {
    for(int i=0; i<items.length; i++){
	if(items[i].bounds(mouseX,mouseY)) { 
	  items[i].lock();
	}
    }
  }
  
  void mouseDragged()
  {
    for(int i=0; i<items.length; i++){
	if(items[i].hover) {
	  items[i].update(mouseX,mouseY);
	}
    }
  }
  
  void mouseReleased()
  {
    for(int i=0; i<items.length; i++){
	items[i].unlock();
    }
  }

class grid {
  float x;
  float y;
  float w;
  float h;
  
  grid(float xi,float yi,float wi,float hi) {
    x = xi;
    y = yi;
    w = wi;
    h = hi;
  }
  
  void display() {
    rectMode(CENTER); stroke(150); noFill(); strokeWeight(1);
    rect(x,y,w,h);
    
    for(int i=0; i<=5; i++) {
	stroke(245);
	if(i==0) stroke(#ffb0b0);
	line(x+(i*w/10), y-h/2, x+(i*w/10), y+h/2);
	if(i!=0) line(x-(i*w/10), y-h/2, x-(i*w/10), y+h/2);
	
	if(i==0) stroke(#b5ffbe);
	line( x-w/2, y+(i*h/10),  x+w/2, y+(i*h/10) );
	if(i!=0) line(x-w/2, y-(i*h/10), x+w/2, y-(i*h/10));
    }
  }
}

class clickRect {
  float mouseX1 = 0;
  float mouseY1 = 0;
  
  float x, y; // center X, center Y
  float w, h; // width, height
  float a; // angle (counter-clockwise from horiz)
  
  float[] c = new float[8]; // will contain (x,y) for all four points
  
  boolean locked = false;
  boolean hover = false;
  
  clickRect(float xi, float yi, float wi, float hi,float ai) {
    x = xi; y = yi;
    w = wi; h = hi;
    a = radians(ai);  
    findCorners();
  }
  
  void display() {
    if(bounds(mouseX,mouseY)) { fill(#ffe030,20);  hover = true; } else { fill(0,20); hover = false; }
    stroke(0); strokeWeight(2); rectMode(CENTER);
    pushMatrix();
	transform(); // move the object center into place
	rect(0,0,w,h);
    popMatrix();
  }
  
  void update(float xi, float yi) {
    if(locked) {
	xi = xi - mouseX1; yi = yi - mouseY1;
	x = x + xi;
	y = y - yi;
	findCorners();
	mouseX1 = mouseX; mouseY1 = mouseY;
    }
  }
  
  void transform() {
    translate(x,-y); rotate(a);
  }
  
  void findCorners() {
    c[0] = -w/2; /* top-left X */	c[1] = -h/2; /* top-left Y */
    c[2] = w/2; /* top-right X */	c[3] = -h/2; /* top-right Y */   
    c[4] = w/2; /* bottom-right X */   c[5] = h/2; /* bottom-right Y */
    c[6] = w/2; /* bottom-left X */    c[7] = -h/2; /* bottom-left Y */
  }
  
  boolean bounds(float xi, float yi) {
    pushMatrix();
	transform(); // we'll be reversing the transforms manually for the mouse coordinates
	
	// find out pixel coordinates of translated object center
	float x2 = screenX(0,0); 
	float y2 = screenY(0,0);
    popMatrix();
    
    // input coordinates must be translated and rotated to match object coordinate system:
    // see http://en.wikipedia.org/wiki/Rotation_(mathematics)
    float xj = (xi-x2)*cos(-a) - (yi-y2)*sin(-a); // based on x' = x * cos(a) - y * sin(a)
    float yj = (xi-x2)*sin(-a) + (yi-y2)*cos(-a); // based on y' = x * sing(a) + y * cos(a)
    
    // since inputs are now oriented to object, it's easy to find out if input is inside the bounding box
    if( xj < c[2] && xj > c[0] && yj > c[1] && yj < c[5]) return true;
    else return false;
  }
  
  void lock() { locked = true; mouseX1 = mouseX; mouseY1 = mouseY; }
  void unlock() { locked = false; }
  
}
 

Good call, yconst. I've already updated it to allow multiple drag-enabled objects, and now I'm working on a collision-detection system. I'll be sure to get your advice!

Thanks again for all your help!