Pixel Bender and aeUIControls

Posted on 05. Sep, 2009 by in Blog

After publishing [intlink id=”1188″ type=”post”]Introduction to Pixel Bender[/intlink] tutorial where I showed you guys how to build a simple cropping plugin I got a lot of emails and comments asking specifically how to create certain types of parameters in Pixel Bender code that show up in After Effects as Angle Control, Checkbox and other UI elements, so I’ve decided to create this small list for you to help you out with this. Tea Cups With Lids Amber Rings Wholesale Tea Trays Toddler Sleeping Bags If you don’t want to read the entire post just download the provided zip for some examples.

Download: UI Controls Demo (After Effects CS4)

Basic controls
Here’s a list of basic user interface controls that look pretty much the same as expression controls.

  • Angle Control
    You don’t need to set up minValue and maxValue attributes, because they are ignored in this case. Besides it wouldn’t make much sense, would it?

    parameter float myAngle
    defaultValue: 0.0;
    aeDisplayName: "My Angle";

  • Checkbox Control
    Checkbox only returns true or false values (on and off), so it also does not need minValue and maxValue attributes.

    parameter bool myCheckbox
    defaultValue: false;
    aeUIControl: "aeCheckbox";
    aeDisplayName: "My Checkbox";

  • Color Control
    This is valid as a float3 and float4 variable type, however After Effects uses float4data type (RGBA). Even though the color picker dialog does not allow you to define the alpha value of the color you’re defining it makes much sense to use the float4 instead of float3. Defining minValue and maxValue also makes no sense in here.

    parameter float4 myColor
    defaultValue: float4(1.0, 0.0, 0.0, 1.0);
    aeUIControl: "aeColor";
    aeDisplayName: "My Color";

  • Point Control
    This is one out of two very specific controls. As you see in the code below it does not have minValue and maxValue attributes just like the examples above, but it’s also missing the defaultValue attribute. Instead theres aePointRelativeDefaultValue attribute. The key word here is “relative” because the the values are not pixel coordinates. They represent a point that is relative to the image size. For instance, value of float2(0.5, 0.5) would set the default position at the middle of the layer. However – this relative position is converted to pixel coordinates in After Effects and then those values are being used by your Pixel Bender code.

    parameter float2 myPoint
    aePointRelativeDefaultValue: float2(0.0, 0.0);
    aeUIControl: "aePoint";
    aeDisplayName: "My Point";

  • Slider Control
    This is the most basic control you can have. No need to explain how it works. Just look at the code below. Explains itself.

    parameter float mySlider
    minValue: 0.0;
    maxValue: 100.0;
    defaultValue: 0.0;
    aeDisplayName: "My Slider";

Additional controls
There are also some things that you can’t do with expression controls.

  • Percent Slider Control
    It works exactly the same as the regular slider, but the display format of the value is in percentage.

    parameter float myPercent
    minValue: 0.0;
    maxValue: 300.0;
    defaultValue: 0.0;
    aeDisplayName: "My Percent";

  • Popup Control
    This you won’t find in the Expression Controls group. It creates a dropdown menu with the predefined values. String values are held in the aePopupString attribute, but if you want to create an if statement in your Pixel Bender code than treat it as a regular array and check against index values. In this example Red is 0, Green is 1, and Blue is 2. Remember to define minValue and maxValue.

    parameter int myPopup
    defaultValue: 0;
    aeUIControl: "aePopup";
    aePopupString: "Red|Green|Blue";
    aeDisplayName: "My Popup";

  • One Channel Color Color
    I guess this one could be handy in some cases, but so far I had no use for it. This works and looks just like a slider with one difference: if you do not provide minValue and maxValue attributes then they will be based on the bit depth of your project. I guess it could be used as a threshold parameter, but if you ask me it makes no sense. For 8bpc the minValue would be 0, and maxValue would be 255. Ok. But in 32bpc I’d expect to be able to go beyond 1.0 on the slider (unlimited maxValue), however in order to do that I’d have to define the minValue and maxValue on my own, and this defeats the purpose.

    parameter float mySingleColor
    defaultValue: 0.0;
    aeDisplayName: "My Simgle Color";

What about Layer Control?
Basically there isn’t one. In order to be able to pick another layer you need to create an additional source in the kernel. After Effects will allow you to use as many additional sources as you like, however Pixel Bender Toolkit only allows two sources, so you will only be able to test your code in After Effects. The big downside is that you can’t add any metadata for this additional source, so it will always show up in the user interface as “Input 2”, “Input 3” and so on.

input image4 src1;
input image4 src2; // layer control - sort of...
output pixel4 dst;

How does it translate to graphs?
It’s all very similar, although it takes some time to figure out. Instead of listing all the parameters again in this post I’ve decided to give you two Pixel Bender files to look at. One is a simple kernel, and the other is a simple graph. Both of the files to exactly the same thing… nothing.

Download: UI Controls Demo (After Effects CS4)

Tags: ,

11 Responses to “Pixel Bender and aeUIControls”

  1. Tom Hauville

    05. Sep, 2009

    again, very awesome and useful info! I’m going to bet that the AE community sees a sudden flood of PB plugins, due to your efforts!

  2. blankman

    05. Sep, 2009

    cool stuff, thanks a lot!

  3. Dextrmania

    05. Sep, 2009

    Hey maltaannon to be honest with u i didnt like u the first time i checked out ur tutorials here but when i purchased MILG5….man,what r u?beleive it or not man,u r the best in after effects i wonder how good results u were scoring in maths in ur high school!!!

    Keep it up man pls,keep it up….

  4. AndrewYY

    05. Sep, 2009

    it’d be awesome if we could customize input2 with metadata (like aeDisplayName).

  5. Dextrmania

    06. Sep, 2009

    i have one question out of this topic maltaannon…its coz i think ur head is on this post that im asking u in this comment area.
    can u wiggle the opacity of a layer so that it is opaque at some parts of the and transparent at the others?for example lets say we have many boxes lined up and arranged so they all fit in the composition size exactly(5*5).
    can i randomly make their opacity change,but only from 0 to 100 so that they r not half opaque or so?and then use that as a mask.pls help me with this.

  6. maximumrfan

    01. Sep, 2010

    Is it possible to bunch some controls into groups like say one group being angle controls, another group being some slider controls?

  7. Chris Forrester

    16. Feb, 2011

    Great stuff just what I have been looking for. Some of the examples from the Pixel Blender manual have not been working for me or giving errors when I have copied and pasted them. Great to know there is this source of information that I know works.

    Hope to be making my own small utility plugins soon!!

    Just a shame I am behind the times on such a great tool.

    Many Thanks!

  8. Marius

    01. Oct, 2011

    Very useful info, really helped me.
    I would like to ask, like maximumrfan asked before, is it possible to create groups of controls? It would be really nice if you answer. Thank you.

  9. ferrari puma

    29. Feb, 2012

    Thanks very much, I have learned a lot from your post. Well done, really! also have a good train at http://www.ferraripumasale.com/.