Creating Generative Art with HYPE

During this tutorial we're going to tie math and design together. We'll explore Branden Hall and Joshua Davis' HYPE framework and create generative art from code.

Final Result Preview

Let's take a look at the final result we will be working towards:

Step 1: Project Structure

Before diving head-long into the code let's take a brief moment to familiarize ourselves with the project files.

Inside the source .zip file you will find a folder for each significant step, so that you can see exactly what changes have been made. Also, you will find a folder called Base, make a copy of this folder as this is will serve as our starting point.

Inside the Base folder we have a bin folder where our SWF will be published. A src folder which contains our ActionScript 3 and Flash Files and lastly a lib folder where we will store the HYPE framework's SWC files.

Step 2: Getting HYPE

Next up, we need to grab the latest version of the HYPE framework from its home at www.hypeframework.org.

Once the download has completed, open the .zip file. You'll find two SWC files named hype-framework.swc and hype-extended.swc. Copy both of these to your Base\lib folder.

These SWC files are essentially a collection of source files for the framework, all rolled in to one file for ease.

Step 3: Adding SWCS to Flash

The final step needed to get everything up and running is to tell Flash to look for the two new SWC files when we compile the movie, otherwise it will throw a whole bunch of errors our way, not nice!

Open the Main.fla inside the Base\src folder, then choose File, Publish Settings. Select the Flash tab as shown, in the new window that opens select the Library Path tab.

Press the "Browse TO SWC" File button and proceed to add both SWC files to the Flash file. Once this is complete it's time to start adding some code!

Step 4: Init HYPE

Open up the Main.as source file in your chosen editor. Add the following private properties and the initHype() method:


public class Main extends MovieClip 
{
	// private properties
	private var bitmapCanvas:BitmapCanvas;
	private var clipContainer:Sprite;
	private var objectPool:ObjectPool;
	
	
	
	/**
	 * constructor
	 */
	public function Main()
	{
		// inits the Hype framework
		initHype();
	}
	
	
	
	/**
	 * initiation of the Hype members we will be using and configuration prior
	 * to running the animation
	 */
	private function initHype():void
	{
		// the clipContainer is used as a parent for all of our objects
		clipContainer = new Sprite();
		addChild(clipContainer);
	}
}

In the next few steps we'll be looking at each of these objects we've added as private properties, starting with the clipContainer Sprite.

As our design is going to have over a hundred objects all moving around the screen at once, we're going to need something to house them all - just adding them to the Stage will become problematic further down the line. The answer is to create a regular AS3 Sprite to act as a parent.

Step 5: The BitmapCanvas

The first real part of HYPE, the BitmapCanvas can be thought of as a Sprite or better still, a Bitmap/BitmapData to which we will be painting our objects, each frame, like a painters canvas.

We create it just below the clipContainer code and define it with a width and height to match the Stage. We add it to the Stage but also tell it to startCapture(clipContainer, true), this simply tells the BitmapCanvas to take a snapshot of the clipContainer each frame. For now though, keep this commented out!


	/**
	 * initiation of the Hype members we will be using and configuration prior
	 * to running the animation
	 */
	private function initHype():void
	{
		// the clipContainer is used as a parent for all of our objects
		clipContainer = new Sprite();
		addChild(clipContainer);
	
		// think of the BitmapCanvas as an empty space we will 'paint'
		// every frame with new image data
		bitmapCanvas = new BitmapCanvas(stage.stageWidth, stage.stageHeight);
		//bitmapCanvas.startCapture(clipContainer, true);
		addChild(bitmapCanvas);
	}
}

Step 6: The ObjectPool

If you have worked with games you've probably come across the concept of an ObjectPool. As creating new objects is too much of a hit on the processor we create a pool of a specified amount of objects before the game or application begins. We would then use the objects from this pool and upon running out we would recycle and reuse them all again, which avoids creating new objects. This is commonly used for bullets/lasers in games and the same logic is used in HYPE.

If you take a look at the Main.fla Library in Flash you will see I've created a MovieClip called circleShape and given it the Linkage Identifier of circleShape so we can create multiple copies of this object with code; this is what our ObjectPool will house.

Add the ObjectPool below the BitmapCanvas code, like so:


	/**
	 * initiation of the Hype members we will be using and configuration prior
	 * to running the animation
	 */
	private function initHype():void
	{
		// the clipContainer is used as a parent for all of our objects
		clipContainer = new Sprite();
		addChild(clipContainer);
	
		// think of the BitmapCanvas as an empty space we will 'paint'
		// every frame with new image data
		bitmapCanvas = new BitmapCanvas(stage.stageWidth, stage.stageHeight);
		//bitmapCanvas.startCapture(clipContainer, true);
		addChild(bitmapCanvas);
		
		// create a collection of 10 objects and store them in an ObjectPool
		// for use in the animation
		objectPool = new ObjectPool(circleShape, 10);
	}

Step 7: Creating Objects Using ObjectPool.request();

Now we have our core players setup, the clipContainer, the BitmapCanvas and the ObjectPool with its 10 clips, it's time to start making things move.

To get an item from the ObjectPool we can use objectPool.request(); which will give us a circleShape MovieClip from the Flash Library to work with.

The ObjectPool also gives us the objectPool.onRequestObject() method which is a handy way to assign properties of a clip each time we request one. Add the following below where you instantiated the ObjectPool:


	// create a collection of 10 objects and store them in an ObjectPool
	// for use in the animation
	objectPool = new ObjectPool(circleShape, 10);
	
	// each time we request a new shape from the pool
	// it will perform the following
	objectPool.onRequestObject = function(clip:MovieClip):void
	{
		clip.x = Math.random() * stage.stageWidth;
		clip.y = Math.random() * stage.stageHeight;
		
		clipContainer.addChild(clip);
	}

Step 8: See the Result

With that new code added, every time we request an object from the pool by using objectPool.request() it will create a circleShape. Add it to the clipContainer and position it randomly on the screen. You can test this by amending the constructor to look like the following:


	/**
	 * constructor
	 */
	public function Main()
	{
		// inits the Hype framework
		initHype();
		
		objectPool.request();
	}

If all went well you should have a single, lonely circle on the screen.

Step 9: Requesting all Objects at Once

Do you remember we set the ObjectPool size to 10? Well we're going to up the ante and increase this to 100 objects by changing the following:

1
2	// create a collection of 10 objects and store them in an ObjectPool
3	// for use in the animation
4	objectPool = new ObjectPool(circleShape, 100);

We can amend the earlier request statement to read as requestAll() like this:


	/**
	 * constructor
	 */
	public function Main()
	{
		// inits the Hype framework
		initHype();
		
		objectPool.requestAll();
	}

Now we should have 100 circles scattered over the screen's area.

Step 10: Adding FixedVibrations

Now we have our 100 circleShapes distributed around the screen it's time to make our design come to life by adding movement.

Let's start by applying a FixedVibration to the alpha and scale properties of each clip. We can use the ObjectPools onRequestObject method to implement it as shown:


	// create a collection of 10 objects and store them in an ObjectPool
	// for use in the animation
	objectPool = new ObjectPool(circleShape, 100);
	
	// each time we request a new shape from the pool
	// it will perform the following
	objectPool.onRequestObject = function(clip:MovieClip):void
	{
		clip.x = Math.random() * stage.stageWidth;
		clip.y = Math.random() * stage.stageHeight;
		
		// add a FixedVibration to the alpha and scale properties of each circleShape when requested
		var alphaVib:FixedVibration = new FixedVibration(clip, "alpha", 0.9, 0.05, 0.5, 1.5, false);
		var scaleVib:FixedVibration = new FixedVibration(clip, "scale", 0.9, 0.05, 0.05, 0.8, false);
		alphaVib.start();
		scaleVib.start();
		
		clipContainer.addChild(clip);
	}

Let's have a closer look at the FixedVibration objects we created. Each FixedVibration object we create takes 7 parameters, respectively they are as follows:

The object to apply the FixedVibration to, in our case our circleShape called "clip".
The property to apply the FixedVibration to, this time we're working with the alpha and scale properties.
The third parameter is the Spring of the FixedVibration, the higher the number the more 'springy' the movement. A value between 0 and 1 will work best.
Next up is the Ease of the vibration, the lower the value the quicker it will slide between the following two values. A value between 0 and 1 will work best.
The minimum value is up next, this will be the lowest the the vibration will hit.
Similarly, the maximum value will be the maximum value the vibration will hit.
Finally, the last parameter is relative, default this to false.

So how do all of these fit together? Let's look at how the scale property is affected by the FixedVibration. It's given Min and Max values of 0.05 and 0.8, the Spring value is pretty high at 0.9 and the Ease is pretty low at 0.05 making it scale erratically and fast.

Have a play around with these values to get a feel for how they influence the movement.

When we test our Flash file we should get something like this:

Step 11: Adding a VariableVibration

Very similar to the FixedVibration, the VariableVibration will adjust a property of an object with a value that fluctuates. The difference being that the VariableVibration isn't linear as the name suggests.

Amend your code as follows to place the clips to the center of the Stage, only this time we'll apply a VariableVibration to the x and y values to start seeing some movement!


	// each time we request a new shape from the pool
	// it will perform the following
	objectPool.onRequestObject = function(clip:MovieClip):void
	{
		clip.x = stage.stageWidth/2;
		clip.y = stage.stageHeight/2;
		
		// add a VariableVibration for the x/y movement of each circleShape
		var xVib:VariableVibration = new VariableVibration(clip, "x", 0.97, 0.03, 40);
		var yVib:VariableVibration = new VariableVibration(clip, "y", 0.97, 0.03, 40);
		xVib.start();
		yVib.start();
		
		// add a FixedVibration to the alpha and scale properties of each circleShape when requested
		var alphaVib:FixedVibration = new FixedVibration(clip, "alpha", 0.9, 0.05, 0.5, 1.5, false);
		var scaleVib:FixedVibration = new FixedVibration(clip, "scale", 0.9, 0.05, 0.05, 0.8, false);
		alphaVib.start();
		scaleVib.start();
		
		clipContainer.addChild(clip);
	}

Let's have a closer look at the VariableVibration objects we created. Each VariableVibration object we create takes only 5 parameters, respectively they are as follows:

The object to apply the VariableVibration to, in our case our circleShape called "clip".
The property to apply the VariableVibration to, this time we're working with the x and y properties.
The third parameter is the Spring of the vibration.
Next up is the Ease of the vibration.
The final parameter is the Range of values that is produced. The higher the number the more erratic the effect.

Our Flash file should look something like this when published:

Step 12: Adding Some Wow

It's starting to look good, but we can do much better! Remember that bitmapCanvas.startCapture() line I asked you to keep uncommented way back in Step 6? Go ahead and uncomment it then test your movie again.

This is more like it!

Step 13: A Quick Trick for Rotation

A very simple trick to add a spiraling movement is to add another vibration to the clip's rotation property like so:


	// each time we request a new shape from the pool
	// it will perform the following
	objectPool.onRequestObject = function(clip:MovieClip):void
	{
		clip.x = stage.stageWidth/2;
		clip.y = stage.stageHeight/2;
		
		// add a VariableVibration for the x/y movement of each circleShape
		var xVib:VariableVibration = new VariableVibration(clip, "x", 0.97, 0.03, 40);
		var yVib:VariableVibration = new VariableVibration(clip, "y", 0.97, 0.03, 40);
		xVib.start();
		yVib.start();
		
		// add a FixedVibration to the alpha and scale properties of each circleShape when requested
		var alphaVib:FixedVibration = new FixedVibration(clip, "alpha", 0.9, 0.05, 0.5, 1.5, false);
		var scaleVib:FixedVibration = new FixedVibration(clip, "scale", 0.9, 0.05, 0.05, 0.8, false);
		alphaVib.start();
		scaleVib.start();
		
		// add a FixedVibration to the rotation of the circleShape
		var rotationVib:FixedVibration = new FixedVibration(clip, "rotation", 0.9, 0.05, 0, 360, false);
		rotationVib.start();
		
		clipContainer.addChild(clip);
	}

Step 14: A Quick Trick for Rotation

Before testing this jump over to Flash and open the circleShape MovieClip in the Library.

As shown, drag the circle just off from center in any direction. The further you move it from center, the more spirals will appear in your design when you publish:

Step 15: ExitShapes

One problem with our current animation is that once the clips move off the screen, they very rarely come back. We can solve this little problem by creating an ExitShapeTrigger.

An ExitShapeTrigger is an area considered safe for the clip. When the clip leaves this area we need to perform some kind of function, such as requesting a new clip from the ObjectPool.

We define an ExitShapeTrigger as below:


	// each time we request a new shape from the pool
	// it will perform the following
	objectPool.onRequestObject = function(clip:MovieClip):void
	{
		clip.x = stage.stageWidth/2;
		clip.y = stage.stageHeight/2;
		
		// add a VariableVibration for the x/y movement of each circleShape
		var xVib:VariableVibration = new VariableVibration(clip, "x", 0.97, 0.03, 40);
		var yVib:VariableVibration = new VariableVibration(clip, "y", 0.97, 0.03, 40);
		xVib.start();
		yVib.start();
		
		// add a FixedVibration to the alpha and scale properties of each circleShape when requested
		var alphaVib:FixedVibration = new FixedVibration(clip, "alpha", 0.9, 0.05, 0.5, 1.5, false);
		var scaleVib:FixedVibration = new FixedVibration(clip, "scale", 0.9, 0.05, 0.05, 0.8, false);
		alphaVib.start();
		scaleVib.start();
		
		// add a FixedVibration to the rotation of the circleShape
		var rotationVib:FixedVibration = new FixedVibration(clip, "rotation", 0.9, 0.05, 0, 360, false);
		rotationVib.start();
		
		// define an ExitShape
		var exit:ExitShapeTrigger = new ExitShapeTrigger(onExitShape, clip, exitShape, true);
		exit.start();
		
		clipContainer.addChild(clip);
	}
	
	// recycle objects
	private function onExitShape(clip:MovieClip):void
	{
		trace("circleShape left the screen!");
	}

This will create an ExitShapeTrigger with the following parameters:

The method to trigger when the event has occurred.
The MovieClip to test if it is out of the given area.
The MovieClip used to define the safe area, you might have already noticed we've already created this, called it exitShape and placed it on the Stage in Flash.
The last parameter is the Enter Once flag, just set this to true for now.

Step 16: ObjectPool Release

Following on from the ExitShape we introduced in the last step, we're going to simply edit the onExitShape method so that whenever a clip moves off the screen, we'll delete it and request a new one from the ObjectPool.

Until now we've been working with the request() and requestAll() methods of the ObjectPool, when we want to delete the old one we use the release(clip) method:


	// recycle objects
	private function onExitShape(clip:MovieClip):void
	{
		// remove from the ObjectPool and the clipContainer
		objectPool.release(clip);
		clipContainer.removeChild(clip);
		
		// get a new clip from the ObjectPool
		objectPool.request();
	}

Step 17: Adding a Blur

HYPE features the ability to very easily add filters such as blur and glow to objects. To add a touch more pizzazz to the design we're going to add a BlurFilter to the project using the FilterCanvasRhythm:


	// think of the BitmapCanvas as an empty space we will 'paint'
	// every frame with new image data
	bitmapCanvas = new BitmapCanvas(stage.stageWidth, stage.stageHeight);
	bitmapCanvas.startCapture(clipContainer, true);
	addChild(bitmapCanvas);
	
	// adding a blur
	var blur:FilterCanvasRhythm = new FilterCanvasRhythm([new BlurFilter(1.1, 1.1, 1)], bitmapCanvas);
	blur.start(TimeType.TIME, 100);
	
	// create a collection of objects and store them in an ObjectPool
	// for use in the animation
	objectPool = new ObjectPool(circleShape, 100);

The above code creates a FilterCanvasRhythm which takes a Filter as a parameter and applies it to the bitmapCanvas we declared earlier.

Test the project, it's really starting to come together now!

Step 18: Adding Some Diversity

We can easily add a little depth to the composition by adding more shapes in to the mix. Rather than having to create and manage several ObjectPools, we can add frames to the original circleShape we used and randomly select which frame to play.

Try this now, edit the circleShape object in the Flash Library. Create a new Keyframe, select a new color and draw a new shape. Go ahead and create a few Keyframes of your own, in the next step we'll look at implementing them with code. This is our new shape:

..compared with our old shape:

Step 19: Choosing Random Frames for circleShape

With our circleShape now sporting a few new Keyframes we can simply insert this single line of code to choose a frame to use each time we call objectPool.request():


	// each time we request a new shape from the pool
	// it will perform the following
	objectPool.onRequestObject = function(clip:MovieClip):void
	{
		clip.x = stage.stageWidth/2;
		clip.y = stage.stageHeight/2;
		
		// choose a random frame
		clip.gotoAndStop(Math.ceil(Math.random() * 3));
		
		// add a VariableVibration for the x/y movement of each circleShape
		var xVib:VariableVibration = new VariableVibration(clip, "x", 0.97, 0.03, 40);
		var yVib:VariableVibration = new VariableVibration(clip, "y", 0.97, 0.03, 40);
		xVib.start();
		yVib.start();
		
		// add a FixedVibration to the alpha and scale properties of each circleShape when requested
		var alphaVib:FixedVibration = new FixedVibration(clip, "alpha", 0.9, 0.05, 0.5, 1.5, false);
		var scaleVib:FixedVibration = new FixedVibration(clip, "scale", 0.9, 0.05, 0.05, 0.8, false);
		alphaVib.start();
		scaleVib.start();
		
		// add a FixedVibration to the rotation of the circleShape
		var rotationVib:FixedVibration = new FixedVibration(clip, "rotation", 0.9, 0.05, 0, 360, false);
		rotationVib.start();
		
		// define an ExitShape
		var exit:ExitShapeTrigger = new ExitShapeTrigger(onExitShape, clip, exitShape, true);
		exit.start();
		
		clipContainer.addChild(clip);
	}

As a quick note, the random frame code above will switch between frames 1, 2 and 3. You may need to adjust this to the amount of frames in your circleShape.

Step 20: Finish

It's time to test your movie and bask in the mixture of funky patterns and colors as the HYPE framework takes your code and mixes it into a piece of generative art.

Heres the final code for reference:


package  
{
	import hype.extended.behavior.FixedVibration;

	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.filters.BlurFilter;
	import hype.extended.behavior.VariableVibration;
	import hype.extended.rhythm.FilterCanvasRhythm;
	import hype.extended.trigger.ExitShapeTrigger;
	import hype.framework.core.ObjectPool;
	import hype.framework.core.TimeType;
	import hype.framework.display.BitmapCanvas;
	

	/**
	 * A tutorial to introduce HYPE. A visual framework
	 * by Branden Hall and Joshua David for creating 
	 * generative / iterative design with code.
	 * 
	 * @author Anton Mills
	 * @version 06/02/2011
	 */
	public class Main extends MovieClip 
	{
		// private properties
		private var bitmapCanvas:BitmapCanvas;
		private var clipContainer:Sprite;
		private var objectPool:ObjectPool;
		
		
		
		/**
		 * constructor
		 */
		public function Main()
		{
			// inits the Hype framework
			initHype();
			
			// begin sequence
			objectPool.requestAll();
		}
		
		
		
		/**
		 * initiation of the Hype members we will be using and configuration prior
		 * to running the animation
		 */
		private function initHype():void
		{
			// the clipContainer is used as a parent for all of our sprites
			clipContainer = new Sprite();
			addChild(clipContainer);
			
			// think of the BitmapCanvas as an empty space we will 'paint'
			// every frame with new image data
			bitmapCanvas = new BitmapCanvas(stage.stageWidth, stage.stageHeight);
			bitmapCanvas.startCapture(clipContainer, true);
			addChild(bitmapCanvas);
			
			// adding a blur
			var blur:FilterCanvasRhythm = new FilterCanvasRhythm([new BlurFilter(1.1, 1.1, 1)], bitmapCanvas);
			blur.start(TimeType.TIME, 100);

			// create a collection of objects and store them in an ObjectPool
			// for use in the animation
			objectPool = new ObjectPool(circleShape, 100);
			
			// each time we request a new shape from the pool
			// it will perform the following
			objectPool.onRequestObject = function(clip:MovieClip):void
			{
				clip.x = stage.stageWidth/2;
				clip.y = stage.stageHeight/2;
			
				// choose a random frame
				clip.gotoAndStop(Math.ceil(Math.random() * 3));
				
				// add a VariableVibration for the x/y movement of each circleShape
				var xVib:VariableVibration = new VariableVibration(clip, "x", 0.97, 0.03, 40);
				var yVib:VariableVibration = new VariableVibration(clip, "y", 0.97, 0.03, 40);
				xVib.start();
				yVib.start();
				
				// add a FixedVibration to the alpha and scale properties of each circleShape when requested
				var alphaVib:FixedVibration = new FixedVibration(clip, "alpha", 0.9, 0.05, 0.5, 1.5, false);
				var scaleVib:FixedVibration = new FixedVibration(clip, "scale", 0.9, 0.05, 0.05, 0.8, false);
				alphaVib.start();
				scaleVib.start();
				
				// add a FixedVibration to the rotation of the circleShape
				var rotationVib:FixedVibration = new FixedVibration(clip, "rotation", 0.9, 0.05, 0, 360, false);
				rotationVib.start();
				
				// define an ExitShape
				var exit:ExitShapeTrigger = new ExitShapeTrigger(onExitShape, clip, exitShape, true);
				exit.start();
				
				clipContainer.addChild(clip);
			};
		}
		
		
		
		// recycle objects
		private function onExitShape(clip:MovieClip):void
		{
			objectPool.release(clip);
			clipContainer.removeChild(clip);
			
			objectPool.request();
		}
	}
}

Conclusion

This just about wraps up introducing the HYPE framework, thanks very much for your time. I hope you enjoyed it and remember we only scratched the surface of some of the fantastic effects that can be made with the framework. Please do check out the HYPE framework website at www.hypeframework.org for some fantastic examples of the framework and how others have taken it to the next level with Away3D/Papervision integration!

More HYPE Resources on Activetuts+

Code a Chaotic Composition Inspired by Joshua Davis by Bruno Crociquia
Introduction to the HYPE ActionScript 3.0 Framework by Tom Green
Quick Tip: How to Export Flash to PNG with HYPE by Daniel Apt
Create a Mesmeric Music Visualizer with HYPE by Franci Zidar