Why Rounded Rects? Because Steve Jobs says they are everywhere. And because a cursory search didn’t find anything for Pixel Bender. Use this plugin to generate a solid color rounded rect or sample footage to easily add rounded corners to your footage.
Tip of the Hat to David Van Brink for his Pixel Bender efforts and especially for making me think of the generative possibilities of Pixel Bender in addition to image processing. And to Greg Best whose Core Image Kernel is the basis for this.
<languageVersion : 1.0;> kernel RoundedRect < namespace : ""; vendor : "Creative Workflow Hacks: Dale Bradshaw, http://creative-workflow-hacks.com"; version : 1; description : "Generates a Rounded Rect given an Upper Left coordinate, a Bottom Right coordinate, a Corner radius, and a Color or Sampled Footage"; displayname: "Rounded Rect"; > { input image4 image; output pixel4 result; parameter float4 color <defaultValue: float4(1,1,1,1); aeDisplayName: "Rect Color"; aeUIControl: "aeColor";>; parameter bool transfer<defaultValue: false;aeUIControl: "aeCheckbox";aeDisplayName: "Sample Footage";>; parameter float radius<defaultValue:25.0;minValue:0.0;maxValue:100.0;>; parameter float2 upperLeft<aePointRelativeDefaultValue: float2(0.01, 0.01);aeDisplayName: "Upper Left";aeUIControl: "aePoint";>; parameter float2 bottomRight<aePointRelativeDefaultValue: float2(.98,.98);aeDisplayName: "Bottom Right";aeUIControl: "aePoint";>; void evaluatePixel() { float2 p = outCoord(); float dist = 0.0; dist += (p.x < upperLeft.x + radius) ? pow((upperLeft.x + radius) - p.x, 2.0) : 0.0; dist += (p.y < upperLeft.y + radius) ? pow((upperLeft.y + radius) - p.y, 2.0) : 0.0; dist += (p.x > bottomRight.x -radius) ? pow((bottomRight.x -radius) - p.x, 2.0) : 0.0; dist += (p.y > bottomRight.y - radius) ? pow((bottomRight.y -radius) - p.y, 2.0) : 0.0; dist = sqrt(dist); dist = clamp(radius - dist, 0.0, 1.0); if(transfer) result = sampleNearest(image,p) * dist; else result = color * dist; } } |
Download db_roundedRect.pbk Pixel Bender kernel
This Kernel is set up as After Effects plugin, but it should be relatively easy to setup for Flash. I’ll update it when I get a chance to check it out.
jcburns said
Very cool example of PixelBender’s power. I hesitate to say that I’d probably stick with shape layers for my real-world roundrect needs…however, this could be easily modified to make the Shape That I Know Not Its Name, the rectangle where two opposite corners are round, the other two are straight. I use that puppy all the time.
Jeff Almasol said
You can place the effect in a specific category by using the category:”categoryName” kernel metadata. FYI, the image disappears when radius=0.
Dale said
Thanks Jeff,
I’ll make those changes.
Dale
David Van Brink said
🙂 thanks for the nod!
And this looks kind-of surprisingly handy, actually.
I like jcburns’ suggestion for the, uh, Unknown Shape with only two rounded corners.
And and and (you know you’re on to something when the And’s start piling on) Clip (“sample”) but also stroke (width-param) for all those TV-frame-insert layers…
Neat.
A PixelBender Rounded Rect Generator for After Effects | workflow directory said
[…] more: A PixelBender Rounded Rect Generator for After Effects Uncategorizedafter effects, bottom-right, color, footage, image, kernel, pixelbender, […]
Bruce Walker said
Hi,
I’m a newbie to scripting, but wanted to try your rounded rec generator anyway.
I copied and pasted the code into AE’s ‘extended script toolkit’ editor and it seems to have a problem (in the debugging window) with line 12 and 15.
input image4 image;
parameter float4 color
I’m using cs5.5 on a mac tower. Did the scripting language change or have I just missed something obvious?
thanks for any help,
cheers
bruce
admin said
Hey Bruce,
I haven’t spent a lot of time on Pixel Bender since it will be deprecated across the whole Adobe line. You might try looking into glsl or core image since you’re on a Mac. The original code for this is a Core Image kernel.
Best,
Dale