Deprecated: Assigning the return value of new by reference is deprecated in /nfs/c01/h09/mnt/6491/domains/ssdesigninteractive.com/html/g2/wp-includes/cache.php on line 36

Deprecated: Assigning the return value of new by reference is deprecated in /nfs/c01/h09/mnt/6491/domains/ssdesigninteractive.com/html/g2/wp-includes/query.php on line 21

Deprecated: Assigning the return value of new by reference is deprecated in /nfs/c01/h09/mnt/6491/domains/ssdesigninteractive.com/html/g2/wp-includes/theme.php on line 540
Machine art with Flash at {G2} Generative Graphics

Machine art with Flash

  

flash tutorial 1A trip into the world of Actionscript Generated artAuthor: Fredi Bach

Part-1:

The definition of art changes all the time depending on cultural and historical factors. Since computers got powerful enough for tools like Photoshop, Illustrator, Flash and a lot of other graphics tools, digital art became the new big word. But what about digital art created by a script?Flash Art or Machine Art is if a script or machine creates art. Is this possible? Can a machine be creative at all? Yes and no. Some scripts are creating graphics that a lot of peoples would name art. Problem is that not the machine did the creative task, it was the coder of the script that created the art and if the script is controlled by different variables then the user of the machine is doing the art too as only he can decide if the picture with the actual variable values is looking good or not. So at the end it?s still humans that creates the art and not the machine or script.« A man paints with his brains and not with his hands. » MichelangeloA script can only follow an algorithm or use some random numbers to create art. There is no creativity in this behavior. Maybe the time will come when an Artificial Intelligence (AI) is smart enough to have imagination and creativity, but till then it’s still our task to write the script in a way that creates something like art.So what makes a script a piece of art? There are mainly two kinds of things that must be well selected by the coder and artist. First thing is the selection of the right color palette. You can use a color theory to do this or you can use your own eye to select the colors. Second part where you need your creativity is in creating a script that creates nice looking forms. You can use scripts using a pattern to do this or write a script that uses some math that creates everything based on an algorithm.« Art is the imposing of a pattern on experience, and our aesthetic enjoyment is recognition of the pattern. » Alfred North WhiteheadFrom my own experience, it’s a task of trying out different scripts and patterns till you have something that is looking good. You start with a basic script and then decide in which direction you need to change the code or pattern till you have something nice.In the source ZIP is the source of the Art-Machine I will explain here, so take a look and create some art.download source zip: machineartmx.zip (125 kb)

Part-2:

flash tutorial 2The script I’m using here was developed from me in the early days of Flash 4 and then expanded anytime I had a new idea. So it’s not high-tech MX technology we are talking about here, the main script part that creates the graphics is very simple.The main idea was to use iterations of movie clips with changing properties. Iterations are used when you create fractals based on the chaos theory. Basically you don’t calculate the new values from the start values, but from the values of the calculation one step before. Cause you have a limited computing accuracy if you calculate with floating point numbers, the result of the calculation is never exactly true. So little differences to the real number will happen cause the computer needs to round the number somewhere.Normally you know fractals as something that calculates a color value for every pixel on the screen. Flash is very slow if you start to draw thousands of pixels on the screen, so I had the idea to use movie clips for the iterations and not code. How does this work? Take a look at the following code structure:

for (i=1; i <= 10; i++) {clone0.duplicateMovieClip(“clone” + i, i);this[“clone” + i]._rotation = this[“clone” + (i - 1)]._rotation * 1.13;}

As you see we just duplicate the clone0 (our pattern) movie clip ten times and for every new clone of the pattern we base the new rotation on the previous clone rotation. Let us look at the rotation angles we get if we start with a rotation of 45 degrees:

45 -> 50.85 -> 57.4605 -> 64.930365 -> 73.37131245 -> 82.909583068 …

You can calculate more numbers if you wish, but you can see that with every new number the places behind the comma getting more and more. Flash MX has a limit of 15 numbers in the rotation property of a movie clip, the numbers before the comma included. So if we just make some more clones, Flash needs to round the numbers and automatically starting the chaos. Of course the chaos will not start after only ten iterations, but maybe 100 could be enough.That was the basic idea, but as I tested the file with a nice looking pattern I realized that this kind of scripts don’t need any chaos in it to look amazingly nice. So I started to change not only the rotation property of the clones, but also the other properties like scale and the position of the movie clips. As I used scale I had to change the pattern, too. First I used a pattern with solid lines one pixel thick. If you now scale this lines, they get thicker and thicker as more you scale them. So I simple used hairlines and the problem of thick lines was gone.The code now looked like this:

for (i=1; i <= count; i++) {clone0.duplicateMovieClip(“clone” + i, i);this[“clone” + i]._rotation = this[“clone” + (i - 1)]._rotation * spin;this[“clone” + i]._rotation = this[“clone” + (i - 1)]._xscale * x;this[“clone” + i]._rotation = this[“clone” + (i - 1)]._yscale * y;this[“clone” + i]._rotation = this[“clone” + (i - 1)]._x * xmove;this[“clone” + i]._rotation = this[“clone” + (i - 1)]._y * ymove;}

To try out different values for each property, I created an interface where I could just press a button to randomly generate this values. As you see in the above code, I not only added variables for the multiplication of each property, I also added a variable in the for-loop to control the number of clones I generate. Just try out a high number of clones, this will slow down your computer a lot, but the outcome will pay your waiting time back. If you have a stable machine and a lot of time, then try out 1000 or more as the loop count. If you used the right settings then you will see a really nice picture after seconds or minutes (depends on your pattern) and the lines of the pattern starts to desapier. Note: The whole waiting time occures cause Flash has to draw thousands of lines and antialiase them. This is a huge framerate drop as you can imagine. ;-)In one of the first versions I changed the alpha property of the clones, too. Later I just used an alpha value of 20 for Mac users and an alpha value of 40 for PC users for each clone, so they blend smoothly into each other. (see picture 2) The alpha value is different for PC and Mac users cause the Flash player on this two platforms have a different antialiasing of the lines. Another little modification that will let your pictures look better is if you reverse the z level of your clones. This can be done very easy:

clone0.duplicateMovieClip(“clone” + i, 5000 - i);

As you see I only changed the last part of the duplicateMovieClip function.You should have now a really good Art Machine, but if you’re not happy with the result, then you should have a look at your patterns, maybe change the colors, or try out other settings.

Part-3:

flash tutorial 3Do you remember where you can use your art skills to create nice looking pictures? There are two places where your creativity is needed: The script/pattern that creates the pictures and the values you use to control the script. So would it be not nice if we could control more variables in our script? This would give you a lot more control over the final picture and a lot more fun playing around with them.So how can we add more variables to our script? I will show you now some ways to do this and I’m sure that you will have some own ideas, too.At the moment we just use a multiplication of the previous values in our iterations. So why not add some advanced math to this simple multiplication? Flash has a great lib of this math functions. You can find them in the actions list in your scripting window. Go to: Objects -> Core -> Math -> Methods. Play around with them till you found a method that creates great pictures. Of course it’s much easyer if you already have a good knowledge about math. ;-)Another way is to use tweenings to manipulate the pattern in ways you can’t change with ActionScript. You can morph a shape into another shape or mirror the pattern movieclip. In my example I used mirror at the end of a thousand frame tweening. This will give you some really nice looking effects. Here’s the extra code I used to control the tweeening of the patterns:

this[”clone” + i].tween.gotoAndStop(Math.round(1000 / maxclones * i));

Till now we only used the same variable values for the whole picture. What if we morph a set of values into a second set of values? I’ve implemented this idea in my example file. Just activate TRANSITION in the example file and change some of the values. How does this work? Let us look at the code for the spin values:

spindiv = (sspin - spin) / maxclones;spinnext = spin + spindiv * i;this[”clone” + i]._rotation = (this[”clone” + i - 1]._xscale + i) * spinnext;

Not really complicated. We just need to calculate the difference of both spin values for each step and then multiplicate this value with the iteration number and add it to the start value. That’s everything you need to morph values.« The aim of every artist is to arrest motion, which is life, by artificial means and hold it fixed so that a hundred years later, when a stranger looks at it, it moves again since it is life. Since man is mortal, the only immortality possible for him is to leave something behind him that is immortal since it will always move. This is the artist’s way of scribbling ”Kilroy was here” on the wall of the final and irrevocable oblivion through which he must someday pass. » William Faulkner

Part-4:

flash tutorial 4Here I will give you some ideas for a really great art tool. Right now the whole script is based on patterns. Would it not be great if the user of the tool could create his own patterns? And what about a save function if you found a great setting? Right now the size limit of the picture is your screen resolution. So what if we need to print the pictures in a very big size? Let us have a look at each situation.User defined patterns:To let the user create his own patterns, we need to create kind of a drawing tool where you can draw lines, curves and select colors for them. Flash MX has methods called curveTo and lineTo, so this would be possible. You can use the same structure and just draw the lines and curves in an empty frame of the pattern movieclip with some curveTo and lineTo ActionScript. Of course you need to do this with every clone.Save function: If you are developing your art-tool for the web, then you can code a backend application that saves the user defined patterns with settings for a great looking pictures in a db on your server. This way you can make kind of a community battle where every user of your tool can show off his pictures.Save for print: The whole pictures exists of a huge amount of lines and curves, so it is basically a vector picture. If you just make screenshots of the pictures, then the screen res is the maximum size, but if you save a postscript, eps or illustrator file, then you can scale the picture to any size you need. There is no function in Flash MX to save this kind of files directly, so you need to do it yourself. This is not easy cause you need to know how this kind of files are build, but I’m sure you could make some money with this kind of pictures, so why not learn it and give it a try?Most important: N’Joy!Anyway if you are doing this kind of “Art-Machines” to make money or not, it’s a lot of fun to do them and you can learn a lot. So give it a try, as you saw it’s not that complicated. Just be creative and try out whatever idea you have, sometimes the best things where created only by coincidence.Additional references:Flash Math Creativity by Manny Tan, Glen Rhodes & Gabriel Mulzer



11 Responses to “Machine art with Flash”

  1. 1 April Toys May 7th, 2008 at 12:50 pm

    The tutorial is beyond me, but I enjoyed the pretty pictures :)

  2. 2 jouni September 5th, 2008 at 3:29 am

    hi, thanks for the nice article - any chance of fixing the link to the source file? it’s not working

    thanks
    J

  3. 3 anja November 6th, 2008 at 3:40 pm

    I can’t download your zip file :-(

    anja

  4. 4 sajid January 11th, 2009 at 9:04 pm

    The download link is fixed.

  5. 5 shabnam May 12th, 2010 at 8:28 pm

    nice design really

  1. 1 cool « Rhett’s Place
  2. 2 Getting Started With Generative Art « Media Militia
  3. 3 pattern recognition skills
  4. 4 Twitter Trackbacks for Machine art with Flash at {G2} Generative Graphics [ssdesigninteractive.com] on Topsy.com
  5. 5 Suggested Site
  6. 6 buy kindle fire online

Leave a Reply

Close
E-mail It