How do I paint clouds?

Question

I need an algorithm to paint clouds, or cloud like shapes. Obviously, I wouldn't want them all to be similar.
What should I use to generate the relevant series of X,Y coordinates to paint the clouds?
I am going to implement this either in SVG or Canvas

Answer 1

It depends on exactly what kind of clouds you're going for. You can try Perlin noise which is quite popular with game developers.

Answer 2

here is an example of Perlin noise done with silverlight: http://kodierer.blogspot.com/2009/05/oscar-algorithm-silverlight-real-time.html

it's probably something you can use and/or adapt.

Answer 3

I just stumbled accross this

http://www.mezzoblue.com/archives/2010/01/14/illustrator_/

Answer 4

If implementing in canvas and you want the puffy cloud shape not the noise kind, I would say draw a rectangle of some random length then add circles of varying sizes first to the sides then to the top to get the cloud effect. You would have to do some math to make sure the clouds did not show below the rectangle and that the top of the rectangle did not have any straight sections. But it shouldn't be to hard to implement in canvas.

Answer 5

To give your trees friends, paint many happy little accidents.

I recommend canvas - you can get crazy with the brush!

I'd like to wish you happy painting, and God bless my friend.

Answer 6

You can use the SVG feTurbulence filter primitive to generate Perlin noise, which can be used to create cloud-like textures.

Some help and examples:

• http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#feTurbulence
• http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Filters
• http://pilatinfo.org/english/filters/index.htm

The Inkscape vector graphics editor also has a big collection of predefined svg filters, see here for an example using just a few of them on some text. The "noise fill" one is using feTurbulence, and is probably quite easy to tweak. Inkscape also has a GUI for tweaking the parameters of each filter, select any shape, then select "Filter > Filter Editor..." in the menus.

Answer 7

this code makes a bunch of circles in an array of colors maybe it will help you with the clouds

    for (var i = 0; i < 12; i++)
    {
      for (var j = 0; j < 12; j++)
      {
        var ctx = document.getElementById('c1').getContext('2d');
        ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' + 
        Math.floor(255 - 42.5 * j) + ')';
        ctx.beginPath();
        ctx.arc(40 + j * 25, 40 + i * 25, 10, 0, Math.PI * 2, true);
        ctx.stroke();
       }
     }

Answer 8

Generate a cluster of bubbles (circles or horizontal ellipses) and take the union of the shapes for each cloud.