Advertisement

[Noob] Making a plain and simple cloud

Started by October 03, 2013 08:45 AM
6 comments, last by Erik Rufelt 11 years, 1 month ago

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.

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.

Advertisement
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]:

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?

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 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'.

Advertisement
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.

An idea that might be easier is than bezier curves if you want to do it in code is to just draw many circles.

This topic is closed to new replies.

Advertisement