Here’s a demonstrator I coded up for one of our web development classes, to illustrate some animation techniques.
Give it a try, put some clouds in your browser to while away your tea break.
Note how the clouds towards the top of the screen are larger, fewer in number, and faster moving than at the bottom of the screen, roughly simulating the wider field of view nearer the horizon. There’s a CSS gradient to try to sell the illusion too. This distribution is controlled by feeding output from the pseudorandom number generator into a function, giving a skewed distribution where larger numbers are more common than smaller numbers.
Controls are at the foot of the page. They are faded in and out using the CSS transition property, whilst the cloud animations are done using the velocity.js library. I hand-drew the clouds (PNG format, for the variable transparency needed for compositing). I apologise in advance for some of the iffier ones.
Categories
2 replies on “Clouds – animation example”
Cool “screensaver” 🙂
What do you mean when you say feed it into a function? What function, in javascript?
Thanks!
Hi Charlie.
I was using “function” in the mathematical sense, an algorithm that you feed a value or values into, and get a value out of. In computing, this often is stored as a series of instructions called, variously, a function, procedure, subroutine, or method.
But fear not! I have some teaching materials I can repurpose into a blog post that will have some examples- in C# I’m afraid, but it’s very close to javascript.
Phil