Pixel Bender TV Scanline Filter
After seeing all of the cool stuff people have been doing with Pixel Bender, I finally decided to spend a little time and start learning how to build them myself.
The learning curve isn’t too difficult, although you do have to learn some new concepts, and deal with some limitations (at least when creating filters for Flash). The most difficult part for me thus far, is just understanding color and pixel math and manipulation (something I need to read up on more).
Anyways, below if one of my first filters. I wanted to post it as it is a pretty simple example, while still potentially being useful. Basically, it creates a TV scanline effect by making every other row of pixels black.
Here is a before an after example (you need to click to view the full size in order to see the effect well).
Here is the code for the filter:
<languageVersion : 1.0;>
kernel ScanLines
< namespace : "mesh";
vendor : "Mike Chambers";
version : 1;
description : "Generates a TV Scanline effect";
>
{
input image4 src;
output pixel4 dst;
void
evaluatePixel()
{
//get the current pixel
dst = sampleNearest(src, outCoord());
//find out the vertical pixel size. In Flash this will always be 1
float pixelVSize = pixelSize(src).y;
//pixelVSize / 2.0 - outCoord() gives center of pixel, so we have to adjust to find
//center of our pixel
if( int(mod(((pixelVSize * outCoord().y) - pixelVSize / 2.0), 2.0 )) == 0)
{
//if on an even row, set the pixel to blackt
dst.r = 0.0;
dst.b = 0.0;
dst.g = 0.0;
//can also do
////dst = float4(0.0,0.0,0.0, 1.0);
}
}
}
Thanks to Kevin Goldsmith from the Pixel Bender team for helping me out.
The comments in the code explain what is going on.
You can load this into Pixel Bender to play around with it, and compile it for use in Flash Player 10.
I wanted to add a parameter to allow the line size to be set. It doesn’t look like I can store variables in between calls to evaluatePixel(). Im trying to figure out an algorithm to figure it out in one pass, but im not sure that my math skills are up to the task at the moment.
You can find all of my other posts on Pixel Bender here.
Hey, that looks very nice. I think pixel bender effects on videos is a really cool thing. You can create a lot of “motion design” effects that look a little bit like AfterEffects.
I did a color keying filter some time ago:
http://www.video-flash.de/index/flash-player-10-pixel-bender-realtime-color-keying/
Flo
18 Sep 08 at 12:01 am
Hi, special thanks for the mentioning works on my blog as cool examples, appreciated !
btw funny coincidence – my first pixelbender-experiment was TV-screen related as well :) http://www.flickr.com/photos/pixelero/2179760121/
Pixelero
18 Sep 08 at 5:04 am
I did a bit of a hack on your filter to add lineSize and make the TV lines smoother. I didn’t take into account the pixelSize though, which was just lazy :)
kernel ScanLines
{
input image4 src;
output pixel4 dst;
parameter float lineSize;
void
evaluatePixel()
{
//get the current pixel
dst = sampleNearest(src, outCoord());
float temp = mod(outCoord().y, 1.5 * lineSize);
dst = dst * float4( temp, temp, temp, 1.0 );
}
}
Kevin Goldsmith
18 Sep 08 at 10:34 am
@Kevin
Thanks. I was trying to figure out how to do that last night.
Can you explain what you are doing?
float temp = mod(outCoord().y, 1.5 * lineSize);
dst = dst * float4( temp, temp, temp, 1.0 );
mike
mikechambers
18 Sep 08 at 10:45 am
yeah, no problem.
mod gives you the remainder of a division, so by mod’ing the y coordinate by 1.5, I’ll always get a number between 0 (when it divides exactly) and 1.5 (when it doesn’t).
So when I multiply that temp variable by the actual r,g,b in the image, I scale the colors from black (0,0,0) to over bright (more than white) (1.5, 1.5, 1.5) which gives it more of a TV look. You won’t actually see anything more than white, but for dark images you’ll notice them looking brighter than they should be.
Adding the lineSize scale factor was just showing how you could add a parameter to make the filter more dynamic. I don’t think it is very satisfying for animation, but you could use it to tune a look that you wanted. I just wanted to keep it simple.
One thing you’ll notice is that you get this kind of gradient effect from black to bright and then right back to black. Instead of using mod, you could use sin or cos to get more of a smooth look.
Kevin Goldsmith
18 Sep 08 at 11:04 am
Thanks for your info. I was trying to figure out the filter. I was trying to find an “older” filter. Because i want to make my vide a little bit like the 70s. Can you tell me some tricks?
chris
house dj
23 Sep 08 at 7:33 am
I like this filter … marginal tweening to lineSize in conjunction with a minor blur makes for a decent crappy-reception video effect. May need a little static to top it all off though. =]
Brent Dearth
30 Nov 08 at 11:58 am
[...] – All of the filters were gathered up out on the interweb (mesh, exchange, pixelero). [...]
Pixel Bender + Video = Killer Runtime Effects | Brooks Andrus
30 Jan 10 at 9:13 am