Revisions for JavaScript In Quartz Composer

Javascript in Quartz Composer can be a somewhat tricky subject. On the one hand, it's a powerful language that allowed for complex controls. On the other hand, Quartz Composer users typically aren't programmers, so the power is lost.

Before we begin our sojourn into Javascript in QC, let's briefly go over what Javascript Isn't, and what it Can't do.

• Javascript (sometimes called ECMAScript) is NOT Java. It's not related at all to Java, and learning Java will not make you a good Javascript programmer.
• Javascript cannot process images. You may see JS in other applications handle per-pixel operations, but this isn't the case in QC -- it's not possible, so don't bother.
• Javascript is slow -- complex scripts will slow down your composition significantly.

Now, on with the show.

In Quartz Composer, data comes in 7 flavors:

• Booleans
• Indexes (positive integers)
• Numbers (positive or negative non-integers)
• Strings
• Images
• Colors
• Structures

There's an 8th type, called "Virtual", which can pose as any of the above.

In Javascript, data is represented by "objects." An object can be as simple as a single letter, or as complex as a nested structure of structures.

Javascript in Quartz Composer can do interesting things with Booleans, Indexes, Numbers, Strings, and Structures. We'll go over some brief examples to show how this works.

Booleans

Booleans are the easiest type to work with -- they have only two states: 0, or 1. (true and false, on and off, you get the idea).

Here is a simple javascript that compares 2 numbers, a and b, and returns True if a is larger than b.

function (__boolean boolOutput) main (__number a, __number b)
{
   var result = new Object();
   if(a > b)
      result.boolOutput = true;
   else
      result.boolOutput = false;
   return result;
}

BoolJavascript.qtz

Indexes

Indexes are also very simple; they can represent any integer (whole number) value between 0 and 2,147,483,647 inclusive (that's 2^32-1, for those keeping score).

Here's a javascript that counts each time it executes

var count = 0;
function (__index indexOutput) main (__number ignored)
{
   var result = new Object();
   result.indexOutput = count;
   count = count + 1;
   return result;
}

Numbers

Numbers are very similar to indexes, except they can represent fractions, and can also be negative.

Strings

Strings are collections of letters and numbers. I'll post an example for this later (or someone else can).

Structures

Generating/handling structures in Javascript requires some basic programming know-how.

The two new ideas are Objects and Arrays.

An Array is simply an indexed set of items. The indexes range from 0 to however many items there are minus 1.

For example, and Array with 4 items would have indexes 0, 1, 2, and 3.

Here's a simple example of an Array.

function (__number outputNumber) main (__number inputNumber[2])
{
   var result = new Object();
   result.outputNumber = inputNumber[0] + inputNumber[1];
   return result;
}

inputNumber is an array with 2 items, 0 and 1.

Objects are similar to arrays, except that instead of indexes, you use "keys". A key is a string or a number. Instead of using myArray[0], you could use myArray["something"], where "something" is the "key".

In Quartz Composer, structures come in 2 flavors: indexed, and keyed. Start to see a parallel? in JS, Arrays use Indexes, and Objects use Keys... So in Javascript, just think "Object = Keyed Structure" and "Array = Indexed Structure".

So in Javascript, there are 2 ways to make structures:

   var aStructure = new Array();
   var anotherStructure = new Object();

You can probably guess, but in the above snippet, aStructure will be an indexed array (0, 1, 2, ..., n), while anotherStructure will be a keyed structure (key0 : value0, key1: value1, ..., keyN: valueN).

Naming keys is extraordinarily simple:

   var keyStructure = new Object();
   keyStructure.cool = "42";
   keyStructure["rad"] = "4242";

Here we have 2 ways to set key/value pairs; we can do myStructure.TheKeyName = something, or we can do myStructure[TheKeyName]; They're different ways of accomplishing the same thing. The top version is nice if you have a specific name you want to use, while the bottom one is handy for loops.

Now we're going to get a bit crazy. So far, we've only put numbers and strings into Objects. However, you can also put Objects inside Objects.

   var myStructure = new Object();
   myStructure.something = new Object();
   myStructure.something.amazing = new Object();
   myStructure.something.amazing.here = "yes";

Any guesses what the above would produce? That's right, it's a structure with a key called "something", which contains a structure that has a key called "amazing", which contains a structure that has a key called "here" that holds the value "yes".

In Quartz Composer, that would look like this:

Preview	Attachment	Size
	NestedStructures.png	18.12 KB
	BoolJavascript.qtz	5.82 KB