Adobe Pixel Bender Effects – Solar Frame Shader
Introduction
Welcome to another tutorial on Pixel Bender Shaders. In this tutorial we will create a solar like image frame. The shader allows us to specify frame center, size, background color, number and length of sun beams. 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.
Solar Frame Shader
The idea is to use an appropriate polar graph. Polar graphs use a radius and an angle (r, theta) instead of (x, y). The relation between (x, y) and (r, theta) can be related using the sin and cos of the angle. Take a look at 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 79 80 81 82 83 84 85 86 87 88 89 |
kernel Sun < namespace : "8bitavenue"; vendor : "8bitavenue"; version : 1; > { //Center (x, y) parameter float2 center < minValue: float2(0); maxValue: float2(750); defaultValue: float2(180); >; //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.0,0.0,0.0,0.0); >; //How big the frame parameter float size < minValue: 1.0; maxValue: 1000.0; defaultValue: 100.0; >; //Length of sun beam parameter float len < minValue: 1.0; maxValue: 1000.0; defaultValue: 10.0; >; //Number of sun beams parameter float count < minValue: 1.0; maxValue: 100.0; defaultValue: 10.0; >; //Image shift (x, y) parameter float2 shift < minValue: float2(-750); maxValue: float2(750); defaultValue: float2(0); >; //Input image input image4 src; //Output image output pixel4 dst; //Apply this filter void evaluatePixel() { //Vector from the current pixel to the center float2 coord_for_this_pixel = outCoord() - center; //Length of that vector float cur_radius = length(coord_for_this_pixel); //Calculate the the polar angle theta float x = outCoord().x-center.x; float y = outCoord().y-center.y; float theta = atan(y/x); //Calcule the radius using the following polar graph equation float radius = size + len * pow(cos(count*theta), 4.0) - sin(theta); //Pixel outside the graph ? color it if (cur_radius > radius) { dst = color; } //Pixel inside leave it as it was before 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_solar_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