How to detect if mouse is within bounds of translated rectangle?

I’m working on a project in which I’m placing words (ofTrueTypeFont) all over the screen using ofTranslate and ofRotate. Now I’m trying to figure out how to detect if my mouse is over a word.

Consider the following simplified example, with just a rectangle:

  
  
    ofPushMatrix();  
        ofTranslate(500,500);  
        ofRotateZ(-10);  
        ofRectangle tempBounds(0,0,200,30);  
        ofRect(tempBounds);  
        if (tempBounds.inside(mouseX, mouseY)) ofBackground(255); else ofBackground(0);  
    ofPopMatrix();  
  

this example doesn’t work, because it still only works when the mouse is within the rectangle as if it wasn’t translated: mouseX between 0 and 200, mouseY between 0 and 30.

How do I get the translated coordinates of the rectangle?

I tried translating the mousecoordinates in the opposite direction, which works when I’m drawing a circle on mouseX, mouseY --> the circle shows up in the upper left corner of the screen (where the untranslated rectangle was), but then I don’t know how to get the screen-coordinates of the translated mousecoordinates.

Seems like it shouldn’t be too much of a problem, but I’ve been frying my brains over this for a few hours now, and a good night sleep didn’t yield any results ;-(

In the meantime I’ve read about transformation matrices, but still I haven’t got a clue how to implement this. Could anyone perhaps fix the example-code to work with this?

Posts I read:

Hello, I’ve been wondering the exact same thing. Have you been able to find a solution?

Hi,

when you use ofTranslate(); ofRotateZ();you are, in a way, moving the “camera”, but your rect stays at original coordinates.
You need to move the rect instead. Look at this example:
It has an example of rotations and translations using several different objects like ofVec3f, matrices, ofNode… and others…
Try to come up with an equivalent code and let us know how it goes.

First you should not use ofTraslate and ofRotate. It is bad practice.Second ofBackground calls glclear so your code would not work anyway. Try this code

in the ofApp.h add these member variables

    ofColor bgColor;
    ofMatrix4x4 modelRect;
    ofRectangle tempBounds;

in ofApp.cpp put this

void ofApp::setup(){
    modelRect.translate(500, 500, 0);
    modelRect.rotate(-10, 0, 0, 1);
    tempBounds.set(0, 0, 200, 30);

}

//--------------------------------------------------------------
void ofApp::update(){
    ofVec2f mouseRectSpace = ofVec3f(mouseX,mouseY)* modelRect.getInverse();
    if (tempBounds.inside(mouseRectSpace.x, mouseRectSpace.y)) {
        bgColor = ofColor::white;
    }else{
        bgColor = ofColor::black;
    }
}

//--------------------------------------------------------------

void ofApp::draw(){
    ofBackground(bgColor);
    ofPushMatrix();
    ofMultMatrix(modelRect);
    ofSetColor(ofColor::red);
    ofRect(tempBounds);
    ofPopMatrix();
}