Visual Advance | Blogthe personal and professional evolution of danny davis

We have been doing some revamping of our entrance at work (Manifest Digital). I threw together this glorified screensaver to project onto our doors.

Done in Flash CS4, Actionscript 3. You can view the project online here: http://manifestdigital.com/playground/flip/

I recently finished another piece for an upcoming gallery show. I am calling this one The Generative Wasp Landing. Obviously it is a followup piece to my first one, The Generative Eye.

This time I decided to use a slightly different “brush” by using more of a circular glob shape, and I wanted their motion to be different than the first. I ended up using brownian motion to make the brushes move around the canvas this time. This gave it a much more organic feel than my first piece. I also had them scanning over a texture this time so that they would give the impression of real paint much more than just vector shapes. The entire application was written in Adobe Flash CS3.

The final piece will be on display:

Thursday, July 30, 6-9pm
Demitasse Cafe, 1066 W. Taylor ST. Chicago IL

Here is a video of this piece being generated:

And a few other shots I took while working on this final piece.

The Generative Orchid 1:

The Generative Orchid 2:

The Generative Wasp Landing – Detail Shot:

My original photo I used for this piece:

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

A little while back I made an attempt at making dust in flash, and I would basically say I failed at it (though I didn’t give myself much time). I thought I would try it again. I am fairly happy with my first test. The hardest part is that you run the risk of it looking like snow if its falling too fast, but I kept its speed up more so you can see it easier.

Each particle is looking at the background and adjusting their opacity based on the surface they are over. So if it is in a dark area they tend to fade out, etc. Note: I claim no rights to the image used in my test. It is a random grab from Flickr.

Demo (click and hold your mouse down to see the particles over black)

Source

I wanted to give a little sneak peak of one of the experimental scripts I came up with. For now I am calling it a bitmap separator. Not sure if that title is appropriate for what is actually going on here. I guess a more appropriate title would be ‘Maker of bitmap layers based on color luminosity of a movieclip’. Not quite the same ring to it.

Either way, this isn’t at all the final product I wanted from it, but some of my tests have been fun and I wanted to post at least one of them to gain some intrigue.

Bitmap Separator

I have been playing around with some flowing formations lately which I have always avoided because they deal with the dreaded Math. Luckily my friend at Dyleeo helped me out with really understanding how to use sin and cos for smooth movement.

This first version was a test of leaves moving across the screen:
leafFormation_v2

The section version is leaves moving in place (as if the camera was following them):
leafFormation_v3

download source (both versions)

I just wanted to post some of my explorations I did in order to make The Generative Eye piece.

I uploaded a video of The Generative Eye being, well, generated. At first it has this Matrix feel, but then once it fills it it takes on this ‘rain on a window’ feel. I am debating turning it into a screensaver. Check it out.

I just got back from my first gallery showing. It is at this cool cafe called Demitasse Cafe and they feature a new set of work every few months. One of my friends generally organized it and suggested I submit “one of those things I do”. It is the first time I have actually printed my work and I wasn’t completely satisfied with the results, but it was very good to see how the digital work translated outside the monitor. I think the main thing that was lost was all the tiny details you can see on screen of each individual shape of the “brush” that paints the picture.

Here is the final piece and some details: