Page 5
Random cartoon flowers
Page 6
Index
See this article in english 
Page 7
Cartoon-Style rocks and trees

Cartoon-Style clouds

Alexander Hristov

Althoug I didn't use this technique in any of my games, I'm sharing it hoping that someone wil find it useful. My initial intention was using it in a side-scroller, but other options are possible.

Basically, we want to generate clouds. Not the puffy, realistic ones (which can be made with perlin noise), but more cartoon-like. I got the idea original idea from an Adobe Illustrator tutorial with the same purpose.

Basically, a cartoon cloud is a set of overlapping ellipses that are merged into a single shape:

Cartoon clouds

Fortunately, Java has a very powerful Constructive Geometry set of primitives that act on java.awt.geom.Area objects and allow precisely this kind of operation. The add() method fuses two different shapes into a single one.

The trick to making the cloud is keeping the centers of the ellipses constrained inside a small box at the center of the cloud so that no ellipse strays too far away. Otherwise, we can get wierd effects. The whole code is as simple as:

 
    Random rnd = new Random();
    Area cloud = null;
    for (int i = 0; i < 10; i++) {
      int x = xc+rnd.nextInt(50)-25;
      int y = yc+rnd.nextInt(50)-25;
      int rx = rnd.nextInt(sizeX-100)+100;
      int ry = rnd.nextInt(sizeY-25)+25;
      Area newPart = new Area(new Ellipse2D.Double(x,y,rx,ry)); 
      if (cloud == null)
        cloud = newPart; 
      else
        cloud.add(newPart);
    }
  
 

The shadow effect is achieved simply by translating the cloud shape a bit and filling it with a darker color.

 
    g.setColor(Color.darkGray);
    g.fill(cloud);
    g.translate(-5,-5);
    g.setColor(new Color(255,255,255,240));
    g.fill(cloud);
  
 

Here are some results that you can obtain with this snippet:

Sample Cloud 1
Sample Cloud 2
Sample Cloud 2

The CloudsTutorial.java application included contains the above code and is a fully-working application.

Source code



 

Comments

 

Add a Comment

Name (optional)
EMail (optional, will not be displayed)

Text