Adobe Pixel Bender Effects – Donut Shader
Introduction
This is good news for donut lovers. We will develop a pixel shader to pixelate an input image and tile it with donut like shapes. We can control donut shape by specifying inner radius and outer radius. We can also specify the donut density which in turn determines the number of donuts used and their size.
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.
Donut Shader
The idea is simple, we just need two circles, an inner circle and an outer circle. If a pixel is inside the inner circle or outside the outer circle we color it using the background color of choice otherwise we keep the original color of the pixel at the donut center. The trick is to create a grid of circles across the image, here is the full source code:
|
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 90 91 92 93 94 95 96 97 |
kernel Donut < namespace : "8bitavenue"; vendor : "8bitavenue"; version : 1; > { //Donut density parameter float BlockCount < minValue: 1.0; maxValue: 100.0; defaultValue: 5.0; >; //Inner circle parameter float Min < minValue: 0.0; maxValue: 1.0; defaultValue: 0.25; >; //Outer circle parameter float Max < minValue: 0.0; maxValue: 1.0; defaultValue: 0.45; >; //Scale width parameter float Width < minValue: 1.0; maxValue: 1000.0; defaultValue: 100.0; >; //Scale height parameter float Height < minValue: 1.0; maxValue: 1000.0; defaultValue: 100.0; >; //Background color 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 src; //Output image output pixel4 dst; //Apply this filter void evaluatePixel() { //Calculate block size float myblockcount = BlockCount/5.0; float BlockSize = 1.0/myblockcount; float2 temp = outCoord(); temp.x = temp.x/Width; temp.y = temp.y/Height; //Calculate block position and center float2 blockPos = floor(temp * myblockcount); float2 blockCenter = blockPos * BlockSize + BlockSize * 0.5; //Pixel distance from center float dist = length(temp - blockCenter) * myblockcount; //If pixel is inside inner circle //or outside outer circle then color //it with background color //otherwise color it with the color //of the pixel at the center if(dist < Min || dist > Max) { dst = color; } else { blockCenter.x = blockCenter.x * Width; blockCenter.y = blockCenter.y * Height; dst = sampleNearest(src, blockCenter); } } } |
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_donut_shader.swf” height=”400″ width=”550″ /]
Flex Source Code
You can download the full Flex source code here. Thanks for reading.
About Author
Mohammed Abualrob
Software Engineer @ Cisco