OSX Drawing with Quartz 2d for After Effects Plugins; A Quartz Composer Laces Sample Plugin


When working on custom projects I develop a lot of single use plugins for things like data visualization. Although I’m becoming more comfortable with OpenGL, my comfort zone for drawing is really using the tools available on OSX like Quartz 2d. After Effects is my favorite compositing environment and it took a while to build a working toolkit for OSX drawing in an After Effects plugin with things like build phases, importing frameworks, Objective-C++, CGContextRef, PF_EffectWorld, PF_Handle, etc. To help folks trying to get that toolkit together I thought I’d share a starting point XCode project as well as the base drawing code for one of the data viz tools I’m working on.

The XCode project can be a useful starting point for a developer interested in these kinds of projects. It includes linked frameworks, a reasonable memory allocation scheme (I think, more experienced devs feel free to point out any gotchas), a working example of how to use both CGContextRef and NSGraphicsContext and some useful drawing code.

The sample plugin is a Quartz Composer style laces plugin which can work nicely for connecting nodes or data visualizations. The included version is pretty bare bones, but if there is interest I am thinking about developing it in to a more full featured general purpose plugin.

This setup has worked for my needs and has been cursorily checked for bugs, leaks and crashers, but if you are going to use it for production work I’d make sure to attempt some pre-renders at the size, bit depth, etc. you are using to make sure there is not something I didn’t account for.

If you end up using the code in something you release, I’d appreciate a credit in the release notes. Tip of the hat to Edouard FISCHER for the original laces drawing code. Next up is a deeper dive into OpenGL, Quartz Composer, textures, and all kinds of fast drawing GPU goodness.

Laces Plugin for OSX After Effects
Laces Plugin Xcode Project For OSX

Comments

Boethos, an online GUI editor to generate JSX code for After Effects

A new year and a chance for fresh starts. Luckily, Chris Green wrote something worth pointing to with Boethos, a code generator that generates JSX code for Adobe apps in conduction with the jsLinb UI Builder. It’s very nice way to generate a slick UI with a minimum of hassle and cut down on the broiler plate code writing. What more can a dev ask for?

Comments

Zipping files by type and date range from OSX command line

I needed to zip some flash files that had changed in the last 3 days across a set of subdirectories. This is the one liner that I came up with. This is mainly for future me as this comes up all the time.

find /in/directory/ -mtime -3 | grep fla | xargs zip foundFiles

find /in/directory/ -mtime -3 finds all of the files changed in the last 3 days. -mtime has a nice set of options.

grep fla finds the flash files. Regular expressions can get really complicated. This one isn’t, so it’s possible that it might match unintended files. Run up to this part to see if it will grab your files of interest so you don’t zip a bunch of unnecessary files.

xargs zip foundFiles xargs is a handy utility that takes arguments from a pipe and hands them to another program – in this case zip.

After you run this you should have a zip in your home directory named foundFiles.zip or whatever you chose to call the files.

Comments

Todd Kopriva posts scripting changes in After Effects CS5

Not sure how I missed this when he first posted, but Todd Kopriva has posted a nice rundown on all of the scripting changes made in After Effects CS5. Also glad to hear there will be an update to the Scripting Reference docs that were getting long in the tooth. Todd and Jeff Almasol do a great job with supporting the scripting community around After Effects.

Comments

A PixelBender Rounded Rect Generator for After Effects

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.

Comments (5)

Building Animated Lower Thirds in Photoshop

An AdobeTV segment on a Photoshop/Premiere Lower Third workflow. There is a lot to like about Premiere Pro. I’m thinking about taking a deeper dive into a pure Adobe edit workflow to see if the Adobe Über-integration is worth the mono nature of that particular ecosystem.

Comments

64 bit issues running osascript from terminal

If you use osascript to run applescript from the command line, you may have run into errors looking something like:

Error loading /Library/ScriptingAdditions/Adobe Unit Types.osax/Contents/MacOS/Adobe Unit Types: ... no matching architecture in universal wrapper

This is due to osascript running in 64 bit mode and being unable to load a 32 bit addition. A quick fix is to force osascript to use i386 architecture, like so:

arch -i386 osascript path/to/applescript

In addition, you can now eliminate the error referenced above by downloading the latest 64 bit Adobe Unit Types.osax from the Adobe site.

Here’s hoping the 64 bit transition goes smoothly for all involved. I’m thinking the performance payoffs will make these little workflow snags worth the effort.

Comments (1)

ProRes, After Effects, Final Cut And Gamma Shifts

Todd Kopriva posts a handy guide on how to avoid gamma shifts in an After Effects/Final Cut workflow using ProRes 4444. Gamma shifts have been the bane of my existence over the years and Todd gives a nice step-by-step and points to some good supporting resources.

Comments

Creating Workflow Tools for the Flash IDE Session at Adobe Max

Adobe just posted tons of great sessions from Adobe Max. I found this session dealing with workflow, JSFL, Flash IDE panels, etc. particularly interesting.

Comments

UV Mapping and After Effects

Jerzy Drozda (maltaanon), in his usual understated way, introduced Youveelizer his plugin for integrating UV Mapping in After Effects via a Pixel Bender plugin. It’s a really nice, tightly integrated plugin/workflow/training in the maltaannon style.

If you’d like to explore the UV Mapping concept in a developer style with a little less hyperbole, take a look at AE: Projecting a Movie onto a Complex Surface where David van Brink walks you through his experiments and includes a sample AE project.

Pixel Bender is really exciting. A very accessible kernel-style image processing platform without the baggage and overhead of digging into the AE SDK. There is also a useful subset of the kernel language that works in Flash, like these 3D Normal Mapping experiments. Give it a try.

Comments (4)