Very Interactive People

Audio responsive generative visual experiment

Ward De Langhe — Fri, 27 Aug 2010 07:27:18 +0000

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”?

Ward De Langhe — Sat, 26 Jun 2010 10:16:32 +0000

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

Ward De Langhe — Fri, 28 May 2010 08:50:17 +0000

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!

Brighten or darken colors in actionscript

Ward De Langhe — Tue, 04 May 2010 20:23:20 +0000

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:

[kml_flashembed movie="/lab/colorutil/ColorFader.swf" height="260" width="300" /]

New HDR experiments

Ward De Langhe — Tue, 09 Mar 2010 21:57:11 +0000

Recently I replaced my point and shoot photo camera with a DSLR camera. I bought a Canon EOS 500D. I always loved making photo’s, but never took the time to really get into it. This will change now I have my 500D

Here are some pictures I took this week in the Ostend harbour area:

These are all multi-exposure HDR images. I used 3 exposures (-2,0,+2) to get these results. I try to keep my HDRi’s as natural as possible. When I started making HDRi’s, I made the same mistake most beginners make, and that’s overprocessing the photo’s to get that dramatic HDR look. For some reason most HDR enthousiast don’t mind their final image looks flat, has halo’s around objects, etc, as long as it has a “HDR-look”. In my opinion this is not what HDR is about.
Personally I think a good HDR photo is a photo that doesn’t look like a typical HDR image. So I just use the technique to have perfectly lit photographs, and try to keep away from the dramatic overprocessed look.

Fun with particles: the Particle Messenger

Ward De Langhe — Sat, 06 Mar 2010 20:05:02 +0000

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!