Jump to content
  • Advertisement
Sign in to follow this  
arnoldlayne42

OpenGL [Noob] Making a plain and simple cloud

This topic is 2112 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I hope such beginner questions aren't looked down upon here. 

Anyway, I've *just* begun with OpenGL and I'm trying to make a simple cloud. Something like these:

 

Top-5-Best-Free-Cloud-Storage-Services-Tcloud.gif

 

So my first instinct was to make separate bezier curves for each of the curves in the cloud. I did it, but it's turning out to be too tedious, with recalculating all the points and controls for each curved segment.

 

What would be a better way to do this? Also, I want to fill it with a color. 

 

 

Thanks.

Share this post


Link to post
Share on other sites
Advertisement

The easiest way to do it is to use textures, and paint them with whatever image editing software you like.

 

If you still need other ideas:

The cloud from the first image looks like it can be easily accomplished in a pixel shader, with circles/ellipses. Filling is accomplished by using the filled circle/ellipse equation:

r^2 <= (a * x)^2 + (b * y)^2.

 

In a pixel shader, you test if your pixel coordinates obey this equation for any of the circles/ellipses, and if so, you fill that pixel with the color of the cloud.

 

For the edges, you do something similar, but in addition to doing the reverse of the test above (to exclude parts of circle edges that lie inside the cloud), you also check the equation a second time for each circle/ellipse, this time, with a radius that is a bit larger. If this test passes, you paint that pixel with the edge color. Ex.: ((r^2 >= (a * x)^2 + (b * y)^2) && ((r + 10)^2 <= (a * x)^2 + (b * y)^2)) would give you a 10-pixel-wide edge.

 

You can probably simplify these equations to remove a or b. You have to make sure there aren't any spaces between your circles, or your clouds will have holes in them.

 

Another way to accomplish the above is to use point sprites with some kind of XOR blending mode, but then you'd have to use textures anyway, and figuring out the exact XOR blending equation would be more tedious than pre-rendering the final clouds into textures.

Edited by tonemgub

Share this post


Link to post
Share on other sites
I tried to generate it using multiple beziers. But I'm having a strange problem while trying to fill it.
On the right is the shape generated by GL_LINE_STRIP and on the left is it generated by GL_POLYGON.
hnJWs.png
There's a function which generates each point 1 by 1 in order. 
 
 
Why is there such a big difference in the basic shape? Notice how less 'curved' each portion of the cloud is in the GL_POLYGON version. 
 
Any clue how to fix this? Or maybe use something else to fill this polygon I have?
 
 
  [1]: 

Share this post


Link to post
Share on other sites

That looks like OpenGL's internal tesselation at work. Do all of your Bezier curves start or end at the left-most point? They seem to be converging towards it, or like they're converging towards the start point of the previous bezier curve? I don't know how you're building the polygons, but it could also be that you're adding that point to each of them somewhere. Myabe you meant to use the last point of the last curve but instead used the first one?

Share this post


Link to post
Share on other sites

I think its wrong because you were drawing a single or very few polygon thats concave. You need to cut it up into convex polygons, preferably triangles to avoid having it draw outside the shape.

Though you better just draw it in a program like Inkscape, convert it into a texture and put the texture on a quad.

Share this post


Link to post
Share on other sites

I think its wrong because you were drawing a single or very few polygon thats concave. You need to cut it up into convex polygons, preferably triangles to avoid having it draw outside the shape.

Though you better just draw it in a program like Inkscape, convert it into a texture and put the texture on a quad.

 

I had to use GL_TRIANGLES after triangulating the points about a center point inside the cloud to get it right.

 

Although this method is causing some other problems in another shape:

 

I have a shape which comprises of a 2 joined bezier curves. I'm trying to fill it using GL_TRIANGLES about an internal point. Here are the results:

aAUsF.jpg
 
On the right is the actual shape displayed via GL_LINE_STRIP.  
On the left is the result after GL_TRIANGLES after giving the points in a triangular way about a center point..
 
As you can see, the curvy shape has disappeared and instead it's (almost) a straight edge.
Any idea how can I fix this? 
 

 

Also, can you elaborate/link me to some place which explains the Inkscape point? How does that work exactly? I didn't quite understand 'putting the texture on a quad'.

Edited by arnoldlayne42

Share this post


Link to post
Share on other sites
Your polygon is still concave. Please read this: http://en.wikipedia.org/wiki/Convex_and_concave_polygons
You can not cut up a concave polygon in any way you like, you have to make sure that you dont have any triangle that includes an area outside the shape. Your picture looks like you just made 4 triangles from that shape where 2 of the triangles include an edge thats outside the shape.
 
Because thats complicated people often make their life more easy by just using a simple shape like a quadrilateral(or two triangles near each other), where a texture(an image they made outside of their actual program) is applied onto it using some OpenGL function after loading it from your program. The image can contain invisible areas where the alpha value(the opacity) is zero and all kinds of rgb colors they want and its premade inside a paint program usually.
Inkscape is just a free program for making art using vector-graphics ( http://inkscape.org/ , http://en.wikipedia.org/wiki/Inkscape ), where I thought it could be useful for you to know about. These could then be transformed into a raster image, for example using gimp, another free paint program ( http://www.gimp.org/http://en.wikipedia.org/wiki/GIMP ). Such an image could then be used as a texture. Edited by wintertime

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!