Change the thickness of a curved line avoiding ofSetLineWidth(3.0f)?

I’m still using ofSetLineWidth(3.0f), but it seems to be deprecated in the new OpenGL, and it also creates some broken curves. I’m working on the M1 mac model.
I’ve been searching for the solution in the forum and generally, they point to a shader, which makes perfect sense. Hence, how to change the thickness of a curve being drawn using ofPath by applying a shader on it? My problem is that I only need to apply this thickness to a specific part of the drawing, perhaps an easy example to check?

The code I’m using is this one:

for(int i = 0; i < numSteps; i++){
        glm::vec2 pos1 = positions_extension[i];
        glm::vec2 pos2 = positions_extension[(i+1)%numSteps];
        glm::vec2 between = (pos1 + pos2 ) * 0.5 ;
        glm::vec2 circles = center +((between - center) * 2.039) ;
        
        //If target is on
        if(chordInfo.size() > 0 && chordInfo[i].target){
            ofSetColor(palette[i]);
            ofNoFill();
            ofSetLineWidth(2.0);
            ofDrawCircle(circles.x, circles.y, 10.0f);
            ofFill();
            ofSetColor(palette[i],100);
            ofDrawCircle(circles.x, circles.y, 100.0f);
            ofSetLineWidth(5.0);
            drawDottedLine(center, circles);
            ofSetColor(255);
            targetFont.drawString(objectivoNombre, circles.x+onom.x, circles.y+20);
        }
        glm::vec2 pos3 = center + ((between - center) * scale);
        
        path.setColor(palette[i]);
        path.moveTo(pos1);
        path.bezierTo(pos1, pos3, pos2);
        path.setFilled(false);
        path.setStrokeWidth(borderArc);
        path.draw();
        path.clear();
        
        //draw the second path
        glm::vec2 pos1b = positions_limit[i];
        glm::vec2 pos2b = positions_limit[(i+1)%numSteps];
        
        glm::vec2 betweenb = (pos1b + pos2b ) * 0.5 ;
        
        glm::vec2 pos3b = center + ((betweenb - center) * scale);
        
        path.setColor(palette[i]);
        path.moveTo(pos1b);
        path.bezierTo(pos1b, pos3b, pos2b);
        path.setFilled(false);
        path.setStrokeWidth(borderArc);
        path.draw();
        path.clear();
        
        //Target
        if(chordInfo.size() > 0 && chordInfo[i].target){
            ofColor quesito = ofColor(pallette[i], 100);
            path.setColor(quesito);
            path.moveTo(pos1);
            path.bezierTo(pos1, pos3, pos2);
            path.lineTo(center);
            path.lineTo(pos1);
            path.setFilled(true);
            path.setStrokeWidth(1.0);
            path.draw();
            path.clear();
        }
    }

And it creates this broken edges on the curve, it also have an error in the border of the line, I don’t think ofSetLineWidth is the correct method.
Screenshot 2022-05-13 at 18.21.15

​​​​​​​​​​​There are several solutions to that issue. You can check oF examples folder and shader examples. I remember an example that sets the line width using shaders…

Another solution can be applying texture to a plane mesh. The basic idea is to create double points across your curve path. Then apply a solid color or texture to make meshes look like thick lines. According to your resolution, there can be performance issues. You can have a look at the following discussion;
ofMesh LineStrips + textured - advanced - openFrameworks

1 Like

Nice, I can see it is something related to chords. if you don’t need outstanding framerate you can use Cairo Renderer to render some beautiful lines in any width.

Hi Dimitre,
Yes, it works manipulating chords :laughing:
I remember a pdfExample that used Cairo, but now it is not there in the graphics folder. Any idea where to look to render Cairo on of?

Ah, I found it on the input_output folder

Great! you can try to grab some code from here too

1 Like