maltaannon.com

Pixel Bender and aeUIControls

Posted on 05. Sep, 2009 by Jerzy Drozda Jr in Blog

After publishing Introduction to Pixel Bender 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. 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";
aeUIControl:"aeAngle";
>;

• 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;
aeUIControl:"aePercentSlider";
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;
minValue:0;
maxValue:2;
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;
aeUIControl:"aeOneChannelColor";
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: pixelbender, programming