It has been a long 3 months of work; time spanning three terms and multiple projects and at long last, it is done: The Final Project.

The project itself has gone through a number of revisions, but has always been focused on Generative Art. It started its life as a program that would analyze and interpret poetry to create appropriate artwork. Then, as that idea proved too big a bite to chew, the project was given a new wrapper; that of an e-card application. In this state, it lived for quite some time in the realm of development and documentation until near the end of the project, it became apparent that e-cards too would spoil some of the unique value inherent in Generative Arts. Thus, the project shifted again into something different, though not mutually exclusive to the e-card concept. This new direction was that of personalized, modern art that is driven by one’s voice. The concept of using voice as a vehicle for generating the artwork was developed during the e-card stage as a way of bring more physical elements into the creation process and making it seem more personal. Thus, this was the final brief for the piece:

XYZ runs a very successful “Do it yourself” chain of stores that allows customers to create artwork on a variety of kitchenware and ceramic items. While their physical stores are successful, the company sees potential in the power and versatility of the web to deliver a new kind of self-created art piece. At the same time, similar to the analog creation of artwork in their physical stores, XYZ is placing key focus on having one’s personal touch influence the artwork. In particular, XYZ is looking for a website that can use an analog input as the base to create artwork rather than a purely computer driven methodology. In addition, since one of the advantages of the internet is rapid distribution, XYZ wants to provide options for downloading and ordering the completed pieces.

This project will create a website that integrates analog with computer driven methods to create art.

Unfortunately, due to time pressures, I was unable to fully realize a new brand or website wrapper for the project, but that is something that can be addressed in the future.

The real meat of the project is, of course, the generative engine. The Engine (as I like to say) was an extremely complicated little creation for me. With no experience in the field of generative art, I was mostly experimenting with new concepts. For those folks who have been regularly checking here (thank you!), you will have seen some of the early development as evidenced in this first post on different algorithms and this later post with more integration. I knew my methodology for creating generative art was right, but I didn’t really have the sense of personalization and unique elements beyond that of simple randomization.

That’s where the “plug-ins” originated. Bringing in the user’s voice had the unexpected advantage of generating interesting shapes to act as a basis for artwork placement as well as adding in a degree of personalization that had not been achieved before. Originally, I wanted to include more options, but time crunch and deciding to limit options for the sake of simplicity led me to reduce it to only one, that of the circle.

Selecting one’s own vector imagery was always an inherent part of the project, from the early conceptualization period. The only thing that needed to be done was to create different kinds of interesting imagery. For that, I enlisted the help of three fellow students with a penchant for creating vector images to develop a number for me. Their work plus some of my own and other free ones I found online gave me a strong basis of 78 different options. In the future, I would like to implement a feature to allow people to upload their own imagery or create new images on the site itself. Unfortunately, they were beyond the scope of the project this time round.

Color selection was something that I had planned to include from the early stages as well – offering colors for different moods. I thought I would provide different color palettes for users to pick from, but when I discovered that Adobe’s Kuler offers an API capable of returning color palettes from user searches, I knew that was what I wanted to do. Why force users to pick from 5 or 6 different color palettes when I could allow them to search for their own? Of course, this came with a bit of a cost. Kuler’s API is rather slow and sometimes returns malformed XML, leading to no end of headaches for me. Even the final version occasionally has issues due to Kuler. Oh well.

All of these different plug-ins originally were very much integrated into a single code set, each with their own form and function hardcoded in. Unfortunately, while that allowed me to create pretty pictures, it didn’t allow me to do much with the code after that. Not to mention that so much of the backend had turned to spaghetti with code sending data all over the place with no direction. It was rather terrible and difficult to understand. So I rewrote it.

The biggest thing was to separate form and function on the code side; if I could create menu-independent backend, it would be simple to change the menu’s visual treatment without having to perform major surgery on the code behind it. The other big thing was to start integrating new functions into The Generator. In order to make concepts like moving through time on the generator were completely impossible in my former version of the code. Thus, I had to re-conceive how data would be stored and displayed. Happily, once that had been established, it was an easy feat to add in all the other elements like zoom, voice affecter and waveform overlay. In addition, the new method of data storage allowed for vector output to be much easier later on.

Speaking on output, the download menu was an area that took a bit of time. JPEG export was kindly provided by this Actionscript 3 compliant encoder. While it was capable of reducing quality as well, I wanted it only to export at full resolution. Unfortunately, it had a cap on around 2 Megapixels (2000 px X 2000 px), so I was forced to limit the size of the images to those dimensions. However, once there, it was a simple matter to set up AMFphp to receive the bitstream, save out a JPG image to the server, and allow users to download it. The vector output provided a bit more trouble.

I wanted to export some sort of vector imagery from flash. Now exporting anything out of flash is difficult enough, but vectors in particular are a pain. I looked at php-driven solutions where a pdf would be assembled on the server and saved out, but I couldn’t understand how to make that sort of idea work, so I thought some more. After some time, I came up with the solution of exporting an XML document from flash that would contain all the required vector elements of the document. Then, php would save this file and send me a message. I would use another program called Processing, to take and interpret the XML to produce a vector image. While there are PDF libraries available in Processing, the SVG export ones worked exactly the way I wanted them to, so I was able to produce my vector imagery with that method.

The final area I looked into was the menu system and some usability. While it was nowhere near my main focus for the project, I felt that it needed to be clean, simple and usable to really be a success. That would mean, of course, cleaning up the menus, uniting their looks and generally creating a friendly navigation system. I used the icons that I developed earlier since they are bright and legible, though they may be replaced later with the development of a brand. A lot of little work went into making the user experience work, even at a simple level, and it would be tough to really cover it all, so let’s just that that I did my best to guide and assist the users through the menu system to the important materials.

Thus, I was able to create this little application. It was a tremendous amount of work, but very rewarding and the sense of accomplishment at the end was amazing. In the future, I’d like to add even more features and explore the area of generative media further and further, but for now, I think I’ll just take a bit of a break.

Time Breakdown

Project Management ….. 32.75 hrs ….. 9.74%
Research ……………….. 46.25 hrs ….. 13.76%
Branding ……………….. 16.75 hrs ….. 4.98%
Design …………………. 31.25 hrs ….. 9.3%
Development …………. 209.07 hrs …. 62.21%

If you are interested, here is a pdf of my production book, which covers much of the above information and some other nuggets plus including pictures and other interesting items.

Check it out if you have a moment!

To the Project

In the realm of game development, when a game has “gone gold,” it is fully done and ready to ship to consumers.

My code for my final project is now silver.

I’ve implemented everything I wanted to and as far as I can tell, it all works without bugs. Thus, I felt it was a good time to post this up here for you folks to check out and play with. There are no instructions, but I think things are *mostly* understandable without guidance. I will need to change user interfaces of course, but the essential bone structure is all there and happy. If you find any bugs, just send me a message!

There are some important things to note. First, this generative project is voice driven. The first menu is where you record your voice. That will directly influence where the artwork is placed. Also, while the final imagery is drawing (items are being placed on the screen), you can similarly use your voice to affect the scale of the imagery. The louder one is, the larger the images will be. So, in case you folks were wondering, you will need a microphone.^^

The JPG and SVG export options both work. JPG results in a direct download. SVG will record your creation and send me an e-mail informing me that someone has requested one. The SVG part isn’t the most elegant solution, but it is was the best I could do to ensure that vectors were preserved; and I’m not good enough with java to make it work server-side.

I’ll put together a gallery for your pleasure at some point later – probably after the project is over with in 8 days. Also, if you use my little engine here for something, please credit me and send a link back here. It is nice to know where things are ending up (hmm, a watermark could be nice too – on jpgs).

In any case, have fun and let me know how things go!

Welcome to the Engine.

Hey folks, it has been far too long since I last posted on here! Part of the reason was due to a shift in focus of the project and due to a need to pound out code. The other part is that my final project has been regularly devouring my time (I’m generally at school working from around 10 in the morning until 11 or midnight, if not later) and that has prevented me from posting updates.

However, I have something to show now!

These are some of my first renders with a (mostly) fully functioning generative engine.

In general, the project has moved away from the idea and concept of the “e-card” into a realm of producing generative art. There is still the personalization and, interestingly enough, more analog input into the design, but I feel that the medium of art pieces represents and presents the media much stronger than an e-card could.

Overall, I’m rather happy with the result. These renders are pre-rewrite, so there are still some slight problems present (like some of the graphics getting cut off with a sheer line), but I’m most glad to see that the system works. Up until yesterday, I wasn’t sure I was going to be able to produce interesting, nice-looking pieces, but now I know I can. There is still much work to do since I didn’t code it particularly well the first time, but that should be easy enough to resolve now in advance of my review next Friday.

I’ll keep you folks updated as things progress!

In the process of developing the components for my final project, I spend a good bit of time developing these algebraic equations that could then be used by themselves or in patterns. The end result is an extremely powerful pair of arrays that I can do just about anything with. Check it out after the link

My goal for the component was to create a set of points that would define the shape and to develop components that would be extremely easy to alter from the outside. If I could do that, it would be really easy to feed any sort of variables into the component and return a pair of arrays of points. Then, that set of points could be used as x and y coordinates to place any sort of vector graphics onto the stage. To start, I wrote down the various kinds of components I wanted to make; a circle, a sine wave, a cosine wave and a spiral. Then I spent time pseudo-coding how to develop the code that would feed into my arrays for each of the different shapes (wikipedia is a great resource for equations!). Finally, I started coding on the computer building what I thought would be the easiest to make; the circle.

As it turned out, since the circle was the first component I decided to make, it took by far the longest. I also had to build the testing file and testing code. The main necessities for the component are starting rotation (where the first point will be placed), how many points there are (determines the spacing between points) and the radius of the circle. All these variables can be shifted by the external component controller as well as internally depending on what is needed. As the points are plotted, they are fed into an array for x values and one for y values. Thus with the two arrays I have the entire set of points for the circle. Finally, the controller calls the testing function that draws dots based on the x and y coordinates from the array. I was rather happy to see it all working properly!

Next, I started working with generating a spiral. While I originally called it just “spiral,” it was actually generating a logarithmic spiral and when I later decided to add in other kinds of spirals, I needed to alter the naming for the function. This component uses mostly the same code from the circle example, except with one exception – the two lines that generate the x and y positions. I used these formulas as my basis for identifying what the x and y values.

//Logarithmic Spiral
// y = a * e ^ (tb) * sin(Theta)
// x = a * e ^ (tb) * cos(Theta)


Very similar to the Logarithmic Spiral, the Archimedean Spiral has only a single difference; the replacement of a multiplication with an addition as seen below.

//Archimedean Spiral
// y = a * e ^ (tb) + sin(Theta)
// x = a * e ^ (tb) + cos(Theta)

^Sine

^Cosine

The sine wave and cosine wave evolved together, since they are so similar. As seen in the code, the difference is just the addition of PI/2 inside the sine.

Sine
// y = A * sin(wt) + D
Cosine
// y = A * sin(wt+PI/2) + D

After developing the first set of code for the circle, each additional function only took a half-hour to 45 minutes to create, which greatly helped speed up the development time. As a final addition, I made each variable randomly assigned when the component was created, so every time one clicks on a specific function, one will receive a different looking set of points. All in all, I’m very pleased with the way that the components work and look forward to developing uses for them.

View the component tester here

From here, I need to create a few more components (namely a straight line and a spring-like shape) and then start developing concepts for larger shapes that will make usage of these smaller components. I’m also going to look into introducing randomness into the design to produce shapes that, while appearing more random, are still arranged in a shape. Onward!

Development Cycle

1. Fractal Basis

   This was the beginning of this project. I felt that it was important to analyze and understand how fractals are generated as they are the basis for L-systems.

2. First Generation Tree

   After working with the fractals, I made my first generative tree. It involved one single recursive algorithm with no variations. Unfortunately, since there was no differentiation between trunk, branch and leaf, the look of the tree is not very realistic

3. Second Generation Tree

   After developing the first generation tree, I split up the process even more, creating 4 different files that work together; a FLA starter file, a tree file, a branch file and a leaf file. The FLA calls the tree, which calls itself and branches which call themselves and leaves. The big advantage of this process is that it is extremely easy to control styling to each of the different elements and implement direct targeting onto any particular part

4. Tree Grower Application

   This is the final version of the tree, integrating the interactive elements so that you can pull on the branches as well as Inverse Kinematic chains that allow for the branches to be influenced by each other and bounce back. The Final version of the file is designed for a multitouch display screen where one can physically use one’s fingers to pull on branches. The tree in this file is turned 90 degrees in order to take advantage of the length of the multitouch display. I’m afraid I have been unable to get it to work properly vertically, but I will continue to try and improve it.

Overall, I’m really happy with how the project turned out. There were a number of issues and bugs that needed to be overcome, especially in the IK chains, but ultimately I found every last one. I feel especially good about the project as I developed all the code myself and gained a very strong understanding of recursive functions. In addition, it was created in Actionscript 3 and is my first project in that language, so I’m glad that it actually turned out, let alone turned out well! I would like to revisit this project later and add in new features like being able to prune the branches and grow elements, but the implementation of those features was beyond the time limit and scope I had available.

I have been working on an application to generate trees in preparation for my term project in Object Oriented Programming (flash) and Designing Physical Interfaces. It has been a lot of work and not the easiest to say the least; especially in as3. However, I recently had a bit of a breakthrough.

Using the stochastic L-System rule set (aka random chance of different rules being applied) given on this site about simulating plant growth, I generated the below flash application. I apologize as it may take some time to load and run as the tree generation process can take some time. The current recursion level is set to 12.

As you can tell, some of the trees are far better than others. Some, in fact, look like bushes or half-deformed creations. Ahh, the joys of generation… I find the whole plant tends to look better around 15 recursions, but that takes a bit too long to run! In any case, the setup of this file breaks down into 4 main sections. A FLA to start the process, a tree class, a branch class and a leaf class. The tree class is identifiable by the dark brown, the branch by the light brown and the leaf by the green. At the moment, the only item that is randomized is the rule set, although the decay on recursion (currently the tree class has the most decay of -4), the angle of extrusion (here set to around 20 degrees) and the length (currently 2, but dependant on the recursion level) can also be randomized. Another item I would like to add in is a decay on the length so that the tree trunk is the thickest all the way down to the smallest branch.

So much to do! Please look forward to it!

An L-system or Lindenmayer system is a formal grammar (a set of rules and symbols) most famously used to model the growth processes of plant development, but also able to model the morphology of a variety of organisms. L-systems can also be used to generate self-similar fractals such as iterated function systems. L-systems were introduced and developed in 1968 by the Hungarian theoretical biologist and botanist from the University of Utrecht, Aristid Lindenmayer (1925–1989).

Example 1: Algae

Lindenmayer’s original L-system for modelling the growth of algae.

variables : A B
constants : none
start : A
rules : (A → AB), (B → A)

which produces:

n = 0 : A
n = 1 : AB
n = 2 : ABA
n = 3 : ABAAB
n = 4 : ABAABABA
n = 5 : ABAABABAABAAB
n = 6 : ABAABABAABAABABAABABA
n = 7 : ABAABABAABAABABAABABAABAABABAABAAB

(from Wikipedia)

At first, when I started trying to figure out how to create L systems in flash, I used an array. That array would take the starting variable and plug it into the first division of the array. Then a line of code would go through and apply the two rules to that first division, adding in the new rules as it went. After that, the process would repeat until the desired number of iterations were completed. From there, the code would read out the entire array and draw lines based on what was inserted into each division.

In Flash 8, this didn’t work too well as it couldn’t handle much past 5 or 6 iterations of some of the more complicated rule sets. Flash CS3 could handle up to around 8 or 9, but still this wasn’t optimal. After hunting around online, I found a blog entry by Mitch Allen about turtle graphics created in flash using recusive functions.

Understanding Mitch’s code took me a while, primarily because the logic hurt my brain. However, I pushed through it and figured out how the system worked! From there, I started attempting to implement the L systems on the Wikipedia page.

The first one I successfully completed was the Koch Curve.

variables : F
start : F
rules : (F → F+F−F−F+F)

in this case, the “+” and “-” symbol mean turn left and right, respectively. For this Koch curve, the angle of their curve is 90 degrees.

at 3 iterations

at 6 iterations

After the Koch Curve, I attempted to make some of the other ones on the page, but I found myself having trouble. Either the code wasn’t working right (via improper entry) or the rules on the page were wrong. So I went out in search of a different page with more options. Ultimately, I found Robert Dickau’s Two-dimensional L-systems page that contains a large number of different L systems with the rule sets for them. I created a number of the different l systems on this page.

The Triangle Koch Curve (F -> F+F–F+F, 60°):

at 3 iterations.

at 9 iterations.

Dragon Curve (X -> X+YF+, Y -> -FX-Y)

at 10 iterations.

at 15 iterations.

Arrowhead curve (X -> YF+XF+Y, Y -> XF-YF-X, 60°):

at 5 iterations.

at 9 iterations.

With all these fractals under my belt, I feel more prepared to start developing tree l-systems with their more complicated rules and methodologies! I look forward to seeing what kind of creations I can develop with these for this project and for my final project, which I will talk more about later!