HTML5 canvas clouds

How the clouds work

The way in which the clouds behind this box work is explained below.

To start off with, an array is created to hold all of the cloud drawing and positioning data in is created by the initiation function. Then, the builder function is called that then creates twelve slots in the array and fills them with clouds. The clouds themselves are not actually generated by the builder function, but are created by a seperate constructor function, for reasons that will become evident later on. We will now look at the way that the constructor builds the clouds.

  1. The clouds are essentially lots of circles, and so for each slot in the main data array, another array is created to hold the details about all of the circles. Before we do this though, we set a few variables to help us 'control' the randomness used to generate the numbers for dsrawing the circles later on:
    1. First off, we set the width to be somewhere between 20 and 200.
    2. Secondly, we set the radius. This is where things start to get interesting. We set the radius to be somewhere between 9 and 20, and then we add the value of the width we set above divided by 11.
    3. Thirdly, we check to see if the width is less than or equal to 30, and if so we add to it a random number somewhere between 50 and 100. We also times the radius by 1.1 added to width divided by 200 rounded down.
    4. Getting confused yet? We haven't even started. next, we determine the height by dividing the width by 2 and adding a random number somewhere between 0 and the width set above divided by 4.
    5. We now set the speed to random number between 0.25 and 1.5.
    6. The alpha value is set to somewhere between 15 and 100.
    7. The colour comes next. This is a random number between 182 and 234.
    8. Now cones the fun part. We now determine how many circles this particular cloud will have by generating a random number somewhere between 40 and 100 and minusing the radius determined above multiplied by 1.5. we also add the width multiplied by the height divided by 300 into the mix as well so that the bigger the cloud, the more circles it will have. After this, this value is rounded down to remove any decemal places we have accumulated because it is rather difficult to have a fraction of a circle...!
  2. Thought we were done? We are only half way - generating a single cloud, that is. Next up is setting all the variables that make up the cloud itself.
    1. The x position is set to be just off the left hand side of the screen.
    2. The y position is set to be a random value between 0 and the height of the canvas minus the height of the cloud calculated above.
    3. The speed of the cloud is set to the speed calculated above, simply enough.
    4. Now for the circles. For these we create the array mentioned in step 1 and then we add the a number of circles to this array, determined by the number we worked out above:
      1. Inside the circles array, for each of the circles, we create a third array to hold of the detail about each circle.
      2. We then add to this a random x position relative to the cloud's x position, the value of which stands somewhere between 0 and the clouds width.
      3. The y position is next, which is relative to the cloud's y position and is set to somewhere between 0 and the clouds height determined above.
      4. The alpha of each circle is defined by generating a random number between 15 and the alpha value descrbed above.
      5. The radius of each circle to set to be somewhere beetween 5 and the radius calculated above.
      6. Lastly, the colour of each circle is set to somewhere between the colour value defined above and 255
  3. Having fun? Now we have generated all the clouds needed, we can render our first frame!
  4. Each time we render a new frame, we increment the x value of each cloud by its speed value. If the cloud has reached the otehr side of the screen, and is out of sight, then we trash it generate a new cloud in its place. This is why we have the cloud generation function as a seperate contructor rather than integrating it into the builder.

Shockingly enough, that brings us to the end of this explantion. If you understood it all, then great! If you didn't understand any part of it, then please get in tough with me and I will explain.