Adobe Pixel Bender Effects – Heart Frame Shader
Introduction
Today we are going to write a cool Pixel Bender Shader. We will create a heart image frame. The shader allows us to specify frame center, size, skew and background color. It also allows us the shift and adjust the input image.
Adobe Pixel Bender
If you want to write an image shader for your Flex or Flash application it is recommended that you install Adobe Pixel Bender Toolkit. It includes the Pixel Bender kernel language and graph language, the Pixel Bender Toolkit IDE, sample filters, and documentation needed for developing and debugging shaders. Once you finish developing your shader you can export the binary code and use it in a regular Flex/Flash application.
Heart Frame Shader
I did not invent the heart equation, it is very popular equation (check out number four in this post) however I ported it into Pixel Bender Shader syntax as in the code below:
|
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
kernel Heart < namespace : "8bitavenue"; vendor : "8bitavenue"; version : 1; > { //Heart center (x, y) parameter float2 center < minValue: float2(0); maxValue: float2(750); defaultValue: float2(180); >; //Background color (RGBA) parameter pixel4 color < minValue: float4(0.0,0.0,0.0,0.0); maxValue: float4(1.0,1.0,1.0,1.0); defaultValue: float4(0.0,0.0,0.0,1.0); >; //How big it is parameter float size < minValue: 1.0; maxValue: 100000.0; defaultValue: 1000.0; >; //Heart shape parameter float skew < minValue: 1.0; maxValue: 1000.0; defaultValue: 100.0; >; //Input image shift (left, right) parameter float2 shift < minValue: float2(-750); maxValue: float2(750); defaultValue: float2(0); >; //Input image input image4 src; //Output image output pixel4 dst; //The heart has a magic equation //Radius = some function in terms of (x, y) void evaluatePixel() { float2 coord_for_this_pixel = outCoord() - center; float cur_radius = length(coord_for_this_pixel); float x = outCoord().x-center.x; float y = outCoord().y-center.y; float radius = pow(x*x + y*y - size, 3.0) + skew*x*x*y*y*y; //Use background color if the pixel is outside the heart if (cur_radius < radius) { dst = color; } //Otherwise keep the color as it was else { dst = sampleNearest(src, coord_for_this_pixel + center - shift); } } } |
Live Demo
In order to use the shader above in a Flex/Flash application you need to compile and export the shader using Pixel Bender Toolkit mentioned earlier. Here is the shader in action. Try to play with it to get a feeling of what it does.
[kml_flashembed movie=”https://www.8bitavenue.com/wp-content/uploads/2012/05/pixel_bender_heart_frame.swf” height=”450″ width=”550″ /]
Flex Source Code
You can download the full Flex source code here. Thanks for reading.
About Author
Mohammed Abualrob
Software Engineer @ Cisco