Categories

Archives

Posts Tagged ‘flash’

<< Older Entries
27
Aug2010
(2 Comments)

Audio responsive generative visual experiment

Posted by: Ward De Langhe

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:

Audio responsive generative visual experiment

Tags: , , ,
more
26
Jun2010
(1 Comment)

What is “generative art”?

Posted by: Ward De Langhe

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.

Generative art

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.

Generative art

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

Generative art    Generative art

Generative art    Generative art

Getting started: tutorials & source code

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:

Tags: , , ,
more
4
May2010
(0 Comments)

Brighten or darken colors in actionscript

Posted by: Ward De Langhe

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:

Tags: , , ,
more
6
Mar2010
(1 Comment)

Fun with particles: the Particle Messenger

Posted by: Ward De Langhe

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!

Tags: , , ,
more
28
Jan2010
(3 Comments)

Easy form validation for Flash

Posted by: Ward De Langhe

As a professional Flash and Flex developer, I wrote lots of handy utilities that I use on a daily basis when developing Flash websites or Flex applications. I developed my own library containing base classes and utilities that allow me to setup Flash website projects in no time. I call it the “viplib”.

I plan to releasing some of that code. And here’s a first code snippit:

In Flex, it’s easy to do form validation using the various validator components. But for Flash, one has to write his own code. Here’s a simple form-validation class that not only checks empty fields and invalid email entries, but also highlights those fields when their content is invalid. Using this class you can validate a form and highlight the fields that are invalid with only 1 line of code.

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
//copyright Ward De Langhe
//Very Interactive People
package be.viplib.util
{
    import flash.display.Sprite;
    import flash.events.FocusEvent;
    import flash.text.TextField;
   
    public class FormValidator
    {
        private var _target:Sprite;
        private var _requiredFields:Array;
        private var _emailFields:Array;
        private var _normalColor:Number;
        private var _invalidColor:Number;
        private var _requiredMessage:String;
        private var _invalidEmailMessage:String;
       
        public function FormValidator(target:Sprite,requiredFields:Array, emailFields:Array,normalColor:Number=0x000000,invalidColor:Number=0xff0000,requiredFieldMessage:String="required field",invalidEmailMessage:String="invalid email")
        {
            _target=target;
            _requiredFields=requiredFields;
            _emailFields=emailFields;
            _normalColor=normalColor;
            _invalidColor=invalidColor;
            _requiredMessage=requiredFieldMessage;
            _invalidEmailMessage=invalidEmailMessage;
        }
        public function set invalidMailMessage(value:String):void{
            _invalidEmailMessage=value;
            for(var i:Number=0;i<_emailFields.length;i++){
                var field:TextField=_target.getChildByName(_emailFields[i]) as TextField;
                if(field.text==_invalidEmailMessage){
                    field.text=value;
                }
            }
        }
        public function set requiredMessage(value:String):void{
            _requiredMessage=value;
            for(var i:Number=0;i<_requiredFields.length;i++){
                var field:TextField=_target.getChildByName(_requiredFields[i]) as TextField;
                if(field.text==_requiredMessage){
                    field.text=value;
                }
            }
        }
        public function validate():Boolean{
            var valid:Boolean=true;
            for(var i:Number=0;i<_requiredFields.length;i++){
                var field:TextField=_target.getChildByName(_requiredFields[i]) as TextField;
                if(field.text=="" || field.text== _requiredMessage || field.text==_invalidEmailMessage || (field.text.length==1 && field.text.charCodeAt(0)==13)){
                    field.textColor=_invalidColor;
                    field.text=_requiredMessage;
                    field.addEventListener(FocusEvent.FOCUS_IN,fieldFocus_handler);
                    valid=false;
                }
            }
            for(i=0;i<_emailFields.length;i++){
                field=_target.getChildByName(_emailFields[i]) as TextField;
                if(field.textColor!=_invalidColor){
                    if(!MailValidator.validateEmail(field.text)){
                        field.textColor=_invalidColor;
                        field.text=_invalidEmailMessage;
                        field.addEventListener(FocusEvent.FOCUS_IN,fieldFocus_handler);
                        valid=false;
                    }
                }
            }
            return valid;
        }
        private function fieldFocus_handler(evt:FocusEvent):void{
            for(var i:Number=0;i<_requiredFields.length;i++){
                var field:TextField=_target.getChildByName(_requiredFields[i]) as TextField;
                if(field.textColor==_invalidColor){
                    field.textColor=_normalColor;
                    field.text="";
                    field.removeEventListener(FocusEvent.FOCUS_IN,fieldFocus_handler);
                }
            }
            for(i=0;i<_emailFields.length;i++){
                field=_target.getChildByName(_emailFields[i]) as TextField;
                if(field.textColor==_invalidColor){
                    field.textColor=_normalColor;
                    field.text="";
                    field.removeEventListener(FocusEvent.FOCUS_IN,fieldFocus_handler);
                }
            }
        }
    }
}

This class uses my mailvalidator utility to validate the email adresses. It’s a simple utility which checks if a e-mailaddress is valid using a regular expression.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//copyright Ward De Langhe
//Very Interactive People
package be.viplib.util
{
    public class MailValidator
    {
        public static function validateEmail(str:String):Boolean {
            var pattern:RegExp = /(\w|[_.\-])+@((\w|-)+\.)+\w{2,4}+/;
            var result:Object = pattern.exec(str);
            if(result == null) {
                return false;
            }
            return true;
        }
    }
}

You can download example source code here. It’s a simple form containing a couple of required fields, and an email field. Here’s how this sample looks when compiled:

Click the “validate” button to see the validation class do it’s job.

Tags: , , , ,
more
22
Dec2009
(0 Comments)

“Music for life” game

Posted by: Ward De Langhe

At Epyc, we made a little Flash game to support the “Music for life” show on Studio Brussel. This year, MFL collects money to help the prevention of malaria.

For each highscore above 1000 points, Epyc NV will donate 1 euro to Music for life.

Play the game here

Tags: ,
more
<< Older entries
Very Interactive People photo stream on Flickr Ward De langhe on Facebook

Very Interactive People is proudly powered by WordPress
Entries (RSS) and Comments (RSS)