Neat circle strokes

[jjooaaoo]

hi all,

I’m trying to do some draws in openframeworks, But i can’t get neat/smoothed graphics especially in the strokes
I’m already using:

  
  
ofEnableSmoothing();  
ofSetCircleResolution(48);  
  

With this the graphics are better but not as good as i want. Please see the PRINTSCREEN in the attachment.
So, how can i get better super smoothed graphics?

many Thanks
jf


[MatthiasEsterl]

As far, as i know, ofEnableSmoothing() has no effect on circles.

ofAuckland posted something on how to solve this issue, but i am not sure if it (still) works.
See the example here: https://sites.google.com/site/ofauckland/examples/smoothing-edges-anti-aliasing

You may could report back after trying this solution.

[jjooaaoo]

hi me,
Thanks for the quick answer…

i’ve tried ofAuckland solution, but i can’t notice the difference. Do you know another way to do this?

  
  
#include "ofMain.h"  
#include "testApp.h"  
#include "ofAppGlutWindow.h"  
  
  
int main( ){  
    ofAppGlutWindow window;  
    window.setGlutDisplayString("rgba double samples>=4");  
    ofSetupOpenGL(&window, 1024,768, OF_WINDOW);  
    ofRunApp( new testApp());  
}  
  

many thanks
jf

[MatthiasEsterl]

Hey,

yes there is really one thing I just thought of:
Maybe i am wrong, but it looks like you’re drawing the filling of the circles after you draw the outlines. Drawing it the other way around drastically improves the quality of the circles.

Try it in this order:

  
      
    ofSetColor(0);  
    ofFill();  
    ofCircle( x, y, 250 );  
  
    ofSetColor(0, 50+color, 20);  
    ofNoFill();  
    ofCircle( x, y, 250 );  
  

Insted of

  
  
    ofSetColor(0, 50+color, 20);  
    ofNoFill();  
    ofCircle( x, y, 250 );  
      
    ofSetColor(0);  
    ofFill();  
    ofCircle( x, y, 250 );  
  

You can see the difference at the attached images.

[jjooaaoo]

Hey me,

Yeah it’s much better, but it still not the quality i was looking for it must be some other way to smooth the strokes from the circles…

cheers
jf

[ascorbin]

hi

some ideas

• antialiasing: try window.setGlutDisplayString(“rgba double samples>=4”); in main.cpp
• blur it a bit: with ofxBlur
• use Textures: scale between different sizes
• use ofxFatLines: nice antialiased lines withe VaseRenderer
• try cairo

greetings ascorbin

[MatthiasEsterl]

[…]

• antialiasing: try window.setGlutDisplayString(“rgba double samples>=4”); in main.cpp
  […]

This seems not to create different results (see above).

best,
/m

[maximillion]

Have you tried ofSetCircleResolution(int res) ?

http://www.openframeworks.cc/documentation/graphics/ofGraphics.html#show-ofSetCircleResolution

[jjooaaoo]

Hi maximillion,

Yes i did :$, it does make the resolution(number of points on the circle) better, but does not smooth the strokes.

cheers
jf

[comym]

Hi guys,

I’m doing a exercise here playing with circles but I’m having some issues withe the resolution of the circles. These are simple ofDrawCircle() with ofNoFill(), nothing else. On the example I tried to increase the thickness of the stroke to show you guys what is happening. Basically I always have a a “broken” circle showing those 4 gaps around.

I already tried many different things like ofSetCircleResolution, window.setGlutDisplayString, ofSetCircleResolution, etc but nothing seems to work.

I could you help me with that? Any thoughts?
I’d like to achieve pixel perfect graphics on my OF sketches and experiments.

Thanks!

[hubris]

Hi there!

Using ofNoFill() and ofSetLineWidth() usually doesn’t get you nice results. If think ofSetLineWidth() uses an old openGL implementation.

There are better ways to play with line-widths. For exemple, if you want to draw circles, you can quickly combine arc and arcNegative from an ofPath.

Please get an example from here, that I’ve previously provided.

[arturo]

yes something like:

//.h
ofPath circle;

//setup
circle.arc(x,y,radius,0,360);
circle.arc(x,y,radius - lineWidth, 0,360);

//draw
circle.draw();

should give you a nice circle

the first arc, draws a filled circle and the second “cuts a hole” in it to leave a contour of lineWidth width.

[comym]

Thanks a lot guys, I’m gonna have a try here and come back to you showing the results.
Cheers!

[comym]

Solved! I just modified the central circle to still have the other ones to compare with. Check the difference.
For the central one, instead of using a normal circle, I use the suggested method of combining two arcs.

// .h
ofPath circle;

//setup
circle.setCircleResolution(50);
circle.arc( 0, 0, radiusCircle, radiusCircle, 0, 360);
circle.arc( 0, 0, radiusCircle - lineWidth, radiusCircle - lineWidth, 0, 360);

//draw
circle.draw();

Thanks for your help, cheers!

[eunsoossi]

When I use this code, the circle is flickering.

I just changed from “ofDrawCircle()” to that code.

What is difference?

[arturo]

can you post a small example that shows the flickering behaviour? it’s hard to know what might be going on without seeing an example

[eunsoossi]

https://www.dropbox.com/s/9qootpt6kjqsw7z/Screen%20Recording.mov?dl=0

This link is movie clip how my code is working.

I changed my code from this part

ofSetColor(200);
ofFill();
ofDrawCircle(location.x, location.y, 50);
 
ofSetColor(0, 0, 0);
ofNoFill();
ofDrawCircle(location.x, location.y, 50);

to this. (I changed position for circle just to make code simple)

//setup
circle.setCircleResolution(50);
circle.arc( 300, 300, 100, 100, 0, 360);
circle.arc( 300, 300, 100 - 10, 100 - 10, 0, 360);

//draw
circle.draw();

Maybe I understand wrong way about this full code because I’m new for openframeworks.

Please help-

Thanks.

[arturo]

with the //setup and //draw comments i meant that, that code should go in the setup and draw functions, otherwise it’ll add a circle every frame and because of how path works whenever you draw on top of something it makes a “hole” in the previous drawing. you just need to create the shape once in setup and then draw it in the draw function

[eunsoossi]

Thank you very much-