tracerstar

This site is no longer maintained and will eventually have the articles rehosted. In the meantime, please visit my current portfolio, Benjamin Fox Studios.

Pendulum Wave

HYPE Framework Pendulum Wave behavior class | download (v0.1)

A modification on the Oscillator class in Hype. I saw these two videos of pendulums that run on different suspension lengths and wanted to recreate that effect programmatically.

Essentially just a sine wave at it's core, the solution to the effect is to both offset the wave based on the number of the item in the pendulum (we'll call it the step), and also to reduce the amplitude of that item, reflecting the shortening of the suspension on the pendulum models seen in the videos.

Applying the behavior to an object in Hype is pretty easy:

var yOsc:PendulumWave = new PendulumWave(clip, 'y', 75, 325, 1, i, 20);

It takes similar arguments to the Oscillator behavior; the clip is the MovieClip you are targeting, 'y' being the property we want to affect. We then pass a minimum and maximum value (75 and 325 here). Next up we pass in the speed (1), and then we pass the step of the pendulum we are currently on (here it is "i" as in the examples posted I'm looping through 20 objects, with i++ each object). Finally, we pass the total number of objects this pendulum is made up of. The total here is used to calculate the reduction on each step.

Here's the code for the very first example:

import hype.extended.behavior.PendulumWave;
import hype.extended.color.ColorPool;
import hype.extended.layout.GridLayout;
import hype.framework.core.ObjectPool;

var myWidth = stage.stageWidth;
var myHeight = stage.stageHeight;

var color:ColorPool = new ColorPool(
	0x587b7C, 0x719b9E, 0x9FC1BE, 0xE0D9BB, 0xDACB94, 0xCABA88, 0xDABD55, 0xC49F32, 0xA97409
);

var pool:ObjectPool = new ObjectPool(MyCircle, 20);

// xStart, yStart, xSpacing, ySpacing, columns
var layout:GridLayout = new GridLayout(0, myHeight - (myHeight / 2), 28, 0, 20);

pool.onRequestObject = function(clip) {
	layout.applyLayout(clip);
	color.colorChildren(clip);
	
	var i:int = pool.activeSet.length;

	var yOsc:PendulumWave = new PendulumWave(clip, 'y', 75, 325, 1, i, 20);
	yOsc.start();
	
	addChild(clip);
}

pool.requestAll();

Here's another example, based on the above code but using 40 objects.

This one differs in that the pendulum call is thus:

var yOsc:PendulumWave = new PendulumWave(clip, 'y', 75, 325, 1, i, 60);

While the pendulum is only made up of 40 items, we're telling the behavior to operate on the notion that it's made of 60. This gives us less of a reduction on each step.

The other example posted at the top of the page has 3 different pendulum behaviors applied to each clip, one on the x, the y and the scale properties. Applying the behavior to multiple properties, we can get some interesting effects like this.

The code for this one uses:

var yOsc:PendulumWave = new PendulumWave(clip, 'y', 100, 200, 1, i, 20);
var xOsc:PendulumWave = new PendulumWave(clip, 'x', 0, myWidth, .25, i, 1);
var sOsc:PendulumWave = new PendulumWave(clip, 'scale', 0.25, 1.5, 1, i, 20);

I'm interested in seeing what people make with this or any mods that could be made to it. I've looked at adding alterations to it with a gradual speed decrease which result it in slowing to a stop, or a decrease to the reducer which ends up flattening out the pendulum. If you make anything cool or find it useful, leave a comment, hit me up on twitter or drop me an email.

2 Responses to Pendulum Wave

Leave a Reply