der hess » flash http://blog.derhess.de am medialen werkeln Wed, 01 Feb 2012 12:00:38 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 My most important Twitter Messages #12 http://blog.derhess.de/2011/11/26/my-most-important-twitter-messages-12/ http://blog.derhess.de/2011/11/26/my-most-important-twitter-messages-12/#comments Sat, 26 Nov 2011 20:45:57 +0000 admin http://blog.derhess.de/?p=1723
  • My most important Twitter Messages #6
  • My most important Twitter Messages #10
  • My most important Twitter Messages #11
    • ]]>     Twitter von der hess
    A small summary of my Twitter messages from August - November 2011:

    Allgemein (General)

    Generative Art:

    • Our lecture from the "Design the Future" series at Carnegie Mellon University is now online

    Info Design and Visualization

    UX and Interaction Design:

    Projekte und Experimente (Projects and experiments)

    Neue Technologie (new Technologies)

    Programmierung und Software Design (Programming)

    Physical Computing

    Game Developing:

    Flash and Flex

    Related posts:

    1. My most important Twitter Messages #6
    2. My most important Twitter Messages #10
    3. My most important Twitter Messages #11

    flattr this!

    ]]>     http://blog.derhess.de/2011/11/26/my-most-important-twitter-messages-12/feed/ 0 "     My most important Twitter Messages #11 http://blog.derhess.de/2011/08/31/my-most-important-twitter-messages-11-2/ http://blog.derhess.de/2011/08/31/my-most-important-twitter-messages-11-2/#comments Wed, 31 Aug 2011 10:00:29 +0000 admin http://blog.derhess.de/?p=1683
  • My most important Twitter Messages #6
  • My most important Twitter Messages #4
  • My most important Twitter Messages #5
    • ]]>     Twitter von der hess
    A small summary of my Twitter messages from June - August 2011:

    Allgemein (General)

    Generative Art:

    Info Design and Visualization

    UX and Interaction Design:

    Projekte und Experimente (Projects and experiments)

    Neue Technologie (new Technologies)

    Programmierung und Software Design (Programming)

    Physical Computing

    Game Developing:

    Flash and Flex

    Related posts:

    1. My most important Twitter Messages #6
    2. My most important Twitter Messages #4
    3. My most important Twitter Messages #5

    flattr this!

    ]]>     http://blog.derhess.de/2011/08/31/my-most-important-twitter-messages-11-2/feed/ 0 "     Flash talks to Max MSP via OSC http://blog.derhess.de/2011/08/16/flash-talks-to-max-msp-via-osc/ http://blog.derhess.de/2011/08/16/flash-talks-to-max-msp-via-osc/#comments Tue, 16 Aug 2011 10:38:25 +0000 admin http://blog.derhess.de/?p=1549
  • My most important Twitter Messages #9
  • My most important Twitter Messages #6
    • ]]>

    As I already mentioned  in an earlier blog post, for reimplementing my "Sound drawing" project to Flash I had to create a communication layer between Max/Msp and Flash. In this blog post I will report about my results and some technical information. If you want to jump directly to the technical part, please skip the part "Why am I doing this".

    Why am I doing this?

    I want to have access to more performance in general, I want to have access to more technical advanced stuff, I want an easy way for using external hardware devices, and last point, I want to collaborate with other media artists (without changin the working environment).

    Flash is a very nice for working with graphics, videos and other media based stuff. That is the total strength of Flash, but it fails in some performance issues (compared to C++) and some algorithmic libraries (compared to libraries like IanniX, Math, OpenCV, and Sphinx4). One motivation for me in this project lies to combine the advantages of these worlds. But I don't want to change the usage of these libraries. Some libraries have to be executes as an exe Application and they just perform great in C++, and not in a Flash environment (in some cases Alchemy could be a solution).

    Next point of performance is creating a scalable approach for media installation. Some media installation can't  be run by only one machine.  You need more computers, which talks to each other. For this reason, I put my focus on the Open Sound Control network protocol. As the OSC team drescribed, this protocol is made for communication between computers and media devices. It is often used in very robust environments and the documentation is very well, too. Almost every creative coding software supports the OSC communication, which is very good for collaborating with other media artists (everyone can still work in the preferred software environment).

    Some hardware can already talk OSC or it uses an communication software like TUIO, iOSC, AndroidOSC. For Midi controllers you can use graphical environments like Max/Msp or PureData. These softwares have directly access to the midi hardware and can configure the most things. Afterwards you send the midi data from Max/Msp (or PureData) to Flash via OSC. In this way Flash gets access to a new level of external devices...

    Flash talks OSC

    First I was a little bit scared, because I thought I have to dive into the nerdie byte array socket programming part in Flash. Luckily, I found information about the FlOSC project. FlOSC is Java based application, which receives the OSC messages and routing them to the Flash XML socket. There are some great tutorials available by Eric Socolofsky and Tim Poulin (part 1, part 2, part 3). After watching all of these tutorials, I was a little bit scared of the reliable performance of this approach. The Flash XML socket is nice for chat applications or some round-based multiplayer games, but for realtime data transmission I heard bad things...

    Luckily again, some time passed since FlOSC were created and Adobe provided a new binary socket API for the Flash Player. Things became even better. Since Version 2 of Adobe Air, Air supports the network UDP layer for really fast data transmission. I have not to mention that the Flash open-source is great ;-) , so I could find easily a nice library.  The tuio flash library solved almost everything I needed. I had to write my own OSCListener, which is great explained in the tuio guide and in its comments. During development I had sometimes problems with the binding of the DatagramSocket. It was obvious that the (binded) port was never closed. I had to wait until Windows shutted it down or just do it manually. Unfortunately, the UDPConnector class does not provide a close function. Therefore I added a close function by myself at the end of the class. Extending or creating a custom UDP Connector was not possible, because all members of the class are private.

    public function close():void {
    if(this.connection) {
           this.connection.close();
    }
}

    Max/MSP talks OSC

    After this minor coding everything worked fine. So I could jump to Max/MSP. Using OSC in Max/Msp is not very difficult. The documentation is pretty good and the provided example file helps a lot. I just extended the example with one function. If the max patch receives successfully a message from the Flash Client (Adobe Air app), then send a message back to the Flash client.  For the second example you have to install the fiddle plugIn (for Windows) for Max/Msp.

     

    Max/Msp and Flash in love

    I created two mini examples. Example one just demonstrates sending messages between Flash and Max/Msp. The second example is little bit more complicated and shoud give you an idea of a real life project. The max patch analyzes an audio file and sends the pitch tracking + volume tracking data to the Flash client. The flash client reads the data and draw it on the canvas. As you can see on my screen capture video above. The performance of this test application is pretty solid and robust. Now imagine instead of the tracking data we send midi data or just some image processing data. Or we do some heavy image processing on one machine and send the data to another machine, which only renders the Flash output... I guess there are many new things possible :-)

    Download Code

    The source code is available on my google project SVN or download the zip file. For the examples you must have installed Max/Msp 5, fiddle plugIn (for Windows), Flex SDK 4.5, Flash CS5 or Flash Builder 4. The code examples also requires the additional ActionScript libraries MinimalComps, MonsterDebugger, and TUIO Flash.

    Related posts:

    1. My most important Twitter Messages #9
    2. My most important Twitter Messages #6

    flattr this!

    ]]>     http://blog.derhess.de/2011/08/16/flash-talks-to-max-msp-via-osc/feed/ 1 "     Mr. Doobs Harmony project ported to Flash AS3 http://blog.derhess.de/2011/08/09/mr-doobs-harmony-project-ported-to-flash-as3/ http://blog.derhess.de/2011/08/09/mr-doobs-harmony-project-ported-to-flash-as3/#comments Tue, 09 Aug 2011 10:00:15 +0000 admin http://blog.derhess.de/?p=1645
  • Mr. Doobs Harmony drawing APP ported to MAX / MSP
  • Harmony in Max / MSP with multiple brushes
    • ]]>

    Some time ago I ported the great Harmony drawing app by Mr. Doob to Max/Msp. This Max/Msp Version I used for my media installation "Sound drawings". During the development and testing with the musicians I was not so happy with my workflow. Furthermore I felt that the Max/Msp environment causes some certain useless obstacles for me. Especially for the visual part of my work. Now I have time to check how useful Flash can be as a renderer. The first step was to port the drawing functions to ActionScript. Here is the result:

    Get Adobe Flash player

    For drawing in full size mode please visit the html File. The code is available on my Google project site. Before using the code in your projects, please check the requirements of the GPL license Version 3 and read Mr. Doobs blog post about using his code. The API is still the same as the orginial JavaScript version. Every brush has to implement the IBrush Interface methods:

    public function init(); // for re-creating the brush (after calling destroy)
public function destroy(); //destroy the brush data and free the memory
 
////////// Drawing functions ///////////////
public function strokeStart(mouseX:int, mouseY:int):void; // set first drawing point
public function stroke(mouseX:int, mouseY:int):void; // set following drawing points
public function strokeEnd():void; // stop drawing

    Brushes are very easy to use, but for performance issues you have to consider, that the drawing commands are expensive for the computer. I already ran into some performance problems after a few seconds. For this reason, I decided to store the drawing result of each frame into a BitmapData object. The Hype Framework is using the same approach. Here you can see the most important code lines for the bitmap storing approach...

    public fundction handleEnterFrame(e:Event):void {
   // some code before
 
   // draw the stroke for one(!) frame
   brush.stroke(e.target.mouseX,e.target.mouseY);
   // save the drawing in a bitmapData Object for performance
   bmpCanvas.draw(canvas);
   // clean the canvas again for new drawings.
   canvas.graphics.clear();
 
  // some code later...
}

    Nothing more I can say. Have fun and keep on coding!

     

    Related posts:

    1. Mr. Doobs Harmony drawing APP ported to MAX / MSP
    2. Harmony in Max / MSP with multiple brushes

    flattr this!

    ]]>     http://blog.derhess.de/2011/08/09/mr-doobs-harmony-project-ported-to-flash-as3/feed/ 2 "     My most important Twitter Messages #10 http://blog.derhess.de/2011/06/09/my-most-important-twitter-messages-10/ http://blog.derhess.de/2011/06/09/my-most-important-twitter-messages-10/#comments Thu, 09 Jun 2011 10:27:54 +0000 admin http://blog.derhess.de/?p=1585
  • My most important Twitter Messages #5
  • My most important Twitter Messages #6
  • My most important Twitter Messages #12
    • ]]>     Twitter von der hess
    A small summary of my Twitter messages from March - June 2011:

    Allgemein (General)

    Generative Art:

    Info Design and Visualization

    UX and Interaction Design:

    Projekte und Experimente (Projects and experiments)

    Neue Technologie (new Technologies)

    Programmierung und Software Design (Programming)

    Physical Computing

    Game Developing:

    Flash and Flex

    Related posts:

    1. My most important Twitter Messages #5
    2. My most important Twitter Messages #6
    3. My most important Twitter Messages #12

    flattr this!

    ]]>     http://blog.derhess.de/2011/06/09/my-most-important-twitter-messages-10/feed/ 0 "     My most important Twitter Messages #9 http://blog.derhess.de/2011/03/24/my-most-important-twitter-messages-9/ http://blog.derhess.de/2011/03/24/my-most-important-twitter-messages-9/#comments Thu, 24 Mar 2011 12:03:53 +0000 admin http://blog.derhess.de/?p=1551
  • My most important Twitter Messages #6
  • My most important Twitter Messages #11
  • My most important Twitter Messages #4
    • ]]>     Twitter von der hess
    A small summary of my Twitter messages from January - March 2011:

    Allgemein (General)

    Generative Art:

    Info Design and Visualization

    UX and Interaction Design:

    Projekte und Experimente (Projects and experiments)

    Neue Technologie (new Technologies)

    Programmierung und Software Design (Programming)

    Physical Computing

    Game Developing:

    Flash and Flex

    Related posts:

    1. My most important Twitter Messages #6
    2. My most important Twitter Messages #11
    3. My most important Twitter Messages #4

    flattr this!

    ]]>     http://blog.derhess.de/2011/03/24/my-most-important-twitter-messages-9/feed/ 0 "     My most important Twitter Messages #8 http://blog.derhess.de/2010/12/23/my-most-important-twitter-messages-8/ http://blog.derhess.de/2010/12/23/my-most-important-twitter-messages-8/#comments Thu, 23 Dec 2010 11:36:09 +0000 admin http://blog.derhess.de/?p=1474
  • My most important Twitter Messages #5
  • My most important Twitter Messages #4
  • My most important Twitter Messages #11
    • ]]>     Twitter von der hess
    A small summary of my Twitter messages from October - December 2010:

    Allgemein (General)

    Generative Art:

    Info Design and Visualization

    UX and Interaction Design:

    Projekte und Experimente (Projects and experiments)

    Neue Technologie (new Technologies)

    Programmierung und Software Design (Programming)

    Mobile Development

    Game Developing:

    Flash and Flex

    Related posts:

    1. My most important Twitter Messages #5
    2. My most important Twitter Messages #4
    3. My most important Twitter Messages #11

    flattr this!

    ]]>     http://blog.derhess.de/2010/12/23/my-most-important-twitter-messages-8/feed/ 0 "     My most important Twitter Messages #7 http://blog.derhess.de/2010/10/18/my-most-important-twitter-messages-7/ http://blog.derhess.de/2010/10/18/my-most-important-twitter-messages-7/#comments Mon, 18 Oct 2010 12:20:02 +0000 admin http://blog.derhess.de/?p=1411
  • My most important Twitter Messages #6
  • My most important Twitter Messages #10
  • My most important Twitter Messages #11
    • ]]>     Twitter von der hess
    A small summary of my Twitter messages from July - October 2010:

    Allgemein (General)

    Generative Art:

    Info Design and Visualization

    UX and Interaction Design:

    Projekte und Experimente (Projects and experiments)

    Neue Technologie (new Technologies)

    Programmierung und Software Design (Programming)

    Physical Computing

    Game Developing:

    Flash and Flex

    Related posts:

    1. My most important Twitter Messages #6
    2. My most important Twitter Messages #10
    3. My most important Twitter Messages #11

    flattr this!

    ]]>     http://blog.derhess.de/2010/10/18/my-most-important-twitter-messages-7/feed/ 0 "     My most important Twitter Messages #6 http://blog.derhess.de/2010/07/05/my-most-important-twitter-messages-6/ http://blog.derhess.de/2010/07/05/my-most-important-twitter-messages-6/#comments Mon, 05 Jul 2010 13:13:36 +0000 admin http://blog.derhess.de/?p=1343
  • My most important Twitter Messages #11
  • My most important Twitter Messages #4
  • My most important Twitter Messages #5
    • ]]>     Twitter von der hess
    A small summary of my Twitter messages from March - June 2010:

    Allgemein (General)

    Generative Art:

    Info Design and Visualization

    UX and Interaction Design:

    Projekte und Experimente (Projects and experiments)

    Neue Technologie (new Technologies)

    Programmierung und Software Design (Programming)

    Physical Computing

    Game Developing:

    Flash and Flex

    Related posts:

    1. My most important Twitter Messages #11
    2. My most important Twitter Messages #4
    3. My most important Twitter Messages #5

    flattr this!

    ]]>     http://blog.derhess.de/2010/07/05/my-most-important-twitter-messages-6/feed/ 0 "     My most important Twitter Messages #5 http://blog.derhess.de/2010/03/04/my-most-important-twitter-messages-5/ http://blog.derhess.de/2010/03/04/my-most-important-twitter-messages-5/#comments Thu, 04 Mar 2010 09:15:37 +0000 admin http://blog.derhess.de/?p=1235
  • My most important Twitter Messages #6
  • My most important Twitter Messages #10
  • My most important Twitter Messages #4
    • ]]>

    Twitter von der hess
    A small summary of my Twitter messages from Januar - February 2010:

    Allgemein (General)

    Generative Art:

    Info Design and Visualization

    UX and Interaction Design:

    Projekte und Experimente (Projects and experiments)

    Neue Technologie (new Technologies)

    Programmierung und Software Design (Programming)

    Game Developing:

    Flash and Flex

    Related posts:

    1. My most important Twitter Messages #6
    2. My most important Twitter Messages #10
    3. My most important Twitter Messages #4

    flattr this!

    ]]>     http://blog.derhess.de/2010/03/04/my-most-important-twitter-messages-5/feed/ 0 "