Archive for the 'Vidget – Download' Category

Back and Forth

Back and Forth screenshot

This is a simple Mac App which lets you play a movie both forward and backwards simultaneously to  explore the serendipitous relationships between different parts of the film, the framing and editing. There are no controls other than loading, starting and stopping the movie.

It was inspired by a post on Tomorrow Museum which describes a screening of The Shining where the film was projected both forward and backwards on top of one another.

It’s not just for purpose of spectacle that this film was projected this way; it seems that Kubrick filmed (and edited) with an intuitive balance and geometry. Objects in the two layers of projections routinely matched up with each other, characters were positioned in similar places far too often to be chalked up as odd coincidence. The film is a mirror, and to appreciate it one must first determine on what side of the mirror a particular scene is taking place.

The app was built using Quartz Composer and Xcode and requires MacOS 10.6.

It’s been a long time, but I used to make these things all the time when I was working on my Masters project, I called them ‘Vidgets’.

You can download the app here. I’ve also put the source files up on GitHub here.

Let me know what movies you find which work well played back and forth.

Disclaimer: HD movies tend to take a lot of CPU/GPU, especially when playing backwards and may not run smoothly. Also, I made this in an afternoon/evening with minimal testing so it’s not guaranteed to work or to not blow up your computer. Probably best to save what you’re doing before you try it!

3D Particle Screen Saver

Click image to play (28Kb Quartz Composition in QuickTime wrappper, requires MacOS 10.4)

MPEG 4 – h264 version (1.9Mb) Requires Quicktime 7 or alternative player such as VLC.
Quartz Composition file (64Kb) – Open in Quartz Composer to see how it works or move to ~/Library/Screen Savers/ to use as a screen saver.

Technorati Tags: ,

Interact with Quartz Compositions in Safari through JavaScript

mDimension Technology have developed a plugin for Safari which lets you not only view Quartz Compositions in a web page, but also interact with them via JavaScript. This is very neat!

So far I’ve been experimenting with creating custom applications (Vidgets) in Xcode which control Quartz Compositions, this plugin appears to give me most of the same functionality within a web page. To control and manipulate the composition, first you must follow the same methods of ‘publishing’ inputs and outputs from a composition as described here.

View source on these pages to see how to send and receive information to and from these inputs via JavaScript. I’m still working it out myself!

Here is a demo page from mDimension with a Quartz Composition embedded.

Here is a quick demo I made up based on the above page. It allows you to load an image by entering its url into a field and clicking outside of the field (don’t need to press enter), and change the spinning text similarly.

A Quartz Composition embedded in a webpage, being controlled via JavaScript

Technorati Tags: ,

MIAF – LA 6: a Quartz Vidget

Screen shot showing the MIAF - LA6 Vidget controls and output

This is the next version of my live video performance (VJ) application. It is an updated version of the program I used for my recent performances at MIAF: Remains To Be Seen and Liquid Architecture 6.

Like the previous version, Bikelights: a Quartz vidget, MIAF-LA6 features one window with controls on the left hand side and a display on the right. It is designed so that I can have the controls on my laptop screen while sending the video from my second monitor output at 640 * 480 to a projector by arranging my monitors like so and dragging the window across.

Screen shot showing monitor arrangement

At some stage I’ll work out how to do two separate windows but this works well for the moment :-)

Screen shot showing controls

Where the previous version only allowed the display of one source image at a time, this version lets the user layer two separate images through a number of effects and outputs. The left hand side of the control area is split two (Source Clip A and Source Clip B). Each area contains four empty text fields where Quicktime movies may be dragged and dropped from the Finder (click in the field to activate it, drag and drop, then hit Enter to set).

Below the four movie path fields is a fifth path field which allows the user to specify a local path to a folder of still images. Again folder paths may also be either typed in manually or dragged from the Finder. After pressing Enter the “# of Images” field should update, letting you know how many images are in the folder you specified. To the left of this field is the “Sequence Duration”, this lets you specify how long (in seconds) it should take to cycle through all of the images in the folder. For example, if you have 8 images and want them to play through at four frames per second second you should set the duration to 2 seconds.

To the right of these fields is a large vertical slider, this lets the user select any one of the four Quicktime Movies or the folder image sequence to process and display.

To control the playback speed of the Quicktime movies, check the “Clip Speed Control” box and move the horizontal slider below. If unchecked the movie will play out at normal speed. If checked the speed will be controlled by a combination of the slider position and live audio analysis (if you have a microphone set up). The far left of the slider is 0 * original speed, the far right is 5 * original speed. If a microphone is connected, the video will jump up to one second forward through the clip with the loudest audio peak.

Below the speed controls are the image controls. These controls allow the user to adjust the saturation, brightness, contrast and colour angle of the clips or image sequences. To leave the Quicktime movie unaffected uncheck the “Image Controls” box.

On the right hand side of the control area is the output stage, the “Renderers”. Each renderer may be switched on and off via a check box and be used to display either source A or source B (or a combination of the two in the case of the “Billboard” and “Inset Image” renderers).

Download miaf2vidget.zip (Mac OS 10.4 required)

Download miaf2quartz.zip (Quartz Composer file)

Download miaf2xcode.zip (Xcode project)

This work is distributed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 licence.

Technorati Tags: ,

Bikelights: a Quartz vidget

One of the coolest things I’ve discovered about Quartz Composer lately is the fact that you can use it (in combination with Xcode) create stand alone applications with custom interfaces all without having to know any ‘proper’ programming. So, here’s one of my first experiments….

This vidget is a simplified version of a larger Quartz Composer patch I have been using to perform with recently. It allows the user to import a number of Quicktime files or still images and apply a number of effects to them.

Bike Lights Vidget Screen Detail

On the left hand side of the window are five text fields which store the local path to each movie file. To add your own clips, simply click in the field and then drag the movie’s icon from the finder into the field and press enter.

Just to the right of these text fields is a selection slider, which is used to select which source clip is to be effected. The arrow will snap to each of the clips as you slide or click it.

Below the and to the left are more sliders which control the clip’s playback speed, saturation, brightness, contrast, and hue angle. All of these work in real time to adjust the display of the clip.

To the right of these image controls are check boxes for the different rendering effects. They are ordered from top to bottom in terms of the layers onto which they are drawn. The top three have optional black ‘clear’ backgrounds which block out the layers below.

Expanding audio renders the clip onto three layers, red, blue and green and uses live audio input to resize the three layers to produce a coloured motion blur effect.

Particle system
renders the clip onto hundreds of small layers which explode out from a randomly selected point on the screen.

Slow moving layers renders the clip onto four layers which crop the image and oscillate in 3d space based on a combination of audio input and low frequency oscillators.

Inset Image produces a ‘picture in picture’ effect which is manipulated by audio input.

Bike Lights Vidget Screen Shot

Download (requires Mac OS X 10.4).
BikeLights Clips (these tiny lo-fi clips of my bike lights were shot with my phone and are the reason for the name, try them out)
Quartz Composer file
Xcode Project

This work is distributed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 licence.

Technorati Tags: ,

Quartz Quartz Quartz ?

I’ve been having a good play with Quartz Composer over the last couple of weeks. It is very exciting and a bit scary at this late stage of my MA research: “Does it make what I’ve been doing for the past two years redundant?”; “Should I drop the whole interactive QuickTime thing and start from scratch in this new environment?”; “Should I ignore it for now and continue with QT because it is cross platform and more accessible?”.

In many ways it lets me do what I have been doing, experimenting with, and wanting to do (real time interactive online video) much more quickly and with exciting new visual results. In some ways it makes basic QT redundant but it is quite a different beast.

QuickTime excels on the network. Child movies can be sourced from anywhere, XML and QTlists while a pain to set up sometimes are very powerful and I’ve only really scratched the surface of their potential when combined with server side scripting such as php. Quartz Composer is much more at home on the desktop. It can import still image files from a URL but not movies. It can read RSS very easily, but is designed for human readable text and requires custom scripting to deal with generic XML files and attributes. I have had some success getting QC to load movies from the network via a local QuickTime link file pointing to a URL, but the targeting it is local, relative to the QC composition. It seems this link is lost if the composition is exported to a .mov file.

Here is a quick example (requires Mac OS 10.4). Apologies for the cheesy kaleidoscope imagery :-) once downloaded and unzipped, the .qtz file should play in Quartz Composer, importing link.mov which points to a video file on my server. The zip file is about 4k.

The cool thing is, in many ways this (Quartz Composer), builds upon what I have been doing in QuickTime and is mostly playable by both the QT player and plugin. While the linking to movie files online is problematic at this point, surprisingly live video and audio inputs are supported even in the QuickTime browser plugin! Here is an example which takes a live feed from a FireWire camera, layers it over itself on 3 differently coloured layers (red green and blue) and scales in real time based upon audio input from the computer’s built in microphone. Link to livergb.mov. This has been tested in Safari with a Sony HandyCam and my PowerBook’s built in microphone. Here’s the source .qtz file. While live video input into a movie playing in a browser is pretty exciting, unfortunately more simple things like keyboard and mouse input are missing.

Stay tuned for more examples as I play more…

Vidget 3.5


This is the latest version of my Quicktime vj/image search app. It now works as two separate movies which talk to eachother. Click on each of the images above to load in Quicktime Player.

More details, instructions etc soon (i’ve gotta race to the library to return some very overdue books!).

Inspiration

I recently completed work on an experimental internet radio program with Hannah Miller and Kate Eccles. Hannah and Kate are final year Media students at RMIT majoring in Radio and TV production. My role in the production was to take various pieces of audio, video, still images and text, and create an interface which would allow the user to mix and match the elements in an exploratory, non-linear way.

The result of this work is a program called “Inspiration”, which features interviews, live footage, sound recordings and lyrics from Reset://0 a Japanese influenced Melbourne band.

The program was authored in LiveStage Pro and is a Quicktime file that consists of a sprite track, several movie tracks and a text track which features lyrics. The above image shows the partially completed work as I was assigning sounds to various non-square shaped roll-over buttons. The idea was that rather than presenting the user with a list of options, or even a grid of non-labelled options, the work should encourage the user to explore the screen space with the cursor, almost like they are feeling their way in the dark. To give the users some feedback, and a little direction as to where may be a good place to explore, I used Hanna’s fire twirling image as a guide. I placed invisible sprites over the background image which reacted to the “MouseEnter” event, triggering sounds which played in specific movie tracks, and changing the sprite image for the background so that different parts of the fire twirling would be illuminated and hi-lighted.

You can view the completed work in context on the interadio site. Or, to go straight to Inspiration(requires Quicktime, a fairly recent computer and a decent broadband connection – 15Mb)

Vidget 3

This is the latest version of my interactive networked video project.

Click on the image to load Vidget 3 in Quicktime Player. (It is quite small but very processor intensive – especially as it first loads)

This version is a mix between the my first vidget which featured a text based interface for mixing up to three video clips on top of eachother, and my Quicktime Flickr photo viewer which let you search for and view images based on a search word.

The interface has been redesigned and now features a grid of 25 draggable images which represent video clips. These may be dragged and dropped onto three coloured ‘layers’. The blue layer is the uppermost with green below and red at the bottom. Each of these layers has a number of ‘graphics modes’. Like Photoshop layers, these may be combined in a number of modes, ranging from fully transparent to fully opaque. Each of these layers also has a number of playback controls which allow the user to play the clip faster or slower, forwards or backwards and step through frame by frame.

To the right of the three colour layers and their controls is a small white text field. This allows the user to search for images from Flickr. The ten most recent pictures tagged with the search word entered are loaded as thumbnails below. These thumbnails may be dragged and dropped onto any of the layers and combined with other moving and still images.

I have resized the output movie area so that everything fits on one screen.

Behind the scenes, the vidget has also been greatly updated. Rather than being limited to a set number of video clips determined at the time of authoring, this version dynamically loads all content including thumbnails. The names of these files are drawn from an XML file. This file may be updated with a simple text editor to add or delete more clips. The movie automatically loads the first 25 thumbnails from the XML list as it initially loads but may load the next 25, and the following 25 via the 1, 2 and 3 buttons at the top right of the controls.

At the moment the whole movie pauses whenever thumbnails are loaded, either via a Flickr search or by skipping to the next 25 thumbnails of video clips. I am working on ways around this.

The LiveStage Pro source files may be downloaded here: vidget3.zip

Quicktime Flickr photo viewer

Click image to load in Quicktime Player (it seems to be a little funky in a browser)

This is a little Quicktime movie that lets you view photos from Flickr, a photo sharing and social networking site. When users upload their images they associate them with tags, so a picture of a tree may have the tags ‘tree’, ‘green’, ‘eucalyptus’ etc. The entire database of photos is searchable by tag, by author, by series and other organisations. Each of these has a RSS or ATOM feed associated with it. This is what I am using here to access the 10 most recent uploads for a given tag.

To search the site and view the photos, just type a tag, say “cow” (no quotes) into the small white text field and press return. If you press return without entering any text you get the 10 most recent uploads from any category. Once the thumbnails load you can click to view at a larger size on the right.

The movie uses Quicktime’s ability to read and parse XML files such as RSS feeds and access files from the network.

Source files and more detailed explanation soon…

Vidget 1: an interactive networked VJ application for Quicktime

Its been a bit quiet around here for a while and this is why. I’ve been working pretty solidly on this piece for the past couple of weeks leading up to a gig I co-organised last week. Segmentation Fault is a semi-regular experimental music & visual night we put on every couple of months and proved to be a good motivation (ie. deadline) to get a work together for. in my research I am mostly interested in applying VJ aesthetics and methods to the desktop environment where the user becomes the performer, but its always fun to perform in front of an audience of humans in a room.

Now its time to release this draft to the world and see what people think. Click on the images below to load the two parts in Apple – QuickTime Player.

The scrambled looking black, white and green image will load the ‘output’ movie. This is the movie to be projected on a screen or viewed on a second monitor. It is designed to run at full PAL resolution (720 * 576) to suit the TV output of my laptop. If you want to try it out on a single monitor setup, you can load the movie and select ‘Half Size’ from the Movie menu in Quicktime Player. This movie is really just a kind of holder for up to three other movies. To load different clips into the ‘output’ movie you will need to use the ‘interface’ movie below.

This movie controls which video loop is loaded in which layer of the output movie. Along the top of the window are the numbers 1, 2 and 3. These represent the three layers with 3 being the ‘highest’, 1 the lowest and 2 in between. Next to each of the numbers are playback controls for each layer. Once clips have loaded they may be played forwards and backward, in slow and fast motion and stepped through frame by frame. Next to the playback controls are the graphics mode controls. These control the ways in which each of the layers are blended.

‘Blend 0′ means the clip is completely transparent. It is probably a good idea to switch to this setting if you are going to load a big clip as it will take a while to load and display a still image whilst it is doing so. ‘Blend 100′ means the clip is 100% opaque so any other clip below it will not be seen.
‘Add Max’ adds the bright portions of the clips image over the clips below, leaving the dark areas transparent. ‘Add Min’ adds the dark portions of the clips image over the clips below, leaving the lighter areas transparent. ‘Sub Pin Blk’ subtracts the bright areas of the clips image from the ones below so white snow on a black background will result in black snow on a transparent background. ‘Inverse Or’, ‘Exclusive Or’ and ‘Inverse Exclusive Or’ produce other effects but to be honest I’m still not sure exactly how they work :-) .

These graphics modes probably won’t be much fun to play with until some different clips are loaded into each of the layers. To do this I have designed two different patch loaders. If you click on the 1 or 2 with red # symbols next to them the # will change to a *, telling you which loader is active. The first thing to do is select which layer or ‘channel’ to load the clip into. These are selected by clicking the large 1, 2 or 3 at the top. Next a clip may be selected from the list at the bottom half of the controls. The clip’s name and id number are displayed and when the ‘Do It!’ button is pressed the clip will start to load. (If you are wondering why it is called ‘Do It!’ go see Starsky and Hutch :-) )

Note: there may be a couple missing – such as the ‘live input’ at the bottom right, so if you get a ‘broken movie’ image just try another clip.

The Livestage Pro project files can be found here: interfaceproject.zip outputproject.zip

Quicktime Blogroll

Using the same techniques as before, this movie accesses my BlogRolling blogroll RSS feed. More on this later – time for bed.

Random Site – An XML Reading Quicktime Linker Movie

I’ve finally got my head around getting Quicktime to read XML files!

This has been a long and frustrating process as for a while any mention of XML would cause LiveStage Pro to unexpectedly quit. I’m still not sure what was going wrong there but I think the key to making everything work smoothly was using lots of strings to remember the paths to different information stored in the XML.

Here it is:

Continue reading ‘Random Site – An XML Reading Quicktime Linker Movie’

Text to String

This is a little movie I made to test how Quicktime deals with real time text input. It is also the first step in a project to dynamically source video material from any URL. In future examples I will use this same method to paste a URL and load it into another window.

Click the poster movie to load the real one. Click above the line and enter some text. The movie copies the contents of the top text track to a string and adds it to the start of the bottom text track. I initially had the movie execute this action only when you clicked. In a purely ‘functional’ interface this is how I would do it but I wanted to stress the real time aspect of the process so I have the movie add text on the ‘Idle’ event handler. This means the text will start cascading down the second track as the user types without waiting for them to finish.

The LiveStage Pro source files can be downloaded here.

Remote control 0.2

CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">



CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">



Click the poster movies above to load the real ones. The second one will take a little while to load (3.9Mb)

Alternatively (recommended) download the two files, ControlTOBE.mov (Controller) and TOBE.mov (Player) and open them both in Quicktime Player.

Ok, this is a half finished draft of a basic Quicktime vision mixer. Like the inter-movie text communication movies I posted earlier , this project comes in two parts: one movie to control another. I actually created the text sender movies to troubleshoot when I was making this movie.

The ‘player’ movie contains three video tracks. The ‘controller’ movie features a number of clickable sprites which tell the ‘player’ movie what to do. By clicking on the green or red buttons on the left hand side of the ‘controller’ the tracks in the ‘player’ movie may be enabled or disabled. In the middle of the ‘controller’ movie there are two gradients with a percentage number, these control the opacity of each of the two ‘upper’ video tracks. By clicking on the gradients at various different places along the horizontal the numbers should change and the tracks should fade in or out. On the far right of the ‘controller’ movie is the ‘invert’ button. This inverts the top video track so that white is black and black is white etc.. The other button at the bottom of the ‘controller’ is the ‘add’ button. It is the latest addition and it also controls the top movie (I’ll move it up top in the next version). Rather than simply inverting the video track, the ‘add’ button produces an additive effect (like a Photoshop layer) which changes depending on the presence or absence of the underlying two video tracks.

This draft was designed as an experiment in building a VJ instrument in Quicktime with Livestage Pro for a recent Segmentation Fault gig I was organising. The ‘player’ movie is designed to automatically go to full screen on the video output of my laptop while the ‘controller’ sits on my screen out of sight. I built a more complicated version with about 20 different video tracks for the gig but unfortunately most of the effects such as fading in and out and layering decided not to work on the night. I think I’ve worked out the problem so I’ll post a new version soon.

The buttons usually take a couple of clicks to get going but they should work after that.

Inter-Movie Text Communication

This is an experiment in inter-movie communication. With Quicktime a movie can send information from one movie to another. The movie files can communicate when they are either embedded into one web page (like this page) or when they are open in separate windows in the Quicktime Player application (you can download the two movies to test this).

In this case the orange movie on the left sends some text across to the white movie on the right. While this may not seem all that amazing, it could be sending much more interesting information and the movie receiving the information could be processing or interpreting it in interesting ways. I’ve chosen to send simple text just because it it is a very handy way of testing if a script is working.

CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">

The first movie xtexttestsender.mov is made up of a sprite track and a text track.

The sprite track contains one sprite, which has the following script assigned to the “Mouse Click” event.

MovieNamed(“xtexttest.mov”).TrackNamed(“Text 1″).SetTextEditstate(kscriptediting)
MovieNamed(“xtexttest.mov”).TrackNamed(“Text 1″).ReplaceText(“BANG”, 0, 0)

The second movie xtexttest.mov is simply a single text track. The important things are that the movie is called “xtexttest.mov” and that the text track is named “Text 1” so that the above script finds its target. The first line of the script is telling the track named “Text 1” in the movie named “xtexttest.mov” to make the text field editable by a script, setting it to “kscriptediting“. The second line is telling the movie to insert the text “BANG” into the same text track. The ““BANG”, 0, 0” tells the movie not to overwrite the text which was previously in the track. If we had changed the first number to 2 the first two letters of “Here” would have been removed, if the second number was two the last two letters would have been removed.

I have included the LiveStage Pro .lsd files for the two movies here: xtexttestsender.lsd xtexttest.lsd

So anyone with a full copy of LSP or even a demo can have a play with my scripts. In this case the script is very simple, but I’m starting to post all my .lsd files so you should be able see the scripting getting more complex as I learn more.

Brick style

OK, this is a very basic example of what you can do with a little bit of scripting in Livestage Pro:

CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">




The whole movie file is only 17k and thats mostly taken up by the background image. The light grey rectangle (or paddle) should follow the cursor and the little red square (ball) will bounce around the square. If the ball hits the ground its game over, but you can get it going again by clicking on the paddle.

vog001

My first attempt at creating an interactive web movie:

CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">




Click on the image to load the movie (2.1 MB).
Move your cursor to the right to play fast forward and left to slow rewind.
Warning the movie is quite loud and has no volume control!

The idea is to create a kind of scratching effect, like a very basic video turntable.