May
14
2010

Been Busy in the City of Angels

I swore I’d do better at this whole blog thing, and yet here it is after several months non-posting. In fact I just approved a comment that was posted a while ago that I hadn’t got around to (sorry! I will answer!). I must commit to trying to submit a post a week here for a little while just to get into a good habit. I have a nice list of ideas for posts I’ve wanted to do for a while, some concerning Brightcove, some concerning the aether and aeon libraries and my book.

So why have I been lax? Other than the new baby and the fulltime job (no excuse, I know), I went from Blithe Spirit, as mentioned in my last post, to working on City of Angels at Longwood Players in Cambridge. It’s a show I saw back when I was in high school that I’ve always wanted to do, and here it was. So I did it, hour+ commute and all, and damn it was worth it, even if I couldn’t hit all the notes like I could back in high school :).

I did at least do a little work on the computer that I can post here without turning this into a theater blog. We had a publicity photo shoot at one point and soon after I had a night where I just couldn’t get to sleep, so just for kicks I hopped on the computer and turned one of the photos into a strip of film from an old film noir (if you know the show, it makes sense), dropping the characters into a rendered 3D detective’s office, making it b&w and grainy, etc. So the producers liked it and asked to use it in some marketing material and I offered to do anything else that might come up.

What came up was the task of putting one of our actors, Kevin Cirone into some publicity shots with famous Hollywood figures from the 30’s and 40’s. I was directed to some photos online and found some others, and this is what I came up with. Note that these photos were just intended as stage decoration on an office set, so they were more for our enjoyment than for the audience that generally probably couldn’t make them out. I spent maybe a half hour on each, not worrying too much about how integrated the images were beyond what would fool an audience a good distance away (not those looking closely online).

The first here is a shot of Audrey Hepburn and Cary Grant. Kevin’s photo of course is in the middle, with the final composite at the bottom. He just looks so damned pleased, and I love it.

Here was a shot of Cecil B. Demille. It was so dynamic that I had to do it, even if Kevin doesn’t actually appear with anyone famous in the end. Had to add some extra lighting to his face though to try and get the light and shadow angles to match.

Finally, and probably my favorite, is a shot of Louis B. Mayer with Garland and Rooney. The subtext here is that Kevin’s character Buddy (a studio mogul) just told the dirtiest joke to these couple of teenagers. You can just see it. The integration on this one was interesting since I didn’t really have the right angle of a headshot. In the end I had to lower Mayer’s whole body to make it look fairly plausible.

Image manipulation fits under the umbrella of this blog, yes? So we’re still good, even after a several month hiatus. More non-theater stuff is coming, though!

  • Share/Bookmark
0
Jan
21
2010

Blithe Spirit

Here’s just a quick post that’s nothing to do with ActionScript, nothing to do with Brightcove, but to let anyone in the Boston/Worcester/Providence area that I will be performing next month, along with my wife, in Blithe Spirit in Worcester at WCLOC. I was an actor in a past life and have been getting active on the stage again over the past two years, and this is my latest endeavor.

Blithe Spirit is a Noël Coward comedy from the 40’s about an author and his wife who, through an unfortunate séance, summon the ghost of his first wife who then schemes to kill the author in an attempt to reunite with him on the Other Side. It’s fast-paced, witty, and I get to say things like “Surely even an ectoplasmic manifestation has the right to expect a little of the milk of human kindness” with a straight face and heightened British dialect. Fun.

I also created the poster and ads for the production, which was a challenging feat to say the least to get so much info into each of the form factors and still provide a strong central image, but I’m quite proud of the result:

  • Share/Bookmark
0
Jan
08
2010

Pixel Bender Quirks

I just wanted to quickly document several issues I’ve had so far when developing with Pixel Bender in case anyone else runs into similar issues.

  • Reapplying an altered shader as a blend mode does not update a display object. The blend modes I was working with all had a percent parameter. If I changed the percent, then applied the altered shader to the blendShader property of the display object, nothing would happen. The way I could get it to update (I’m sure there are other ways) was to set the blend mode to “normal”, then assign the shader to the blendShader. Only then would the display object update.
  • When developing blend modes, order of the input declarations is important. This might seem obvious, but caught me up initially mostly because I started with blend modes that didn’t care about order, like add or multiply or difference. But when you are coding a blend mode where the order is important, remember that the first input declaration will be filled by the background pixels below your display object while the second declaration will be filled by the pixels of the display object you are applying the blend mode to.
  • For instance, with the following code it should be obvious which input will take the background pixels and which will take the foreground, or source display object:

    1
    2
    input image4 background;
    input image4 source;

    However, the names of course make no difference since you can name them whatever you like. Just don’t make the mistake of reversing the names:

    1
    2
    input image4 source;
    input image4 background;

    Despite the names, the “source” input here will still be filled with the background pixels below your display object while the “background” input will be filled with the pixels from the display object. So be careful!

  • normalize() bug? This is one of the two cases I’ve found where a function that worked fine within the Pixel Bender Toolkit didn’t work in the Flash Player runtime. This is so frustrating since everything appears fine when developing the kernel, and there’s no great debugging way to know why it fails in the Flash Player.
  • As an example, this worked for me in the Toolkit, but failed in the Flash Player:

    1
    2
    float3 p = float3(relativePos.x, relativePos.y, -z);
    p = normalize(p);

    This code, which performs the normalization, worked:

    1
    2
    3
    float3 p = float3(relativePos.x, relativePos.y, -z);
    float pLength = length(p);
    p = float3(p.x/pLength, p.y/pLength, p.z/pLength);

    Huh.

  • Nested min()/max() calls produce erroneous results. This is the other of the two cases when something worked fine in the Toolkit but not the Flash Player. When I had a max() call within another max() call (and the same with min()) I got bad data, but putting them in separate statements resolved the issue.
  • Broken:

    1
    float saturation = max(px.r, max(px.g, px.b)) - min(px.r, min(px.g, px.b));

    Works:

    1
    2
    3
    4
    5
    float maxSat = max(px.r, px.g);
    maxSat = max(maxSat, px.b);
    float minSat = min(px.r, px.g);
    minSat = min(minSat, px.b);
    float saturation = maxSat - minSat;

    Maybe I’m missing something in these broken examples, but the frustration was mostly in the fact that it all worked fine in the Toolkit, but produced a nice black image in the Flash Player. It would have been nice to at least have it broken in both places. :)

    • Share/Bookmark
    1
    Jan
    04
    2010

    Pixel Bender Blend Modes

    In my ActionScript 3.0 Image Effects book I have a chapter in which I discuss Pixel Bender and demonstrate how to create a blending mode for the Flash Player. I also suggest the possibility of rewriting the standard Flash Player blend modes so that a percent parameter might be supported, as you find in Photoshop. Then you could apply a multiply blend mode at 50% as opposed to always 100%. In a previous chapter in the book I present the blending mode formulas to make doing that easier.

    So I finally took my own suggestion :) I have written Pixel Bender shaders not just for the standard Flash Player blend modes (multiply, screen, overlay…), but for the standard Photoshop blend modes as well (color dodge, vivid light, hue…). Here’s an example of them at work:

    Pixel Bender blend modes in Flash Player

    I incorporated the blend modes into the aether effects library. To apply one of these blend modes at runtime, you need to either embed the shader byte code in the SWF or load in the shader at runtime. Embedding would look like this:

    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
    package {

        import aether.blendModes.HardMixBlendMode;
        import aether.blendModes.ShaderBlendMode;

        import flash.display.Bitmap;
        import flash.display.Sprite;

        [SWF(width=400, height=602)]

        public class EmbeddingBlendMode extends Sprite {

            [Embed(source='/assets/hardMix.pbj', mimeType='application/octet-stream')]
            private static const HardMixKernel:Class;

            [Embed(source='/assets/hydrant.jpg')]
            private static const ForegroundImage:Class;

            [Embed(source='/assets/fungus.jpg')]
            private static const BackgroundImage:Class;

            public function EmbeddingBlendMode() {
                var backgroundImage:Bitmap = new BackgroundImage() as Bitmap;
                addChild(backgroundImage);

                var foregroundImage:Bitmap = new ForegroundImage() as Bitmap;
                addChild(foregroundImage);

                ShaderBlendMode.setShaderClassPath(this);
                foregroundImage.blendShader = new HardMixBlendMode(.5).shader;
            }

        }

    }

    In this case, the shader byte code is embedded into this class, and so I need to tell the ShaderBlendMode class where to find the shader. This is done through the static setShaderClassPath() method. All blend mode shaders will then look to this class for the byte code. By default, each BlendModeShader child class has an expected name of the shader that is assigned to a static shaderClass property. For HardMixBlendMode, it is “HardMixKernel”. For AddBlendMode it is “AddKernel”. Etc. So here in this class I embed the byte code with the class name HardMixKernel. If I wanted to use a different name, I could assign a new value to HardMixBlendMode.shaderClass.

    Finally, I need to assign the actual Shader instance to the blendShader property of the bitmap, and this can be accessed through the shader property of a BlendModeShader instance. Since I am not looking to alter the 50% hard mix blend, I do not even need to save a reference to the blend mode shader, I just assign it directly to the bitmap.

    If you are not embedding the byte code, you will need to load it at runtime. The following code does that (though I still embed the images just to save space here to focus on the blend mode code — if you are not using the mxmlc compiler obviously you will need to load the images or use another type of display object).

    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
    package {

        import aether.blendModes.HardMixBlendMode;
        import aether.blendModes.ShaderBlendMode;

        import flash.display.Bitmap;
        import flash.display.Sprite;

        [SWF(width=400, height=602)]

        public class LoadingBlendMode extends Sprite {

            [Embed(source='/assets/hydrant.jpg')]
            private static const ForegroundImage:Class;

            [Embed(source='/assets/fungus.jpg')]
            private static const BackgroundImage:Class;

            private var _blendMode:ShaderBlendMode;

            public function LoadingBlendMode() {
                var backgroundImage:Bitmap = new BackgroundImage() as Bitmap;
                addChild(backgroundImage);

                var foregroundImage:Bitmap = new ForegroundImage() as Bitmap;
                addChild(foregroundImage);

                ShaderBlendMode.shaderFilePath = "/pbjs/";
                _blendMode = new HardMixBlendMode(.5, foregroundImage);
            }

        }

    }

    In this case I must specify through the static shaderFilePath where the shader will be loaded from. Just as with the shaderClass property, there is a shaderFile static property of each ShaderBlendMode that determines the name of the shader file to load. By default, the HardMixBlendMode uses “hardMix.pbj”. The MultiplyBlendMode uses “multiply.pbj”. I hope the pattern is obvious :). If you want to rename the shader file, you simply have to update the shaderFile value for the associated class.

    One of the cool things about these blend modes is that if you assign a display object as the second parameter, as I did in this example, then the shader will reapply itself to the display object if its percentage ever changes (by default in the Flash Player, a shader is copied to the display object, there is no object reference that remains). So if you wanted to change the percentage of the blend mode applied, you would simply need to have:

    1
    _blendMode.percent = 0.8;

    The display object would then be automatically updated with the new shader value.

    To use these shaders, simply grab the aether effects library. There is a precompiled SWC as well as the original source for both the ActionScript and the Pixel Bender shaders. There are no dependencies in the shader blend modes on other pieces of the aether library, so if all you want is to use a blend mode you don’t get any excess baggage along with it.

    • Share/Bookmark
    6
    Dec
    27
    2009

    Unison for BEML editing

    A while back I worked on a prototype for an AIR WYSIWYG BEML editor (how’s that for acronym’s at work?). For those who develop for, or are, Brightcove clients, you will know that BEML stands for Brightcove Experience Markup Language, a simple tag based markup language based on XUL and containing a lot of elements familiar to MXML users.

    Well, the prototype was a bit of a hit and miss. It was a hit because I liked to use it to develop and test with and I found it very useful (hit!), but a miss in that, like many WYSIWYG editors it surfaced what was extremely difficult to do easily or right in such an application, and nothing came of it (miss!). But I still felt that it might be a useful tool, warts and all, for those working with BEML to experiment and play with the language.

    So I tweaked a few things, cleaned up a few others, added some spit and polish and a few extra features that creeped in towards the end, and now am presenting Unison:

    Unison application for BEML editing

    You can use the browser-based version, or download and install the AIR app if you want to export images. Some of the features include:

    • Drag and drop design view
    • Layout tree view of BEML
    • Properties panel for assigning attributes
    • Styles panel for modifying colors through color pickers or CSS
    • Snapshots panel to save versions of BEML
    • Code view with code hints and code completion

    If you have any issues or find bugs, please let me know (consider it beta, optimistically). If you have ideas or requests for additional features, I’d love to hear them (of course, I already have a list that would keep me busy till next Christmas).

    I hope it proves as useful to others and it has for me!

    • Share/Bookmark
    4
    Dec
    23
    2009

    AIRHead == 27Bobs BobbleHead

    I decided to put AIRHead up on the Adobe AIR Marketplace since probably about 5 people read this blog (thanks, you five! :)) and saw under Adobe’s terms and conditions that including AIR in the app name was a big no-no. Unfortunately, my creativity lasted for just the one title, so after trying some lame attempts to mash “27Bobs” with “bobblehead” (27Bobblehead?) I decided to just go for the obvious and call the offering “27Bobs BobbleHead”. Anyway, here ’tis:

    27Bobs BobbleHead

    • Share/Bookmark
    2
    Dec
    18
    2009

    AIRHead now available!

    So back when I was completing the ActionScript Image Effects book I was considering what I could do for fun to demonstrate some of the effects discussed in the book. I had a 3D library I had written years earlier that needed dusting off, so I thought I could combine the two tasks and create a 3D bobblehead toy that allowed you to apply and manipulate an image map to a 3D mesh which could then sit on your desktop and react to your mouse (which would also give me time to play with AIR, which I hadn’t really yet ever done to a great extent). And of course it practically named itself: AIRHead.

    AIRhead

    But then I finished the book and went into a show, then was asked to do another show right after that, then, well, had a baby :). But I did work on it here and there and showed a first draft of it at RIA Unleashed last month. I’ve finally had a chance to finish up a 1.0 version and put together some help videos to explain it. If you click on the above bobblehead of me you will be taken to an interface which does its best through a browser to demonstrate what the desktop application offers. You will find there a link to download the AIR installer as well if you want to take it for a spin and create your own bobblehead. Please post back with any cool creations or suggestions!

    • Share/Bookmark
    0
    Nov
    15
    2009

    RIA Unleashed files

    Here are the slides and support files for the Image Manipulation presentation I gave at RIA Unleashed. I’ve also included the AIRHead application I demonstrated at the end of the session. At the present time the app doesn’t have any help or support files, though, so you have to play around with it to see what it does. I plan on writing up a more thorough post in the near future on the app, at which time I will put up some video demos of the interface (anything to get me out of typing up help docs — hey, it’s a free app! ).

    • Share/Bookmark
    4
    Nov
    15
    2009

    I am not a blogger.

    Yes, I know that blogging is apparently dead or in its dying throes. I always like to pick up trends long after they are hot — I expect to open a Twitter account by 2012. That is, of course, unless the world ends in an over-the-top Roland Emmerich sort of way.

    I entitled this first entry “I am not a blogger” and I’ve long thought just that as I watched blogs come and go around me while I played with the idea of starting one of my own. I had a fairly active website at 27Bobs in the early days, but over the past several years I’ve updated it less and less — I think once every 8 months was the average in the end. I am certainly not a daily, weekly, or now even monthly updater, so having a blog just seemed silly for me.

    So, why now? Well, first, I am finishing my fifth year at Brightcove in Cambridge, MA, working primarily on the user-facing front end for our service, the media players, along with the templating system for creating them and the Flex application for managing them. We do some pretty cool stuff in that area and there’s a lot of functionality in our players that just hasn’t been tapped yet or showcased. Hopefully with this forum I can provide some insight and answer questions for those currently developing.

    I also saw my first full book, Foundation ActionScript 3.0 Image Effects, published this past Spring by friends of ED. I thought having a site that could support that book outside of the friends of ED forums would be helpful (if a little belated at this point). In that book, I present two open source libraries I wrote and use all the time, aeon animation and aether effects. I’d like to delve into these a bit more using this blog as well.

    Finally, there is a rare occasion when I still get to do something in Flash just for fun and to experiment with features I might not get to explore much at Brightcove, and I will present those pieces here when I can. One example of this is AIRHead, a desktop bobblehead toy created for AIR using my custom UI, 3D, effects and animation libraries (you can see an image of one of the creations in my header above). I will be making this available for download shortly along with the slides and files from my presentation at RIA Unleashed where I spoke about ActionScript image manipulation and demonstrated AIRHead for the first time.

    So we’ll see where this blog thing goes. Stay tuned.

    • Share/Bookmark
    14