Visual Advance | Blogthe personal and professional evolution of danny davis

In the spirit of open source I have added the source files for my first go at creating a video mask in flash. The source can be found at the bottom of my post: Inventing Flash Video Masks (Part 2)

My friend Wenner wanted to do another music video for someone’s birthday. I hadn’t done any video projects in a while, so I was definitely in. We only had about a week to compose the whole thing so the only set plan I had going in was to shoot on pretty much every camera I own, and make something happen with that. I trusted Wenner and his choreographer would take care of the moves, so all I had to do was capture it and make them look even better.

With the help of my motion graphics friend Jay Purugganan, and my Producer girlfriend Cristina, I was able to shoot edit, and “color correct” the whole thing in about 7 hours. This gave Jay about 3-4 days to add the finishing touches to make it that much more impactful.

Anyway, have a look:

I have two other methods for creating video masks that I wanted to share. The first one is purely for experimental purposes only because it is a processor hog, and probably wouldn’t be very realistic for actual use (though it is exactly what I was trying to achieve visually).

While thinking about my first attempt I realized that by using threshold to split up the video I was essentially creating a very hard edged mask with no gradation to it at all. This is fine, and as I said, you could always apply a blur filter or drop shadow to the bitmap to help soften up the edge, but it wasn’t truly a gradient video mask.

For the new method I did almost exactly what I did in my last attempt, but instead of using threshold to break the video up, I took the color value of each pixel (getPixel), turned that number into something ranging from 0-255 (the full range alpha has), and then reset each pixel in the bitmap including an alpha value this time (setPixel32). In other words darker pixels from the video were less visible, lighter pixels were more visible. The only problem with this is that it is on a pixel by pixel basis, so every single frame of the video you are reading, processing and rewriting each pixel during the transition.

For anyone who thinks their computer is strong enough: Gradient Video Mask Demo 2 (the first time you will see the ink, then if you click it again you will see a random video of a car being used as the mask.)

For my next attempt…

This sort of goes back to one of the original ideas I was working on, but my friend Jay (a motion graphics artist) helped to revive the concept by suggesting rendering the alpha channel from After Effects and just setting that as a mask. Unfortunately, that alone does not work which is why I had originally veered away from this method. If you set a video player, alpha channel or not, as a mask, flash just sees it as a rectangle the size of the video player. Not good.

Then I started to wonder if it would maintain the alpha channel when writing each frame of the video (with alpha) to a bitmap. Bingo! This is probably the most processor friendly method out of the three, but there is one drawback. You need two videos in order to execute a full transition with this method. You need one video with the ink keyed out for the image you want to disappear, and then you need another copy of that video with the area around the ink keyed out for the stuff you want to come in. This could cause issues if you don’t make sure the videos are synced up before they play.

Either way, this seems like it may be the way to go if you have the option of keying out your videos before you import them. Check it out: Video Mask Demo 3

AS3 Video Mask v1 Source

I remember when I finally learned that you could make gradient masks in flash using code, I was so relieved to finally have, what I think should have been an option from the beginning. Well, recently I started a project where I wanted to do something a bit more interesting than what is built in. It got me to thinking of ways I could combine some of the bitmap effects I have been into, with the same principles behind how gradient masks are made.

The result; Video Masks! It may not be the most efficient, or processor friendly (though it worked much more efficiently than I expected), method to making a mask, but I needed something to fit my vision, and this was my mash-up result.

To give you a quick rundown of how it is done; You run a video like normal, write that to a bitmap in real-time as it runs, then use the bitmap method threshold to split the image up onto two separate bitmaps that you then use as the final mask. What is interesting is that you can also apply drop-shadows or blurs to those bitmaps so you can get a nice separation of depth between the two masks (if you want to really kill your users computer).

In the example I provided you will see it first transition using the ink video (which you will see in the top right), and then once that is done, you can click to see it transition using a random video I shot of a car. Not the greatest video for a transition, but it illustrates how it has the potential to be used with any video.

Video Mask Demo

I am going to keep on posting my explorations with BitmapData until someone stops me.

My latest iteration turns the input from a webcam (or video) into a haltone effect (an idea given to me by Brandon Breaux). The squares analyze the intesity of the color they are over. If they are over a dark color they will get smaller, and if they are over a light color they will get bigger. This naturally causes a halftone effect.

BitmapImage_v10

Furthering my explorations with the BitmapData and classes, I came up with this effect. It’s surprisingly easy to change one or two variables and have it give off an entirely different effect. I think my next step will be integrating this with your webcam.

bitmapimage_v8_videosquares

Looks like there are more and more videos popping up on YouTube for Radioheads “House of Cards” music video. They are using the data from the Google Code to create different styles for the animations. That’s some open-source directing for you. Here are a couple of the ones I found most interesting.

Thom Yorke Hologram. Obviously uses tracking technology (isn’t actually a hologram):

Legos:

In Rainbows:

I love it when something is so weird that I can hardly comprehend what went into coming up with it. Bjork’s latest video definitely did it for me, and I look forward to seeing the 3D version. Especially the stylized water.

And while I am on the subject of Bjork, her video for All Is Full of Love is still one of my favorite videos/songs of all time. It definitely defines part of what my style is today.