The drawings are unquestionably beautiful, but more interesting are their philosophical underpinnings, and the application of those modes of thinking to our daily practice as digital artists.

From Olaf Breidbach’s preface of Prestel’s recent repackaging of Art Forms of Nature:

“In this profusion of symmetrical series, which seem to stem from the workshop of a brilliant designer, a fundamental formula for living things shines through for Haeckel. The many forms brought together in his work appeared to him to be a series of variations of simple constellations of symmetry. His depictions of them embrace a succession of complexities in which he saw the mechanics of evolution at work. His ‘Art Forms in Nature’ seeks to reproduce such constructions. Every plate in this work is an example of Haeckel’s notion of a principal unity of all living things. Each one of these illustrations – which for the uninitiated observer are at first only highly ornamental – was, for Haeckel, proof of his thesis. For him, the individual form, its inherent symmetry, documented Darwin’s notion of the evolutionary development of all living things..”

Catch that? Form is a documentation of evolution? It was an effective blending of science and nature, and his public ate it up. So what does it have to do with you?

Haeckel worked in the time of Art Nouveau and the birth of Darwinism – two ideological systems linked by their blurring of natural form and structure. As opposed to the theological perspective that living things came into existence in unchanging form due to divine will, the Darwinian perspective saw man as merely the current iteration of nature’s development. This line of thinking brought man much closer to nature – art nouveau synthesized this philosophy into an art of organic naturalism, realized in the decorative work of Gustav Klimt and the sculptural architecture of Gaudi, to name just a few. With these philosophies, the gulf between art and science became not only navigable, but irrelevant – art and science were merely opposing sides of the same coin.

If you’re a digital artist, there’s a similar philosophical chasm that has to be reconciled. Art is the expression of creativity, and creativity is a fuzzy, impossible-to-quantify thing. It would follow that, if the 1’s and 0’s realm of digital art is binary (and the context of art must mirror its content), digital media is unsuitable for rendering naturalism (the argument doesn’t really hold up as a snap your fingers, the art world changes-type thing, but for describing the way incremental technological changes have affected art, it’ll do). This is what we see in many forms of art today. The use of auto-tune in music gives the majority of our pop an artificial perfection. Video games tend towards increasingly stylized characters. We drive boxy cars down precisely aligned grids of roads. These forms of design mirror their digital production mechanisms, standing unified in opposition to naturalism.

But just as Haeckel saw the divide between science and nature irrelevant, so do I posit is the divide between naturalism and modernism in digital media. It’s a false choice – the more interesting places of artistic exploration are where digital/scientific/functional techniques and analog/naturalistic/formal patterns – merge and push each other forward. Examples?

• Frank Gehry, through the use of the program CATIA, construct the Guggenheim Museum in Bilbao as less structure and more sculpture.
• Some of the textures in Dan Deacon’s Bromst album are generated by connecting a MIDI output to a player piano, allowing the piano to play lines that are physically impossible for a human. (There’s an awesome video of this here).
• Robert Lazzarini’s Skulls series uses digital technology in hyperrealist sculptures of typical objects, skewed out of proportion. Looking at them almost makes you dizzy. (fascinating article about Lazzarini’s process here)

Each of these pieces leverage the best aspects of digital and analog technology – digital control and scalability, with organic feel and connection to history. I’m eager to explore these ideas more in my future sound and design work. Thoughts? Examples? Counter-examples? Holler in the comments.

Open Mics – they’re a good way to practice performing, but let’s face it, the process blows. You wait for a long time, perform to a bunch of people who are likely drunk or not listening, and get no useful feedback out of the process. But – there’s a better way.

I’m forming a new group, a collective of sorts – The San Francisco Songwriters Collective – think of it as a humane mix between a book club and an open mic. The ground rules:

• The group meets regularly every two weeks
• Each member performs 1-3 songs at each meeting
• After each performance, every member in the group gives objective (like filling out a comment form) and subjective (like ‘I want to hear more Skynyrd’)
• The person performing has to listen to all comments before reacting/answering questions

It’ll be a great way to network with other songwriters, keep your own gears turning, and get individual criticism from like-minded people. Interested? First meeting will be on February 8th. Let’s do it.

I’ve been looking at the new Shearwater limited edition package (elements of which are depicted above) for their forthcoming record, and it got me thinking – what’s better than making money off of selling music? Making more money off selling music.

It’s no surprise that deluxe packages are big business in music. Take a look at Trent Reznor’s numbers for his Ghosts I-IV release in 2008 – in the first week the album made $1.6 million off of 781,917 transactions using a tiered release model. At the high end of his pyramid was the deluxe package which, at $300 for a limited edition of 2500, sold out within a day. Do the math. Deluxe packages make good financial sense (we discussed this before).

Here’s the rub though – after the fanboys/girls have parted with their $300, what are they left with? In the case of Nine Inch Nails, a photo book and some beautiful Giclee prints – in the case of the Flaming Lips, ‘a popcorn box with “real Flaming Lips popcorn stuffed inside of it,” an “Eat Your Own Spaceship” bumper sticker, a replica of the tickets from the screenings of the film earlier this year, trading cards of the band’s members, and a t-shirt.’

What are your audience left with when they buy deluxe packages? At best, a book they’ll occasionally refer to. At worst, a bunch of useless shit that will be admired briefly for novelty value, then consigned to a deep, dark section of their closet. As the people that are buying these are most likely the artist’s best off and most loyal acolytes, the opportunity to more effectively proselytize to them is huge, and in most cases missed.

A few questions to ask yourself when designing bonus materials

Does it enhance the brand? – This is a no-brainer – the bonus material should legitimately improve the experience of consuming the featured content. If it doesn’t enhance the experience of the content, it should enhance the strength of the brand – bumper stickers, etc. are fair game if they’re beautiful.

Will it last? – Artistically – is the piece a worthy thing of art in its own right, enough so that it people will save it? Is it something you would look at more than once? Physically – is it sturdily constructed? Is it beautiful?

Is it fun? – Just because something is functional doesn’t mean it can’t be fun.

Is the experience cohesive – While the bonus material has to stand on its own, it should be cut from the same cloth as the content it’s ‘improving’. You should embrace a single experience.

Pulling the onion back one level deeper, the best kind of bonus content is interactive content.

Mastodon included a score in the release of their album ‘Crack the Skye’.

A bonus package could include a picture book that has time indications where pages correspond with different sections of music.

A bonus package could grant you access to an online community where you can interact with the artist.

Make your stuff useful.

Make your stuff beautiful.

Make your stuff last.

One of the coolest things about developing AIR applications is the complete control you have over the way the launched application is styled. You can control everything – even down to the chrome (the window surrounding the application screen). I recently did a project where the client requested a custom chrome. I developed a pretty snazzy workflow using library assets pulled from a compiled .swc file – here’s how I did it.

Step 1 – Create a new Flex project within Flex Builder, making sure to set the Application Type as ‘Desktop Application’ (this tells the compiler to build the project as an AIR application instead of a standard .swf file).

Step 2 - Edit the application’s XML file. Flex Builder creates a few folders within your project – you should see folders for ‘bin-debug’ , ‘libs’, and ’src’. Within the source folder there is the blank mxml file, started with just a windowed application tag, and an XML file ‘yourProjectName-app.xml’. All AIR applications built within Flex builder draw from an XML file that declares basic program parameters.

Open up the XML file and find the following lines:

<!– The type of system chrome to use (either “standard” or “none”). Optional. Default standard. –>
<!– <systemChrome></systemChrome> –>

<!– Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. –>
<!– <transparent></transparent> –>

Flex has commented their code nicely, so it’s pretty clear how these tags need to change. Uncomment the lines with tags in them, and set their values so your code looks like:

<!– The type of system chrome to use (either “standard” or “none”). Optional. Default standard. –>
<systemChrome>none</systemChrome>

<!– Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. –>
<transparent>true</transparent>

Step 3 – Format the base WindowedApplication tag

When you open the application’s main .mxml file, you’ll see the WindowedApplication tag looking like this:

<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

One primary change needs to be made to this class – the ’showFlexChrome’ attribute should be set to false.  So your WindowedApplication tag should now read:

<mx:WindowedApplication
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”absolute”
showFlexChrome=”false”
>

Now try compiling and running your application. You see the adl program launch (that’s how Flex compiles and runs AIR applications in the development perspective), but nothing happens. Actually, it’s not that nothing is happening – it’s that we’ve eliminated every visual component from the screen (including the chrome), so there’s nothing to see. Try adding a button to the stage and recompiling – you should see a weird zombie button floating in the middle of your screen. Weird. Let’s give this puppy some chrome.

Step 4 – Add the chrome to the application

The chrome for our application is laid out in the Flash file in the libs folder. If you look in the Flash file you’ll notice a single element on stage – an MovieClip instance named ‘Header’. Navigate into this and you’ll see a few elements broken out into layers – there are jewel buttons for handling the close, minimize, and maximize functions, a title, and a background MovieClip named ‘Chrome’. This is the header of our application.

Compile the .swf, making sure to select the ‘Export SWC’ option in the Publish Settings, and place the resulting .swc into the classpath of your Flex project. For convenience’s sake, I added mine to the libs folder (it’s added to the classpath by default).

Adding the chrome functionality to the application is then a process of adding actionscript to the project that correctly references these MovieClip elements and responds appropriately to user interaction. Add the following code block to your application:

<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import com.echobloom.testAIRApp.Header;

private var header:Header;
private var redJewel:MovieClip;
private var yellowJewel:MovieClip;
private var greenJewel:MovieClip;
private var chrome:MovieClip;
private var border:Shape;
private var background:Sprite;

private var _maximizeState:Boolean = false;  // State of maximization (so you can toggle between full and normal views)

private function init():void {
createDisplayElements();
addEventListeners();
}

private function createDisplayElements():void {
var component:UIComponent = new UIComponent();  // The root stage element of all elements on screen that can be interacted with

header = new Header();  // The header pulled from our compiled .swc

background = new Sprite();  // A sprite serving as the background of our application screen
background.graphics.beginFill(0xEEEEEE, 1);
background.graphics.drawRect(0, 0, 600, 400);
background.graphics.endFill();

border = new Shape();  // The border around the application screen
border.graphics.lineStyle(1, 0x000000);
border.graphics.lineTo(background.width - 1, 0);
border.graphics.lineTo(background.width - 1, background.height - 1);
border.graphics.lineTo(0, background.height - 1);
border.graphics.lineTo(0, 0);

redJewel = header.getChildByName("redJewel_mc") as MovieClip;  // The close button
redJewel.useHandCursor = true;
redJewel.buttonMode = true;

yellowJewel = header.getChildByName("yellowJewel_mc") as MovieClip;  // The minimize button
yellowJewel.useHandCursor = true;
yellowJewel.buttonMode = true;

greenJewel = header.getChildByName("greenJewel_mc") as MovieClip;  // The maximize button
greenJewel.useHandCursor = true;
greenJewel.buttonMode = true;

chrome = header.getChildByName("chrome_mc") as MovieClip;  // The background element of the header (used to handle application dragging)
chrome.useHandCursor = true;
chrome.buttonMode = true;

component.addChild(background);
component.addChild(header);
component.addChild(border);
addChild(component);
}

private function addEventListeners():void {
redJewel.addEventListener(MouseEvent.CLICK, handleCloseClick);
yellowJewel.addEventListener(MouseEvent.CLICK, handleMinimizeClick);
greenJewel.addEventListener(MouseEvent.CLICK, handleMaximizeClick);
chrome.addEventListener(MouseEvent.MOUSE_DOWN, dragStart);
}

// Close button Action
private function handleCloseClick(e:MouseEvent):void {
var exitingEvent:Event = new Event(Event.EXITING, false, true);
NativeApplication.nativeApplication.dispatchEvent(exitingEvent);
if (!exitingEvent.isDefaultPrevented()) {
NativeApplication.nativeApplication.exit();
}
}

// Minimize button action
private function handleMinimizeClick(e:MouseEvent):void {
stage.nativeWindow.minimize();
}

// Maximize button action
private function handleMaximizeClick(e:MouseEvent):void {
stage.nativeWindow.maximize();

doMaximize(!_maximizeState);  // Toggle the maximizeState
}

// Dragging the application
private function dragStart(event:MouseEvent):void {
stage.nativeWindow.startMove();
}

// Changing the size of the header, background, and border
private function doMaximize(maximizeState:Boolean):void {
this._maximizeState = maximizeState;

if(_maximizeState) {
header.chrome_mc.width = stage.fullScreenWidth;

background.graphics.clear();
background.graphics.beginFill(0xEEEEEE, 1);
background.graphics.drawRect(0, 0, stage.fullScreenWidth, stage.fullScreenHeight);
background.graphics.endFill();
} else {
header.chrome_mc.width = 600;

background.graphics.clear();
background.graphics.beginFill(0xEEEEEE, 1);
background.graphics.drawRect(0, 0, 600, 400);
background.graphics.endFill();
}
border.graphics.clear();
border.graphics.lineStyle(1, 0x000000);
border.graphics.lineTo(background.width - 1, 0);
border.graphics.lineTo(background.width - 1, background.height - 1);
border.graphics.lineTo(0, background.height - 1);
border.graphics.lineTo(0, 0);
}

]]>
</mx:Script>

Step 5 – Wire the WindowedApplication tag to call the init method. Now that we’ve got everything setup, we need to call our init() method when the application has finished loading. The WindowedApplication tag should now look like this:

<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml”
xmlns:local=”com.adobe.views.*”
layout=”absolute”
width=”600″
height=”400″
showFlexChrome=”false”
applicationComplete=”init()”
xmlns:display=”flash.display.*”>

That’s it!

For the non web-developer people out there – websites usually aren’t a series of static HTML pages. Most websites run on platforms CMSs (Content Management Systems). The pages serve as windows to display content from the CMS in pre-formatted visualizations. This allows designers a lot more flexibility – if you want to edit a website, you can just change the offending element within the CMS without touching any of the HTML used to display it.

My website previously had been a series of flat HTML pages surfacing content. This worked for about 70% of the content, and a tacked-on blog provided an interesting way of displaying more current information. But as the site grew I found that as the site grew I found I was spending far more time updating the website than creating content. And if I wanted to make a design change, I had to constantly rearchitect the way data was getting into the pages (because none of it was dynamic). A systemic change clearly had to be made, or with each design iteration I would just end up with the same problem with different window dressing. So – I decided to embrace the Wordpress M.O. completely.

In the revised echobloom.com every page is an element of a customized Wordpress theme I wrote. All posts fit into one of five categories, which are the five dynamic categories in the header (the store is its own beast – some things are better left static). Each page also has a static component that showcases the most recent major piece of work in the category, and a dynamic component that lists the ten most recent posts in that category. This splits the difference between being able to focus on more important, static topics, but having dynamic content around it. I’m hoping it will be the best of both worlds.

A few resources were invaluable in completing the site:

1 – The first stop should always be the Wordpress Codex. Wordpress has a wonderful user community, and the tool is extremely well documented.

2 – Several useful posts are on Smashing Magazine.
But by far the best resource for me was…

3 – Currently available themes. A *lot* of people use Wordpress and have hacked themes to serve their needs. There’s no need to reinvent the wheel – use (and attribute) the community. I worked off the default theme that comes with Wordpress. Picking that apart for a few days gave me a wonderful idea of how Wordpress is actually used.

So check out the site – let me know if anything pops up, and as always, stay tuned.

A detailed gameplay spec was provided by the client at the onset of the project, allowing us a nice framework to work within. The spec described how the game would be played, how passed items and powerups would behave, and gave suggestions toward the art direction. Using this spec as a roadmap, I implemented the gameplay and base functionality inside a ‘block world’ – a representation of the game using geometric primitives (as opposed to the shiny graphics that would make up the final product). It was uber-simple, but it showed how key components of the game should interact, and gave us a model to tinker around with and see how the spec ‘felt’ when realized.

While the block world was coming into existence, Mike Daley, an excellent designer/animator in the Bay Area, set to work designing the visual elements of the game. He started with raw sketches, moved into flat graphic assets, and then into fleshed out animations. Once his characters were done, the functionality in the block world had evolved to a point where the shiny animations could be substituted for the flat blocks, allowing the game to spring to full featured animation quickly.

As the game quickly became something real, we had several weeks of tweaks and refinements. By far, the most challenging component of the game was the passing motion of the individual characters. Dynamically adding assets to the animations (e.g. adding a football to a hand as it makes a passing motion) was pretty straightforward – the challenging part came was that the animations had to be dynamically sped up and slowed down. The animations were library elements imported as MovieClips into the game’s architecture – and there’s unfortunately no playAtSpeed property for MovieClips. We circumvented this issue by using the frame tweening in TweenLite. It took a few days of tinkering with the timing, but we eventually got everything to line up.

LESSONS

This was my first soup to nuts game implementation, and I learned a lot along the way:

1 – Programming within a tightly constrained design pattern *really* helps. Things are predictable and extensible, allowing other people to simultaneously work on specific elements of functionality without collisions. For this game, I used a tightly defined Model-View-Controller implementation.

2 – Issues surrounding memory management that once sounded academic became a lot more practical when developing a game that had so many complicated assets. There are a lot of resources describing how programs can be optimized to better deal with this – Grant Skinner’s got an excellent summation and Colin Moock’s AS3 Bible has some more information.

3 – Getting things to work is one thing, getting them to feel right is another. A week before release we were 95% of the way on code, but were far further back in polish and playability. Ketan Anjaria, the principal at Kid Bombay, added much of the polish that took the game from functional to fun – sound, effect animations, and level balancing made the game dynamic, and fun to play.

Take a look, and let me know what you think. I’ve started looking into iPhone games, and general development on mobile platforms. The medium is the message, and a mobile context offers a radically different environment for making and playing games. Who knows? Maybe I’ll work on an iPhone application in 2010 – stay tuned.

For starters – It’s important to note that Hollywood and Bollywood are separated by more than thousands of miles. While the American movie system produces about 700 movies yearly (including major studio and independent releases), Bollywood produces around 4,000 – nearly all of which are musicals. Over the past 50 years, the vast majority of music in these films have been dominated by a small coterie of Indian superstars that, while household names in India, are virtually unknown in the U.S. To qualify ‘dominated’ – Mohammad Rafi, one of the premiere playback singers in Bollywood cinema, has the Guinness world record for the most number of songs commercially recorded. Between 1944 and April 1980, Rafi claimed to have recorded 28,000 songs in 11 different languages (to put that into perspective, there are only 13,140 days between 1944 and 1980). Rafi, along with Lata Mangeshkar, Asha Bhosle, and composers like Sachin Dev Burman, Naushad, and Rahul Dev Burman created vibrant cinematic hybrids, molding traditional Indian classical music into bite-size pop confections.

It’s interesting to think of how the sheer volume of films influenced their production. To meet the demand, being prolific was kind of a necessity – which brings up an interesting question: is Bollywood better for it? Is it better in the end to be prolific and have that work be of varying quality, or to be a perfectionist, with less output, but higher quality? Representatives on each side of the spectrum have their strengths and weaknesses. Frank Zappa, Bob Dylan, and Ryan Adams are all wildly prolific, but have all had pieces of work (or, in Dylan’s case, decades) that are significantly less celebrated. On the other hand, while Peter Gabriel and Tool have created singularly constructed gems, they only dole them out every five years or so – and that kind of overthinking can be a danger in itself (witness the bronze turd that is Chinese Democracy).

I would argue that now, however, with business models, distribution models, and attention spans changing due to work being released on the Internet, it’s in the best interests of an artist to be prolific. A few reasons:

• There’s less risk of a dud blowing out a section of your audience – everybody produces crap from time to time, but if you’re producing more material the crap will quickly be forgotten in favor of better, more recent material.
• It’s easier to market more stuff – a rapid production clip enables different distribution strategies, like subscription models. And there are just more things to sell.
• It’s easier to form relationships – more output means more paths for audiences to form relationships with your content, which is ultimately what sells art.
• We get better by practice – a fast clip of work takes you out of your comfort zone and forces you to make creative choices out of necessity that you wouldn’t normally make, expanding your horizons and ultimately improving your work.

Here are some of my favorites from the lecture:

Hoton Mein Aisa Baat – from Jewel Thief [Lata Mangeshkar; SD Burman]

Aao Twist Karein – from Bhoot Bangla [Manna Dey; RD Burman]

You see this concept everywhere. Books often begin with a few sheets full of snippets from glowing reviews – movie trailers frequently include lists of film festivals the movie has appeared in. In music, quote sheets perform the same function – to provide external sources of credibility. And remember – for these quotes to provide credibility, the sources you’re quoting should come from somebody who has some name recognition. So who can these quotes come from? To start:

• Writers from publications
• Other musicians
• Staff at radio stations (DJs or program/music directors)
• Bookers or live performance folks
• Engineers or producers you’e worked with
• Record store managers
• Bloggers

As you gain momentum (hopefully) the cachet of your quote sources will improve and the length of your press features will increase – make sure your press materials always reflect the latest and greatest. Presentation is easy – when you’ve got a decent list together, arrange them in descending order of prominence.

My Strategy

These sources work well for 99% of quote sheets. I’m planning on pursuing as many outlets as possible to get quotes from people with name recognition to the general public, but, as context is everything (and because I think it might be interesting), I’m also going to solicit quotes from people whose occupations match the focal points of my songs. Getting prominent people to rave about my music would of course be sublime, but a good quote from a trucker about ‘The Trucker’ would be an intriguing addition to my quote sheet.

• Interesting – Press releases should be written in a style that’s equal parts compelling and brief. Use your audience’s time wisely – quickly draw them in, hit them with information in descending level of importance, and leave them itching for more.

• Relevant – Don’t send press releases for kicks – it dilutes the strength of your brand. Send press when you have something to say, like when you have a new release, updated tour dates, a new promotion, or a major change in your website.

• Timely – Send out releases with enough time for media outlets to actually use it. Lead times for media outlets vary from hours to months – best to be conservative and let the importance of the item focused on in the release inform when you send it out.

• Specific – Do yourself a favor and make sure any deadlines, locations, and other clarifying information are clearly spelled out,

• Concise – Assume your audience will read 40% of your release (if that) and skim the rest. Structure accordingly.

Formally, press releases are structured very simply:

• A slug line introduces the content in a headline that is concise and attention-grabbing.

• The lead specifically states the purpose of the press release and serves as an abstract for the piece as a whole. Importantly, it also has the hook – the specific line or phrase designed to catch your audience’s attention.

• The body includes all of the supporting information, organized in descending level of importance.

• The closing summarizes the press release, repeats the critical information, and clearly provides contact information for further inquiry

Ideas for Echo Bloom press releases:
– Play with language – write them more in the style of a 1930’s carnival ad then a 2000’s art project
– Play with the content – Do a releases tied to each song that hype odd tie-ins (like ‘The Trucker’ used as the theme music for the 2009 Annual California Monster Truck Rally)

Any more thoughts? Hit me up in the comments!

So now the application. As with all press kit components, there is a digital and an analog component. Here’s my plan for each:

Digital – Losing the spatial constraints of physically presenting pictures opens up a raft of possibilities for digital images. First, the basics:

• Images should consistently be applied to an artist’s main site, social networking sites (MySpace, Facebook, etc.), and EPK resource.

• Lend a hand to people who will hopefully write about you by offering images in a press section of your website in multiple high resolution, non-lossy formats (a decent guide is here)

Nothing too earth shattering there – but if we consider how Web 2.0 technology enables distributed web representation, digital images become much more interesting. Web 2.0 media sharing sites like Flickr encourage multi-threaded access, enabling casual fans to browse your images based on tags, widening the top of your funnel (more on this soon). Those same images can be remixed and resurfaced on your personal site through the Flickr API.

Physical – Physical images should be presented in a manner consistent with the artist’s treatment. Make a flipbook, make a little family album – make it interesting.

MY STRATEGY

• I started an Echo Bloom Flickr page and uploaded, tagged, and annotated a large selection of images Gregg took (about 5-10 images per song, as well as pictures from the cover shoot and the recording sessions). These images can be viewed within the Flickr network, as well as on EB.com where they’ll be surfaced through the Flickr API.

• A subset of images will form the basis of a persistent header throughout the EB.com website design

• A press-specific section of the site will allow downloads of the digital press kit and image resources, in multiple flexible formats

• Song-specific images will be surfaced in an interactive media player

• Images can serve as the design backbone for HTML-based email campaigns

• The Media section of the EB.com will pull images from Flickr into a dynamic slideshow

• An analog-like strip of images will be sent along with physical press kits: