Adobe Pixel Bender Effects – Flower Frame Shader
Introduction
Welcome to another tutorial on creating Pixel Bender Shaders. Today we will create a flower image frame. The shader allows us to specify frame center, size, number of leaves 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.
Flower Frame Shader
I did not invent the equation for the flower frame. I just ported a popular polar graph using Pixel Bender Shader syntax as indicated 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 79 80 81 |
kernel Flower < namespace : "Konta"; vendor : "Konta"; version : 1; > { //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,0.0); >; //How big it is parameter float size < minValue: 1.0; maxValue: 1000.0; defaultValue: 200.0; >; //Number of leaves parameter float count < minValue: 1.0; maxValue: 100.0; defaultValue: 3.0; >; //Input image shift parameter float2 shift < minValue: float2(-750); maxValue: float2(750); defaultValue: float2(0); >; //Input image input image4 src; //Output image output pixel4 dst; //The flower is generated using a polar graph //as indicated below 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 theta = atan(y/x); float radius = size*abs(sin(count*theta)); //Current pixel outside the graph, color it with background color if (cur_radius > radius) { dst = color; } //Current pixel inside, keep it 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_flower_frame.swf” height=”450″ width=”550″ /]
Flex Source Code
You can download the full Flex source code here. Thanks for reading.