The first step is to link the Processing video.jar file to your project. The following outlines how to go about it (assuming you’ve already created your project).

1. Navigate to /Application/Processing/
2. Right click the Processing icon and choose Show Package Contents (opens new Finder window)
3. Navigate to Resources/Java/libraries/video/library/
4. Copy the file called video.jar
5. Navigate to your Processing project
6. Create a folder called lib (can be called anything you want) and paste the video.jar file there
7. Back in Eclipse, right click your project file and choose Properties
8. From the list on the left choose Java Build Path
9. Click the Libraries tab
10. Click the Add JARs… button
11. Navigate to the lib folder where you pasted the video.jar file
12. Select the video.jar file and press OK

Project Preferences: Java Build Path Dialog

Select JAR Dialog

This should enable you to import the video package into your project. Now… if you are running Snow Leopard there is another step that you need to follow otherwise when you try to instantiate either a Capture or MovieMaker object your app will crash w/ an error containing the following message:

Caused by: java.lang.UnsatisfiedLinkError: /System/Library/Java/Extensions/libQTJNative.jnilib: no suitable image found. Did find: /System/Library/Java/Extensions/libQTJNative.jnilib: no matching architecture in universal wrapper

The reason you are seeing this error is that the Java install shipped w/ Snow Leopard will, by default, open a 64-bit version of the JVM and the processing.video.* package has some dependencies on the 32-bit JVM. I am not clear on the details of the dependency but it is clear that this crash is due to a difference between the JVMs.

Here are the steps to fixing this problem:

1. Right click your project file and choose Properties
2. Choose Run/Debug Settings from the list on the left
3. There should be at least one build configuration in the launch configurations list, choose it and click the Edit button
4. Click the Arguments tab
5. In the VM arguments field and this-d32 and click the OK button

Project Preferences: Run/Debug Settings Dialog

Edit Run Configuration Dialog w/ Arguments

Now that you have included this argument Java will open your app in a 32-bit version of the virtual machine without problems. I’m sure there is a way to make this the default behavior for Java applications, but because this problem is specific to Processing I prefer to just set the preferences on a per project basis.

AudioSpot coordinates: x:230, y:175, z-range:2-5
Keyboard Controls: i: zoom in, o: zoom out, a: pan left, s: pan down, d: pan right, w: pan up

Download Source Code: audiospots_basics_CS3_2009_05_07.zip

When the blue circle in the image is moved to the center of the viewport and the zoom depth is between 2 and 5 audio begins. Once the circle is either moved away from the center or the image is zoomed beyond the given range the audio fades away.

In keeping with the overall design of the overlay extension this addition consists of a “layer” ( AudioLayer ) that listens for events from the zoom image and manages the AudioSpot object(s). It’s interface is consistent with the HotspotLayer in that there are methods for adding and removing AudioSpot objects. Like Hotspots, all coordinates are relative to the original size of the image.

To accomplish bounds checking each AudioSpot in a layer contains a ProximityGate object. The gate opens and closes based on the distance between the point in the image currently at the center of the viewport and a given point. As mentioned the proximity gate can define either a radial or rectangular region. The ProximityGate classes ( RadialGate & RectangularGate ) are abstracted from the AudioSpot code. This means that can be used in other situations where some functionality needs to be invoked based on proximity.

I’m looking forward to implementing the audio classes as ambient accompaniment to large zoomable collages. I’m also quite excited to see what others come up with. If you find these classes useful and end up using them in a project let me know! I’m amped to see what people come up with. If you have thoughts on improvements or find bugs don’t hesitate to leave a comment.

Click the blue hotspots to pan and zoom:




Dowload Here: overlays_basics_CS3_2009_04_15.zip

Hotspot Examples
Polyline Example

Download Source Code And Examples:

http://code.google.com/p/ghostinteractive/

Overlays

I have been using the term “overlay” as a catch-all for the different types of visual elements I’ve been working on. Currently there are two types of overlay classes:

Hotspot:
This element is meant to be used as a base class for “marker” elements. These are typically clickable points of interest which when clicked pan, zoom or pan and zoom the image to a specific position and/or depth.

PolylineSegment:
This element uses the flash.display.Graphics class to draw paths around a zoom image. The paths can be used for a number of things including map routes, path based navigation, relational links( think node based graphical displays ), etc… Each connecting line can have unique attributes such as color, thickness, alpha, caps style and others properties related to the Graphics line-style.

Layers

To display the different types of “overlays” each type is managed by a unique “layer” class. This is somewhat of a departure from typical mapping software models. Most mapping software implements a single overlay layer to which any type of overlay can be added. As we add classes to the overlays package we may adopt a similar system but for now we are more interested in a lean implementation than the overhead of unneeded abstraction. Below is a short description of each layer type.

HotspotLayer:
The HotspotLayer manages the positions, depths and visibility of Hotspot sub-classes. It also provides the functionality for zooming and panning to specific points within the image.

PolylineLayer:
This layer contains a list of PolylineSegment sub-classes and draws them. Each time the zoom image pans or zooms the layer redraws the shapes relative in size and position to the original image size.

Simplified code example:

var msImage:MultiScaleImage = new MultiScaleImage();
var hsLayer:HotspotLayer = new HotspotLayer( msImage );
var plLayer:PolylineLayer = new PolylineLayer( msImage );

hsLayer.addHotspot( new CustomHotspot( params:Object ) );

plLayer.addSegment( new PolylineSegment( new Point( 1200, 300 ) );

addChild( msImage );
addChild( hsLayer );
addChild( plLayer );

Download the examples for complete code and further explanation. If you happen to find these classes useful or have suggestions for additions and/or changes leave a comment and let me here about it. If you would like to contribute to the project drop a line at ghostinteractive@gmail.com.

// -- String with tab, multiple spaces and newline char
var testString:String = 'here is a tabthere are six spaces      here is a new linennext line';

// -- Test expression
var whitespace:RegExp = /(\t|\n|\s{2,})/g;

trace( 'testString pre-replace: ' + testString );

// -- Re-assign the value of testString to the result of replace() mehtod
testString = testString.replace( whitespace, ' ' );

trace( 'testString post-replace: ' + testString )

The replace() method turns all multiple spaces, tabs and newline characters into single spaces.