| 5.2 Visuales | ||
|---|---|---|
 |
Capitulo 5. Misceláneo |  |
| 5.2 Visuales | ||
|---|---|---|
| |
Capitulo 5. Misceláneo | |
Las herramientas para las representaciones visuales ya fueron mencionadas en 2.2.4.3. Aquí examinaremos como controlar el canvas.
Cree un canvas (Put Canvas) e ingrese “c1” en el receive symbol dentro sus propiedades (click derecho en la caja superior derecha del canvas):
Ahora puede enviar mensajes al canvas:
Esto debe estar claro desde la sección anterior: Un patch prolijo se compone de un patch principal y sus subpatches (como en 3.4.2.4 y en 5.1.1.1). En este manual, usualmente omití esta clase de organización para que sea mas claro (es mas fácil de comprender un gráfico cuando toda la información esta presentada en la misma ventana).
Los coloridos elementos de un canvas pueden mejorar la claridad de su patch. (por ej., en 3.4.2.4). Para mostrar funciones, también pueden usarse de forma variable. Por ejemplo, puede mostrar el resultado de un generador aleatorio de esta forma:
patches/5-2-2-2-canvas-display.pd
También puede mostrar un numero en un tamaño mayor (aunque un symbol siempre debe acompañar el numero; aquí, se usa un “>”):
Las posibilidades son casi infinitas; puede incluso producir partituras gráficas usando varios canvas.
Los canvas pueden estar encima de objetos GUI; el orden en el cual son creados es critico. Puede hacer sus propios toggles:
Primero, fue creado un toggle con un tamaño de 55 y se le conecto un objeto “sel 1”. Luego, fue creado un canvas con un tamaño de 55 y un receive symbol “cx” fue creado y superpuesto directamente sobre el objeto “toggle” (el orden de creación es esencial; de otro modo, el canvas desaparece bajo el toggle). El objeto “sel 1” y todo el resto puede ser separado en un subpatch y un objeto “send” interno puede usarse para el “toggle”. (nota del traductor: si un objeto canvas esta por debajo del objeto al cual desea superponerlo, simplemente córtelo con Edit Cut y pegelo con Edit Paste , de este modo se convierte en el ultimo objeto creado).
Aquí nuevamente las posibilidades son infinitas. Para poner un ejemplo, puede poner una octava de teclas de piano (claramente, no soy el mas talentoso diseñador gráfico en Pd)
patches/5-2-2-3-piano-display.pd
El contenido del subpatch:
Debajo de las `teclas de piano` hay una serie de bangs:
Data structures son una familia entera de gráficos en Pd.
Puede ubicar elementos gráficos en un subpatch. Primero cree el subpatch “grafic” y defina variables y un gráfico para este subpatch. Esto se denomina un “template”. Contiene las variables con “struct”; para su argument, ingrese esl nombre del template (aquí “g1”) y los pares que se componen de tipo y nombre – en este caso, float x float y float q. “float” es el tipo (un numero decimal); x,y, (y) q son nombres libremente elegidos.
El gráfico puede ser definido con los objetos “drawcurve”, “drawpolygon”, “filledcurve” y “filledpolygon”. Usemos “filledpolygon” para nuestro primer ejemplo. Un polígono es una forma geométrica con varios lados. Los argumentos de izquierda a derecha son: color interior, color de perímetro, ancho del perímetro, puntos de coordinada por pares (comenzando arriba a la izquierda y procede en el sentido de las agujas del reloj).
Para crear un grafico, necesitamos “append”. Su primer argument es el nombre del template y luego posibles variables – x e y siempre deben ser usadas, El inlet derecho es el lugar en el subpatch donde el se ubicara el gráfico. Debe imaginar que los elementos gráficos en un subpatch están ordenados uno tras otro como en una lista. “append” primero debe saber el lugar en la lista que el objeto “pointer” nombro. Dele a “pointer” el mensaje “traverse pd-graphic”; esto causa que “pointer” valla al comienzo de una lista. Un “bang” enviara este lugar en la lista (a “append”). Luego dele la data de las variables al objeto “append” en su inlet izquierdo.
patches/5-2-3-1-data-structures1.pd
Por hacerlo mas claro: “x” e “y” son nombres especiales para elementos gráficos usados en data structures. Definen una posición absoluta, 50/50. Ud. creo un “filledpolygon” con un color interior 22, color de perímetro 12, ancho de perímetro 3, y con cuatro puntos: arriba a la derecha a una distancia de 0/0 desde la posición absoluta, arriba a la derecha a una distancia de 100/0 desde la posición absoluta, abajo a la derecha a 100/100, y abajo a la izquierda a 0/100. Si simplemente borra los últimos dos números a “filledpolygon”, formara un triangulo. Puede aplicar este mismo método para crear un polígono con cualquier cantidad de lados.
“traverse pd-graphic” básicamente lo lleva al principio del subpatch “graphic”; un bang enviá su posición a “append” y, cuando enviemos data con las variables necesarias, “append” crea el gráfico en esa posición.
Pero también puede cambiar algo de este gráfico. Ud. definió la variable “q” (un numero decimal) para el template “g1”. Ahora ingrese lo siguiente a “filledpolygon”: “filledpolygon 22 12 3 0 0 q 0 100 100 0 100 “. Uno de los puntos tiene solo una variable. Esta variable se puede modificar usando “append”:
patches/5-2-3-1-data-structures2.pd
... pero también con “set”. Este también debe recibir la información del pointer acerca de la posición donde algo sera cambiado dentro del subpatch. En este caso, esta un lugar después del principio. Use “traverse pd-graphic” para ir hasta el principio. El principio esta vacío; use “next” para ir al próximo gráfico. Ahora puede ingresar un valor para “q” en el inlet izquierdo.
patches/5-2-3-1-data-structures3.pd
Muchos gráficos se pueden lograr simplemente enviando mensajes a “append”. Use “next” para moverse de un gráfico a otro.
patches/5-2-3-1-data-structures4.pd
Acerca de los otros elementos graficos: “drawpolygon “ es solo una linea con angulos; el primer argument para el color interior esta omitido. Lo mismo para “drawcurve “, excepto que sus ángulos son redondeados. Aunque “filledcurve” resulta en una forma cerrada y su primer argument nuevamente se reserva para el color interior.
patches/5-2-3-1-data-structures5.pd
Otro punto importante: los puntos (vértices) de un gráfico que tiene variables, puede ser modificado con el mouse; el cursor cambia su forma sobre un punto, esto significa que puede clickear y arrastrar para modificar lo forma del gráfico.
Si utiliza “append” para diseñar un objeto gráfico, el output es un nuevo pointer para este nuevo objeto (como con “next”):
patches/5-2-3-1-data-structures6.pd
Un pointer es un tipo de informacion, e.g “trigger”:
patches/5-2-3-1-data-structures7.pd
Puede usar “get” para recibir información de los elementos gráficos que están en los pointers:
patches/5-2-3-1-data-structures8.pd
Por ultimo, puede crear un array (gráfico) usando data structures. El array es definido en “struct” con un nombre y otro template asignado. Use “plot” para definir el color, ancho, lugar de comienzo (x/y), y la distancia entre los puntos de este array.
Otro subpatch debe contener el otro template que las variables del array:
La variable “y” es automaticamente entendida como la altura del
array.
Esta variable es necesaria para crear el array
correctamente.
Here is the created array:
patches/5-2-3-1-data-structures9.pd
Puede modificar su tamaño con “setsize”:
La variable “y” debe modificarse algo indirectamente; use “element” para su acceso.
La forma de data structures puede cambiar en el futuro (escrito en junio 2008).Funciones adicionales especiales para data structures pueden encontrarse en la documentacion original de Pd.
Como mencionamos previamente, hay un programa adicional para Pd llamado GEM, que se utiliza para la generación y edición de video.