Archive for the ‘flash/flex/air’ Category
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:
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.
Flex tip: Alert improvements
Today, I started working on a new internet application in Flex… and I ran into some of the same annoying default Flex component behaviors I usually change or work around. These are small details, but the application will look so much more polished and professional when they are implemented.
Alert.show() for example creates an alert dialog, but the text inside the dialog is selectable and the buttons don’t show a hand cursor on rollover. One could argue that the alert message should be selectable so people can copy it. But personally I don’t like this behavior.
To make the text unselectable, you can do the following (I’m using Flex 3.2, so it’s possible this will no longer work in new versions):
1 2 | var a:Alert=Alert.show("This is an alert", "Alert", Alert.OK | Alert.CANCEL,this); a.mx_internal::alertForm.mx_internal::textField.selectable = false; |
And to show a hand cursor for the buttons, all one has to do is this:
1 | a.buttonMode=true; |
