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.
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
maxValueattributes, because they are ignored in this case. Besides it wouldn’t make much sense, would it?
parameter float myAngle
aeDisplayName: "My Angle";
- Checkbox Control
Checkbox only returns
falsevalues (on and off), so it also does not need
parameter bool myCheckbox
aeDisplayName: "My Checkbox";
- Color Control
This is valid as a
float4variable 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
maxValuealso makes no sense in here.
parameter float4 myColor
defaultValue: float4(1.0, 0.0, 0.0, 1.0);
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
maxValueattributes just like the examples above, but it’s also missing the
defaultValueattribute. Instead theres
aePointRelativeDefaultValueattribute. 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);
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
aeDisplayName: "My Slider";
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
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
aePopupStringattribute, but if you want to create an
ifstatement 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
parameter int myPopup
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
maxValueattributes 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
minValuewould be 0, and
maxValuewould 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
maxValueon my own, and this defeats the purpose.
parameter float mySingleColor
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.