Make mesh from combined ofPaths

[stephanschulz]

I am trying to make a mesh from combining two paths. one is a rectangle path the order a rounded rect path.

I am able to get a path for both shapes, get a polyline and combine them in to one mesh.
But the mesh does not automatically know that i am interested on getting the created frame.

I hope to create a mesh just for the “TV” frame, not the inside of the rounded rect.

Once i worked out how to make the mesh, i will try to use it to make a color gradient from the inside to the outside.
I have done this already but just for meshes with 4 vertices.

I would be great to get any advice on how to tesselate this path correctly.
thx

 ofNoFill();
    ofPath roundedRectPath;
  
    float r = 30;
    
    ofPushMatrix();
    ofTranslate(10, 0);
    roundedRectPath.rectRounded(0, 0, 0, 100, 100,r,r,r,r);
    ofSetColor(255);
    roundedRectPath.draw();
      ofPopMatrix();
    
    ofPushMatrix();
    ofTranslate(200, 0);
    ofSetColor(255,0, 0);
    roundedRectPath.getOutline()[0].draw();
    ofPopMatrix();
    
    
    ofSetColor(255);
    ofPushMatrix();
    ofTranslate(400, 0);
    ofSetColor(255,0, 0);
    roundedRectPath.getTessellation().drawWireframe();
    ofPopMatrix();
    
    
    //------  ofPath rectPath;
    ofPath rectPath;
    int frameW = 10;
    ofPushMatrix();
    ofTranslate(10, 200);
    rectPath.rectangle(-frameW, -frameW, 0, 100+frameW*2, 100+frameW*2);
    ofSetColor(255);
    rectPath.draw();
    ofPopMatrix();
    
    ofPushMatrix();
    ofTranslate(200, 200);
    ofSetColor(255,0, 0);
    rectPath.getOutline()[0].draw();
    ofPopMatrix();
    
    ofSetColor(255);
    ofPushMatrix();
    ofTranslate(400, 200);
    ofSetColor(255,0, 0);
    rectPath.getTessellation().drawWireframe();
    ofPopMatrix();
    
    

    ofPolyline myPline;

    int rectPathSize = rectPath.getOutline()[0].size();
    myPline.addVertices(rectPath.getOutline()[0].getVertices());
    myPline.addVertex(rectPath.getOutline()[0][0]);
    
    myPline.addVertices(roundedRectPath.getOutline()[0].getVertices());
    

    ofSetColor(255);
    ofPushMatrix();
    ofTranslate(mouseX+50, mouseY+50);
    ofSetColor(255,0, 0);
    myPline.draw();
    ofPopMatrix();
 

    ofMesh myMesh;    for(int i=0; i<rectPath.getOutline()[0].size(); i++){
        myMesh.addVertices(myPline.getVertices());
    }
    
    ofSetColor(255);
    ofPushMatrix();
    ofTranslate(mouseX+50, mouseY+250);
    ofSetColor(255,0, 0);
    myMesh.draw();
    ofPopMatrix();

[stephanschulz]

it’s always fun to find my own solutions.

but now i need to work out how to bind this mesh to an image, so to use it as a mask.

s.

    ofNoFill();
    ofPath roundedRectPath;
  
    float r = 30;
    
    ofPushMatrix();
    ofTranslate(10, 0);
    roundedRectPath.rectRounded(0, 0, 0, 100, 100,r,r,r,r);
    ofSetColor(255);
    roundedRectPath.draw();
      ofPopMatrix();
    
    ofPushMatrix();
    ofTranslate(200, 0);
    ofSetColor(255,0, 0);
    roundedRectPath.getOutline()[0].draw();
    ofPopMatrix();
    
    
    ofSetColor(255);
    ofPushMatrix();
    ofTranslate(400, 0);
    ofSetColor(255,0, 0);
    roundedRectPath.getTessellation().drawWireframe();
    ofPopMatrix();
    
    
    //------  ofPath rectPath;
    ofPath rectPath;
    int frameW = 50;
    r = 40;
    ofPushMatrix();
    ofTranslate(10, 200);
//    rectPath.rectangle(-frameW, -frameW, 0, 100+frameW*2, 100+frameW*2);
    rectPath.rectRounded(-frameW, -frameW, 0, 100+frameW*2, 100+frameW*2,r,r,r,r);
    ofSetColor(255);
    rectPath.draw();
    ofPopMatrix();
    
    ofPushMatrix();
    ofTranslate(200, 200);
    ofSetColor(255,0, 0);
    rectPath.getOutline()[0].draw();
    ofPopMatrix();
    
    ofSetColor(255);
    ofPushMatrix();
    ofTranslate(400, 200);
    ofSetColor(255,0, 0);
    rectPath.getTessellation().drawWireframe();
    ofPopMatrix();
    
    

    ofPolyline myPline_outer,myPline_inner,myPline;

    ofMesh myMesh;
    ofColor startColor = ofColor(255,255,255,255);
    ofColor endColor = ofColor(255,255,255,0);
    
    myMesh.setMode(OF_PRIMITIVE_TRIANGLE_STRIP);
    
    myPline_outer.addVertices(rectPath.getOutline()[0].getVertices());
    myPline_inner.addVertices(roundedRectPath.getOutline()[0].getVertices());
    
    
    for(int i=0; i<myPline_outer.size();i++){
        myPline.addVertex(myPline_outer[i]);
        myMesh.addVertex(myPline_outer[i]);
        myMesh.addColor(endColor);
        
        myPline.addVertex(myPline_inner[i]);
        myMesh.addVertex(myPline_inner[i]);
        myMesh.addColor(startColor);
    }
    

    ofSetColor(255);
    ofPushMatrix();
    ofTranslate(mouseX+50, mouseY+50);
    ofSetColor(255,0, 0);
    myPline.draw();
     ofSetColor(0);
    for(int i=0; i<myPline.size();i++){
        ofDrawBitmapString(ofToString(i), myPline.getPointAtIndexInterpolated(i));
    }
    ofPopMatrix();
 
    
    ofEnableAlphaBlending();
    ofSetColor(255);
    ofPushMatrix();
    ofTranslate(mouseX+50, mouseY+250);
    ofSetColor(255,0, 0);
    myMesh.draw();
    ofSetColor(255);
    myMesh.drawWireframe();
    ofPopMatrix();
    ofDisableAlphaBlending();

[stephanschulz]

i guess like this.

thanks to this post:

Help in applying texture to a circular ofMesh

you can also draw the shape using an ofPath, then get the generated mesh and apply the tex coordinates to it like: //setup ofPath path; path.curveTo(...); path.curveTo(...); ... mesh = path.getTessellation(); for(auto & v: mesh.getVertices()){ mesh.addTexCoord(tex.getCoordFromPoint(v.x,v.y)); } //draw mesh.draw()

    void makeGradient_frame(ofTexture& tex, float band, ofRectangle tt, ofRectangle ts){
        
        startColor = ofColor(255,255,255,255);
        endColor = ofColor(255,255,255,0);
        
        float w = tex.getWidth();
        float h = tex.getHeight();
        
        gradientMesh0.clear();
        gradientMesh0.setMode(OF_PRIMITIVE_TRIANGLE_STRIP);
        
        float innerRadius = 10;
        float outerRadius = 1;
        
        ofPath innerPath, outerPath;
        innerPath.rectRounded(band,band, 0, w-band*2, h-band*2,innerRadius,innerRadius,innerRadius,outerRadius);
        outerPath.rectRounded(0,0, 0, w,h,outerRadius,outerRadius,outerRadius,outerRadius);
        
        ofPolyline myPline_outer,myPline_inner;
        myPline_outer.addVertices(outerPath.getOutline()[0].getVertices());
        myPline_inner.addVertices(innerPath.getOutline()[0].getVertices());
        
        for(int i=0; i<myPline_outer.size();i++){
            gradientMesh0.addVertex(myPline_outer[i]);
            gradientMesh0.addColor(endColor);
            
            gradientMesh0.addVertex(myPline_inner[i]);
            gradientMesh0.addColor(startColor);
        }

        for(auto & v: gradientMesh0.getVertices()){
            gradientMesh0.addTexCoord(tex.getCoordFromPoint(v.x,v.y));
        }
        
        tex.bind();
        gradientMesh0.draw();
        tex.unbind();
        
        
    }