Creating a single polygon out of many circles

I am trying to create a cartoony cloudlike bubble shape, consisting of many overlapping circles, currently being drawn with calls to ofCircle(). I would like the entire resulting shape to be semi-transparent. Is there a way to do this so that the entire shape has the same transparency level (i.e. so you can’t make out all the individual overlapping circles), as in the following example:

Is there some GL blending function that can accomplish this?

Or maybe some way to “draw” into a texture, build it up shape by shape, and then render the whole texture all at once? Any easy way to do this?



a couple of ways:

a) in the polygon example, you can see how we do muplitple contours and control the winding rules so that you can do CSG (constructive solid geometry). it’s like the p5 vertex() calls, excepts we’ve added “ofNextContour()”. The result is that you wind up with ability to merge shapes into one.

b) I bet there is a way to do that with blend modes - they are in a way too complicated to predict, but it sounds like you could do that with the right combination -…-nc.3G.html…-terials%29

c) you can draw the circles, grab it into a texture and draw the texture. see the texture screen grab example - for now, it can get you started. the next step is draw circles, grab into a texture, clear the screen, then draw what you need to as a texture. the more advanced, and friendlier way of doing that is with something called a pbuffer - an offscreen opengl context that’s a much cleaner way of rendering offscreen…

take care!

Thanks for the pointers.

I looked into this some more. Turns out it is possible to get this effect using only GL blend modes – fast and simple.

// Set color with alpha  
ofSetColor(r, g, b, 200);  
// Enable blend  
// Always take the max pixel color of src and dest layers  
// Draw many ofCircles here  
// No more blend  

I first tried doing this with glBlendFunc(), but couldn’t find a way. Then I found glBlendEquation() which did the trick.