Fondamenti di VVVV - VVVV fundamentals

Fondamenti di VVVV
Tutorial introduttivo al software multiproposito VVVV
Translated and commented by Lanvideosource
www.lanvideosource.net
[email protected]
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
l’ambiente 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 l’utilizzo 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 all’interno 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 all’interno 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
2
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 all’interno 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.
3
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 all’inizio
capire come inserire i nodi o gli oggetti all’interno 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 l’ha 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.
all’interno 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 all’inizio 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 dell’ADD. 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 l’output 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 ‘+’ all’input (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.
5
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 nell’architettura 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 dell’operazione 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 sull’input, che dà come risultato l’output.
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 all’interno 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 all’interno sia all’esterno 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 all’esterno 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 l’angolo 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 all’input 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 all’altro semplicemente
cambiandone il nome. Il modulo Map lo userete all’ossessione 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!
9
IL PANNELLO DI ISPEZIONE
Poiché siamo partiti dall’inizio, tanto vale dare uno sguardo all’unica 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: l’Inspektor.
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
l’inspektor.
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 sull’inspektor 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, quell’inspektor 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 dell’Inspektor
‘Attach to Selection’.
Un’altra interessante funzione dell’Inspektor è 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,
l’Inspektor 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 l’architettura della patch utilizzando la
tecnica dello ‘spreading’.
La parola ‘spread’ in effetti denota nient’altro 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 quell’informazione
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 l’output 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 dell’amico
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
l’inspektor 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 all’interno 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 (l’output 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 all’input 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 l’output 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 sull’asse 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.
L’output 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 l’ouput 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 all’interno 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 all’Inspektor. 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) (l’ultimo 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 l’help 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
All’inizio 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 l’output 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 l’apparenza 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 nell’Inspektor e dall’aspetto 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 l’output della IObox è
formato effettivamente da tre valori.
-
Abilitate dall’Inspektor l’opzione 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 dall’alto 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. L’index si incrementa dall’alto 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 l’applicazione.
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 l’uso 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 l’idea di cosa succede all’interno 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 dell’input più numeroso
viene utilizzato per calcolare il numero di slices dell’output. Il numero
di spread dell’input 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 l’output del LinearSpread (Spreads) all’input 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