Canvas Play 06: Oscillating Orbs

The last demo introduced the concept of behaviours. This demo demonstrates use of a new behaviour, the SineOscillator, which oscillates a specified parameter between two values. In this case it uses the Sine wave to oscillate between the two values. In the demo each of the 120 Orbs have their x and y positions oscillated over the canvas width and height, click the image below to see it in action.

[Please note that this demo hasn't been optimised to work on all machines, so you may experience some slow down]

View Source

Below, I’ve included the source code of the demo. You can have a look through all of the code properly on GitHub, but I’ll give a quick overview.

As I’ve mentioned above, the SineOscillator uses the Sine wave to oscillate the specified property between two values. When creating a new instance of the SineOscillator you specify the target object and the property of that target to apply the behaviour to, as before. You also specify the frequecy, the two values to oscillate between and the offset. The frequency specifies the amount of times the property will be oscillated between the two values, and the offset specifies the amount that’s applied to each step, without an offset the oscillator will start from the first value each time.

You can grab the source code from GitHub and have a play.