English | Mandarin | Spanish | Russian | Japanese | Hungarian | Italian | Korean | German

• Nous commençons réellement.
• Le menu principal
• Créer une Node
• Le nom des nodes et leur catégorie
• IOBoxes
• Connecter les nodes
• Rendering
• Interaction
• Experimentation

Le tutorial suivant ne demande pas de connaissance préalable de vvvv. Chaque étape sera expliquée scrupuleusement. Cependant, si vous souhaitez vous familiariser avec l’interface d’utilisation plus en détails avant de commencer, jetez un œil à The User Interface in Detail. Mais n’oubliez pas de revenir ici !

Nous commençons réellement.

Vous avez donc lancé vvvv et vous êtes en face d’une fenêtre grise (autrement, lisez l’Introduction, et vous vous demandez où sont les boutons. Pas de panique. Menu et barres de défilement sont là, attendant juste que vous cliquiez. C’est parti.

Le menu principal

Pressez le bouton central de la souris (ou ESPACE + bouton droit si vous n’avez de molette) pour faire apparaître le menu principal. Tout ce dont vous avez besoin se trouve ici.

Contentez-vous pour l’instant de créer un nouveau patch en cliquant sur “New Patch” (ou utilisez le raccourci “CTRL+P”). Notez que ce nouveau patch apparait avec le coin en haut a gauche exactement sous votre curseur. C’est utile car vous pouvez maintenant cliquer-glisser pour changer la position de votre patch où vous voulez sur votre écran.

Créer une Node

Pour ajouter une node à notre projet, nous allons utiliser le Node Browser. Faites un double clic gauche dans la zone grise du patch; une longue liste de nodes apparaît. Pour trouver une Node spécifique, il suffit de taper le début de son nom dans le champ de recherche.

Si vous avez une mollette utilisez la pour faire defiler la liste. Autrement une barre de défilement devrait être visible. Déplacez le curseur sur le nom de chaque node et vous verrez une courte description de leur fonction.

Il est aussi possible de classer les nodes par catégories en cliquant sur la lettre C dans le coin supérieur droit. Faites défiler jusqu’à la catégorie Value. Cliquez sur le nom de la catégorie pour ouvrir le sous-menu et cliquez sur la node nommée + (Value) (le mot “Value” précédé du signe “+”). Attention: ne pas confondre avec + (Value Spectral)!

Le nom des nodes et leur catégorie

Le nom d´une node a différente partie:
NodeName (Category Version1 Version2 ... VersionN)
Quand la version de la node est optimale chaque node est assignée à une categorie qui suit son nom entre les parenthèses. Ce qui permet à plusieurs nodes du meme nom d´exister tant quelles ont des catégories différentes (e.g. + (Value), + (String), + (Color), ...).

Vérifier que vous avez créé la bonne node en la survolant avec le curseur . Une description apparait vous montrant le nom exact de cette dernière. Vous pouvez à tout moment déplacer la node en faisant un clic gauche et glisser la ou vous voulez.

Maintenant bouger votre curseur sur les pins d´entrées de la node pour voir leurs valeurs. Noter que leurs valeurs par defaut est zéro. Vous pouvez changer cette valeur en faisant un clic droit , entrez une nouvelle valeur et pressez entré. Vous pouvez aussi presser avec le bouton droit de la souris sur le pin et le deplacer de haut en bas pour changer la valeur du pin.
Aprés avoir changer les entrées vous pouvez regarder le resultat de l´addition sur le pin de sortie.

IOBoxes

Pour un controle plus facile des entrées et sorties vous pouvez créer des IOBoxes qui vous aide à entrer et à visualizer des valeurs.
Double click gauche vous permet de visualizer la liste des nodes , cliquez sur la node IOBox (Value Advanced). Comme vous aurez besoin de cette node trés souvent , il existe un racourci double clic droit et voila.

Connecter les nodes

Pour connecter les IOBoxes à la node + (Value) bouger le curseur sur la sortie de l´IOBox et faites un clic gauche . Notez que toutes les entrées qui accepte cette connection ont grossi . Maintenant cliquez ou vous voulez dans le patch si vous voulez faire une connection segmentée. Finalement bouger votre curseur sur une entrée de la node + (Value) et cliquez une fois de plus . Vous pouvez aussi connecter d´une sortie vers une entrée.

Un clic droit aprés avoir commencé une connection l´annulera.
Vous pouvez supprimer une connection entre deux nodes en la selectionnant ( clic gauche ) et clic droit dessus ou en pressant DEL/ENTF ou BACKSPACE

Changer la valeur d´une IOBoxes marche de la meme facon que changer la valeur d´une entrée (pins) : cliquer glisser dans le milieu de l´IOBox avec le bouton droit. Si vous voulez faire un reset des valeurs d´une IObox ou d´un pin pressez ALT + clic droit dessus.

Maintenant faite un break et revenez dans deux minutes!

Rendering

Comment allons nous faire pour voir apparaitre le fameux hello world. Pour voir une sortie nous avons besoin d´un renderer node. Il y a differente renderer node (= possibilité de rendre ou d´afficher different type de données) dans vvvv
Pour notre tutorial nous avons besoin de créer un Renderer (GDI).

Comme mentionné plus haut , si vous connaissez déjà le nom de la node que vous voulez créer, vous pouvez simplement taper son nom après avoir double cliquer dans le patch, un menu déroulant apparait vous montrant toute les nodes commençant par ces lettres que vous avez tapé.Dés que la node que vous avez tapé est surligné vous pouvez presser entré. Ou vous pouvez utiliser les flèches du clavier pour surligner la node que vous désirez.

Renderer (GDI) est une des nodes qui a une fenetre associé avec elle. La fenetre aparait dés que vous avez crée la node .Pour placer la fenetre a l´interieur du patch ( comme vous pouvez voir dans la capture décran en dessous )
Soyez sur que la fenetre est active et pressez ALT + 2 . Maintenant le rendu doit etre a l´interieur du patch , vous pouvez faire l´operation inverse en pressant ALT+1.

Pour changer la couleur de fond du rendu , trouvez le pin d´entrée avec le nom Background Color et faites un clic droit pour faire apparaitre le champ de couleur. Dans celui ci vous pressez:

• le bouton droit et glisser pour changer la luminosité,
• le bouton droit et glisser de gauche a droite pour changer la teinte ou
• pressez CTRL pendant le glisser pour changer saturation.

Cliquez ou vous voulez dans le patch pour accepter la couleur.

Pour afficher du texte dans le rendu nous avons besoin de créer une node Text (GDI) et la connecter au rendu. Survoler les pins d´entrées et trouver le pin
Text. Faites un clic droit sur ce pin et entrez hello world. Ecrivez exactement la phrase hello world , c´est crucial pour finir le tutorial .
Cela fait partie de l histoire de la programmation donc ne déconnez pas.

Maintenant trouver le pin font et cliquez pour faire apparaitre le menu deroulant avec toutes les polices de caracteres presentent dans votre ordinateur.Ici vous pouvez choisir celle que vous voulez , l histoire ne vous en voudra pas, mais peut etre Lucida Console est un bon choix.

Interaction

Finalement faisons un peu d´interaction et disons que nous voulons changer la taille du texte suivant les mouvements verticaux de la souris mais aussi que nous voulons que la taille du texte ait un minimun de 15 et un maximum de 50.

Récuperer la position de la souris est facile depuis que nous avons créé un rendu qui retourne la position de la souris. La valeur retournée n´est pas en pixel mais entre (-1, -1)/bas gauche a (1, 1)/haut droit

Mapper la coordonnée y directement à la taille du texte n´a pas de sens car le texte ne serait pas visible , Nous aurions de meilleurs resultats si nous adaptions les coordonnées de la souris pour laisser le texte visible.
Nous allons donc mapper la valeur venant du rendu (-1 a 1 ) avec une nouvelle valeur allant de 15 a 50 .

Cette opération est facilement réalisable avec une node appellé Map (Value)
Au lieu de créer une nouvelle node nous allons modifier celle dont nous n´avons plus besoin + (Value) en double cliquant dessus et en tapant le nom de la nouvelles node. Notez que si les sorties des nodes + (Value) et de Map (Value) ont les mêmes noms , la connection à l´IOBox ne sera pas perdue.

Maintenant vous pouvez connecter la sortie Y du rendu au premier pin d´entrée de Map (Value) et la sortie de la node Map (Value) à l´entrée
Size de la node Text (GDI).

Pour que la node Map (Value) fasse l´opération que nous voulons, vous devez changer les pins d´entrée avec les valeurs suivantes.

• Source Minimum: -1
• Source Maximum: 1
• Destination Minimum: 15
• Destination Maximum: 50
• Mapping: Clamp

Bouger la souris de haut en bas sur le rendu doit maintenant changer la taille du texte interactivement, entre 15 et 50.

Experimentation

Votre oeuvre d´art est maintenant finie et vous pouvez faire une pause.Si vous ne pouvez pas vous arreter maintenant, vous pouvez vous amuser avec les autres nodes de la catégorie GDI ou simplement regarder leur fichier d´aidehelppatches.

N´oubliez pas non plus de regarderThe User Interface in Detail, qui vous apprendra d´autres trucs pour patcher plus vite et intuitivement.

Si vous vous sentez à l´aise avec ce que vous avez appris dans ce tutorial
vous devriez continuer avec le tutorial 2 :Herr Inspektor.