Práctica 6: Mostrando información en processing

Para mostrar información en Processing lo podemos hacer de dos maneras:

EN LA CONSOLA DEL IDE

Para ello utilizaremos las funciones:

print(); y println();

Ambas imprimen la cadena que pongamos dentro de los paréntesis en la consola del IDE de Processing. La diferencia entre ambas es que println() inserta un salto de linea déspues de la cadena a imprimir.

Ejemplo:

println(“Hola mundo”);
print(“Bienvenidos a Processing”);

Este método nos puede servir para mostrar mensajes de confirmación o chequeo de cara al programador o al usuario, pero este formato no es muy estético.

Cuando queramos mostrar una información y poder darle un formato más complejo (estilo, tamaño, color, etc…) utilizaremos los siguientes métodos.

EN LA VENTANA O LIENZO

De esta manera vamos a poder:

…cambiar el tamaño de la fuente

Esto lo haremos con la función:

textSize(x);

Probemos el siguiente ejemplo:

void setup()
{
size(650,200);// creamos la ventana de 650×200
textSize(12);// definimos el tamaño de la letra
text(“programacionyrobotica.com”, 10, 30);// escribimos el texto en la posición X,Y

textSize(32);// definimos el tamaño de la letra
text(“programacionyrobotica.com”, 10, 70);// escribimos el texto en la posición X,Y

textSize(42);// definimos el tamaño de la letra
text(“programacionyrobotica.com”, 10, 120);// escribimos el texto en la posición X,Y
}

void draw()
{

}

…y obtenemos el siguiente resultado:

…cambiar posición del texto

Esto lo haremos con los parámetros X e Y de la función:

text(“texto”, X, Y);

Probemos el siguiente ejemplo:

void setup()
{
size(700,150);// creamos la ventana de 650×200
textSize(32);// definimos el tamaño de la letra
text(“programacionyrobotica.com”, 10, 30);// escribimos el texto en la posición X,Y

text(“programacionyrobotica.com”, 100, 70);// escribimos el texto en la posición X,Y

text(“programacionyrobotica.com”, 200, 120);// escribimos el texto en la posición X,Y
}

void draw()
{

}

Y obtenemos el siguiente resultado:

…cambiar el color de la fuente

Esto lo haremos con la función:

fill(R, G, B);  o  fill(R, G, B, transparencia);

R: componente RED (de rojo)

G: componente GREEN (de verde)

B: componente BLUE (de azul)

Probemos el siguiente ejemplo:

void setup()
{
size(650,200);// creo la ventana
textSize(32);// defino el tamaño de la fuente
fill(0, 255, 25);// defino el color 1
text(“programacionyrobotica.com”, 10, 30);

fill(125, 0, 125);// defino el color 2
text(“programacionyrobotica.com”, 10, 70);

fill(25, 0, 255, 61);// defino el color 2 y su transparencia
text(“programacionyrobotica.com”, 10, 110);
}

void draw()
{

}

Y obtenemos el siguiente resultado:

…cambiar el estilo o fuente

Para incorporar una nueva fuente a nuestro proyecto debemos hacerlo desde el menú principal: “Heramientas->Crear fuente…”

Nos aparecerá el listado con todas las fuentes posibles. La seleccionamos y le damos a “aceptar”. De esta manera la incorporará en la carpeta “Data” de nuestro proyecto. Deberemos hacer ésto por cada fuente distinta que utilicemos en nuestro proyecto.

Además, tenemos que fijarnos en el nombre del fichero con extensión .vlw que será el que deberemos invocar en nuestro programa (como veremos a continuación).

Veamos un ejemplo a continuación para alternar entre varios tipos de fuente:

void setup()
{
PFont mono;// creo una variable de tipo fuente de letra

mono = loadFont(“CooperBlack-48.vlw”);// cargo el primer estilo de fuente
textFont(mono);

size(650,200);// creamos la ventana
textSize(32);// definimos el tamaño de la fuente
fill(255, 0, 0);// definimos el color de la fuente
text(“programacionyrobotica.com”, 10, 30);// escribimos el texto con la fuente por defecto de Processing

mono = loadFont(“Bauhaus93-48.vlw”);// cargo el primer estilo de fuente
textFont(mono);
text(“programacionyrobotica.com”, 10, 70);

mono = loadFont(“CurlzMT-48.vlw”);// cargo el segundo estilo de fuente
textFont(mono);
text(“programacionyrobotica.com”, 10, 110);
}

void draw()
{

}

Y obtenemos el siguiente resultado: