Sei sulla pagina 1di 26

Fondamenti di VVVV

Tutorial introduttivo al software multiproposito VVVV


Translated and commented by Lanvideosource www.lanvideosource.net lan@lanvideosource.net www.vimeo.com/lanvideosource www.flickr.com/photos/zeno77

INDICE
PREFAZIONE __________________________________________________________________________________ 3 COLLEGARE E MODIFICARE I NODI _____________________________________________________________ 5 PARTIRE DALLA FINE: IL RENDERING ___________________________________________________________ 6 IL PANNELLO DI ISPEZIONE ___________________________________________________________________10 PATCHATE E MOLTIPLICATEVI: GLI SPREADS ___________________________________________________12 ACCEDERE E MODIFICARE I SINGOLI SLICE _____________________________________________________15 I NODI DI INPUT/OUTPUT: LE IOBOX __________________________________________________________17 CREARE INTERFACCE DI CONTROLLO CON LE IOBOX ___________________________________________20 SPREADING AVANZATO_______________________________________________________________________21 GESTIONE SEMPLIFICATA DI ISTANZE MULTIPLE ________________________________________________22

VVVV un software creato da meso (http://www.meso.net/) circa cinque anni fa. Viene proposto come kit multiproposito, sebbene sia pensato principalmente come ambiente di programmazione per il sistema DirectX di windows. Dal punto di vista delle possibilit offerte, permette di generare vettori e forme nello spazio 3d, leggere e proiettare clip e tracce audio, far interagire lambiente di programmazione DirectX con tutta una serie di interfacce esterne come controllers midi, Arduino, banchi di controllo luci, ecc. Permette di importare, esportare e modificare modelli creati con Maya, 3D studio o C4D, permette lutilizzo di plugin esterne come le freeframe, per modificare video o oggetti 3D. Tramite la tecnica del Boygrouping, VVVV ha la possibilit di dividere su pi computer lo streaming video, offrendo la possibilit di proiettare su un numero indefinito di proiettori. Due sono le caratteristiche che distinguono VVVV da altri software simili come Max/Jitter, Processing, Pure Data o Quartz Composer: la possibilit di implementare gli shaders e la semplicit nel creare e gestire insiemi di dati. Degli insiemi di dati, detti Spreads, ne parleremo pi avanti. Gli shaders sono invece dei programmi, continuamente sviluppati dalle aziende produttrici di schede video, che vengono fatti girare allinterno di VVVV che permettono di creare in maniera molto semplice effetti, scene o oggetti 3D o 2D. Questo tutorial introduttivo a VVVV rappresenta un primo passo nel mondo di questo software e vi permetter di familiarizzare con le funzioni di base ed i suoi principi. Vi consiglio di studiarlo con attenzione perch le nozioni che troverete di seguito sono basilari ed assolutamente necessarie per un uso consapevole di VVVV. Finito il tutorial, vi consiglio di incominciare con un po di reverse engineering cio smontate e studiate le patch di quelli pi bravi di voi. Ricordate che potrete sempre vedere e modificare qualsiasi patch. Magari iniziate con quelle contenute nella cartella Girlpower allinterno della directory di VVVV. Questo tutorial la traduzione (con aggiunte ed annotazioni) di quello composto dalla community e che trovate in tre lingue al link: pertanto si ringrazia la comunit VVVV tutta. VVVV gira solo sotto Windows XP e necessita di istallazione delle DirectX9.0c. Non gira in ambiente vista e con le DirectX10. Alcuni link utili per iniziare:
Scaricare VVVV (E freeware finch non lo si usa a scopi commerciali!) http://VVVV.org/tiki-download_file.php?fileId=1446 Il sito di VVVV - http://www.VVVV.org/ Altre informazioni sulle possibilit di VVVV - http://www.VVVV.org/tikiindex.php?page=propaganda Il forum di VVVV - http://www.VVVV.org/tiki-forums.php Cosa vuol dire VVVV? - http://www.VVVV.org/tiki-index.php?page=MeaningOfVVVV Pagine degli utenti VVVV - http://www.VVVV.org/tiki-index.php?page=user Tutorial e patch dimostrative - http://www.VVVV.org/tikiindex.php?page=Documentation

Avete avviato VVVV per la prima volta e vi state chiedendo come imparare ad usarlo e come ottenere qualcosa di utile. Prendetevi del tempo e continuate a leggere, in circa 20 minuti avrete completato il vostro primo tutorial e avrete capito il funzionamento base di VVVV. Appena avete avviato VVVV si aperta automaticamente una patch di esempio per mostrare ci che si pu ottenere. Se volete passare oltre ed iniziare a usare il software non dovete fare altro che cancellare il file Args.txt nella directory di VVVV. Ora chiudete premendo la combinazione classica di windows: ALT+F4. Vi verr chiesto di salvare il file, per il momento cliccate su Don't save and Close. Avviate di nuovo VVVV e l'esempio di prima scomparso, tutto ci che vedrete una finestra grigia vuota chiamata patch. Benvenuti in VVVV.

PREFAZIONE VVVV usa oggetti grafici per la programmazione al posto di un interfaccia testuale. I programmi vengono creati allinterno di patches. Le operazioni individuali o le funzioni vengono rappresentate come moduli, chiamati nodi. Le varie connessioni tra i nodi vengono disegnate e modificate usando il mouse in modo da creare strutture che inviano dati da un nodo all'altro.

Generalmente, un nodo, come una funzione, genera o processa dei dati. Alcuni nodi operano una combinazione di queste due operazioni. Ogni nodo pu avere vari input e output, rappresentati da piccoli quadrati neri sopra o sotto al nodo stesso, questi quadratini vengono chiamati pins. Facendo un confronto con la programmazione testuale i pins di input rappresentano i parametri/argomenti di una funzione, mentre i pins di output rappresentano ci che la funzione restituisce. Basta con la teoria. Passiamo alla pratica.. Avete quindi aperta davanti una finestra grigia vuota. E un po difficile allinizio capire come inserire i nodi o gli oggetti allinterno della patch o dove si trovino i men di programma. Sono tutti sotto i pulsanti del mouse: Premendo il tasto centrale del mouse (oppure SPACE + right button per chi non ce lha sul mouse) appare il men principale del programma da cui possibile salvare la patch, caricare, cercare dei nodi, copiare/incollare ecc..

Per il momento create una nuova patch premendo CTRL+P (oppure fatelo dal menu principale) ed una nuova finestra grigia apparir esattamente sotto il puntatore. allinterno della nuova patch potrete CREARE DEI NODI cliccando due volte con il sinistro dove vi pare in uno spazio vuoto della patch. Appare il cursore che chiede di digitare il nome del nodo da inserire. Dal momento che allinizio non conoscerete il nome dei nodi che vi servono, possibile mostrare una lista dei nodi disponibili (gi compresi nella versione scaricabile), premendo il pulsante destro del mouse sul nodo vuoto per scegliere il nodo da creare. Ne sono tanti, ma vedrete che andando avanti con lo studio del programma digiterete direttamente il nome dei nodi che cercate e che vi servono in quel momento. Presto vi renderete conto che buona norma crearsi delle patch clipboard contenenti i nodi che richiamate pi spesso, in modo da poterli semplicemente copiare/incollare. Cos si crea un NODO. Cliccate due volte con il sinistro, Incominciate a digitare con la tastiera IObox e vi accorgerete che mentre digitate appaiono i nodi che posseggono quel nome.

Come potete vedere, il nome di un nodo diviso in due parti: il nome e la categoria. Ogni nodo assegnato ad una categoria (arbitraria) che ne determina la tipologia. Come potete vedere esistono vari nodi con lo stesso nome ma appartenenti categorie diverse. Si potrebbe dire che fanno la stessa operazione ma in domini di informazione diversi. Create quindi una IObox digitando IObox e scegliendo IObox (Value). Vi si creata una di queste 4

Adesso copiatela ed incollatela altre due volte con la consueta combinazione ctrl + C , ctrl + V.

I nodi si possono copiare ed incollare (con gli stessi valori di input e output) un numero arbitrario di volte. Create un nodo ADD ciccando due volte con il sinistro e digitando il simbolo + con la categoria (value) tra le varie versioni dellADD. Avete creato quindi una funzione (Addiziona) con tre parametri: due input ed un output.

Adesso vanno collegati tra loro i quattro nodi.

COLLEGARE E MODIFICARE I NODI Se muovete il puntatore sui pins (quei quadratini in alto ed in basso di un nodo) potete ispezionare il valore di input ed output. In genere i pins di input sono quelli in alto e quelli di output sono in basso. Se premete con il destro su un pin e muovete il cursore in alto ed in basso potete cambiare il valore di quel pin oppure ciccando con il destro sul pin potete digitare direttamente il valore dalla tastiera. Se guardate i pin di input ed output del nodo + vedrete che sono settati a zero. Possiamo assegnare dei valori ben visibili o LISTE DI VALORI ai pin di qualsiasi nodo utilizzando le IOboxes che avete creato prima. Collegate loutput di due delle IObox ai due input del nodo + semplicemente ciccando con il sinistro sui nodi e collegando, con la linea che si viene a creare, i pin dei nodi. Collegate anche il pin di output del nodo + allinput (pin in alto) della terza IObox. Per eliminare un collegamento baster selezionarlo con un click e premere il tasto DEL. Stessa cosa per cancellare un nodo: click sul nodo e DEL.

Cliccando e trascinando un nodo potrete sistemarlo dove volete nella patch, questo non influir in alcun modo sul suo funzionamento, ma sicuramente influenzer la leggibilit e manegevolezza della patch stessa. Raccomando sin da subito di tentare di essere ordinati nellarchitettura della patch (almenoch non si voglia lavorare con il caos). Si pu creare una IObox (value) anche cliccando due volte con il destro sullo stage.. Collegati gli input e gli output del nodo + alle IObox, la funzione ADD incomincia a funzionare, sommando i valori contenuti nelle due IObox di input e restituisce ll prodotto delloperazione attraverso la IObox di output. Se premete con il destro su una IObox e muovete in alto o in basso potete aumentare o diminuire il valore di una IObox oppure premendo due volte con il destro potrete immettere direttamente il valore. Cambiando i due addendi vedrete cambiare il valore di output.

In linea di principio, come abbiamo detto, in VVVV ogni nodo rappresenta una funzione di qualche tipo effettuata sullinput, che d come risultato loutput.

PARTIRE DALLA FINE: IL RENDERING Il VVVV un software principalmente pensato per creare immagini sfruttando le DirectX di windows (il VVVV utilizza la versione 9) quindi il suo principale (ma non unico) prodotto rappresentato da una proiezione. Questa proiezione si definisce, in VVVV, Rendering. Quindi tra i vari moduli che potete creare troverete dei moduli Renderer, di diversi tipi. Tutti questi moduli di renderer sono associati ad una finestra e rappresentano il vostro output video. I moduli Rendrer nella lista appartengono a categorie diverse e vengono utilizzati per renderizzare o visualizzare diversi tipi di informazione. Creare e gestire una finestra di rendering: per il momento create un modulo Renderer della categoria GDI (Renderer (GDI)) cliccando due volte 6

con il sinistro nella patch e digitando Renderer. Dalla lista Scegliete il renderer giusto..

Il renderer GDI, ed in generale i moduli GDI gestiscono principalmente il testo ed effetti di base. Vengono utilizzati dai progettisti grafici principalmente per il debug, la visualizzazione rapida e per scopi didattici. La modalit principale di rendering ed il livello principale di lavoro in VVVV il DX9 e viene gestito appunto dai moduli DX9 ed EX9 e permette di creare oggetti grafici ed effetti pi complessi. Adesso utilizziamo i moduli GDI perch pi semplici. Una volta creato il modulo Renderer (GDI), noterete che esso appare come una finestra allinterno patch. Per il momento quello sar il vostro output video. Se passate con il mouse sui pin di ingresso del Renderer, vedrete gli attributi di quella finestra di rendering. Potete visualizzare la finestra di rendering sia allinterno sia allesterno della patch, come una finestra a parte. Cliccando su un modulo renderer e premendo CTRL + 1 e CTRL + 2 potete switchare tra le due modalit. Inoltre, con CTRL + 3, dopo aver selezionato un renderer, potete metterlo in FULL SCREEN. Per uscire dalla modalit fullscreen premere CTRL + 1 o CTRL + 2. Inoltre, per poter prendere degli screenshot della finestra attiva, basta premere Questi comandi e modalit di visualizzazione sono comuni a tutti i tipi di renderer. Un po di colore. Il renderer che avete creato possiede un pin di input Background Color tramite cui potrete decidere il colore di sfondo della scena renderizzata. Ciccate con il destro sul pin Background Color e vi si aprir un riquadro colorato in cui potete, smanettando opportunamente, cambiare il colore:

Con il pulsante destro e muovendo in alto ed in basso potete cambiare la luminosit. Cliccando con il destro e spostando il mouse a sinistra e destra scegliete il colore o la Hue. Tendo premuto CTRL e trascinando il mouse si pu modificare invece la saturazione. 7

Cliccate dove vi pare allesterno della color box per accettare il colore. La vostra patch si presenter pi o meno cos..

Chiaramente potete riposizionare la finestra di rendering trascinandola dal bordo oppure potete ingrandirla/rimpicciolirla trascinando langolo inferiore destro. Esplorate gli attributi di una finestra di rendering, sono moduli molto importanti e vanno conosciuti bene. Create un modulo Text (GDI) (mi raccomando di scegliere la categoria giusta). Il modulo Text (GDI) che avete appena creato possiede un pin di input Text. Cliccate con il destro e nel box che vi si aperto digitate qualcosa di non troppo lungo. Il pin Font invece permette di scegliere il carattere. - Collegate il pin di output del modulo Text allinput del Reneder (GDI), dovrebbe essere il primo a sinistra. Succede questo.

Adesso proviamo un po di interazione. Diciamo che vogliamo che il movimento verticale del mouse stabilisca le dimensioni del testo ed che le dimensioni del testo varino tra 15 e 50. 8

E molto semplice, in VVVV, catturare la posizione del mouse: Ogni finestra di rendering ha due pin di output, X output ed Y output che restituiscono le coordinate X ed Y del mouse QUANDO IL PUNTATORE PASSA SULLA FINESTRA DI RENDERING. I valori di posizione vanno da -1, -1 (mouse in basso a sinistra) a +1, +1 (mouse in alto a destra). Quindi dobbiamo trasformare questi valori dal range -1 +1 al range 15/50 per ottenere dimensioni leggibili del testo. Create un modulo Map (Value)? cliccando due volte con il sinistro. Oppure potete fare in un altro modo: trasformate il nodo + (value) che avete creato prima in un Map (Value). Cliccate due volte sul nodo + e sostituite il + digitando Map e scegliendo tra i possibili la categoria (Value).

E quindi possibile trasformare i nodi da un tipo allaltro semplicemente cambiandone il nome. Il modulo Map lo userete allossessione e serve per trasformare i valori in input traslandoli da un range ad un altro da voi scelto. Tramite i pin di input, impostate il modulo Map (Value) cos: Source Minimum: -1 Source Maximum: 1 Destination Minimum: 15 Destination Maximum: 50 Mapping: Clamp

In questo modo, spostando il mouse in alto ed in basso ingrandirete o rimpicciolirete il testo. Ricordate sempre che quando lavorate avete sempre almeno due valori belli pronti per poter controllare e interagire con il comportamento della vostra patch: le coordinate x ed y del mouse!

IL PANNELLO DI ISPEZIONE Poich siamo partiti dallinizio, tanto vale dare uno sguardo allunica altra finestra che vi capiter di vedere mentre lavorate con VVVV. Ogni modulo, come abbiamo visto, possiede dei pin di input ed output che rappresentano le variabili in entrata ed uscita di quel modulo. Sino al momento abbiamo visto che possibile modificare tali valori (solo quelli in input) in almeno tre modi: cliccando con il destro sul pin e trascinando il mouse, cliccando due volte con il destro sul pin per immettere direttamente un valore oppure collegando ad un pin una IObox impostata con un valore scelto da voi, che si potrebbe definire un modo per creare una variabile o una costante. Esiste anche un altro modo per ispezionare e settare un modulo in maniera molto pratica e veloce: lInspektor. Per mostrate la finestra di Inspektor associata ad un modulo: cliccare su un modulo e premere CTRL+I. Per esempio, create un modulo Renderer (EX9). Cliccando sul nodo Renderer che vi si aperto e premendo CTRL + I vi si aprir la finestra di Inspektor associata ad esso, tramite la quale potrete impostare i parametri del nodo. La finestra dovrebbe apparire simile a questa:

10

Come potete vedere, ci sono tutti i valori dei pin di input e quelli di output. Premendo con il destro su un valore di input e trascinando il mouse in alto ed in basso sar possibile modificare tutti i valori di input del nodo cui associato linspektor. Noterete, a sinistra di ogni valore, un quadratino che pu essere pieno o vuoto. Quando pieno, quella variabile visibile come pin di input o output in alto o in basso al nodo. Il quadratino vuoto indica che quella variabile nascosta. Questo vi permette di tenere ordine nella patch, rendendo visibili solo i nodi che intendete modificare dal vivo e nascondendo quelli che non andranno modificati. Tenete presente che, se cercate un pin di un nodo ma non lo trovate, possibile che sia nascosto. Agendo sullinspektor potrete renderlo nuovamente visibile come pin.

E buona norma tenere almeno una finestra Inspektor aperta: imparerete presto che ci sveltisce notevolmente il lavoro e la modifica dei nodi.
Se tenete aperto un solo Inspektor e cliccate su un nodo, quellinspektor conterr le informazioni relative a quel nodo. Se volete invece collegare stabilmente una finestra Inspektor ad un nodo, utilizzate il pulsante in alto a sinistra dellInspektor Attach to Selection. Unaltra interessante funzione dellInspektor la possibilit di modificare contemporaneamente pi nodi diversi. Create pi nodi dello stesso tipo (per esempio create tre IObox (Value) oppure tre IObox (Color)). Selezionateli tutti e tre utilizzando il tasto SHIFT oppure cliccando sulla patch e creando un quadrato di selezione attorno ai tre nodi. Chiamate un Inspektor (CTRL + I) e modificatene i valori.. Avrete modificato contemporaneamente tutti i nodi selezionati. Nel caso in cui la selezione multipla comprenda nodi di tipo diverso, lInspektor mostrer SOLO I PIN CHE QUESTI NODI HANNO IN COMUNE.

11

Avete imparato i fondamenti di VVVV: Creare una nuova patch Creare dei nodi al suo interno Collegare i nodi tra loro Modificare i nodi Utilizzare la finestra di inspektor per modificare i nodi

Adesso finalmente passiamo alla pratica, per mostrare una delle caratteristiche principali di VVVV: lo spreading, che si potrebbe tradurre con moltiplicazione. PATCHATE E MOLTIPLICATEVI: GLI SPREADS Nella maggior parte dei casi, quando avete intenzione di lavorare con istanze multiple di uno o pi dati, siano essi valori, colori, file, textures o geometrie, VVVV in grado di mantenere semplice larchitettura della patch utilizzando la tecnica dello spreading. La parola spread in effetti denota nientaltro che una LISTA. Una lista di valori, colori, stringhe di testo, oggetti, ecc. Un singolo elemento di questa lista viene definito Slice che si potrebbe tradurre (se proprio dobbiamo) in fetta o semplicemente livello. Come abbiamo visto prima, ciascun pin di un nodo veicola informazioni di un tipo (valori, colori, trasformazioni, stringhe di testo, ecc.). Ci che non ho detto che un singolo pin pu trasportare non solo una singola istanza di quellinformazione ma potenzialmente in grado di trasportare istanze multiple (uno spread, appunto) di quel dato. Generatori di spead E possibile visualizzare il numero di slice veicolate da uno specifico pin fermandocisi sopra con il puntatore. Create un nodo LinearSpread (Spreads) e fermatevi con il puntatore sul pin di output. Indica un bello 0.0000. Adesso settate il pin SpreadCount a 5, magari create una IObox (value) settata a 5 e collegatela a quel pin. Noterete che fermandovi sul pin di output appare un (5) alla destra del valore.

12

Ci che indica che loutput del nodo LinearSpread costituito da 5 slices, in questo caso 5 valori. E importante tenere sempre presente che, anche se un pin mostra un solo valore alla volta, potrebbe stare trasportando una intera lista di valori. Quindi sempre occhio al numeretto tra parentesi affianco al valore se non volete andare al manicomio.. Se volete vedere TUTTE LE SLICE veicolate da un pin, bisogna avvalersi dellamico Inspektor. Cliccate sul nodo LinearSpread e richiamate un inspektor con CTRL+I. Cliccate con il mouse sul quadratino a destra del valore di output e linspektor vi mostrer la lista dei valori (5 in questo caso) trasportati dal pin di output.

Ogni slice contrassegnata da un numero progressivo, PARTENDO DALLO ZERO. Questo valore viene detto SliceIndex. Se aumentate il valore del pin SpreadCount, vedrete aggiungersi altri valori della lista. Con un solo nodo avete creato una lista di valori diversi virtualmente infinita! Oltre al nodo LinearSpread, che crea una progressione lineare di valori, esistono altri tipi di generatori di liste, sbizzarritevi a creare nuvole di valori di varia natura tramite i quali, pi avanti, potrete creare dei sistemi particellari. Alcuni generatori di spreads: CircularSpread (Spreads) RandomSpread (Spreads) I (Spreads) GaussianSpread (Spreads) E chiaro come sia semplice, in VVVV, creare liste di valori o gruppi contenti istanze multiple di un dato. Poich tutto avviene allinterno di una unica funzione, le risorse richieste al sistema saranno minori rispetto al moltiplicare il nodo stesso molte volte. Lo spreading una funzionalit che distingue VVVV da altri software 13

in cui la creazione di istanze multiple di un dato effettuata moltiplicando la struttura stessa della patch. Tutto ci molto vantaggioso ad esempio nella creazione e gestione di sistemi particellari, soprattutto considerando le possibilit offerte dai nuovi potenti hardware e le recenti schede video. Come i nodi gestiscono gli spreads Al momento avete un pin (loutput del LinearSpreads) che trasporta 5 slices (valori, in questo caso). A questo punto vi chiederete come un nodo gestisca una serie di istanze di un dato, uno spread. Per vedere cosa succede, create un nodo Rendere (GDI) e poi un nodo Point (GDI), che connetterete allinput del Renderer. Il risultato un segno + che appare al centro della finestra di rendering (o alle coordinate assegnate ai pin di input X e Y del nodo Point). Adesso connettete loutput del nodo LinearSpread (Spreads) al pin di input X del nodo Point (GDI) ed osservate il risultato.

Cosa succede? In pratica il nodo Point (GDI) gestisce il pacchetto da 5 valori in questo modo: genera 5 simboli + in corrispondenza delle 5 coordinate X generate dal LinearSpread. La posizione sullasse verticale rimane invece la stessa poich avete assegnato un solo valore al pin Y del nodo Point (GDI). Ma cosa succede se assegniamo due spreads diversi ai pin di input X ed Y del nodo Point (GDI)? E cosa succede se questi due spreads hanno dimensioni diverse? Vediamo con un esempio pratico come un nodo di VVVV gestisce due spreads con un numero di slices differenti: Duplicate il nodo LinearSpread (Spreads) compreso la IObox collegata ad esso. Impostate il pin SpreadCount del secondo LinearSpread al valore due. Loutput di questo LinearSpread sar formato da 2 slices, in questo caso due valori. Potrete verificarlo fermandovi con il puntatore sul pin di output. Affianco al valore di output c un (2). Connettete louput del secondo LinearSpread al pin di input Y del nodo Point (GDI). 14

Ecco cosa succede quando il nodo Point (GDI) riceve 5 coordinate per la X e due per la Y: Il numero di simboli creati dal Point (GDI) stabilito dallo spread di dimensioni maggiori, quindi 5. Il primo + prende il primo slice del pin X ed il primo slice del pin Y. Il secondo + prende il secondo slice del pin X e il secondo slice del pin Y Il terzo + prende il terzo slice del pin X e di nuovo il primo slice del pin Y Il quarto + prende il quarto slice del pin X e di nuovo il secondo slice del pin Y E cos via In generale questo il modo in cui vengono gestiti gli spreads allinterno di VVVV. Ovviamente, non tutti i pin accettano uno spread. Alcuni pin accettano solo input formati da singole istanze. Per verificare se un nodo di input in grado di accettare Spreads, ricorrete allInspektor. A destra del valore relativo al pin di vostro interesse potrete trovare un simbolo > oppure un simbolo >>. Nel primo caso il pin non accetta uno spread, nel secondo si. ACCEDERE E MODIFICARE I SINGOLI SLICE Supponiamo che vogliamo estrarre e manipolare una singola slice tra quelle che abbiamo generato. Diciamo che vogliamo controllare manualmente la terza slice del primo LinearSpread. Inseriamo un nodo SetSlice (Spreads) nel modo illustrato qui >

15

Il terzo pin del nodo SetSlice (Spreads) (lultimo a destra) indica il numero della slice che vogliamo modificare. Poich le slice si contano dallo 0, se vogliamo intervenire sulla terza slice dobbiamo impostare questo pin su 2. Il secondo pin del SetSlice rappresenta il nuovo valore che vogliamo assegnare alla slice. Se manipolate quel valore, noterete che il terzo simbolo + nel vostro renderer si muove indipendentemente dagli altri. Ecco come si modificano e si estraggono singoli valori da uno spread. Se vogliamo modificare pi di un valore contemporaneamente dovremo ricorrere ad un nodo I (Spreads), collegato in questo modo:

In pratica, via il nodo I (Spreads) diciamo al SetSlice che vogliamo manipolare tutte le slices dalla prima alla terza. Poi, tramite un altro LinearSpread, creiamo i nuovi tre valori e cos via. La semplicit con cui possibile creare e modificare liste di valori vi render la vita facile quando avrete a che fare con sistemi complessi di dati o sistemi particellari, che possono comprendere anche qualche milione di oggetti e poligoni.. Ricordo che qualche tempo fa stavo creando una visualizzazione della nostra galassia partendo da una mappa stellare che contava circa 23.000 items! Vi consiglio di tenere sempre in considerazione gli spread e le loro potenzialit mentre patchate.. A questo punto, datevi uno sguardo agli help dei nodi (GetSlice (Spreads) ,

Stallone (Spreads) , Queue (Spreads) and Cons (Spreads), che sono altrettanto divertenti.. E sempre bene tener presente che cliccando su un nodo e premendo F1 appare lhelp relativo a quel nodo (se quel nodo implementa una patch di aiuto).
16

Passiamo ad approfondire la conoscenza delle IObox, che permettono di creare delle interfacce grafiche per controllare agevolmente le patch in situazioni live. I NODI DI INPUT/OUTPUT: LE IOBOX Allinizio del tutorial avete gi fatto la conoscenza con la IObox (Value Advanced), che pu essere inserita cliccando due volte con il destro sulla patch. Questo tipo di IObox sostanzialmente gestisce VALORI NUMERICI. E importante sapere che esistono IObox per altre tipologie di dati:

* * * *

IOBox IOBox IOBox IOBox

(String) (Color) (Enumerations) (Node)

IObox significa proprio modulo di Input/Output poich questi nodi servono per entrambi i propositi: possono essere utilizzati sia per immettere direttamente un dato o una lista di dati oppure per mostrare loutput da un nodo in funzione. Caratteristiche comuni delle IObox Provate a selezionare tutte le IObox e muovete il puntatore su uno degli angoli di una di esse. Il cursore cambier e ci indica che potrete ridimensionare le IObox tutte assieme. Tenendo premuto control potrete ridimensionare lungo una sola dimensione alla volta.

A parte le IObox (Node), che sono un po diverse, tutte i tipi di IObox condividono alcune caratteristiche in comune:

17

Selezionate tutte le IObox che avete creato escluso la IObox (Node). Chiamate una finestra Inspektor (CTRL+i), se non ce ne avete gi aperta una.

Dalla finestra Inspektor potrete cambiare lapparenza dei caratteri della IObox ma, cosa pi importante, potrete modificare il numero di righe e colonne contenute in una IObox.

Diciamo che vogliamo organizzare i dati o valori di una IObox in una lista formata da tre valori. Noterete che se proviamo a cambiare il numero di rows, la IObox continuer a mostrare un solo valore, sebbene la IObox indichi che possiamo inserire altri due valori al suo interno. E necessario cambiare il pin SliceCount Mode da Input a ColsRowPages. Infatti, quando il pin SliceCount Mode settato a Input, la IObox adatter la struttura dei dati contenuti sulla base del tipo di input. Se la IObox non collegata ad un input, il numero di righe, colonne e pagine settato di default ad 1. Settando la IObox in ColsRowPages, le direte che volete creare direttamente una griglia di dati, divisi in righe, colonne e pagine. Cambiate quindi il pin SliceCount Mode in ColsRowsPages. Poi settate il numero di rows, righe, a 3. Noterete nellInspektor e dallaspetto delle IObox che appaiono altre due caselle o slices che adesso possono essere modificate. Spostandovi con il puntatore sul pin di output, noterete affianco al primo valore di output un (3) che indica che loutput della IObox formato effettivamente da tre valori. Abilitate dallInspektor lopzione Show SliceIndex e ShowGrid per mostrare i numeri associati alle singole caselle e per visualizzare la IObox come una griglia.

18

Vi consiglio di sperimentare costruendo tabelle con strutture diverse aumentando e diminuendo il numero di righe e colonne, per prendere dimestichezza con le IObox. molto divertente creare tavolozze di colore che poi utilizzerete nella patch, creando griglie di valori con una IObox (color).

Quando invece vogliamo usare una IObox per visualizzare uno spread di dati, conviene settare il pin SliceCount Mode ad Input. Sar comunque possibile, modificando il numero di righe e colonne, settare il numero massimo di elementi dello spread che vogliamo visualizzare.

IOBox (color)

IOBox (Value advanced)

Generatore di spreads IOBox (Value advanced)

Creando rapidamente questa patchettina avrete una IOBox (Color) che ricevere dal RandomSpread 100 valori cromatici casuali e visualizzarli su 5 colonne da 25 slices. Tutto ci permette di comprendere meglio anche il concetto di spread. Come si visto, possiamo creare direttamente delle griglie di valori modificando semplicemente la struttura di una IObox. Creando righe o colonne e inserendo pi valori diversi avremo creato un insieme di valori, praticamente uno spread. I valori di una IObox, disposti in una griglia, o tabella se preferite, vengono letti generalmente dallalto in basso o da sinistra a destra. Vi accorgete di questo anche quando osservate i numeri di index associati ad un certo slice. Il valore di 19

indice riportato alla sinistra di una data casella ed distintivo di un singolo slice di quello spread. Lindex si incrementa dallalto in basso e da sinistra a destra, quando i dati di una IObox sono disposti in righe, colonne e pagine (ricordate excel?). Adesso che avete chiaro il concetto di insieme di valori o spread, definir ciascun elemento dello spread semplicemente uno slice. Infine, importante ricordare che possibile navigare e spostarsi ovunque e richiamare o modificare un qualsiasi valore dalla lista usando i nodi GetSlice e SetSlice di cui ho mostrato prima lapplicazione. Per riassumere, esistono almeno due modi per generare un insieme di dati: un generatore di spreads, di cui abbiamo parlato prima, oppure immettendo dei valori in delle IObox settate in righe e colonne.

CREARE INTERFACCE DI CONTROLLO CON LE IOBOX Le IOBox servono quindi per immettere dati semplici o disposti in griglie e leggere o visualizzare dati di output provenienti da un dato nodo. In pratica servono a controllare e modificare la patch stessa. Una degli aspetti pi importanti delle IOBox che esse possono essere utilizzate per creare vere e proprie interfacce grafiche di controllo della vostra patch. Potrete visualizzare o immettere un dato utilizzando IOBox opportunamente trasformate in pulsanti, rotelle e barre a scorrimento. Studiando le patch pi avanzate osserverete come ciascun programmatore (artista?smanettone?) adoperi le IOBox per crearsi almeno una parte di patch che funga da interfaccia e come sia utile crearsi una interfaccia contenente sono i valori e parametri che si vogliono modificare dal vivo. Adesso vedremo come creare pulsanti o barre ed altri elementi grafici di controllo della patch. Selezionate la IOBox (Value Advanced) ed osservate la finestra di Inspektor. Appaiono altri pin di configurazione relativi unicamente a questo tipo di IOBox. Provate a modificare i valori e divertitevi a trasformare le IObox in elementi di controllo per esempio per ottenere palette di colori o set di slides.

20

Prima di partire con il patching sfrenato, bene approfondire luso degli spread per svelare altre propriet di questa tecnica. Ricordo, anche in questo caso che, come per la maggior parte dei moduli, cliccando su un nodo e premendo F1, appare un tutorial relativo a quel nodo! Vi consiglio di avvalervi degli help continuamente, per scoprire gli usi e le funzioni che un dato nodo possiede ed in che contesti pu venire utile. SPREADING AVANZATO Adesso che avete imparato come adoperare le IObox, diamo uno sguardo nello specifico a come i nodi operano con gli spreads.

I due esempi in alto danno lidea di cosa succede allinterno di un nodo, se esso ha a che fare con spread contenenti un differente numero di elementi. Notate che i primi due e gli ultimi due grafici riportano lo stesso risultato. Per regola un nodo guarda innanzitutto il numero di items contenuti in tutti gli spreads che riceve. Il numero di slices dellinput pi numeroso viene utilizzato per calcolare il numero di slices delloutput. Il numero di spread dellinput meno numeroso viene internamente ridimensionato

21

al numero di slices massimo, riempiendo semplicemente le slices di differenza tra i due input, ripetendo i valori. Se questo paragrafo vi ha confuso pi che aiutarvi, non preoccupatevi: spesso le cose pi semplici sono pi difficili a spiegarsi che a farsi. Se farete un po di esperimenti con le slices e gli spreads, comprenderete questa regola a livello pragmatico. Ad esempio date uno sguardo a questo..

GESTIONE SEMPLIFICATA DI ISTANZE MULTIPLE

Supponiamo che avete un RoundRect (GDI) diviso linearmente in spreads lungo la coordinata X. Adesso desiderate che ogni primo rettangolo sia disegnato in verde ed ogni secondo rettangolo si disegnato in rosso. Questa operazione molto semplice se si incrociano spreads contenenti un numero diverso di slices. Date un occhio a questa patch..

Come potete vedere, mentre agli input X ed Y vengono mandati 5 valori tramite il LinearSpread (Spreads), al pin del colore vengono inviati soltanto due colori quindi verranno disegnati 5 oggetti ed i due colori verranno ripetuti alternatamene nei 5 elementi. Ma allora come si fa per ottenere una griglia di 5x5 rettangoli? Per prima cosa potreste semplicemente connettere loutput del LinearSpread (Spreads) allinput Y del RoundRect (GDI). Guardate cosa succede:

22

Il RoundRect continua a disegnare s stesso solo 5 volte poich il numero massimo di slices in output ancora 5. La prima coordinata X la stessa per prima coordinata Y, la seconda coordinata X la stessa per la seconda coordinata Y e cos via risultando in un ordine ascendente. Come superare questo problema? In VVVV esiste un nodo che si rivela molto utile quando avete il proposito di generare una struttura a griglia o una griglia di valori. Utilizzate il nodo Cross (2D) come mostrato nello screenshot qui sotto:

Cosa fa il nodo Cross? Cross d semplicemente in output 25 slices per X e per Y che sono il risultato di tutti i possibili incroci delle slices in input. Notate anche che la distanza tra i rettangoli pu essere gestita tramite il secondo input del LinearSpread (Spreads). 23

Infine, aggiungiamo un pizzico di interazione, che non fa mai male. Diciamo che vogliamo conoscere la distanza del centro di ciascun rettangolo dal puntatore del mouse. Esiste un nodo che permette di fare questo: Points2Vector (2D), che calcola la distanza tra due punti. Connettete il nodo Points2Vector (2D) come mostrato qui sotto e capirete cosa significano quei 25 numeri mostrati dalla IObox in basso a destra:

Esatto. Points2Vector (2D) restituisce le 25 distanze di ciascuno dei punti che formano la griglia dalla coordinata del mouse. Adesso, tramite il nodo Map (Value), mappate queste distanze ad un range ragionevole, cosicch potrete utilizzare tali valori come valori di dimensione per i quadrati formati dal RoundRect (GDI). Passando con il puntatore su un rettangolo, esso verr rimpicciolito tanto pi quanto si trova vicino al puntatore.

24

Adesso, se volete, aumentate e diminuite a piacimento il numero di spread generate dal LinearSpread e noterete che non importa con quanti quadrati o istanze volete lavorare, la patch rimarr sempre pura e semplice come il primo giorno.

25