Why would a GL circle, be rendered as a cross/clover?

In my application, I draw some circles (a combo of a filled circle, and outline/stroke circle) using ofDrawCircle, but for some reason, while the filled circle looks OK, the outline circle is rendered as a “clover” form, like this:

Notice how the white outline has “cuts” in it, making it look almost as a cross. Btw, this is on Ubuntu 14.04, OF from git slightly before 0.9.0.

I tried to isolate the exact drawing commands in the code below, but unfortunately, I cannot reconstruct the problem - the example below results with:

… which looks more like a circle. What’s more, both applications output exactly the same log notice at the respective places in the code:

[notice ] current renderer type: GL circres: 20 smoothing: 0 bFill: 0

So, provided I cannot really reconstruct the problem, and it obviously isn’t due to differing circle resolution/smoothing - what could possibly be the reason for the cross/clover-like rendering of what is supposed to be the white circle outline - and how could I get it to render properly?

The minimal example code:


#include "ofMain.h"
#include "ofApp.h"

int main( ){

    ofSetupOpenGL(1024,768, OF_WINDOW);            // <-------- setup the GL context

    // this kicks off the running of my app
    // can be OF_WINDOW or OF_FULLSCREEN
    // pass in width and height too:
    ofRunApp( new ofApp());



#pragma once

#include "ofMain.h"

class ofApp : public ofBaseApp{

    void setup();
    void update();
    void draw();

    void mousePressed(int x, int y, int button);


#include "ofApp.h"

void ofApp::setup(){

void ofApp::update(){

void ofApp::draw(){
  ofLogNotice() << "current renderer type: " << ofGetCurrentRenderer()->getType() << " circres: " << ofGetCurrentRenderer()->getStyle().circleResolution << " smoothing: " << ofGetCurrentRenderer()->getStyle().smoothing << " bFill: " << ofGetCurrentRenderer()->getStyle().bFill;
  float x = 216.205, y=338.066, radius = 13.3953, strokewidth = 9;
  ofSetColor(ofColor::red, 200);
  ofDrawCircle(x, y, 0, radius);
  ofNoFill(); //stroke
  ofDrawCircle(x, y, 0, radius); // x,y,z,rad

void ofApp::mousePressed(int x, int y, int button){

Hi there,

It’s not rendering a clover, those are the joints of the shape. Basically, ofSetLineWidth() is using openGL to do the line width, so it’s limited to its implementation. Check this other discussion.

The simplest solution, if you have no transparency: draw two filled circles, the first one being larger. Something like:

  ofDrawCircle(x, y, 0, radius + strokewidth);
  ofDrawCircle(x, y, 0, radius);

Other possible solutions: ofxShivaVG, geometry shaders, or Cairo.

Thanks for the reply, @hubris :

Makes sense; however, what puzzles me is that in my example, I’ve tried to reconstruct all commands (even the actual pixel position), and the example reports the same exact renderer and circle resolution as my actual app, and they run on the same PC/OS - and yet, the example doesn’t demonstrate the joints, while my app does?

Thanks for the suggestions, in any case - will see what I can adapt for my work…