AS3 Generative Art Framework

I find myself spending more and more time with ActionScript lately. My first introduction to the Flash platform was through the timeline and some basic AS2, in fact, AS2 was what sparked my interest in scripting. This interest in scripting soon snowballed into a programming interest. Over time, this programming interest exploded into a deep love and appreciation for code of all types.

For me, programming is about building tools to solve problems. I am beginning to understand why I like word problems so much in math class, it is the excitement of solving actual problems with understandable variables. I have never been one to learn from theory. It is too hard to wrap my head around something unless I can see it in action, or at least consider it in a real world situation. Programming is about solving real world problems it is a medium where theory gets twisted into action.

I had a problem. My problem was that I continue to use AS3 to create generative art experiments. This is an issue because of the amount of code needed to get a generative art project up and running. To solve this problem I have created the base for what will become a generative art framework.

genartclass

The GenArt class should be used as a base for any new generative art project. By using GenArt, your project will have access to the GenArt API that will provide a drawing surface, methods to animate the drawing (or not!) and a method to save a file to the desktop.

To facilitate the saving of a completed image, the AS3 Core Library was used. You can find that library at http://code.google.com/p/as3corelib/.

Please note, this is an Adobe AIR project as it needs access to the file system to save the completed artwork. Artwork is saved to the desktop, it is named snapshot.png.

//The short chunk of code below illustrates how to use the GenArt base class.

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	
	import GenArt;
	
	public class Main extends GenArt
	{
		
		public function Main():void
		{
			initEvents();
			super(200);
		}
		
		private function init(e:Event):void
		{
			trace("Ready for instruction.");
			//When the base class is ready then we start the animation;
			//Options: step(), jump() or instant()
			instant();
		}
		
		private function initEvents():void
		{
			this.addEventListener(GenArt.INITALIZED, init);
			this.addEventListener(GenArt.STEP, instructions);
			this.addEventListener(GenArt.FINISHED, finished);
		}
		
		private function instructions(e:Event):void
		{
			var sprite:Sprite = new Sprite;
			var randx1:Number = Math.random() * canvasWidth;
			var randy1:Number = Math.random() * canvasHeight;
			var randx2:Number = Math.random() * canvasWidth;
			var randy2:Number = Math.random() * canvasHeight;
			var g = sprite.graphics;
			g.lineStyle(1, 0xfbfbfb);
			g.moveTo(randx1, randy1);
			g.lineTo(randx2, randy2);
			master.addChild(sprite);
		}
		
		private function finished(e:Event):void
		{
			saveCanvas();
		}
	}
}

//Below is the GenArt package. Copy this code into a new file GenArt.as and use as a base class.

package
{
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	
	import flash.media.Sound;
	import flash.media.SoundChannel;
	import flash.media.SoundTransform;
	
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.SampleDataEvent;
	
	import com.adobe.images.PNGEncoder;
	import flash.utils.ByteArray;
	import flash.filesystem.File;
	import flash.filesystem.FileStream;
	import flash.filesystem.FileMode;
	
	public class GenArt extends Sprite
	{
	/* |||||||||||||||||||||||||||||||||||||||| */
	/* |||||| VARIABLES AND SETUP VALUES |||||| */
	/* |||||||||||||||||||||||||||||||||||||||| */
		
		private var canvas_data:BitmapData = new BitmapData(2880, 2880, false, 0x000000);
		private var canvas:Bitmap = new Bitmap(canvas_data, "auto", true);
		
		public var master:Sprite = new Sprite;
		public var canvasWidth:Number = canvas.width;
		public var canvasHeight:Number = canvas.height;
		
		private var bgColor:uint;
		
		private var audio:Boolean;
		private var sound:Sound = new Sound();
		private var soundChannel:SoundChannel;
		
		private var animate:String;
		private var go:Function;
		
		private var timer:Timer;
		private var interval:Number;
		
		private var maxSteps:Number;
		private var currentStep:Number = 0;
		
		public static const STEP:String = "Single Step";
		public static const INITALIZED:String = "Base Class Initalized";
		public static const FINISHED:String = "Drawing Complete";
		
	/* |||||||||||||||||||||||||||||||||||||||| */
	/* ||||| CONSTRUCTOR AND INIT METHODS ||||| */
	/* |||||||||||||||||||||||||||||||||||||||| */	
		
		public function GenArt(_maxSteps:Number = 100, _audio:Boolean = false):void
		{
			trace("Hello World from GenArt Base Class");
			maxSteps = _maxSteps;
			audio = _audio;
			init();
			
		}
		
		private function init():void
		{
			addChild(canvas);
			addChild(master);
			initEvents();
			initVars();
			dispatchEvent(new Event(INITALIZED));
		}
		
		private function initEvents():void
		{
			stage.addEventListener(MouseEvent.CLICK, mouseHandler);
		}
		
		private function initTimer():void
		{
			timer.addEventListener(TimerEvent.TIMER, timerHandler);
			timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
		}
		
		private function initVars():void
		{
			stage.scaleMode = "noScale";
			stage.align = "TL";
		}
		
	/* |||||||||||||||||||||||||||||||||||||||| */
	/* |||||||||| PUBLIC API METHODS |||||||||| */
	/* |||||||||||||||||||||||||||||||||||||||| */	
		
		/*
		instant(), jump() and step() are all API methods
		provided to initiate the generation of your instructions.
		Instant provides the most rapid drawing, jump draws the
		artwork in 10 percent chunks. Step is a more traditional
		animation of the generation process.
		*/
		
		public function instant():void
		{
			animate = "instant";
			go = instant;
			timer = new Timer(1, maxSteps);
			initTimer();
			timer.start();
		}
		
		public function jump():void
		{
			animate = "jump";
			go = jump;
			timer = new Timer(600, maxSteps * .1);
			initTimer();
			timer.start();
		}
		
		public function step():void
		{
			animate = "step";
			go = step;
			timer = new Timer(300, maxSteps);
			initTimer();
			timer.start();
		}
	
		/*
		The saveCanvas method is used to capture your finished
		generation and save it. Currently, the file is saved
		as snapshot.jpg onto the desktop.
		*/
	
		public function saveCanvas():void
		{
			writeFile();
		}
	
	/* |||||||||||||||||||||||||||||||||||||||| */
	/* ||||||||||| PRIVATE METHODS |||||||||||| */
	/* |||||||||||||||||||||||||||||||||||||||| */	
	
		/*
		The step function is where we write the code
		that will be looped when the program is run.
		*/
		private function instructions():void
		{
			dispatchEvent(new Event(STEP));
			if(audio)
			{
				if(go != instant)
				{
					beep();
				}
			}
			trace("stepping");
			currentStep ++;
		}
		
		/*
		This beep method is just to provide an audio
		indication of the generation progress.
		*/
		
		private function beep(mod:Number = 0):void
		{
			
			sound.addEventListener(SampleDataEvent.SAMPLE_DATA, sineWaveGenerator); 
			var time:Timer = new Timer(100, 1);
			time.addEventListener(TimerEvent.TIMER_COMPLETE, stopBeep);
			var count = 0;
			time.start();
			soundChannel = sound.play();
			
			
			function sineWaveGenerator(event:SampleDataEvent):void 
			{ 
				for (var i:int = 0; i < 8192; i++) 
				{ 
					var n:Number = Math.sin(((i + event.position) * Math.PI / 100) - 1) + (currentStep/maxSteps) + mod;
					event.data.writeFloat(n); 
					event.data.writeFloat(n); 
					
				}
			}
			
			function stopBeep():void
			{
				var transform:SoundTransform = soundChannel.soundTransform;
				transform.volume = .5;
           		soundChannel.soundTransform = transform;
				sound.removeEventListener(SampleDataEvent.SAMPLE_DATA, sineWaveGenerator); 
			}
		}
			
		private function writeFile():void {
			
			canvas_data.draw(master);
			canvas.bitmapData = canvas_data;

var jpgSource:BitmapData = new BitmapData (canvas.width, canvas.height);
			jpgSource.draw(canvas);
			
			var jpgEncoder:PNGEncoder = new PNGEncoder();
			var jpgStream:ByteArray = PNGEncoder.encode(jpgSource);
			
			var file:File = File.desktopDirectory.resolvePath("snapshot.png");
			var fs:FileStream = new FileStream();
			
			try{
				//open file in write mode
				fs.open(file, FileMode.WRITE);
				//write bytes from the byte array
				fs.writeBytes(jpgStream);
				//close the file
				fs.close();
				trace("File Saved");
			}catch(e:Error){
				trace(e.message);
			}
		}
	
	/* |||||||||||||||||||||||||||||||||||||||| */
	/* |||||||| PRIVATE EVENT METHODS ||||||||| */
	/* |||||||||||||||||||||||||||||||||||||||| */	
	
		private function timerHandler(e:TimerEvent):void
		{
			if(e.type == TimerEvent.TIMER)
			{
				switch(animate)
				{
					case "instant":
						instructions();
						break;
						
					case "jump":
						var increment:Number = maxSteps * .1;
						for(var i:int = 0; i < increment; i++)
						{
							instructions();
						}
						e.updateAfterEvent();
						break;
						
					case "step":
						instructions();
						e.updateAfterEvent();
						break;
						
					default:
						break;
				}
				
			}
			if(e.type == TimerEvent.TIMER_COMPLETE)
			{
				dispatchEvent(new Event(FINISHED));
				e.updateAfterEvent();
			}
		}
		
		private function mouseHandler(e:MouseEvent):void
		{
			if(e.type == MouseEvent.CLICK)
			{
				go();
			}
		}
	}
}

Oct 23, 2009 | Actionscript 3.0, Generative Art | Leave A Comment »

Form & Space Generative Art

Control Point Decline ↓

ControlPointDecline

Sine Wave Ocean ↓

SineWaveOcean

These two compositions are explorations of a single concept. For these pictures, I was exploring drawing multiple lines with a changing control point. The “Control Point Decline” project was the beginning of the line exploration. The concept was simple; what would a design look like if we drew many, many lines, beginning and ending in the same place but modifying the control point with each iteration. The first acceptable generation I achieved involved a very precise structure with little “personality”. The evolution of that piece generated some very interesting deconstructions of the dome structure. The final stage of the piece distorted the control point so greatly that the lines begin to define the frame of the canvas. Two iterations of the final stage are displayed side by side and much larger than the dome structures.

The “Sine Wave Ocean” project was a variation of the “Control Point Decline” project. With this variation, I select random points for the beginning and end of the lines but the control points are distributed based on simple algebra equations. The image shown here is a composition of multiple iterations of the “Sine Wave Ocean” code.

Recursive Triangle Construction ↓

TriangleRecursion

The above piece, “Recursive Triangle Construction”, has generated some truly interesting visuals. The concept for this was simple. I wanted to see what a composition would look like if we created triangles stacked with each new shape smaller than it’s preceding shape. Each new shape would also be rotated slightly. In the larger image on the left, I added a random variable in the placement and achieved this interesting shape. The three small structures on the right explore the de-evolution of the structured shape.

These artworks are created in Adobe Flash using the ActionScript 3.0 language specification. I have included the code necessary to recreate the larger triangle image. To set up this project; create a new Flash As3 project and set the document class to RecursiveTriangleConstruction. Save that file somewhere and then create a new Actionscript file. Copy the sample code into the Actionscript file and then save it next to the project file, name it “RecursiveTriangleConstruction.as”.

Compile and enjoy! Click on the stage to generate a new iteration.

package
{
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.events.*;

import flash.utils.ByteArray;
	import flash.filesystem.*;
	
	public class RecursiveTriangleConstruction extends Sprite
	{
		private var maximum_steps:Number = 1000;
		private var current_step:Number = 0;
		
		private var x_center:Number;
		private var y_center:Number;
		
		private var master:Sprite = new Sprite();
		
		private var canvas_data:BitmapData = new BitmapData(2880, 2880, true, 0);
		private var canvas:Bitmap = new Bitmap(canvas_data, "auto", true);
		
		public static const POINTS_READY:String = "Control Points Arrays Ready";
		public static const DRAWING_COMPLETE:String = "Generation Ready";
		
		public function RecursiveTriangleConstruction():void
		{
			init();
		}
		
		private function init():void
		{
			
			addChild(master);
			canvas.scaleX = .50;
			canvas.scaleY = .50;
			canvas.x = (stage.stageWidth * .5) - (canvas.width * .25);
			canvas.y = (stage.stageHeight * .5) - (canvas.height * .25);
			x_center = canvas.width*.5;
			y_center = canvas.height*.5;
			this.addEventListener(RecursiveTriangleConstruction.POINTS_READY, beginDrawing);
			stage.addEventListener(MouseEvent.CLICK, onMouseClick);
			dispatchEvent(new Event(POINTS_READY));
		}

private function onMouseClick(e:MouseEvent):void
		{
			trace("click");
			this.addEventListener(RecursiveTriangleConstruction.POINTS_READY, beginDrawing);
			canvas_data = new BitmapData(2880, 2880, true, 0);
			current_step = 0;
			dispatchEvent(new Event(POINTS_READY));
		}
		
		private function drawTriangle(size:Number, turn:Number):void
		{
			var triangleHeight:uint = size * .75;
			var triangleShape:Sprite = new Sprite();
			triangleShape.graphics.lineStyle(.25, 0x0b0b0b);
			triangleShape.graphics.beginFill(0xffffff)
			triangleShape.graphics.moveTo( triangleHeight/2, 5);
			triangleShape.graphics.lineTo( triangleHeight, triangleHeight+5);
			triangleShape.graphics.lineTo( 0, triangleHeight+5);
			triangleShape.graphics.lineTo( triangleHeight/2, 5);
			triangleShape.rotation = turn;
			triangleShape.x = x_center; + (Math.random() - 0.5) * 10;// + Math.tan(Math.atan(360/maximum_steps) * current_step);
			triangleShape.y = y_center; + (Math.random() - 0.5) * 10;// - Math.cos(Math.atan(360/maximum_steps) * current_step);
			master.addChild(triangleShape);
		}
		
		
		
		private function beginDrawing(e:Event):void
		{
			this.removeEventListener(RecursiveTriangleConstruction.POINTS_READY, beginDrawing);
			trace("begin drawing");
			for(var i:Number = 0; i < maximum_steps; i++)
			{
				var size:Number = Math.random() * (maximum_steps - current_step);
				var turn:Number = current_step/360 * current_step;
				drawTriangle(size, turn);
				current_step ++;
			}
			master.scaleX = .5;
			master.scaleY = .5;
			master.x = stage.stageWidth * .5 - master.width * .5;
		}
	}
}

Oct 16, 2009 | Actionscript 3.0, Generative Art, School | Leave A Comment »

AI is OK Musings on art, code and life.

Generative Art

AS3 Generative Art Framework

Form & Space Generative Art

Control Point Decline ↓

Sine Wave Ocean ↓

Recursive Triangle Construction ↓

Find Something

In The Cloud

Adobe Air

Blogroll

Workflow

Extras

Past Thoughts

Credits