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!

Hello folks! I’ve been hard at work developing my final project more and more. For today’s installment, I would like to present you with my early icon concepts.

These two sets of icons are developed for usage on my e-card application. The left set are the ones that the users will view when navigating the e-card reader. The right set are the ones used by a user in creating their e-cards.

For these icons, I first developed the concepts that I wanted each one to express. For example, the Main Menu references the “information” booth blue and white sign. Most are fairly easy to understand, with the exception of background and vector. Background is meant to be a range of mountains that one might see in the background of a picture. Unfortunately the shine makes it hard to see, so it will need some reworking. The vector one is taken from a free vector I found online, which felt typical of vector-based imagery.

Part of my inspiration, as you can pretty easily tell, came from the iPhone button type, which have that slight shine to them. I wanted to create something a little more interesting than straight, flat buttons and I think that the shine helps, but might be too much at the moment. It is also a bit too “harsh” at the moment, which should be resolved with some feather or blur.

In any case, I like them at the moment, though they might need to be changed depending on the overall brand of the site. Maybe I should get that nailed down first….

One of the key segments of my project is in the vector art that will be used in the e-card generation system. When I first conceived of the project, I wanted to do everything for it myself; it would be mine completely. However, I also know that there are weaknesses in my abilities that would hamper the successful completion of the project goals. In this case, creating artwork is one of them.

Also behind the cut is my most updated version of the Generative Application.

I do enjoy drawing and when I spend a lot of time on something, it tends to turn out alright (I think). At the same time, I can’t seem to manage to create successful vector-based art particularly well, despite trying. After attempting to create a few pieces, I decided that if I wanted the final e-card application to look good and attractive (one of the project goals), I would really need to find a different way of getting the resources. One idea I had was to ask the dd09 and dd10 classes if anyone would be interested in helping me create 10 to 15 different vector pieces. Unfortunately, no one replied to my e-mail. However, a fellow student, Asuka Kono, offered to help create some vectors for me if I help her with her flash site. Not a bad trade if I may say so!^^ My adviser, Sergio, suggested that I also look at istockphoto as a resource for purchasable, royalty-free vector artwork. Spending time there and at other “free” vector sites around the web, I gathered this collection of various potential purchases:

The next step will be to go through them to identify what exactly I’m looking at from each and which ones I can eliminate. At the moment, the entire set would cost ~ $100 Canadian. If I need to spend money on the project, I will, but it would be better to really focus in on which ones give me the highest value. Not to mention working with Asuka to see what kind of imagery she would be interested in creating before actually purchasing anything.

All in all, I’m rather excited at how the project is progressing. I upgraded my previous algorithm program, moving toward a semblance of the actual completed engine.

Click here to view the updated version

As you can tell, there have been some major integration that has taken place. Now, the main page creates a grid of points on the window and auto-selects 10 of them. At those 10 points, it calls a random number to pick which algorithm will be used. That value, the “randomize” value and the point’s x and y value are passed to a controller which selects the particular algorithm and sends all the required information to it (including the selected image). Finally, the algorithm draws itself out.

I rather like setting the randomization to around 45-55 percent. that actually results in an offset of plus or minus the percent amount to the x and y coordinate of each point. Overall, I think it gives the design a really nice “random” feel while still keeping the imagery in a coherent group. The flower graphic that is currently used is only a test one (you can easily notice the pixelation at larger size!). My final version will use vector imagery so it can be resized to any final size.

The next step will be in identifying what vector work I’m interested in from the site, what I can get help with from my classmate and continuing to refine the generative application! Oneward!!

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!

I know all you folks have been dying to help me out with my VFS final project, so I thought I would present you all with a unique opportunity to do so! Thats right, you too can provide useful information and data via the glory that is the survey! I can tell you are all extremely thrilled.

Kidding aside, it would help me greatly if you readers (I know there are some of you!) out there would help me by filling out the survey below. The more responses I receive, the better my project will get, so please spend the little time it takes to fill out the survey and help me! Just think, your comments can influence the outcome!

The survey is located here

Thanks everyone!!!

Updated: Survey is now closed. Thanks everyone!

Well, we have reached term 5 of the design program for VFS. That means final projects time has begun!

We spent some time last term getting some of our thoughts and planning pulled together, only really getting started last week. I spent a lot of time trying to decide what project I was interested in creating, but finally settled on one that would meet all my objectives for the project.

Primarily, I wanted to work on a project that would highlight my interactive, visual design, development and branding skills. Ideally, i would also be able to explore my print-related abilities, but that will have to take back-seat to the other elements of this project. Besides, I have (and will have) multiple print-related projects that highlight that area. Thus, I finally settled on a project involving creating an e-card application for a company seeking entrance into a new market:

XYZ is one of the leading producers of greeting and holiday cards around the world. Their success has been driven by their wide range of different styles from the extremely artistic to the more humorous. While their print business has been extremely successful, it has become clear that more and more people are using e-cards instead of paper cards and XYZ does not have a presence in the e-card market. XYZ cannot use their current line of paper cards as it would undermine their business in that sector and is not interested in the already-saturated market of cheesy e-cards that currently define the market. Rather, XYZ wants us to create a unique e-card application that provides users with e-card options beyond that of simple animations and helps promote XYZ’s identity in the online marketplace.
This project will create a website that produces and sends generative art e-cards.

I’m rather excited about this project and the possibilities it raises! I have done limited work in generative art except for my experiments in fractals and in creating trees. My final tree version hasn’t quite been adapted for the web yet, but works well on the multitouch (a new post is coming soon!). Thus, the possibilities and work involved will be interesting. The rendering engine itself continues to expand and grow in size and complexity, which is slightly worrisome, but I’m confident that it will get pulled together well.

I will be updating the site with the work I put together for this final project, so keep an eye on what’s going on!

Wow. It has been far too long since I last graced these pages with content. I’m afraid the last term was a significant amount of work and I didn’t really find the time to get cracking on this. I’ll try harder to get my final project status and efforts up here, I think. My topic has changed from the last time I talked about it here, so I’m a good bit more open now!

In any case, I’m going to be uploading works from last term over the next few days, so look forward to them! Unfortunately, the project I spent the most time on, my DVD packaging for the WWII documentary “The Memphis Belle,” was taken from me by the professors and I don’t have it available to take pictures of! I’ll get imagery from that project as soon as I get it back.