Logo Forum Mac-Vidéo

Quartz Composer

Créer sa première composition


Mai 2006

Auteur : adesir


Depuis la sortie de Tiger, Apple propose un outil qui permet de créer des compositions Quartz sans programmation. Basé sur PixelShox, de Pierre-Olivier Latour, Quartz Composer est un outils de création vidéo d'un nouveau genre, entièrement basé sur les technologies Core Image et Core Video introduites avec Tiger et QuickTime 7. Trêve de généralités, voyons ensemble comment se lancer !


1. Installer Quartz Composer

Quartz Composer fait partie des outils de développement Xcode. Ces outils sont livrés avec Tiger (sur le DVD). Les membres de l'ADC peuvent télécharger la dernière version sur le site Apple. Lors de la rédaction de cet article, la dernière version de Quartz Composer est la 2.1.1. Pour vous simplifiez la tâche, vous trouverez cette version - très partiellement francisée - dans cette archive :  QuartzComposer.zip (à décompresser dans le dossier de votre choix).

Pourquoi figure-t-il dans les outils pour développeur ? Car concevoir une composition, c'est programmer. Et les développeurs reconnaîtront l'orientation objet de l'outil dès sa prise en main.


2. Découvrir Quartz Composer

Au premier lancement, Quartz Composer impose son assistant. Pour commencer, choisissons de créer une composition basique, vous découvrirez vous-même les autres possibilités plus évoluées. Appuyez sur le bouton Suivant.


Donnez un nom à votre future oeuvre. Par défaut, la composition est créée dans le dossier Séquences, mais vous pouvez changer ce dossier en appuyant sur le bouton Choose Directory... Si une composition de même nom existe déjà, il est impossible de continuer. Appuyez sur le bouton Terminer.


Et la, c'est le choc ! 

 

Voyons les fenêtres présentes : un éditeur avec des jolis blocs et une fenêtre de visualisation qui affiche le rendu du résultat en boucle.

Le visualisateur

Étudions donc ce visualisateur, qui cache un peu son jeu :

C'est tout ? Oui, en mode simplifié, car la barre d'outil est cachée par défaut. Allons plus loin en affichant cette barre (le bouton en haut à droite du titre) :

Cette barre de bouton peut donc arrêter et relancer l'affichage de la composition, passer en mode plein écran (pratique pour voir les détails et tester les économiseurs d'écran), modifier le mode de rendu (normal bouclé, debugage, avec compteurs). Il est aussi possible de voir les paramètres (selon la composition) et de passer dans l'éditeur (des fois que vous l'auriez caché).


Au fait, Quartz Composer n'est pas un éditeur Wysiwyg, le visualisateur n'est donc qu'un visualisateur : aucune interaction n'est possible avec les objets rendus. Pour modifier la composition, il faut utiliser l'éditeur.

L'éditeur

Trois grandes parties dans cette fenêtre :

3. Les notions de base : unités, objets et liens

Les unités

Coordonnées dans Quartz Composer

Les compositions Quartz ne sont pas basées sur des pixels, mais sont des créations vectorielles. Pour entrer les dimensions des objets, c'est donc une échelle arbitraire qui a été utilisée : le centre de la composition (0,0) est le centre de l'image. La largeur de la zone visible est de 2.0 (entre -1.0 à gauche et +1.0 à droite) et sa hauteur selon la proportion de l'image (1.5 en format 4/3).

La profondeur (Z) est gérée : les valeurs positives renvoient en avant, les négatives en arrière.

La figure est celle du site ADC.


Les objets

L'élément de base d'une composition, c'est un objet (appelé Patch dans le jargon de Quartz Composer) qui est l'équivalent d'une fonction en programmation classique (et d'un ... objet en programmation orientée objet*). Il exécute une action en fonction des paramètres qu'il expose dans ses "ports" et produit un résultat en fonction du temps.

Un des difficultés de Quartz Composer - comme tout outil de programmation - est qu'il existe 75 objets Quartz Composer (et une centaine d'objets fournis par Core Image) qui proposent de nombreux paramètres. Si la phase de découverte est rapide, la phase de maîtrise est bien plus longue.

* que les adeptes de la POO me pardonnent ma présentation, mais ils auront deviné que j'assimile classe et instance d'objet. Il est évident que la liste de gauche est la liste des classes de patchs et que glisser un élément de cette liste créé un instance de cette classe. De même, la notion d'héritage est bien présente dans les objets de Quartz Composer.

Les liens

Les liens sont construits (à la souris) entre les ports des objets. Ils servent à relier les paramètres de sortie d'un objet avec les paramètres d'entrée d'un autre objet.

4. Créer sa première composition

Tout d'abord, créons une nouvelle composition vide : dans le menu File, choisissons New. Pour se faciliter la vie plus tard, nous allons de suite la sauvegarder : dans le menu File, allons à Save As. Entrer un nom de composition et le dossier qui va l'accueillir. Un clic sur Enregistrer et c'est dans la boite. C'est fini ? Non, commençons.

D'abord un fond dégradé sera du plus bel effet. Dans la liste des patchs, trouvez la catégorie Renderer, puis l'objet Gradient et glissez celui-ci sur la zone de conception (ou double-cliquez pour aller plus vite, l'objet arrive au centre de la zone). Immédiatement, le visualisateur affiche un dégradé de gris des plus standards :


Si l'inspecteur n'est pas encore ouvert, appuyez sur le bouton Inspecteur dans la barre d'outils. Dans la liste déroulante de l'inspecteur, choisissez Input Parameters. C'est avec ça que nous allons régler le dégradé du fond.


Si l'usage de l'inspecteur ne vous plaît pas, vous pouvez aussi double-cliquer sur le point d'accroche de la propriété dans l'objet. Par exemple, pour modifier la direction du dégradé, double-cliquez sur le point devant la propriété Direction.


Pour notre première composition nous allons faire tourner lentement un cube coloré autour de son axe vertical. Rien d'extraordinaire, mais il faut bien commencer.

Glissez l'objet Cube (il se trouve juste au-dessus de Gradient) dans la zone de conception. La première chose à faire est de diminuer sa taille (1 de chaque coté par défaut) : régler les propriétés Width (largeur), Height (hauteur) et Depth (profondeur) à 0.5 (pas de virgule dans les valeurs de Quartz Composer).

Remarque : un cube étant un objet en trois dimensions, les trois dimensions sont gérées par Quartz Composer. L'espace des compositions est en effet un espace en trois dimensions et le rendu passe par OpenGL pour projeter cet espace sur l'écran.

Pour apprendre, réglez la position du cube en dehors du centre : un peu à gauche (X Position : -0.2), un peu en haut (Y Position : 0.2) et un peu en avant (Z Position : 0.2).

Et puis, changez la couleur de chacune des faces.

Pour bien voir le cube tourner plus tard, choisissez des couleurs différentes.

L'inspecteur doit ressembler à ça :


Pour faire tourner le cube, il faut modifier une des propriétés Rotation. Vous pouvez essayer à la main, l'unité est le degré (de 0 à 360). Mettez donc 45 pour X Rotation et Y Rotation, juste pour bien voir le cube. Mais c'est très statique, tout ça.

L'idée est de faire varier automatiquement la rotation. Et c'est là qu'intervient un contrôleur numérique. A partir de la liste des patchs, glissez dans la zone de conception un objet Interpolation, de la catégorie Controller (le premier objet, si la liste des patchs est triée par catégorie). Pour faire simple, réglez les valeurs comme indiquées (la valeur générée va de 0 à 360, de façon linéaire, en boucle de 5 secondes) :


Dans l'éditeur, reliez la propriété Result de l'objet Interpolation à la propriété Z Rotation de l'objet Cube. Pour ça, cliquez sur le point d'accroche à droite de Result, glissez le pointeur de la souris jusqu'au point d'accroche à gauche de Z Rotation pour y amener le bout du lien puis relâchez. L'éditeur doit ressembler à quelque chose comme ça (vous pouvez déplacer les blocs à la souris).


Et dans le visualisateur, le cube tourne, tourne, tourne...

Comme vous l'avez compris, on pourrait faire varier beaucoup de propriétés du cube (position, autres rotations, couleurs, etc) pour en faire un cube fou.

Sous-titrons maintenant. Pour afficher un texte, il faut générer une image à partir d'un texte, puis afficher cette image.

InspecteurLe premier objet sera donc Image with String, qui est un Generator.

Réglez les propriétés comme ceci :


InsepcteurLe deuxième objet sera l'afficheur.

Pour rester simple, choisissez un Billboard, qui est un Renderer.

Et réglez ses propriétés ainsi (passez bien le Blending à Over si vous voulez un affichage sans fond noir) :


Reliez ensuite la propriété Image de l'objet Image With String à celle Image de l'objet Billboard et admirez le résultat. Comment ça, ce n'est pas beau ? :-))

Voilà, notre première composition basique est terminée. Plus tard, nous ajouterons une interaction avec la souris. Mais voyons maintenant comment exploiter une composition.

5. Comment lire sa composition ?

Depuis que vous avez installé Quartz Composer, les compositions Quartz (les fichiers .qtz) s'ouvrent directement avec cette application. Mais les compositions sont aussi lisibles par QuickTime (c'est accessible avec le menu contextuel Ouvrir avec...)

Moyennant une extension de Safari, pour pourrez même lire une composition directement dans une page web, comme celle figurant en bas de cet article. Avec cette dernière solution, l'interaction est encore possible, alors que ce n'est pas le cas dans le lecteur QuickTime.

6. Que faire avec une composition ?

Créer des compositions, c'est passionnant et cela peut donner de belles choses. Mais comment les vidéastes peuvent-ils exploiter ce nouvel outil ? La clef, c'est que QuickTime 7 lit ces compositions.

Export QuickTimeDans Quartz Composer, vous pouvez d'ailleurs exporter vos compositions en séquence QuickTime (menu File, Export as QuickTime Movie).


iMovie

iMovie permet d'importer une composition Quartz dans les clips (elle est transformée en DV lors de l'importation). Comme une composition Quartz peut intégrer plusieurs vidéos, les possibilités en complément d'un iMovie souvent limité sont très nombreuses. A noter que iMovie utilise des compositions pour ses thèmes, depuis la version 6 (ce qui explique que ces thèmes dynamiques ne soient accessibles que sous Tiger).

iDVD

Mais vous pouvez aussi glisser une composition dans une zone de dépôt de iDVD (qui lui-même est basé sur des compositions pour ses thèmes les plus modernes). Eh oui, une composition peut être intégrée à une autre composition* !

Plus simplement et cela fonctionne surtout avec les anciens thèmes, une composition peut se jouer en fond de menu. Vous pouvez ainsi créer des menus très personnalisés dans iDVD.

* Cette possibilité a été restreinte dans Mac OS X 10.4.8 pour des raisons de sécurité

MovieGate

A partir de la version 2.5, MovieGate permet d'utiliser une composition Quartz comme menu du DVD.


C'est d'ailleurs pour participer au concours de composition que j'ai commencé ce tutoriel.

iDive & PulpMotion

La plus belle intégration des compositions Quartz est probablement celle faite dans iDive (fonction Mosaic) avec la talentueuse participation de Zuga Futurismo. On retrouve maintenant cette fonction dans PulpMotion, qui peut servir de véritable interface utilisateur à Quartz Composer !


Final Cut, DVD Studio

On pourra utiliser Quartz Composer pour créer des titrages absolument uniques, des effets inconnus et - plus simplement - des compteurs hautement personnalisés. Pour certaines choses, Quartz Composer peut même remplacer Motion (toutefois, ne croyez pas que les deux logiciels sont équivalents).

7. Liens utiles

Quelques liens utiles pour aller plus loin. Malheureusement, la plupart sont en anglais :

Si vous en trouvez d'autres, merci de m'en faire part sur le forum, je les ajouterai.

L'extension QuartzComposerWeb.plugin n'est pas présente !Veuillez la télécharger depuis : http://qcw-plugin.sourceforge.net/


Valid XHTML 1.0 StrictDernière mise à jour le 10 décembre 2006.  Document fait avec KompoZer