Archive for the ‘JavaScript’ Category
Canvas Play 10: Shooting Stars
The last demo introduced triggers and a proper implementation of the object pool. This demo uses both of those concepts as well as introducing the emitter behaviour. The emitter behaviour emits objects using specified parameters such as the angle, force and gravity to apply when emitting. The demo emits stars from the bottom of the canvas and uses a trigger to detect when the star leaves the canvas so it can be recycled back into the object pool. This demo also displays the amount of objects on the canvas and allows you to toggle whether the canvas captures the individual frame, or the series of frames, 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]
Canvas Play 09: Recycling Orbs
The last few demos have shown different uses of the SineOscillator behaviour, this demo introduces triggers and a proper implementation of object pooling. In this demo an Orb is added to the center of the Canvas with behaviours added to randomly move it around. An Orb is added every third frame, however it is only added if there is one available in the object pool. In this demo the object pool has a limit of 50 objects, the current object count is displayed to illustrate the number of objects on the canvas, you’ll notice that it never goes above 50.
Triggers are added to each orb created; a trigger is something that calls a function when it’s conditions are met. In this case we’re using the ExitBoundsTrigger, which is triggered when the Orb is out of the bounds specified (the Canvas area). The function called by the trigger recycles the target object by removing all behaviours and releasing it back into the object pool ready for it to be used again. I’ve also added the ability to toggle whether the canvas captures the individual frame, or the series of frames, 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]
Canvas Play 08: Waving The Flag
Again, this demo doesn’t add much from the last demo, but demonstrates another use of the SineOscillator. This time, it shows 1180 Orbs oscillating in a grid shape, giving an impression of a waving flag, 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]
Canvas Play 07: Sine Wave
This demo doesn’t add much from the last demo, but demonstrates another use of the SineOscillator. It shows 120 Orbs oscillating up and down in a sine wave formation, 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]
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]
Canvas Play 05: Vibrating Behaviours
The last demo introduced concepts from the HYPE Framework; object pooling and colour pooling. This demo introduces another one, behaviours, and in particular the FixedVibration behaviour, which is based on the HYPE class of the same name. The resulting effect is similar to previous demos, but the animation is much smoother, click the image below to see it.
[Please note that this demo hasn't been optimised to work on all machines, so you may experience some slow down]
Canvas Play 04: The Little Things
In the last demo I introduced object pooling, colour pooling and 1000 orbs. This demo shows how the little things can make a big difference. The small change in this demo is that a black rectangle is drawn over all of the orbs on every update to give the effect that they’re leaving a trail behind them. 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]
Canvas Play 03: Jittery Swimmers
In the last demo I started to look at basic animation. This demo extends on this area by incorporating a couple of patterns I liked in the HYPE Framework; object pooling and colour pooling. This demo creates 1000 orbs that jitter about when the canvas is updated. The canvas isn’t cleared between updates and so the result is an organic camouflage effect, 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]
Canvas Play 02: Stalking Circle
The last demo looked at displaying more than one item at once, now it’s time to make things move! This demo is pretty simple, the canvas is updated every 20ms and when it’s updated the circle moves towards the mouse cursor. Click the image below to try it out, don’t forget to press the ‘start’ button to, well, make it start!
Canvas Play 01: Trigonometric Functions
After my previous simple demo, I wanted to display more than one item at once and create a few classes that I can easily re-use in other experiments. I had recently seen Aral Balkan’s shot on Dribbble and was inspired to play with some Trigonometric functions, i.e. Math.sin and Math.cos. You can see the demo by clicking the image below. This is quite a jump from the last post, but hopefully it makes sense!
Subscribe to the RSS
Follow me on Twitter
Follow me on GitHub