Posts Tagged ‘as3’
Audio responsive generative visual experiment
Recently I started playing around again with audio reponsive generative visuals. Flash player 10.1 was released some time ago. And this new Flash player allows us to acces raw microphone input. I use this raw input to calculate the spectrum, and then use those spectrum values as input for a “painter algorithm”.
So the generative algorithm is now responding to live audio. My previous experiments were only able to work with audio playing inside Flash, so this is a huge improvement.
Here’s an early example of an abstract painting created using this method:
What is “generative art”?
People who follow this blog will probably know I like to experiment with generative visuals, or “generative art” as most people call it.
So what is this all about? I’m getting this question quite a lot when telling people what I do. And it isn’t easy to explain.
For those of you who have never heard of generative art, and want a little more in-depth information, here’s a short summary. I also inlcuded some tips and tricks to get started yourself.
Introduction to “generative art”
According to wikipedia the defenition of generative art is:
“Generative art refers to art that has been generated, composed, or constructed in an algorithmic manner through the use of systems defined by computer software algorithms, or similar mathematical or mechanical or randomised autonomous processes.”
The term “generative art” does not describe a specific visual style or ideology. It’s only a definition for the method used to create the artwork, which should have some degree of autonomy, typically resulting in unforeseen “mutations”. This is what makes generative art so interesting.
It’s not limited to visuals. A generative approach can also be used to create sculptures ,audio or music. For example Mozart’s “Musikalisches Würfelspiel” from 1757 is an early example of a generative music, because it was structured, but also contained randomness.This method is also used by certain architects, furniture designers, etc.
In this article however I’m only talking about 2D digital visuals, because that’s what I’m most familiar with. So, think of it as a digital canvas. Instead of using a pencil or a brush, a generative artist uses algorithms and code to draw lines, shapes and colors onto the canvas. Most of the time, a generative artist creates a system, and then lets the artwork “grow” over time. The artist knows more or less what the outcome will be, but because of the certain degree of autonomy in the process, each result is unique.
Most of the time the end result would take ages to draw by hand. Code is used to speed up the process.
The generative artist’s toolset
- Adobe Flash: Flash is my favorite tool for creating generative art. I’m not saying it’s the best, that’s a personal choice. I’m most comfortable with actionscript 3. Being able to work in an object oriented language, and to use tools like Flex/Flash builder are a huge plus.
- Processing: Processing would be my second choice. It’s a lot more powerful then Flash. And there are some very interesting libraries out there for video and audio processing. Your code can become a bit messy, and not all libraries work on all pc configurations, but still, if Flash isn’t powerful enough for what you want to do, Processing is probably your best choice.
- 3D Studio max, Maya and Blender: Yes, it’s also possible to create generative artworks with tools like 3D max or maya. In 3D max for example you can use max script. The downside is the community is quite small. There aren’t much tutorials out there, and the documentation is lacking. So, if you are starting out you are pretty much on your own.
In Blender you can use Python for scripting. I haven’t tried this yet, but this should be easier than maxscript. - Structure synth: Structure Synth is a cross-platform application for generating 3D structures using algorithms.
- Cinder: Cinder is a community-developed, free and open source library for professional-quality creative coding in C++
- Context Free: Context Free is a program that generates images from written instructions called a grammar. The program follows the instructions in a few seconds to create images that can contain millions of shapes.
Inspiration
- Actionscript generated art: a Flickr group dedicated to generative art produced with actionscript
- Generator.x on Flickr: a Flickr group dedicated to generative art in general.
Getting started: tutorials & source code
- Open processing: OpenProcessing is an online community platform devoted to sharing and discussing Processing sketches in a collaborative, open-source environment. Tons of great processing examples can be found on this site.
- Code a Chaotic Composition Inspired by Joshua Davis: An actionscript tutorial aimed at starters written by Bruno Crociquia
- Creating generative art with Flash: An actionscript turorial by Chad Udell
- Abandonedart.org: lots of code examples on this website
- Complexification.net: Jared Tarbell’s website. The source code is available for most of the examples.
Yes, I know, I should really write some tutorials myself…
Generative artists you should check out
Here’s a list of generative artists whose site, blog or photostream is worth a click:
- Erik Natzke
- Gwen Vanhee aka Revoid
- Mark Knol
- W:Blut
- dr. Woohoo
- Joshua Davis
- Patrick Gunderson
- Carlos Lopez de Pablo
- Scott Oppenheim
- Dave Bollinger
- Jared Tarbell
- And… offcourse… myself
You can check out the generative art section of this blog, or my work on flickr.
Flash On The Beach 2O1O
Wonderful news!!! Yesterday I got a confirmation email stating I’m selected to speak at Flash On The Beach 2010 during the Elevator Pitch session.
FOTB is one of the top events of the year, so I’m really honoured to have the opportunity to speak there!
Anyway, so much to show, and so little time… luckily I have 4 months to decide what to show and what not to show
By the way, if you don’t have your ticket for FOTB yet, I suggest you get one quickly. It looks like they’re flying out the door at a steady pace.
See you at FOTB!
Some time ago I announced I would be releasing some of my “viplib” classes. Here’s another one:
For my generative art experiments I often need to calculate brighter and/or darker color values based on a certain color. To do this I wrote the following utility:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | //copyright Ward De Langhe //Very Interactive People package be.viplib.util { public class ColorUtil { public function ColorUtil() { } public static function brightenColor(hexColor:Number, percent:Number):Number{ if(isNaN(percent)) percent=0; if(percent>100) percent=100; if(percent<0) percent=0; var factor:Number=percent/100; var rgb:Object=hexToRgb(hexColor); rgb.r+=(255-rgb.r)*factor; rgb.b+=(255-rgb.b)*factor; rgb.g+=(255-rgb.g)*factor; return rgbToHex(Math.round(rgb.r),Math.round(rgb.g),Math.round(rgb.b)); } public static function darkenColor(hexColor:Number, percent:Number):Number{ if(isNaN(percent)) percent=0; if(percent>100) percent=100; if(percent<0) percent=0; var factor:Number=1-(percent/100); var rgb:Object=hexToRgb(hexColor); rgb.r*=factor; rgb.b*=factor; rgb.g*=factor; return rgbToHex(Math.round(rgb.r),Math.round(rgb.g),Math.round(rgb.b)); } public static function rgbToHex(r:Number, g:Number, b:Number):Number { return(r<<16 | g<<8 | b); } public static function hexToRgb (hex:Number):Object{ return {r:(hex & 0xff0000) >> 16,g:(hex & 0x00ff00) >> 8,b:hex & 0x0000ff}; } public static function brightness(hex:Number):Number{ var max:Number=0; var rgb:Object=hexToRgb(hex); if(rgb.r>max) max=rgb.r; if(rgb.g>max) max=rgb.g; if(rgb.b>max) max=rgb.b; max/=255; return max; } } } |
This class splits the hexadecimal color value into its RGB components, and then increases or decreases each component before converting them back to a hex value.
Here’s a simple example Flex application:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <mx:Application creationComplete="init()" backgroundColor="#FFFFFF" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="260" borderColor="#000000" borderStyle="solid"> <mx:Script> <![CDATA[ import be.viplib.util.ColorUtil; private function init():void{ colorPicker.selectedColor=0x0000CC; selectColor(); } private function selectColor():void{ brightColors.graphics.clear(); darkColors.graphics.clear(); var hexColor:Number=colorPicker.selectedColor; for(var i:Number=0;i<5;i++){ brightColors.graphics.beginFill(ColorUtil.brightenColor(hexColor,i*20)); brightColors.graphics.drawRect(i*50,0,50,60); brightColors.graphics.endFill(); darkColors.graphics.beginFill(ColorUtil.darkenColor(hexColor,i*20)); darkColors.graphics.drawRect(i*50,0,50,60); darkColors.graphics.endFill(); } } ]]> </mx:Script> <mx:VBox x="0" y="0" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" verticalGap="10"> <mx:HBox paddingLeft="26" width="100%"> <mx:ColorPicker id="colorPicker" change="selectColor();"/> </mx:HBox> <mx:UIComponent id="brightColors" width="250" height="60"> </mx:UIComponent> <mx:UIComponent id="darkColors" width="250" height="60"> </mx:UIComponent> </mx:VBox> </mx:Application> |
Here’s how this example looks when compiled:
While exploring the features of the Flint Particle System, I tought it would be cool to surprise my girlfriend with a “particle message”. I programmed a Flash module that uses 3500 pixel particles to put messages on the screen.
Once it was finished I decided to put it online, and changed it so you can create your own messages using a simple form.
You can see the application here: http://www.veryinteractivepeople.com/lab/particlemessenger
In the bottom left corner there’s a button called “create your own”, if you click that button a form will be presented that allows you to create your own messages. You can then share these messages on facebook, or just copy the message link and send it to your friends.
If anyone wants to use this on a website, or as part of a viral ad campaign, please contact me.
Here are some example messages:
http://www.veryinteractivepeople.com/lab/particlemessenger/?o=true&message=i,♥,QRSUiDNFm (I love particles)
http://www.veryinteractivepeople.com/lab/particlemessenger/?o=true&message=HNiOU,SPDLm (Flint rocks)
Have fun!
The Flex TitleWindow component is a great start for making dialog panels, because it has a close button in the title bar. By clicking the button this component automatically dispatches a CloseEvent. Nice, but… this button doesn’t show the hand cursor on roll over.
Personally I find it very annoying one has to set the buttonMode to true for each and every component. In some of the default Flex components this can be a real pain. Here’s how one can set the buttonMode for the close button of the TitleWindow component:
1 2 3 4 5 6 7 8 9 10 11 | <?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow showCloseButton="true" creationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="100" title="My title window"> <mx:Script> <![CDATA[ private function init():void{ if(mx_internal::closeButton!=null) mx_internal::closeButton.buttonMode = true; } ]]> </mx:Script> </mx:TitleWindow> |
I’m using Flex 3.2, so it’s possible this no longer works in newer versions.
