Drawing only part of an image

beginners
#1

Hey everyone,

is it possible to draw just a subsection of an image, instead of the whole image? The code I have so far was created using the information in several posts on these forums. This is my approach:

  • do not use ofImage’s draw function
  • instead, get the texture reference of it
  • bind the texture reference and perform the draw using texture coords other than (0,0)-(1,1)
  • unbind the texture again

My problem is that the texture is not drawn. Instead, I see a solid grey rectangle of the correct dimensions and at the correct location. Can anyone tell me what is wrong with the code, or if there are alternative (easier) solutions?

  
  
void testApp::draw(){  
    backgroundImage.draw(0,0);  
  
    // make sure the center of the panel can not go   
    // too far to the left or right  
    float x = ofClamp(mouseX, 0 + 0.5 * panelWidth, ofGetWidth() - 0.5 * panelWidth);  
  
    // determine the boundaries of the rectangle  
    float left = x - 0.5 * panelWidth;  
    float right = x + 0.5 * panelWidth;  
  
    // determine the texture coordinates of the rectangle  
    float tx_left = left / foregroundImage.width;  
    float tx_top = 0.0;  
    float tx_right = right / foregroundImage.width;  
    float tx_bottom = 1.0;  
  
    // get the texture data from the foregroundImage  
    ofTexture tex = foregroundImage.getTextureReference();  
  
    // now perform the draw yourself,   
    // using not the full texture, but part of it  
    tex.bind();  
  
    glPushMatrix();  
        glTranslatef(left, 0, 0);  
        glScalef(panelWidth, foregroundImage.height, 1);  
        glBegin(GL_QUADS);  
            glTexCoord2f(tx_left, tx_top);    
            glVertex3f(0, 0, 0);  
            glTexCoord2f(tx_right, tx_top);    
            glVertex3f(1, 0, 0);  
            glTexCoord2f(tx_right, tx_bottom);    
            glVertex3f(1, 1, 0);  
            glTexCoord2f(tx_left, tx_bottom);    
            glVertex3f(0, 1, 0);  
        glEnd();  
    glPopMatrix();  
  
	tex.unbind();  
}
#2

hm… you have set the drawing color ? ofSetColor(0xffffff);
greeting ascorbin

#3

By the way, it looks like my colleague has posted the same question this morning, I had not seen that. My apologies for starting another thread on the same subject.

However, the solution presented there is not exactly what I am looking for. Using for-loops to copy pixel data is not the fastest way to do things if you want another section of your image every time the mouse moves. So any other ideas are welcome.

@ascorbin: of course :slight_smile: but thanks for reminding me

edit: it might have something to do with using ‘getTextureReference()’. If I draw the image with its own draw command, it is visible. If I then add the line ‘ofTexture tex = img.getTextureReference();’ and do nothing else, the image is only visible the first frame, but then becomes grey/white. As if the texture data is destroyed by requesting a reference to it. Might be it’s a C++ thing that I am not aware of, but isn’t that weird?

#4

Ok, I solved it, but I still don’t know why the solution works. These are the changes I made to my code (using a quote so I can emphasize the changes):

// determine the texture coordinates of the rectangle
float tx_left = left / foregroundImage.width;
float tx_top = 0.0;
float tx_right = right / foregroundImage.width;
float tx_bottom = foregroundImage.height / (float) foregroundImage.width;

// now perform the draw yourself, using not the full texture, but part of it
foregroundImage.getTextureReference().bind();

…(draw)…

foregroundImage.getTextureReference().unbind();

Can someone shed a light on why this code works, where my previous code did not?