QU ART Z COM POSER

in the art and motion design of futurismo zugakousaku

ian grant november 2005

ellington.tvu.ac.uk/ma/

TABLE OF C ONT EN T S INTRODUCTION Quartz Composer 4 4 PixelShox: Brief History of Quartz Composer 6 Comparison with MaxMSP and Jitter Comparison with Director / Shockwave 3D? 7 8 THE POETICS OF QUARTZ COMPOSER 10 Time-Based Imaging The Quartz Composer Audience Futurismo Zugakousaku’s “Who Are You?” (a) Description (b) Hybridity (c) Dynamics (d) Process 11 13 16 16 17 17 18 Summary 26 BIBLIOGRAPHY Texts Web Images and Sources 28 28 28 28 quartz composer in the art and motion design of futurismo zugakousaku 3 .

com/graphicsimaging/quartz/quartzcomposer. I will offer interpretations of select examples of work by Japanese web motion/graphics artist Zugakousaku (found at www. ★ with Apple’s Quicktime technology for image handling and dissemination 1 2 www.cgi?hotel&&en http://developer.apple. enabling real-time video. is playing in the development of interactive computer arts.zugakousaku.html quartz composer in the art and motion design of futurismo zugakousaku 4 .QU ART Z COM POSER in the art and design of futurismo zugakousaku Ian Grant November 2005 INTRODUCTION Screen-shots from “Hotel Margate” by futurismo zugakousaku 1 This essay will examine the role that an emerging technology. QUARTZ COMPOSER Quartz Composer (Quartz Composer) is a technology that exploits the graphics processing unit (GPU) of the host Apple Mac and integrates: ★ graphic standards as defined by Open-GL and Open-GL Shader Language.zugakousaku.com).com/index. 3D and image processing. Apple’s Quartz Composer 2 .

★ with xCode. Quartz Composer is an opportunity for interactive motion graphics artists to explore an interesting early foray into ‘resolution independent’ imaging. Apples Integrated Developing Environment (IDE) .★ data aggregation standards defined by RSS and a logic / control language defined by javascript. Quartz Composer. 3 resolution-independent 2d graphics based on PDF technologies and 3D graphics based on hardware accelerated open-GL 5 quartz composer in the art and motion design of futurismo zugakousaku . It is based on a PDF graphics/imaging model and extends from still image and text into 3D graphics with Open-GL and real-time video processing with a collection of techniques and APIs called ‘core video’. can “make data-driven visual effects. as PixelShox had a vibrant life favoured by V-Jays and live-motion graphics artists.” (Apple Developer Connection. ‘Quartz’ is Apple’s brand name for a suite of technologies internally known as ‘core graphics’. according to Apple. Quartz Composer. In an earlier iteration.allowing Quartz Composer compositions to be embedded in a wider coding environment for more complex control and interoperability. 2006). and even perform live performance animations. In addition to real-time interactions and integration with the image processing libraries Apple calls ‘core image’ 3 . ★ midi and audio input processing allowing sophisticated image and composition control by external sources and sensors.

6 quartz composer in the art and motion design of futurismo zugakousaku .PIXELSHOX: BRIEF HISTORY OF QUARTZ COMPOSER Quartz Composer is a software that elegantly combines many core apple technologies and is based on “PixelShox Studio” written by Pierre-Olivier Latour. [or] concerts. Pierre-Olivier Latour now works for Apple and Quartz Composer is a small. but significant. multimedia installations. Although it was never completed. One repeated feature request is support for arbitrary 3D objects. 4 Quartz Composer compositions integrate nicely into the Cocoa programming environment. part of a wider coding architecture 4 . An early vision for PixelShox was for artistic use “professionally in any project where interactive visuals are required: V-Jaying. Apple’s Final Cut Pro and Motion.” (Latour. utilising ‘bindings’ to make it easy to write applications that connect GUIs to visual compositions. Also Quartz Composer compositions can be turned into “Image Units’ and made available as video processing plug-ins for compatible applications. circa 2003. presentations. Quartz Composer is significantly pruned of functionality when compared with PixelShox. 2003). it is likely that the past functionality of PixelShox may be a rough roadmap of where Quartz Composer could head. like Avid’s Soft-image.

Midi and audio synthesis and output and not possible in Quartz Composer. MaxMSP/Jitter is more complex and has rich feature laden environment. plays full screen in authoring environment can be used and linked to a GUI in Apples IDE no audio out input quicktime native image video.same face . serial data. Although Quartz Composer and MaxMSP/Jitter share a visual programming environment. 7 quartz composer in the art and motion design of futurismo zugakousaku .net/qcblog/quartz-composer-for-vjs/ images video. QUARTZ COMPOSER environment MAX/MSP JITTER visual programming inter. The following chart outlines simple comparisons between the packages 5 . Playing with real-time open-GL space is elusive for artists as the programming expertise necessary is relatively advanced. audio. midi file-system internet rss 5 Source of speed / performance info: http://eskatonia.GUI building integrated saver into package.plays in quicktime or as native mac screen. midi. 3D files etc.C O M PA R I S O N WITH MAXMSP AND JITTER Quartz Composer benefits from an interface and approach that is more contemporary and has significant ease of use compared with the closest comparable software. audio.patch based programming native quicktime mov significant midi and audio synthesis output qtz .

platform authoring strengths platform specific (Mac OS cross platform 10.mature online community nity weaknesses single platform.QUARTZ COMPOSER video processing speed coding faster (direct to GPU) javascript (subset) MAX/MSP JITTER slower (CPU) javascript (subset) Open-GL Shader Lan.4 $850.allows GUI logic patches kernel programming modular logic patches cost free with Mac OS 10.compiled stand-alone audio / midi processing synthesis emerging online commu. cost.closed authoring .4) total open authoring share solutions cost. ease of use speed / performance . complexity limited 3d model support speed / performance (possible with 3rd party hack) no audio out C O M PA R I S O N WITH D I R E C TO R / S H O C K WAV E 3 D As an example to indicate the revolutionary shift between generations of software.00 functionality needs to be added with 3rd party add-ons. try creating an open-GL space with a video textured quad. spinning and resizing in response to the amplitude of an incoming audio signal in Director MX 2004.modular logic patches guage (subset) . Two extras later (with a possible expense) and two or so pages of 3D lingo you may have a result that is running after compilation and possibly without 8 quartz composer in the art and motion design of futurismo zugakousaku .

com/blog/ Import 3DS files and textures into QC .jp/quartzcomposer/ 9 quartz composer in the art and motion design of futurismo zugakousaku .see http://www. Director and Shockwave 3D has more sophisticated 3D model import capabilities.clockskew. You can only import 3DS (3D Studio Max) models into Quartz Composer with a third party hack 6 .see http://blog.livedoor. 6 Reverse engineering Quartz Composer . Quartz Composer could do the preceding task with built in functionality by dragging four patches into the editor space. zero code and take approximately 30 seconds to author.hardware acceleration.

sometimes in the form of screen-savers or in the form short cyclical.the Audience and User base for artefacts made with Quartz Composer. then a consideration of the context of reception . repeating vignettes. 2005. time-based explorations inspired by a strong illustration led graphic art. First. “Approach to motion graphics of automatism. I made all these samples at the time for less than one hour. Designer can make a motion graphics by this tool in real time.” (Zugakousaku. Quartz Composer can make a impromptu. An image is lightly created such as poetry and music. The work could be categorised as ‘sketches’ in motion graphics. quartz composer in the art and motion design of futurismo zugakousaku 10 . I want to make a work like a new surrealist of the new generation. a quick discussion of Time in Quartz Composer. translated by google) It is worthwhile to look at the aesthetic nature of the Quartz Composer technology and investigate in what ways the logical structure inherent in the software may effect the final resonance of art work made with it.THE POETICS OF QUARTZ COMPOSER This essay will now focus on an aesthetic and technical dissection of Quartz Composer as used by Futurismo Zugakousaku.

“Local” or “Patch Time” similarly starts when the patch is activated and continues.TIME-BASED IMAGING Quartz Composer stands in an interesting. complex relation to Time.starting from 0 to infinity. counts and the Midi Clock patch. According to Apple’s documentation Quartz Composer compositions “don't have defined duration or frame rates” (Apple Computers. Composition time is linear and infinite . The X position value then loops back to it’s original value not the time of the composition. stopped and reset. The animation only appears to loop because the X position is translated but ends in a position that overlaps exactly with the start position. for example. This can synchronise patch playback to. 2005): logical for a media that is designed quartz composer in the art and motion design of futurismo zugakousaku 11 . the “Interpolation” patch. but it can be controlled: started. Some patches have an option to change their timebase: Illustrated here are the “3D Transformation” and “Image With Movie” patches An External timebase also exists.

but is reset to 0 whenever the patch starts being used by the renderer patches it is connected to (i. "Local": the time passes at the same speed as the parent macro patch time.if all its parent patches have this setting. when the renderer patches Enable inputs go from False to True). "External": this adds a new "Patch Time" input to the patch through which the time can be manually specified.e. "Parent" (default): the time is simply the same as the one passed to the parent macro patch . then the time will be the same as the global composition rendering time. Timebase Controls in Quartz Composer (Apple Computers 2005b) 12 quartz composer in the art and motion design of futurismo zugakousaku .to operate in real time and perform to the best capabilities of the video hardware in the host machine.

The full screen context of Quartz Composer playing within the authoring context provides an ideal source for projected images and motion graphics. ★ Currently. In one sense. ★ Software . the work of Futurismo Zugakousaku is evidence of an exploratory practice that emerges during the quartz composer in the art and motion design of futurismo zugakousaku 13 .an emerging prominent use of Quartz Composer in the V-Jaying and clubbing communities. the primary audience is developers interested in real-time performance and the real-time processing of computer graphics. There follows a brief outline of the current audience / user base for Quartz Composer inspired work. The screen saver as potential art space has been explored before and will not be discussed in the present essay. Quartz Composer plays a role in the development of ‘image units’ (image and video processing plug-ins). Quartz Composer plays a role in the real-time visualisation and performance systems.Quartz Composer compositions are mediated by other software. ★ A ‘popular’ context is emerging in the form of screen-savers and dissemination of compositions / movies through art and design web sites. Here the composition or image processing is dominated by an external creative workflow.THE QUARTZ COMPOSER AUDIENCE Futurismo Zugakousaku is primarily known through a web presence. ★ Site specific . Users/audience witness the image / video processing executed by Quartz Composer vicariously through ‘host applications’ like Avid’s suite. Apple’s Motion or Final Cut Pro.

7 See the Avid section of http://www.com/index.zugakousaku.development of commercial video processing plug-ins for the Avid suite of video editing applications 7 .cgi?quartz&avid&en 14 quartz composer in the art and motion design of futurismo zugakousaku .

quartz composer in the art and motion design of futurismo zugakousaku 15 .the model of time in Quartz Composer is interesting and complex. In future examples. ★ Process: How are the effects achieved? In the analysis below of “Who Are You?” I will go into a little more detail about the general architecture of a Quartz Composer composition. I want to evaluate how Quartz and Quartz Composer technology has facilitated the creation of work which would probably not be possible in other media. I will use the following broad headings to guide a visual and technical critique: ★ Description of the Motion / Visual Design: Communication of Concept and Context ★ Hybridity: How has the possibility of combining different media created new kinds of art? ★ Dynamics: Time and event management in digital artworks .In analysing examples of work disseminated by Futurismo Zugakousaku. I will focus on notable and remarkable elements.

FUTURISMO ZUGAKOUSAKU’S “WHO ARE YOU?” 8 (A) DESCRIPTION A simple animation parades a cloned figure from left to right in an never-ending loop. On every passing loop. The figure.cgi?web_data/quartz/samples/ quartz composer in the art and motion design of futurismo zugakousaku 16 . Each slogan describes a role or occupation that is selected at random from a large array . recedes row upon row to a blur in the distance.it tends not to repeat. 8 Direct Link to Online Demo Movie: http://www.zugakousaku. resembling an Edwardian swimmer. the movement smoothly stops and a slogan appears in English and Japanese.com/quicktime.

g. 9 RSS .Really Simple Syndication or Rich Site Summary: An XML file contain basic data about stories on web-sites 17 quartz composer in the art and motion design of futurismo zugakousaku . e. Other work.that below the surface of language we are all the same With just the use of a single image. text and image in real time . achieve a ‘parallax effect’ that gives an excellent illusion of depth and receding distance. data. In this example the virtual 3D space of Open-GL is not used. organic. Zugakousaku achieves a minimalism and clarity of design that I find engaging. The image doesn’t change so the implication is that the language of role masks homogeneity .sometimes know as two-and-a-half D. (C) DYNAMICS The quality of movement. rhythmic. impossible to capture with a sequence of still images. rather an illusion of depth in 2D . Screen-shots from “Who Am I?” by futurismo zugakousaku Each row of men moves at a slightly different pace.(B) HYBRIDITY The juxtaposition of random text and image is a technique Zugakousaku uses frequently . “The 20th Century Voyage” uses RSS 9 and blends together motion. is hypnotic: smooth. The depth of field blur adds to the illusion of depth.and harkens to the Surrealist love of random collisions of words creating new and surprising associations and meaning.such hybridity is characteristic of work made with Quartz Composer. replicated and scaled into the distance.

com/graphicsimaging/quartz/quartzcomposer. Patches are colour coded (pink means content will be rendered ) and if they have square corners they are hierarchical.html QC Programming Guide http://developer. 10 Working with Quartz Composer http://developer.com/documentation/GraphicsImaging/Conceptual/QuartzComposer/ quartz composer in the art and motion design of futurismo zugakousaku 18 .apple.apple. you can edit any sub- this is text in the box patches ‘inside’ it. For more information on basic editing in Quartz Composer please see the documentation at Apple’s developers web site 10 . If you double click on this patch.A M A C R O PAT C H (D) PROCESS Quartz Composer has a single frame editing window.

(-0. In this case: the green patches are ‘controllers’. quartz composer in the art and motion design of futurismo zugakousaku 19 . The interpolation and the range patch combine to create a set of values that animate the -X shift. In the inspector of the interpolation patch is the key to how the animation appears so ‘organic’.45 on the Y axis) Double clicking the 3D Transformation patch (more accurately it is called an environment) reveals the following sub-patches: In a sense the 3D Transformation environment ‘renders’ or displays the results of it’s sub-patches. Here the 3D Transform patch simply translates (moves) its whole rendered contents down a bit.Each patch in Quartz Composer has an information panel providing contextual help and areas to set input values.

The parent “3D Transformation” patch contains yet another “3D Transformation” a child or sub-patch.5 over the duration of 5 seconds.The interpolation patch uses a custom curve to control the output of a range of values . So: a Quartz Composer composition can be a set of nested patches and subpatches. Zugakousaku’s “Who Am I?” contains the following pattern of hierarchical nesting: 20 quartz composer in the art and motion design of futurismo zugakousaku .in this case set to change between -3 and -3. flowing movement. The range patch output is plugged into the input “Translation X” with a yellow pipe or “noodle”. These values move the image in the -X direction (from right to left) over a duration of 5 seconds The values do not simply increase in a linear way over time but according to the weightings visualised in the customised curve. Creating a smooth.

though. As we shall see. Change the X position of the “3D Transform” at level 1 and you move the entire nested contents. The Quartz Composer editing environment gives you an outline of this list in what is called the “Hierarchy Browser”. Next I’ll dig down into the composition and find the relevant parts that create the cloned man image and create the parallax / depth effect. each area/node. can contain a complex collection of patches. 21 quartz composer in the art and motion design of futurismo zugakousaku .(0) ▼ (1) ▼ (2) (3) (4) (5) (3) (1) ▶ Root Macro Patch 3D Transformation ▼ 3D Transformation ▼ ▶ man (Iterator) ▼ 3D Transformation ▶ Replicate in Space text (Macro) Credit The outline above gives an indication of how the patches interrelate.

This iteration refers to the number of the rows of men. to five. repeating its contained patches until the number of iterations (repeats) is equal. An iterator behaves like a simple “for” loop.I T E R ATO R The man patch has a custom title “man”. The inputs and the inspector reveal it is an ‘iterator’ patch. in this case. The large diagram (below) represents the patches inside the iterator patch: C D B A quartz composer in the art and motion design of futurismo zugakousaku 22 . The iteration is zeroindexed (0-4).

Note that dwelling over a connected output brings up a tool-tip preview of the output. The same source image is passed four times through “Gaussian Blur” patches with different settings. This “Image” input is what is known as a published input from the patch hierarchically below the current patch. This value is passed into the “3D Transformation” patch and moves the produced image forward an increasing distance on the Z axis every iteration. In this case the index is provided by the iterator “index”. As the iterator increments from 0-4. More of the feature of publishing inputs and outputs in Apple’s documentation.(A) The single man image. (D) Drill into the “3D Transformation” and you find the following single “Replicate in Space” patch: 23 quartz composer in the art and motion design of futurismo zugakousaku . using the incrementing “Current Position” as an initial value and multiplying it by 5. a “Math” patch performs a calculation. The initial value is greyed out because the value is supplied via a ‘noodle’ from the “Iterator Variables” patch. (B) The very clever “Multiplexer” patch switches between source inputs using an index. (C) At the same time. the multiplex result is switched between the 4 blurred images and the original non blurred source and provided to the “image” input on the 3D Transformation patch.

5 units. In the case of “Who Are You?”.R E P L I C AT E IN S PA C E The “Replicate in Space” patch and it’s inspector (illustrated below) control making copies of the patches contents in 3D space. 16 copies of the man image (in different ‘blur’ states) are made 1:1 scale each translated on the X axis by 7. (See Apple’s documentation for more information on the resolution independent unit and co-ordinate system used in Quartz Composer). The X contents of the replicate in space patch quartz composer in the art and motion design of futurismo zugakousaku 24 .

is at the deepest level of the hierarchy. The parent “3D Transformation” patch is animated moving right to left on the X axis . duplicated. As this patch is contained in the “Iterator” patch we get 5 rows of men. it displays a quad 11 on the screen. Using an “Input Splitter” is a technique that allows reuse of a common resource or value. 11 A rectangular polygon that can be textured with video or images and position in Cartesian 3D space 25 quartz composer in the art and motion design of futurismo zugakousaku . It is operated on (translated. An interesting construction principle emerges: the smallest element. inside the “Replicate in Space” patch an “Input Splitter” patch has it’s input published and given a custom name “Image”. The image is passed in from the “Multiplexer” that selects blurred versions of the images via a “3D Transformation” patch that creates the rows of men going backwards.e. the single image.translation value is so chosen to match the position of the man image at the beginning and the end of the scrolling animation. Note that the “Image” input on the patch is a dark filled circle. With careful publishing. duplicated 16 times and each copy offset by the “Replicate in Space” patch. colorised) by operations higher up the chain.moving the whole scene smoothly. images and data between levels of a composition.i. blurred. “Input Splitters” (and most other patches) can be used to pass values. Likewise.. This signifies that the input is published and therefore available as an input of the containing patch. A complete discussion of the execution order of patches and the ‘data flow’ within a quartz composer composition is beyond the scope of this essay. The “Sprite” patch is a “renderer” . The next paragraph will sound complicated as it attempts an over-arching description of the entire graphical process: the “Sprite” displays a man image.

4. Screen-shots from works by sam kass (2005) quartz composer in the art and motion design of futurismo zugakousaku 26 .SUMMARY Quartz Composer stands in an exciting position as a new technology facilitating artists who wish to make high-performance. time and dynamics. the method of aesthetic enquiry is rich and needs to be applied to more examples. complex potential. I discussed audience. including: ★ Real Time Video Processing in Quartz Composer. motion and colour detection. I described the motion graphics and visual design and then talked about the technical process. It is simple to use and learn but has hidden. Programmer / artist Sam Kass explores advanced real time video processing including optical flow. it’s history and future role in Apple’s graphics architecture ★ deconstruct an artefact by one artist. In conclusion. and hybridity. hybrid interactive artworks with software that ships free with Mac OS 10. with brief reference to similar technologies. The description of the technical process sounds involved and complex but it doesn’t do justice to the flow and ease of development in the drag and drop. This present essay sought to ★ introduce the technology. Futurismo Zugakousaku. visual programming environment. as a means for exploring the form and potential of Quartz Composer as an artistic medium.

Screen-shots from “falling text”. “jelly worm”. More complexity. “light passage” and “Black White” by futurismo zugakousaku (2005) Ian Grant January 2006 27 quartz composer in the art and motion design of futurismo zugakousaku .and ★ Other offerings from Futurismo Zugakousaku. “squids”. visually rich example. technique and surprises await in the open sources of Futurism's other work. I selected a simple.

com/technotes/tn2005/tn2 145. London. P. Sam Kass's Blog. (2005b). 06 Nov.apple.html#TNTAG9 . Retrieved Jan. 07. 2006. Distributed Art Publishers.com/qa/qa2005/qa1427. 2005 http://www. Apple Computers. (Ed. P. Working with quartz composer. (2003) Internet Art: The Online Clash of Culture and Commerce. from Apple Developer Connection Web site: http://developer. Retrieved Jan. 2006.BIBLIOGRAPHY TEXTS Gelphman. Retrieved Jan. from Apple Developer Connection Web site: http://developer. Scholder. logos. images.pol-online. Futurismo Zugakousaku and Sam Kass.samkass. D.apple. 26.com/graphicsimaging/qua rtz/quartzcomposer. 07.com/index.html. Stallabrass. A. quartz composer in the art and motion design of futurismo zugakousaku 28 . Tate Publishing. 2006. source code and screen-shots are the copyright of their respective owners: Apple Computers.net/pixelshox_technology/i ndex. Morgan Kaufmann. (2005a). Technical note tn2145: efficiently using quartz composer compositions with quicktime.apple. Zugakousaku.com/index. New York. Latour. London . WEB Apple Computers. B.php. NY. Technical q&a qa1427: what is the timebase submenu available in the contextual menu of some patches in quartz composer?.) (2001) Interaction: Artistic Practice in the Network. (2004) Internet art.ht ml. Latour. 2006. from Sam Kass's Blog Web site: http://www.zugakousaku. Futurismo Zugakousaku. Sam. Greene. Retrieved Feb.cgi?quartz& samples&en&. R. from PixelShox Technology Web site: http://www. 6. IMAGES AND SOURCES Where not covered by creative commons licenses.zugakousaku. from Apple Developer Connection Web site: http://developer. and Laden. Zugakousaku. All trademarks. (2005). (2005) Programming with Quartz: 2D and PDF Graphics in Mac OS X.cgi?quartz& concept&en. (2006). 2006. Futurismo Zugakousaku. Thames & Hudson. 26 Dec. Kass. 07. 2005 http://www.com/blog/ . J. Retrieved Jan. Apple Computers. Pixelshox: visual creation engine. (2003).

Sign up to vote on this title
UsefulNot useful