 # Moving Clouds and Waving Grass  Description: Add puffy clouds and wavy grass to your movies
Author: John Bezanis
Added: May 23rd 2007
Version: Flash 8

This movie contains two symbols, clouds and grass. The clouds move at a constant speed and are generated dynamically. Each time a cloud moves past the screen to the left, a new cloud is created with a random shape and color. The grass is plotted at certain coordinates when the movie starts. Each blade of grass is set to a random color. At the start of each frame, the grass waves according to an x position where the blades of grass are attracted to. The code for the clouds and grass can be accessed by opening their movie clip in the library.
Code for the clouds:
1. //Number of clouds
2. clouds=6;
3. //These are just general boundaries.
4. //To use exact boundaries, create a mask in the parent level of the size desired
5. //Height of the sky
6. skyheight=Stage.height;
7. //Width of the sky
8. skywidth=Stage.width;
9. //Max size of a cloud
10. cloudsize=300;
11. //Amount of blur applied to the shapes to make them cloud-like
12. blursize=40;
13. //Clouds move at a random speed. this is the minimum speed
14. cloudminspeed=.5;
15. //Variance in speed from cloud to cloud
16. cloudspeedvariance=1;
17. //Create the clouds
18. for(c=1;c<=clouds;c++){
19. //create an empty movie clip to hold the cloud
20.   this.createEmptyMovieClip("cloud"+c,this.getNextHighestDepth());
21. //generate a cloud. Pass in the instance name of the newly created cloud
22.   shapecloud("cloud"+c);
23. //Set the x position to a random position within the boundaries
24.   eval("cloud"+c)._x=Math.random()*skywidth-eval("cloud"+c)._x/2;
25. //Set the y position to a random position within the boundaries
26.   eval("cloud"+c)._y=Math.random()*(skyheight)-eval("cloud"+c)._height;
27. }
28. //Run at the start of each frame
29. onEnterFrame=function(){
30. //Run for each cloud
31.   for(c=1;c<=clouds;c++){
32. //Move the cloud to the left according to its speed
33.     eval("cloud"+c)._x-=eval("cloud"+c).cloudspeed;
34. //If the cloud is past the stage to the left, reset it to the right. Create a new shape and color
35.     if(eval("cloud"+c)._x+(eval("cloud"+c)._width/2)+cloudsize<0){
36. //Reset the x position
37.       eval("cloud"+c)._x=skywidth;
38. //Reshape and recolor the cloud
39.       shapecloud("cloud"+c);
40.     }
41.   }
42. }
43. //This function creates the shape and color of a cloud
44. function shapecloud(cloudid){
45. //Clear the current contents of the cloud
46.   eval(cloudid).clear();
47. //Set the new shade between 224 and 255. This number is used for the red, green, and blue, to create a grayscale color
48.   cloudcolor=Math.round(Math.random()*31)+224;
49. //Use no line
50.   eval(cloudid).lineStyle(undefined, (cloudcolor+cloudcolor*0x100+cloudcolor*0x10000), 100, false, "none", "none", "none", 1);
51. //Set the fill color. cloudcolor is used 3 times, for red, green, and blue
52.   eval(cloudid).beginFill((cloudcolor+cloudcolor*0x100+cloudcolor*0x10000));
53. //Set a starting coordinate for the cloud
54.   eval(cloudid).moveTo(Math.random()*cloudsize,Math.random()*cloudsize);
55. //Draw an invisible line to another point the combined lines form shapes, which are the clouds.
56. //They don't look much like clouds until the blur is applied
57.   eval(cloudid).lineTo(Math.random()*cloudsize,Math.random()*cloudsize);
58.   eval(cloudid).lineTo(Math.random()*cloudsize,Math.random()*cloudsize);
59.   eval(cloudid).lineTo(Math.random()*cloudsize,Math.random()*cloudsize);
60.   eval(cloudid).lineTo(Math.random()*cloudsize,Math.random()*cloudsize);
61.   eval(cloudid).lineTo(Math.random()*cloudsize,Math.random()*cloudsize);
62. //Apply a blur to the shape
63.   eval(cloudid).filters = [new flash.filters.BlurFilter(blursize,blursize,2)];
64. //Set a new cloud speed
65.   eval(cloudid).cloudspeed=Math.random()*cloudspeedvariance+cloudminspeed;
66. }
Code for the grass:
1. //Height of each blade of grass
2. grassheight=35;
3. //Average space in between each blade of grass
4. grassspacing=5;
5. //Maximum sway of each blade of grass
6. maxsway=20;
7. //Number of blades of grass along the x axis
8. xplots=30;
9. //Number of blades of grass along the y axis
10. yplots=20;
11. //The wind has an x position and the grass is attracted to the position
12. windxpos=0;
13. //Velocity of the wind left and right
14. windspeed=0;
15. //Gives the grass a bent effect. The grass bends 1/4 of the way up
16. grasscontrol=grassheight/4;
17. //Array containing the info for each blade of grass
18. grasscoords=[];
19. //These loops go through the field, planting each blade of grass
20. for (xpos=0; xpos<xplots; xpos++) {
21.   for (ypos=0; ypos<yplots; ypos++) {
22.     //x position, y position, sway, and color
23.     grasscoords.push([xpos*grassspacing+Math.random()*grassspacing,ypos*grassspacing+Math.random()*grassspacing,0,Math.round(Math.random()*128)*65536+Math.round(Math.random()*76+146)*256]);
24.   }
25. }
26. //Run on each frame
27. onEnterFrame=function(){
28. //Clear all of the grass so it can be redrawn with different sway
29.   this.clear();
30. //Change the speed of the wind
31.   windspeed=Math.max(-50,Math.min(50,windspeed+Math.random()*40-20));
32. //Move the position the blades are attracted according to the windxpos
33.   windxpos+=windspeed;
34. //If the windxpos moves too far to the left, reverse its speed
35.   if(windxpos<-100){
36.     windxpos=-100;
37.     windspeed*=-1;
38.   }
39. //If the windxpos moves too far to the right, reverse its speed
40.   else if(windxpos>grassspacing*xplots+100){
41.     windxpos=grassspacing*xplots+100;
42.     windspeed*=-1;
43.   }
44. //handle the redraw for each blade of grass
45.   for(coord=0;coord<grasscoords.length;coord++){
46. //Set the line style. 0 means use hairline width and grasscoords[coord] is the color
47.     this.lineStyle(0, grasscoords[coord], 100, false, "normal", "none", "none", 1);
48. //Adjust the sway according to the grass's current sway and the windxpos
49.     grasscoords[coord]=Math.max(-maxsway,Math.min(maxsway,grasscoords[coord]+Math.max(-maxsway,Math.min(maxsway,(windxpos-grasscoords[coord])/100))))+(Math.random()*3-1.5);
50. //Move to the base of the blade of grass
51.     this.moveTo(grasscoords[coord],grasscoords[coord]);
52. //Draw a curved line to the new top of the blade of grass
53.     this.curveTo(grasscoords[coord],grasscoords[coord]-grasscontrol,grasscoords[coord]+grasscoords[coord],grasscoords[coord]-grassheight+Math.abs(grasscoords[coord]/2));
54.   }
55. }