Posterize – script plugin for Conduit

(This post was originally published on July 11, 2011.)

Over at a forum, there was some discussion about how to create a posterization effect in Conduit. There isn’t a built-in node that would do this precise effect, so I decided to write a quick plugin for the job.

Check out the Posterize plugin on the Conduit wiki. (It’s a free download, naturally.)

The effect is created in JavaScript, with a bit of GPU shader language which does the actual pixel processing at blazing speed on the graphics hardware. The JavaScript source code is commented throughout, so if you’re interested in Conduit scripting, this is a decent example of a simple pixel-crunching effect on the GPU.

It’s worth noting here that Conduit has two very different JavaScript interfaces that you can use to render graphics. The one used by this example is called Surface. It’s meant for high-performance rendering that needs to run on the GPU. (The Surface interface is designed specifically for video and effects rendering. It’s native to Conduit, you won’t find it anywhere else. Compared to sprawling 3D graphics interfaces like WebGL, Surface is a lot simpler to learn and use, although it is also more limited when it comes to the real nitty-gritty of 3D rendering.)

The other way to do graphics programming in Conduit is Canvas. This is a well-known 2D graphics interface that’s also part of the upcoming HTML5 web standard. It’s a simple and powerful API for 2D graphics with full antialiasing, gradients, etc. Canvas mostly renders on the CPU, so you don’t get direct control over GPU objects like you do in Surface. For the same reason, Canvas is substantially slower for any kind of rendering where you need to process lots of pixels. Canvas is at its best with vector graphics, but you can do some pixel-level computations with it using an Image object as well.

I’ve written some tutorials about these interfaces:

Canvas Tutorial for Conduit

Making Rain - this tutorial combines both Canvas, Surface and node-based effects in Conduit to create a rain effect

For Canvas, you can also find lots of information online. (Something that I’ve found particularly useful is the Canvas cheat sheet, which lists all the properties and calls available in the Canvas API on a single sheet.)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>