Code a Chaotic Composition Inspired by Joshua Davis

Ever wondered how design guru Joshua Davis makes those choatic images? I did. With his art as inspiration I grabbed a cup of coffee and set out to mimic his style. This tutorial is aimed at designers and flash beginners, and documents my process of achieving something similar to Joshua's early compositions.

Final Result Preview

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

Want to take another look at the final result we will be working towards? Click the flash movie (to make sure it's in focus) and press any key to watch chaos at work!

Step 1: Create the Project

Create a new ActionScript 3 file.

You are quite free to change the settings as you like, I left mine as default and just changed the background color to black.

Step 2: Preparing Your Composition Objects

Open your library (if it isn't displayed you can "crtl+l") right-click the empty list and select "New Symbol".

We're going add a movieclip containing the shapes that we want to appear in the final composition. We'll need to be able to instatiate it from the library; we achieve this by saying the symbol we just created is a class of its own that extends a movieclip class.

By doing this we can create a new set of objects by simply writing var object = new Objects();

Step 3: Designing the Shapes

When you create a new symbol using this method Flash will automatically open it on the stage for you to edit. Let your creativity flow and add a bunch of shapes, each in its own keyframe. Here are a few of mine:

Don't worry about the colors, we'll randomize them through a palette which we'll define later on when coding.

Step 4: Setting up Your Composition

It's now time to set the code. Go to your main timeline (which should currently be blank with just one empty keyframe) and open up your actions panel (or use F9 as shortcut).

1

2

//composition settings;

3

var count:Number = 100 // this is the amount of shapes we will be adding to our composition

4

var maxscale:Number=10 // this is the maximum scale value that our shapes will be allowed to achieve

5

var minscale:Number=1 // this is the minimum scale value that our shapes will be allowed to achieve

6

var maxrotation:Number = 180 // maximum rotation value for our shapes

7

var offsetX:Number = 100 // the offset is the value that will trigger the discrepancy of your composition

8

var offsetY:Number = 100 //

9

var marginX:Number = 100 // this is the margin for the x axis

10

var marginY:Number = 100 // this is the margin for the y axix

Step 5: Finding a Color Palette

We still need to add color to our composition. I do this, not by trying to figure out a palette good enough to use, but by using a palette that I know is good enough. I use kuler.

Go to kuler.adobe.com and download the latest air version of the kuler air application.

What this will let you do (besides searching for palettes you like) is copy the hexadecimal colors as separated comma values, by just clicking this button:

Step 6: Adding Color to Your Composition

Go back to your Flash file, open your ActionScript panel and add this line of code:

1

2

var colorPalete:Array = []

Inside this array you can add the clipboarded values that you took from kuler's air app.

1

2

var colorPalete:Array = [191919,182828,60702D,AAB232,E6FA87]

Don't forget to edit them so you end up with real hexadecimal numbers. Your final palette will be an array which should look similar to this:

1

2

var colorPalete:Array = [0x191919,0x182828,0x60702D,0xAAB232,0xE6FA87]

Step 7: Creating Your Composition

Our composition is setup with a few rules, so we now need to apply those rules. Let's create a function that will generate the composition for us.

Editor's note: I'm afraid the ActionScript in this step is causing our syntax highlighter to trip Firefox up (this sometimes happens and I've no idea why). For now, it's best you download it to have a look. Sorry for the inconvenience.

Step 8: Adding the Background

You can test the art work as it is, though you'll notice that despite looking ok, something is missing. Yes, the gradient background.

To make a gradient background add this little function:

1

2

//background gradient settings;

3

var type:String = GradientType.LINEAR;

4

var colors:Array = [ 0x990000, 0x220000 ];

5

var alphas:Array = [ 1, 1 ];

6

var ratios:Array = [ 0, 255 ];

7

var matr:Matrix = new Matrix();

8

var sprMethod:String = SpreadMethod.PAD;

9

var bg:Sprite = new Sprite();

10

var g:Graphics = bg.graphics;

11

12

//Background creation

13

function createBackground(){

14

	//starts a gradient box

15

	matr.createGradientBox(500, 440, 90, 0, 0 ); //make the gradient the size of your stage, set the rotation to 90 degrees

16

	//begins the fill

17

	g.beginGradientFill(type, colors, alphas, ratios, matr, sprMethod );

18

	//draws the rectangle

19

    g.drawRect( 0, 0, 500, 440 ); //be sure to draw the rectangle the size of your stage

20

	//adds to stage

21

	addChild(bg);

22

}

Be sure to add a call to this in the first line of your createComposite() function.

Step 9: Removing the Composition

This works by just looping through the stage child objects and removing them.

1

2

function removeComposite(){

3

	while(numChildren > 0){

4

		//eliminates all of the child objects from the main timeline

5

		removeChildAt(0)

6

	}

7

}

Step 10: Randomizing at Runtime

To create compositions at runtime I'll be using the keyboard as a trigger. I'll be adding a KEY_DOWN listener to the stage so that everytime a key is pressed the composition will change to a new one.

1

2

stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyPress)

3

4

function onKeyPress(e){

5

	removeComposite();

6

	createComposite();

7

}

Step 11: Saving your Composition

This is the tricky part. To save your composition you need to print it to a file. I use bullzip pdf printer for that.

Go to bullzip.com and download their printer drivers. Follow the installation instructions.

Step 12: Printing Your Artwork

Start up your swf, generate compositions by pressing any key until you arrive at one that suits you.

Right-click on the image and select "print".

Step 13: The Bullzip Wizard

Select the bullzip printer and click print.

In "format" choose whatever you prefer.

However, if you choose PDF you will end up with all the vector shapes, meaning you are free to scale and edit them later on.

Conclusion

As you can see, this is a rather simple approach to achieve the feel that Joshua brings to his work (which is obviously far more complex than this).

I hope you liked this tutorial, feel free to leave comments and questions. Thanks for reading!

Note: If you are interested in using Joshua's code be sure to check out Joshua Davis' and Branden Hall's newly released HYPE framework at hype.joshuadavis.com.