Adobe Pixel Bender Effects – Circular Frame Shader
Introduction
In this tutorial we are going to learn how to write a pixel shader to create a circular frame for a given input image. The shader allows us to specify the circle center, radius and background color. It also allows us to shift the image to the left or right inside the frame.
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.
Circular Frame Shader
The idea behind circular frames is very simple. We use the equation of a circle. If a pixel is outside the circle we color it using the background color of choice otherwise we keep the color as it was in the input image. In order to check if a pixel is inside or outside the circle we calculate the distance between the pixel and the circle center. If the distance is greater than the circle radius then it is outside otherwise it is off-course inside. Here is the full source code of the shader:
|
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 |
kernel Circle < namespace : "8bitavenue"; vendor : "8bitavenue"; version : 1; > { //Circle center x, y parameter float2 center < minValue: float2(0); maxValue: float2(750); defaultValue: float2(180); >; //Circle radius parameter float radius < minValue: 0.0; maxValue: 750.0; defaultValue: 30.0; >; //Circle shift (right, left) parameter float2 shift < minValue: float2(-750); maxValue: float2(750); defaultValue: float2(0); >; //Background color (R, G, B, A) 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.2, 0.2, 0.2, 1.0); >; //Input image input image4 frontImage; //Destination image output pixel4 dst; //Apply for each pixel void evaluatePixel() { //Vector from circle center to current pixel float2 coord_for_this_pixel = outCoord() - center; //Length of the radius float cur_radius = length(coord_for_this_pixel); //Sample pixel and take shift into consideration float4 frontPixel = sampleNearest(frontImage, outCoord() - shift); //Background color if pixel is outside the circle if (cur_radius > radius) { dst = color; } //Otherwise keep the original color else { dst = frontPixel; } } } |
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/04/pixel_bender_circular_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