# 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).

//composition settings;
var count:Number = 100 // this is the amount of shapes we will be adding to our composition
var maxscale:Number=10 // this is the maximum scale value that our shapes will be allowed to achieve
var minscale:Number=1 // this is the minimum scale value that our shapes will be allowed to achieve
var maxrotation:Number = 180 // maximum rotation value for our shapes
var offsetX:Number = 100 // the offset is the value that will trigger the discrepancy of your composition
var offsetY:Number = 100 //
var marginX:Number = 100 // this is the margin for the x axis
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.

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:

var colorPalete:Array = []


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

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:

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.

//background gradient settings;
var colors:Array = [ 0x990000, 0x220000 ];
var alphas:Array = [ 1, 1 ];
var ratios:Array = [ 0, 255 ];
var matr:Matrix = new Matrix();
var bg:Sprite = new Sprite();
var g:Graphics = bg.graphics;

//Background creation
function createBackground(){
matr.createGradientBox(500, 440, 90, 0, 0 ); //make the gradient the size of your stage, set the rotation to 90 degrees
//begins the fill
g.beginGradientFill(type, colors, alphas, ratios, matr, sprMethod );
//draws the rectangle
g.drawRect( 0, 0, 500, 440 ); //be sure to draw the rectangle the size of your stage
}


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.

function removeComposite(){
while(numChildren > 0){
//eliminates all of the child objects from the main timeline
removeChildAt(0)
}
}


## 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.

stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyPress)

function onKeyPress(e){
removeComposite();
createComposite();
}


## 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.

## 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.

• Miguel

Tao lindo!!! I’m in love! First comentário, yay! Nice, és o maior! The next generation flasher of the world in universe and beyond! uhuuu!

• http://www.jsookha.com Jessel

thank you – always wanted to learn – now I can really play — later days

• flora

;) Thanks you..

nice post Bruno, its nice to see some art-visual tuts every now and then; great starting point for spiking…

• André

Very nice, it would be nice to code some object wich create custom shapes too, but nice work, much better if in document classes but congratulations and i cant wait for your next tutorial.

• Bruno Crociquia

Thanks,
In fact i thought about giving this tut an oop approach. but since its designer oriented i prefered to keep it to what designers know best… the timeline :)

• André

Good time to create good habits for designers too ;)

• http://gamedev.michaeljameswilliams.com/ MichaelJW

Wow, this is really cool! Maths generating art — I love it :)

• Mario

Hi.
Nice post.
But I think it is not necessary to install the Kuler (AIR). In Flash CS4 IDE already has an extension to it (Window-> Extensions-> Kuler).

• http://www.almogdesign.net Almog Koren

This is cool, there is also gskinner’s Wander Motion Class
http://www.gskinner.com/blog/archives/2009/11/wander_motion_c.html

• http://www.thewebtuts.com TheWebTuts

• Pingback: Just an ordinary blog

• Ludovic

Parabéns Bruno, uma bela alternativa nesta secção dedicada ao flash!

• http://campjohn.dk/wp/ felisan

this was very inspiring!
I created 4 versions of this, and even though the results are more odd than art, I surely had fun doing it.

check it out here:
http://www.campjohn.dk/wp/?p=1329

:O)

• Bruno Crociquia

cool :)

• http://www.clippingimages.com/ shabnam

thanks for sharing the tutorial

• http://www.clippingpathindia.com Clipping Path India

Nice work.Really inspired me to learn a new thing.Thanks.

• James

I can’t get it to work. I get two errors at this line:

var obj:Objects=new Objects();

One something about being a possibly not defined method, and another about the type not found or not being a compile time constant.

• Steve

fantastic tutorial thank you!

i only need to figure out how to make the alpha fade in and out slowly over time!

obj.alpha=Math.random()+.4

• Pingback: More Generative Art! | CG – IM

• Pingback: Week 6 | Learning Interactive Media

• http://www.clippingpathone.com Clipping Path One

Awesome work, motivate us for good work. Thanks for this sharing

• http://clippingpathspecialist.com/services/photograph-retouching-service.html Photo Retouching Service

Mostly i like the visual steps of this tutorial.

• http://www.clippingpathindia.com/photography-services.html Commercial Product Photography

I Mostly i like the style of writing of this tutorial and also the images of of each step.

• http://www.clippingpathindia.com/ Clipping Path India

Nice tutorial! Simple but effect. Thanks!

• http://www.outsourceexpertsbd.com/ Clipping Path

Have a creative result in your tutorial. Wonderful job!

• http://www.clippingpathspecialist.com/photograph-retouching.html Photo Retouching Service

Very well explained tutorial.