À la découverte de QuartzComposer

Le DVD d'installation de MacOS X 10.4 contient un grand nombre d'outils de développement de qualité. La plupart, comme Xcode 2.0, ne sont que des évolutions de ceux livrés avec les versions précédentes du système. Néanmoins, pour marquer l'introduction de la nouvelle bibliothèque Core Image, Apple a ajouté deux outils extrêmement puissants, Core Image Fun House et QuartzComposer. Le premier permet d'appliquer tous les effets de Core Image sur une image et d'en modifier les paramètres. Vous pouvez ainsi aisément tester des combinaisons avant de les intégrer dans votre code source. QuartzComposer fonctionne un peu sur le même principe, mais va beaucoup plus loin. Cet outil vous permet de créer des scènes graphiques interactives et dynamiques. Vous pouvez utiliser tous les effets de Core Image et Core Video, mais également combiner des Image Units, des éléments OpenGL ou QuickTime, parcourir des flux RSS, utiliser des opérations Quartz 2D et enfin intégrer les services audio MIDI. Le résultat peut être joué comme une animation autonome, être utilisé comme économiseur d'écran ou se voir intégrer à n'importe quelle application Cocoa par l'entremise d'une API très simple. Apple a même prévu la possibilité de lier facilement des contrôles Cocoa aux paramètres des scènes QuartzComposer. Sachez enfin que cette application n'est pas une véritable nouveauté puisqu'une version beaucoup plus simple intitulée PixelShox Studio avait été créée en 2002 par Pierre-Olivier Latour qui a ensuite participé à l'élaboration de QuartzComposer. Avant de continuer, assurez-vous d'avoir installé Xcode 2.0 et les outils de développement depuis le DVD de Tiger et lancez QuartzComposer qui se trouve dans le dossier /Developer/Application/Graphics Tools/.

Au démarrage, QuartzComposer vous propose de créer une nouvelle composition à partir d'un modèle. Pour mieux comprendre le fonctionnement de ce programme, nous allons créer une Basic Composition. Cette dernière permet de découvrir les deux fenêtres principales du programme. La première est l'éditeur dans lequel se trouve le graphe de la scène dans la vue principale, et la bibliothèque d'éléments à gauche. La seconde fenêtre est le moniteur, qui affiche en temps réel la scène présentée dans l'éditeur.

Les éléments d'une scène sont appelés des patches et peuvent être interconnectés entre eux. La composition montre par exemple une Interpolation reliée à un Sprite. Tous les patches disponibles se trouvent dans la bibliothèque à gauche et il suffit d'un glisser-déposer pour les insérer dans la composition. Vous constaterez la présence d'un onglet « Clip » au-dessus de la liste des patches. Les clips sont des compositions que vous pouvez réutiliser au sein d'autres compositions. Essayez par exemple d'ajouter le clip Rotating Cube à la scène et observez le changement immédiat dans le moniteur. Si vous observez le clip que vous venez d'intégrer à la scène, vous constaterez que sa représentation utilise des bords rectangulaires et non arrondis comme les autres patches. Ces patches spéciaux indiquent qu'ils contiennent d'autres patches. Vous pouvez naviguer parmi les sous-patches en double-cliquant sur un agrégat de patches ou en cliquant sur le bouton Hierarchy Brower. Le bouton Edit Parent permet de revenir à tout instant au patch parent. Par défaut, toute composition est donc créée dans un patch racine que nous ne pouvons pas voir ni éditer.

Le moniteur est indispensable pour concevoir, mais également pour déboguer votre composition. En affichant la barre d'outils, vous découvrirez plusieurs boutons indispensables. Vous pouvez ainsi arrêter le rendu, ce qui est appréciable dans le cas de compositions très gourmandes en temps processeur, passer en mode plein écran, modifier les paramètres de la scène lorsqu'ils existent ou encore activer les modes de rendu de débogage. Nous allons à présent créer notre propre composition : revenez dans l'éditeur et supprimez tous les patches.

Pour concevoir une scène Quartz, nous pouvons utiliser trois sortes de patches, identifiables par leur couleur, mais également par leurs ports. Les patches verts représentent des opérations, possédant des ports en entrée et en sortie. Les patches cyan sont des entrées et n'ont donc que des ports en sortie. Enfin, les patches magenta servent à l'affichage (à la sortie de manière générale) et n'ont que des ports en entrée. Pour relier un port à un autre, il vous suffit de cliquer dans le cercle le représentant et de glisser votre souris, sans lâcher le bouton, jusqu'au port de destination. En procédant ainsi vous transmettez la valeur d'un port de sortie à un port d'entrée.
Nous allons commencer par un exemple simple d'affichage de texte que nous compliquerons progressivement. Déposez dans un premier temps un patch Image With String sur la scène. Vous pouvez atteindre un patch rapidement en tapant son nom dans le champ de recherche de la barre d'outils. Ce patch permet de générer une image à partir d'une chaîne de caractères et de plusieurs autres paramètres optionnels. Sélectionnez le patch puis ouvrez l'inspecteur à l'aide du bouton de la barre d'outils. L'inspecteur permet de modifier les paramètres et les arguments d'entrée d'un patch. Les paramètres de notre patch comportent par exemple la police de caractère. Les arguments d'entrée servent à attribuer des valeurs aux ports. Nous voulons ici changer la String pour afficher « Mostly Harmless ». Le moniteur n'affiche malheureusement toujours rien. Vous devez en effet récupérer l'image produite par le patch et l'afficher sur une surface de dessin à l'aide d'un patch de rendu. Dans la bibliothèque, sélectionnez un Billboard et déposez-le sur la scène. Reliez ensuite le port Image du patch Image With String au port Image du Billboard pour que votre texte apparaisse enfin à l'écran.

Ajoutez à présent un gradient et éditez ses paramètres pour choisir des couleurs qui vous plaisent. Si vous consultez le moniteur, vous constaterez que votre texte a disparu ! Pour y remédier, vous devez changer l'ordre des patches d'affichage. Chaque patch magenta dispose d'un numéro dans son coin supérieur droit qui indique dans quel ordre ils sont affichés. Puisque le gradient possède le numéro 2, il s'affiche par-dessus votre texte. Affichez le menu contextuel du gradient et choisissez le Rendering Layer 1. Le résultat pourrait être satisfaisant si le texte ne présentait pas un horrible fond noir. Chaque layer de rendu dispos d'un paramètre de mélange appelé Blending. Modifiez celui du Billboard et sélectionnez le mode Over.

Nous allons à présent modifier le texte pour qu'il s'affiche avec un effet d'illumination. Une méthode répandue consiste généralement à appliquer un effet de flou au texte puis à redessiner le texte par-dessus le flou. On obtient ainsi un subtil halo. Quartz Composer vous permet de faire cela en quelques clics. Déposez tout d'abord un patch Gaussian Blur sur la scène et utilisez la sortie Image de l'Image With String sur l'entrée Image. Vous pouvez vérifier le résultat en branchant la sortie du flou sur le Billboard ou en laissant votre souris quelques instants au-dessus du port de sortie. L'étape suivante consiste à réafficher le texte d'origine par-dessus le flou que nous venons de créer. La solution naïve consiste à utiliser un second Image With String. Fort heureusement, nous pouvons utiliser une même sortie avec plusieurs entrées. Ajoutez donc un patch Source Over à la scène. Ce patch accepte deux images en entrée et les mélange pour créer une image unique en sortie. Utilisez l'Image With String comme argument Image et le Gaussian Blur comme argument Background Image. Il ne vous reste plus qu'à connecter le résultat au Billboard pour admirer l'effet.

Ce dernier serait encore plus impressionnant s'il était animé. Nous allons donc faire en sorte que le halo grandisse et diminue pour simuler des pulsations. La technique consiste à utiliser un générateur de valeur et à le brancher sur le port Radius du flou qui contrôle la diffusion de celui-ci. Quartz Composer propose un outil parfaitement adapté, le patch LFO (Low Frequency Oscillation). Ce patch génère des valeurs au cours du temps qui suivent une fonction mathématique paramétrable. Nous allons choisir une sinusoïde, qui permet des allers-retours adoucis, d'amplitude 5 et de période 4. L'amplitude détermine et l'offset servent à définir les valeurs minimales, offset - amplitude, et maximales, offset + amplitude, générées par la sinusoïde. La période définit le nombre de secondes nécessaires pour parcourir toutes les valeurs. Terminez en reliant le port Result du LFO au port Radius du Gaussian Blur.

L'idée semblait bonne, mais le résultat est une catastrophe. Le texte change de taille et semble se comporter de manière erratique. En étudiant la description du Gaussian Blur on apprend cependant que cet effet modifie la taille de l'image d'origine. Nous devons donc modifier la scène de manière à avoir une image de taille fixe, quel que soit le rayon du flou gaussien. La meilleure solution consiste à recadrer l'image avec le patch Crop. Ses arguments en entrée comprennent une image et un rectangle de recadrage. Les unités utilisées pour exprimer ce rectangle sont en pixel, or les dimensions de l'image fournies par Image With String sont en unité Quartz. Nous devons utiliser un nouveau patch, Image Dimensions, capable de convertir les unités Quartz en pixels. Les ports Pixel Wide et Pixel High doivent donc être reliés aux ports Rectangle Width et Rectangle Height du patch Crop. N'oubliez pas d'utiliser l'Image With String en entrée. Passez le moniteur au premier plan et admirez votre animation.

Quartz Composer vous propose plusieurs méthodes de diffusion de vos compositions. La plus simple est le format QTZ, reconnu par QuickTime 7 et Quartz Composer. Enregistrez simplement la composition pour obtenir un tel fichier. Sachez toutefois que la distribution d'une composition dans ce format revient à fournir le code source puisque vous pouvez l'ouvrir dans Quartz Composer pour étudier les patches, les liens et les paramètres. Nous vous encourageons naturellement à opter pour cette solution. Si vous désirez néanmoins protéger votre travail, vous pouvez exporte la scène au format QuickTime en appuyant sur Pomme-E. Vous pourrez alors choisir une résolution et une durée. Cette solution est extrêmement intéressante pour intégrer des effets, notamment pour des génériques, dans des films iMovie.

Vous pouvez également utiliser vos compositions comme économiseur d'écran. Il suffit de la copier dans le dossier /Library/Screen Savers ou dans le dossier ~/Library/Screen Savers pour la voir apparaître dans le dialogue de sélection de l'économiseur d'écran. Vous pouvez laisser à l'utilisateur la possibilité de le personnaliser en publiant des arguments d'entrée. Affichez le menu contextuel de l'un de vos patches et choisissez un argument dans Published Inputs. Vous pouvez par exemple publiez l'argument String du patch Image With String. Vous pouvez enfin réutiliser vos compositions sous forme de clips en éditant leurs informations depuis le menu d'édition puis en les copiant dans le dossier /Library/Application Support/Apple/Quartz Composer/Clips.

N'hésitez pas à essayer les dizaines de patches proposés par Quartz Composer et vous découvrirez rapidement d'innombrables façons de réaliser d'impressionnantes démos graphiques.