How to draw clouds?

Question

I need an algorithm to draw clouds or cloud shapes. Obviously, I would not want them all to be alike. What should I use to create an appropriate series of X, Y coordinates for drawing clouds?
I am going to implement this in either SVG or Canvas

Answer 1

You can use the SVG feTurbulence filter primitive to generate Perlin noise, which you can use to create cloud 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

Inkscape svg, . , . " " feTurbulence , , . Inkscape , "p > ..." .

Answer 2

, . Perlin, .

Answer 3

, .

- !

, .

Answer 4

Perlin, silverlight: http://kodierer.blogspot.com/2009/05/oscar-algorithm-silverlight-real-time.html

, -, / .

Answer 5

, , , , , , . , , . .

Answer 6

this code creates a bunch of circles in an array of colors, maybe this 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 7

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