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

• Ya empezamos. Ahora de verdad.
• El menu principal
• Crear un nodo
• Tipos de nodos y categorias
• IOBoxes
• Conectar nodos
• Renderizado
• Interacción
• Experimentando un poco mas alla

El siguiente tutorial asume que no tienes ningun conocimiento sobre vvvv . Cada paso que necesitas para entender el tutorial por completo sera explicado .Aun asi quizas tengas curiosidad sobre sobre algunos detalles mas acerca del interface de vvvv. Si se te falta algo hechale un vistazo a The User Interface in Detail. Pero no olvides volver aqui ¡

Ya empezamos. Ahora de verdad.

Asi que has empezado vvvv y te enfrentas con una ventanita gris(si no es asi lee Introducción si te estas preguntando donde estan los botones , menus ,barras de scroll para clickear y jugar , estas en el sitio corecto .

El menu principal

Presiona tu boton central del raton (o espacio + boton derecho si notienes un boton central en tu raton ) y veras el menu principal .aqui encontaras todas las opciones mas comunes .
Por ahora crea solo un nuevo patch New Patch CTRL+P y te fijaras que este patch aparece en l aparte de arriba izquierda debajo de tu cursor . Esto es practico por que ahora puedes hacer clik y arrastrar el patch en la posición deseada de tu pantlla .

Crear un nodo

Ahora haz click izquierdo en cualquier parte del patch. Una cajita vacia con texto parpadeando aparece invitandote a escribir el nombre del nodo que deseas crear .Pero un momento todavia no sabes ningun nodo. Supongo que preferirias ver una lista de todos los nodos que puedes crear , asi que haz click derecho en la cajita vacia y veras una lista por orden alfabetico . Si tienes un boton central on rueda usalo para subir o bajar en la lista , sino una barrita en el lateral te dejara hacer lo mismo ,(si no te sale pulsa ESPACIO).
Moviendo el cursor sobre el nombre de los nodos te dara en la mayoria de ellos una breve explicaciòn de lo que hace ese nodo .

Moviendo el raton un poco mas a la izquierda, aparece otra lista fuera de la anterior . Tiene los mismos nodos pero esta vez ordenados por categoria ,haz scroll hacia abajo donde pone categoria Value y haz click en el nodo + (Value) no en + (Value Spectral)!

Tipos de nodos y categorias

El nombre de un nodo consiste en varias partes:
A node's name consists of several parts:
NombredelNodo (Categoria Version1 Version2 ... VersionN)
Mientras que el nombre de version puede ser opcional , a cada nodo se le asigna una categoria seguida de parentesis despues del nombre ,esto permite a los nodos ser llamados de varias maneras + para existir en paralelo mientras que pertenezcan a diferentes categorias (e.g. + (Value), + (String), + (Color), ...).

Asegurate de haber creado el nodo correcto poniendo el cursor encima .Un letrerito aparece mostrando el nombre exacto del nodo .
Puedes mover el nodo haciendo click izquierdo encima y arrastrandolo hacia el lugar deseado .

Ahora mueve el cursor sobre las entradas para ver sus valores .
Si te fijas veras que estan ambas en cero , este es su valor por defecto .
Puedes cambiar los valores de las entradas hciendo click derecho .
Introduce un nuevo valor y presiona intro . Tambien puedes hacer click derecho sobre la entrada y subir o arrastrar para cambiar el valor . Despues de modificar la entrada puedes ver el resultado en el pin de salida.

IOBoxes

Para el mejor manejo de los valores de entradas/salidas puedes crear
IOBoxes , te ayudaran a visualizar mientras cambias los valores .
Haz click izquierdo en cualquier parte del patch y luego click derecho para ver la lista de nodos y busca IOBox (Value Advanced). Click.Como usaras este nodo amenudo , viene bien saber un atajo, doble click derecho en cualquier parte del patch y voila ¡ .

Conectar nodos

Para conectar la IOBoxe a el nodo + (Value) mueve el cursor sobre la salida de IOBoxe y haz click izquierdo una vez .
Si te fijas todos los pines que aceptan esta entrada se hacen un poco mas grandes .
Ahora haz click en el patch si quieres dar forma a la conexion .
Finalmente mueve el cursor sobre alguna entrada del nodo + (Value) y haz click una vez mas , esto cerrara l aconexion , no importa si empiezas la conexion en un pin de entrada o salida .

Si haces click derecho despues de empezar una conexion , se cancelara . Puedes borrar una conexion existente entre dos pines , seleccionando con click izquierdo y hacer clock derecho , presionar suprimir o espacio atras .

Cambiar el valor de las IOBoxes hace lo mismo que cambias el valor en los pines ; arrastra en medio de la IOBoxe con click derecho .
Si quieres resetear una IOBoxe o un pin a su valor por defecto , presiona ALT + click derecho encima.

Ahora tomate un descanso y vuelve en un par de minutos !

Renderizado

Como nos llevara esto a nuestro deseado hello world te preguntaras . Ya no queda mucho , pero sigue leyendo . Para ver cualquier salida necesitamos un nodo renderer . Hay varias posibilidades de renderer para visualizar o renderizar diferentes tipos de datos en vvvv.
Por ahora vamos a crear un Renderer (GDI).

Como hemos mencionado antes , si ya sabes el nombre del nodo que quieres crear , puedes simplemente hacer doble click izquierdo en el patch y escribir el nombre .

Una lista aparece mostrando todos los nodo sque empiecen con la sletras que has escrito y en cuanto el nodo que quieres este sombreado , solo tienes que darle a intro . Tambine puedes usar las flechas arriba y abajo para elegir el nodo deseado .

Renderer (GDI) es uno de los nodos que tiene una ventana asociado a el . Para poner como una caja (como ves en la foto de abajo) seleccionala y presiona ALT+2. Ahora estara minimizado en el patch . Puedes volver a poner el renderer de nuevo en modo ventana presionando ALT+1.

Para cambiar el color de fondo del renderer , encuntra el pin con el nombre Background Color y haz click derecho para mostrar el campo de color . Dentro de este campo de color presiona

• click derecho y arrastra arriba y abajo para cambiar el brillo,
• arrastra izquierda/derecha para cambiar los colores hue
• o presiona CTRL mientras arrastra para cambiar la saturación

Haz click en cualquier parte del patch para aceptar el nuevo color .

para ver texto en el renderer , necesitamos crear el nodo Text (GDI) y conectarlo al renderer. Busca el pin donde pone Text. haz click derecho y escribe hello world.
Escribir la frase exacta hello world es crucial para completar este tutorial , le debes esto a la historia de la programacion .

Ahora busca le pin ‘Font’, haz click para ver la lista de fuentes instaladas en tu sistema , aqui puedes elegir la fuente que quieras
a la historia no le importara .
Pero quizas Lucida Console es una buena elección .

Interacción

Finalmente tengamos un poco de interactividad , digamos que queremos cambiar el tamaño del texto dependiendo del movimiento vertical del raton , pero tambien queremos que el tamaño del texto tenga un minimo de 15 y maximo 50 .
Conseguir la posición del raton es trivial por qu eel renderer siempre dara las coordenadas del raton . Los valores que nos da no estan en pixeles pero si en un rango de (-1, -1) /abajo izquierda (1, 1)/arriba derecha .

Mapear la coordenada-Y directamente al tamaño del texto no tendria mucho sentido ya que un tamaño menor que 1 haria el texto invisile .

Conseguiremos un mejor resultado si usamos un mayor rango para el tamaño del texto , asi que mapearemos el rango de valores que salen del pin Y del renderer (e. -1 to 1) a el rango de 15 a 50 .

Ese mapeo de rango de valores es muy sencillo de conseguir con el nodo Map (Value).
En vez de crear un nuevo nodo podemos modificar el nodo+ (Value) haciendo doble click izquierdo y escribiendo en el nombre del nuevo nodo .
Fijate que como las salidas de + (Value) y de Map (Value) tienen el mismo nombre , la conexion a la IOBox no se pierde .

Ahora puedes conectar la salida Y del renderer a el primer pin del nodo Map (Value) y la salida del mismo a el pin size de Text (GDI).

Para conseguir nuestro proposito con el mapeo deberemos poner la siguiente configuración en Map (Value) :

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

Si mueves el raton arriba y abajo deberia de cambiar el tamaño del texto interactivamente entre el rango de valores 15-50.

Experimentando un poco mas alla

Ya has acabado tu obra de arte tomate un descanso . Si no encuentras la manera de parar en este momento . Puede que quieras jugar un poco con los otros nodos que puedes encontrar en la categoria GDI
o simplemente hechale un vistazo a su helppatches.

Tampoco olvides ver The User Interface in Detail

 , 

te enseñara muchos mas trucos para patchear mas rapido e intuitivamente .
Si te sientes seguro de lo que has aprendido en este tutorial , deberias continuar con 2: Inspektor.