[PleaseHELP]Is any good way clipping mask like image on ofMesh

Is any good way to clipping mask like this image using ofMesh and ofImage?
I’m struggling few days… any suggestions are very appriciate.

1 Like

This thread is almost same thing I want to do. I flowed this way and tried to move vertex as random polygon.
then image distorted…

could somebody help to texture mapping on random shaped polygon?

my code is

void testApp::setup(){
sqImg.loadImage("sunflower.png");
circleTexture.allocate(sqImg.width, sqImg.height, GL_RGB);
circleTexture.loadData(sqImg.getPixels(), sqImg.width, sqImg.height, GL_RGB);
int numPts  = 8;
float angle = 0.0;
float step  = TWO_PI / (float)(numPts-1);
float cx = 300;
float cy = 300;
float r = 100;
for(int i = 0; i < numPts; i++){
    
    float angle = ofMap(i, 0, numPts-1, 0.0, TWO_PI);


    
    
	//get the -1 to 1 values - we will use these for drawing our pts.
	float px = cos(angle);
	float py = sin(angle);
	NormCirclePts.push_back( ofPoint(px, py) );
	//map the -1 to 1 range produced by cos/sin
	//to the dimensions of the image we need for our texture coords
	float tx = ofMap( px, -1.0, 1.0, 0, circleTexture.getWidth()) ;
	float ty = ofMap( py, -1.0, 1.0, 0, circleTexture.getHeight()) ;
    float d = ofRandom(-circleTexture.getWidth()/2, circleTexture.getWidth()/2);
    //float d = 0;
	NormCircleCoords.push_back( ofPoint(tx + d, ty + d) );
	//angle += step;
} }


void testApp::draw(){

ofSetColor(255, 255, 255);
float radius = 200.0; //change this to scale your circle
circleTexture.bind();
glBegin(GL_POLYGON);
for(int i = 0; i < NormCirclePts.size(); i++){
    glTexCoord2f(NormCircleCoords[i].x, NormCircleCoords[i].y);
    glVertex2f( NormCirclePts[i].x * radius + mouseX,  NormCirclePts[i].y * radius + mouseY);
}
glEnd();
circleTexture.unbind();}

It looks like if you add the random variable “d” to the positions “px” “py” instead of just the texture coords “tx”, “ty” then it would work.

Thank you very much! I changed vertexes and textures comes from center position and came here.
for debug, I draw mesh’s vertexes and coords.
looks it should be work but not correct texture mapped.

only pink color mapped, means only right bottom corners color comes.
where should I fix… it is so difficult for me. maybe OF masters could solve this problem in few minutes.

thanks in any advice. please help.

You want to create the points in texture space ( 0 -> texture width, 0 -> texture height);
So lay out all of your points on top of the image and then get their texture coords from where they lie on the image. This means you can’t have normalized points, since you don’t know where they will end up in texture space. Here is some example code:

void testApp::setup(){
    ofSetFrameRate( 60 );
    
    ofLoadImage(texture, "of.png");
    
    int numPts  = 8;
    float angle = 0.0;
    float step  = TWO_PI / (float)(numPts-1);
    float cx = 300;
    float cy = 300;
    float r = 100;
    for(int i = 0; i < numPts; i++){
        
        float angle = ofMap(i, 0, numPts-1, 0.0, TWO_PI);
        
        //get the -1 to 1 values - we will use these for drawing our pts.
        float d = ofRandom(texture.getWidth()/4, texture.getWidth()/2);
        float px = cos(angle) * d;
        float py = sin(angle) * d;
        
        NormCirclePts.push_back( ofPoint(px, py) );
        //map the -1 to 1 range produced by cos/sin
        //to the dimensions of the image we need for our texture coords
        float tx = ofMap( px, -texture.getWidth()*.5, texture.getWidth()*.5, 0, texture.getWidth(), true);
        float ty = ofMap( py, -texture.getWidth()*.5, texture.getWidth()*.5, 0, texture.getHeight(), true );
        
        //float d = 0;
        NormCircleCoords.push_back( ofPoint(tx, ty) );
        //angle += step;
    }
    
}


//--------------------------------------------------------------
void testApp::draw(){
    ofSetColor(255, 255, 255);
    float radius = 200.0; //change this to scale your circle
    texture.bind();
    glBegin(GL_POLYGON);
    for(int i = 0; i < NormCirclePts.size(); i++){
        glTexCoord2f(NormCircleCoords[i].x, NormCircleCoords[i].y);
        glVertex2f( NormCirclePts[i].x + mouseX,  NormCirclePts[i].y + mouseY);
    }
    glEnd();
    texture.unbind();
    
}

Hope this helps. :slight_smile: If you want to change the points, you can store the normalized points and the distances and re-map them every time you change them.

nick