Math Is My Friend

I am working on a website that uses a very large grid of pages that are shifted around to display content. I am building a map that lets you navigate to any rectangle on the board through a simple grid box.

The HTML is laid out in a simple list. The opening ul and then 44 li tags with nothing inside. This structure is styled with CSS and then each of the 44 rectangles sit nicely in a 4×11 grid.

With jQuery it is easy to get the index of a clicked element, what I really need is that element’s position in the grid. Specifically the row and column that it is in.

I spent some time thinking about the best possible solution and after trying to normalize the numbers, I remembered that I could use remainders!

Here is the code I used, it works like a charm. If you have a different size grid, replace the proper number and you are all set.

Feb 11, 2010 | Actionscript 3.0, Web Development | Leave A Comment »

To MXML Or Not To MXML, That Is The Question.

Just this past week I began to delve into the wonder and beauty that is Flash Builder 4 beta. There seems to be some confusion around the Flex/Flash Builder family but to me it is very clear. Flash Builder is an IDE that features a flash compiler along with a MXML compiler, a design mode and code editor that enables quick and easy use of the flex (and other) components. Flash Builder understands the needs of an object oriented programmer and the program contains a project management component that I have only yet begun to tap. The MXML language is an interesting hybrid of XML and HTML. The best way I could describe MXML would be that it is web design for an object minded designer/programmer. The most attractive feature of the language is how easy it is to lay out an entire application in the visual builder but also how efficient it is to link the visual components to hand coded methods and properties.

Another interesting aspect of MXML is that it is forcing me to carefully consider my public methods when designing objects. All of the interactive controls exist on the application MXML file, the event handlers are responsible for calling methods that are buried deep inside the main program code. I need to spend some more time learning about the Model View Controller design pattern because it seems that MXML encourages this.

I am excited about using MXML as a front end for my generative art projects. It will save me tremendous amounts of time by reducing the need to design and code control components. I believe that it will also help me get my projects off the ground in less time, leaving more time free for new experiments! I have been reading debate about MXML and it’s usefulness and I agree with some of the dissenting opinion. MXML is great for rapid application development but in some situations, it does encourage sloppy coding. Someday in the near future, I plan to design and code my own set of components in favor of pure AS3 applications and programs.

Dec 14, 2009 | Actionscript 3.0, Web Development | Leave A Comment »

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.

Actionscript 3.0

Math Is My Friend

To MXML Or Not To MXML, That Is The Question.

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