Manual Processing

Hecho por:

Clara Valle Gómez

2. bac
 ÍNDICE

1. Inicialización de variables
2.Métodos y funciones
3.Operadores aritméticos
4.Declaración de arrays
5.Estructuras condicionales
6.Estructuras cíclicas
7.Gráficos y geometrías
8.El uso de los textos
9.El uso de eventos de ratón
10.El uso de eventos de teclado

CVG 2
 inicialización de variables
Nomenclatura de las variables
• Siempre debe declararse primero el tipo de variable

• Los nombres de las variables deben empezar siempre por una letra minúscula, aunque
pueden tener números, mayúsculas y guiones bajos.

• Los nombres deben ser una sola palabra.

• No se puede incluir ninguna puntuación o caracter especial a excepción el guión bajo “_”.

• El nombre de la variable no puede ser igual a ningún elemento del lenguaje ya utilizado por
Processing como “float” (tipo de variable) o “pi” (operador aritmético).

Tipos de variables
Variable int
Variable que almacena números enteros

int “nombre de la variable” = valor entero;

Variable float
Variable que almacena números decimales y potencias (usamos el punto como símbolo decimal)

float “nombre de la variable” = 3.14;

Variable double
Declara un valor numérico decimal más amplio y exponentes mayores que con la variable “float”

double “nombre de la variable” = 3.14;

Variable booleana
Solo permiten la declaración de dos valores, verdadero (true) o falso (false)

boolean “nombre de la variable” =true;

Variable char
Se declara como una letra entre comillas simples y son útiles para determinar que letra se está
pulsando o para cadenas de texto
char “nombre de la variable” = ‘a';

Variable string
Declaración de un conjunto de caracteres para que sean interpretados por processing

string “nombre de la variable” = "código ASCII”;

El uso de las mayúsculas: En general en processing los comandos van escritos en minúscula y,
en cambio, no suele tener en cuenta los espacios a la hora de programar.

Comentarios: los comentarios aclarativos que se deseen añadir se escribirán con // o con /* y
serán obviados por el compilador. Hay dos tipos de comentario:

• Las dos barras: // el comentario será todo lo que se escriba a continuación y en una sola línea

• La barra con asterisco: /*……*/ se utiliza para escribir comentarios de varias líneas

CVG 3
 Métodos y funciones



Métodos
Estos solo se pueden escribir una vez en el programa y es lo primero que debe aparecer en este.

void setup( ) {.......}

Método que se ejecuta una sola vez cuando se inicia el programa. Todo lo que hay dentro de sus
corchetes {.......}, en general, se utiliza para establecer las condiciones en las que se inicializará el
programa.

void draw( ) {.......}

Método que ejecuta indefinidamente todas las instrucciones que hay dentro de sus corchetes
{.....} . Siempre deberá escribirse después de un void setup( ), si es que este estuviese ya incluido
en el programa.

Cuando se utilizan funciones que exigen la existencia de un void draw( ) porque necesitan que el
código se ejecute continuamente, como las que detectan eventos del ratón o teclado, estas
pueden escribirse con los paréntesis y corchetes vacíos “void draw( ) { }”.

El número de veces que se ejecuta un “draw” puede ser controlado por:

delay( ); Comando que detiene la ejecución de un proceso durante un intervalo de tiempo que
será especificado dentro de los paréntesis ( ) con las unidades en milisegundos.

También se puede modificar con framerate( );, que suministra un número de frames por segundo
y con “noLoop”, que es posible ejecutarla una vez si incluye la función “setup”.

Funciones
Una función es un subalgoritmo, ya que forma parte de uno principal. Esta es capaz de recibir o
enviar datos y permiten dibujar formas con colores o realizar cálculos matemáticos.

En generaĺ se escriben en minúsculas y seguidas por paréntesis en los que, en algunas

ocasiones, se pueden introducir parámetros separados por comas.

• El color en processing: en el menú “Herramientas”, con la herramienta “selector de

colores”, nos dirá el código RGB del color seleccionado en pantalla.

color( ); este comando afecta al color de un objeto y solo admite escalas de grises dentro
de los paréntesis (valores que oscilarán entre 0 y 255).

CVG 4
Funciones que modifican el fondo

size(x1,y1); Esta función indica el tamaño de la pantalla en la que aparecerá nuestro programa, x
e y indican el alto y el ancho de esta. Nunca puede ir dentro de un “void draw( )”

background (x1,y1,z1); Indica el color de la pantalla en formato RGB o escala de grises.

Funciones que modifican la línea



stroke (x1,y1,z1); Selecciona el color de la línea de contorno en código RGB modificando los
valores de las variables (x1,y1,z1) o en escala de grises (x1).

strokeWeight (x1); Modifica el grosor de la línea de contorno, según el número de píxeles que se
indique en “x1”.

strokeJoin (x1); hace que los giros de la línea de contorno tengan un acabado rectangular,
achaflanado o redondeado (MITER, BEVEL o ROUND respectivamente) determinado por los
píxeles que se indiquen en “x1”.

strokeCap ( x1); // permite redondear las líneas de contorno según los valores de la variable ( x1)
puede ser de tipo ROUND o SQUARE, la primera opción redondea los extremos del trazo, la
segunda los hace cuadrados y la tercera es una mezcla de las anteriores.



noStroke ( ); Esta función elimina la línea de contorno del elemento dibujado y desactiva
cualquier función “stroke” para la funciones que estén escritas por debajo de este.

Funciones que modifican la figura

fill ( x1,y1,z1); Elegir el color de relleno en figuras cerradas en escala de grises o en RGB,
modificando los valores de las variables ( x1,y1,z1)

noFill ( ); Esta función elimina el color de relleno en figuras cerradas, lo que permite ver el color
de fondo de la pantalla y desactiva cualquier función “fill” para funciones que estén escritas por
debajo de este comando.

smooth( ); aplica suavizado a la figura

noSmooth( ); // desactiva cualquier función de suavizado para la funciones que estén escritas
por debajo de este comando.

Funciones de redondeo de números

ceil (x1); Redondea por arriba un número decimal ′′x1′′ para convertirlo en entero.

floor (x1); Redondea por abajo un número decimal ′′x1′′ para convertirlo en entero.

round (x1); Redondea por abajo un número decimal ′′x1′′ cuando la fracción decimal es inferior
a 0,5 y por arriba cuando es superior o igual a 0,5.

min (x1,x2,.....,xn); Devuelve el número de menor valor de una cadena de ′′xn′′ números.

max (x1,x2,.....,xn); Devuelve el número de mayor valor de una cadena de ′′xn′′ números.

Otras funciones

CVG 5
sin( ); Devuelve el valor del seno de un ángulo escrito entre paréntesis en grados sexagesimales.

print( ); Escribe en una línea de la consola el texto indicado entre paréntesis ( ).

println( ); Escribe en líneas diferentes de la consola el texto indicado entre paréntesis ( ).

Variables predefinidas
Almacenan o sustituyen valores y no necesitan ser declaradas

width: Almacena el ancho de la ventana definido por “size( )”. Lo que permite, por ejemplo,
encontrar un punto de en mitad del ancho con “width/2”

height: Almacena el alto de la ventana definido por “size( )”. Lo que permite, por ejemplo,
encontrar un punto en la mitad del alto con “height/2”

frameRate: Guarda la velocidad con la que se ejecuta el programa, se puede variar.

frameCount: Almacena el número de frames que el programa ejecuta desde su inicio. Esta
variable se inicializa a 0 y al entrar la función draw( ) aumentará a medida que se ejecute o
ejecuten funciones.

displayHeight: Almacena la altura de la pantalla completa al ser desplegada, se utiliza para crear
una ventana independiente del dispositivo de ejecución.

displayWidth: Almacena la anchura de la pantalla completa al ser desplegada, se utiliza para

crear una ventana independiente del dispositivo de ejecución.

key: Almacena el último valor de la tecla que se haya oprimido.



keyCode: Detecta el valor de teclas especiales como las flechas (UP, DOWN, LEFT o RIGHT) y
otras como ALT, CONTROL o SHIFT.

KeyPressed: Es una variable booleana que adoptará los valores FALSE si no se pulsa una tecla o
TRUE si se hace.

mousePressed: Es una variable booleana que almacena el estado de los botones del ratón. Si el
boton del ratón está presionado el valor de esa variable será TRUE y, si no, será FALSE.

mouseButton: Esta variable que se inicializa a cero y detecta que botón del ratón fue pulsado.
Puede ser el botón izquierdo (LEFT), el botón central (CENTER) o derecho (RIGHT).

random: Es una variable capaz de generar un valor aleatorio dentro de un determinado rango de
valores proporcionados, por ejemplo:

float w; //define a la variable “w” como flotante


w=random(0,10); // y ahora se le asigna a la variable “w” un valor aleatorio entre 0 y 10.

CVG 6
 Operadores aritméticos
Se utilizan para hacer cálculos entre dos números o variables y obtener el resultado deseado.

Operadores comparativos

= Operador de igualdad

> Mayor que


< Menor que

>= Mayor o igual

<= Menor o igual

== Operador de asignación

+= Asignación de suma

-= Asignación de resta

*= Asignación de producto

/= Asignación de división

% Asignación del último resto entero de un número entre otro, por ejemplo 35 % 4 = 3

() Paréntesis

! Diferente

Operadores lógicos

|| O lógico

&& Y lógico

! NOT lógico

Otros operadores

x++ incrementa en una unidad el valor de la variable denominada como ′′x′′

x-- reduce en una unidad el valor de la variable denominada como ′′x′′

x-=1 disminuye en 1 el valor de la variable denominada como ′′x′′

x+=2 incrementa en 2 el valor de la variable denominada como ′′x′′

x*=3 multiplica por 3 el valor de la variable denominada como ′′x′′

Operaciones matemáticas


sq(x1); calcula el cuadrado del número ′′x1′′ que se escribe entre los paréntesis.

sqrt(x1); calcula la raíz cuadrada del número ′′x1′′ que se escribe entre los paréntesis.

pow(x1,y1); calcula el valor que resulta de elevar el número ′′x1′′ al exponente ′′y1′′.

Los resultados de estas operaciones pueden guardarse en una variable que debe ser declarada
con anterioridad, como por ejemplo: “resultado=variableA+variableB;”. En caso de querer
mostrar la solución, usaremos el comando “println (resultado);” que escribirá el número obtenido
en la ventana de comandos.

CVG 7
 Declaración de arrays
Declaración por instanciamiento
int [ ] variable2 = new int [número de posiciones del array];

// declara que el array (se indica con [ ]) es de entero ya que el número de posiciones de una
matriz ha de ser entero. A la variable2 le asignamos mediante “= new” un determinado número
entero de posiciones.



void setup( )

// Solo va a realizar un ciclo de operaciones. Podríamos sustituirlo por un void draw( ) que
ejecutaría las instrucciones ordenadas de forma cíclica e ininterrumpida.

{

printArray(nombre de la variable elegida);

// Muestra el contenido del array en la consola en sucesivas líneas. Con printlnArray ( ) nos
presentara cada resultado en una sola línea en la consola, si ponemos solo print( ) nos indicará
un número que indica la posición del array en la memoria. Hay que tener en cuenta que en contra
de lo que pueda parecer para processing la primera posición de una matriz es la posición 0.



Declaración por numeración
int [ ] variable2 = new int [número de posiciones del array];



data[n]= número “n” // asignamos a data “n = n-1” que indicará la posición del array.

Declaración directa de arrays



int [ ] variable2= {1,2,3,4,5,6,7,8,9,10};

// declara que el array [ ] es de números enteros, que su nombre es “variable2”. Entre corchetes
indicamos los valores que contiene el array y de paso ya le indicamos el número de posiciones
que tiene.

void setup( )

// Solo va a realizar un ciclo de operaciones. Podríamos sustituirlo por un void draw( ) que
ejecutaría las instrucciones ordenadas de forma cíclica e ininterrumpida.

printArray(variable2); /

// Muestra el contenido del array en la consola en sucesivas líneas. Podríamos usar también
printlnArray ( ) para el resultado en una sola línea en la consola, o print( ) que nos indicará la
posición del array en la memoria.

CVG 8
 Estructuras condicionales

Condicional if-else

Las sentencias de control de flujo “if-else” permiten elegir entre dos condiciones, verdadero
(true) y falso (false).

Si la instrucción escrita dentro de los paréntesis ( ) se cumple, es decir, es verdadera, se ejecutará

la instrucción que está entre los cochetes {…} del “if”. Si no se cumple, se ejecutará la
instrucción que está entre los corchetes {...} del “else”. Tienen la siguiente forma:

if(condición 1)
{comandos a ejecutar 1 }


else
{comandos a ejecutar 2 si no se cumple la condición 1}

EJEMPLO

boolean variableA = false;

// si este valor fuese true, se ejecutaría la función else

size(640, 360);

if (variableA==false)

// la condición del “if” coincide con la variableA y la ejecutará.

{ background(88,172,184) ; }

else

// no necesita condición propia. Se ejecuta por defecto al no cumplirse el “if”.

{ background(234,137,154) ; }

Condicional if-else anidado

Cuando es necesario introducir mas de dos condiciones en una sentencia “if-else” debemos
introducir otro tipo de estructuras de control se conocen como condicionales “if-else” anidados,
que tendrán la siguiente estructura:

if (condición 1)
{comandos a ejecutar 1 }

else-if (condición 2)
{comandos a ejecutar 2 }

else (condición 3)
{comandos a ejecutar 3 }

CVG 9
Condicional switch

proporciona efectos equivalentes al if-else, pero mas sencillo cuando se quieren evaluar
condiciones múltiples.

Dentro de los corchetes {...} del ′′ switch ′′ tendremos las distintas posibilidades del resultado a
evaluar, declarados como ′′ case (valor de la variable a evaluar); ′′ y a continuación, la acción a
ejecutar, en caso de que no se cumpla ninguno de los casos propuestos se ejecutará la acción
que está entre los corchetes de la opción por defecto′′ default ′′. se recomienda usar la
instrucción ′′ break ′′ de modo que cuando se cumpla una de las condiciones seleccionada el
programa no siga evaluando condiciones de forma continua y no penalizar el tiempo de ejecución
de otras instrucciones.

EJEMPLO

int variable1 = 2;
// variar el valor de la variable para que se ejecuten los distintos casos del switch

size (400,400);

switch (variable1)

case 0: // si el valor de la variable es 0 se ejecuta la instrucción, si no evalúa el siguiente case.

background(0) ;
break; // instrucción que hace que la evaluación de variables se detenga para evitar el consumo
innecesario de recursos del procesador.

case 1: // si el valor de la variable es 1 se ejecuta la instrucción, si no evalúa el siguiente case.

background(255) ;
break;

case 2: // si el valor de la variable es 2 se ejecuta la instrucción, si no evalúa el siguiente case.

background(234,137,154) ;
break;

default: // cuando el valor de la variable no coincide con ningún caso anterior.

background(255,0,0) ;

break;

CVG 10
 Estructuras cíclicas
Un ciclo es una sentencia que se repite indefinidamente hasta que una determinada condición del
bucle deje de cumplirse.

Ciclos for
Los ciclos for manejan tres parámetros, la variable de control con su valor inicial que determina la
cantidad de veces que se va a ejecutar el ciclo y el incremento, la condición que se ha de cumplir
y los incrementos del valor en cada ciclo.

for (tipo de variable y valor inicial, condición a cumplir, incrementos de valor en la variable);


El ciclo for se ejecuta constantemente hasta que deje de cumplirse la condición.

EJEMPLO


int[ ] i = {1,2,3,4,5,6,7,8,9,10};

void setup( )

{
for (int i=0; i<10; i++);
//la variable, que empieza en cero (i=0), se irá incrementando según se repita el ciclo (i++), hasta
que i sea mayor que 10 (i<10)

{


println ( i );
//escribe en la consola, en distintas líneas, cada uno de los resultados que el ciclo for va creando
en la variable “i”

}}

En caso de que no conozcamos la extensión de la variable, usaremos .length que nos permitirá
abarcar todo el abanico de datos posibles. En este casol resultado es el mismo que el de la
anterior operación.

EJEMPLO

int[ ] variable1 ={1,2,3,4,5,6,7,8,9,10};

void setup( )

{
for (int i=0; i<variable1.length; i++)
//la variable, que empieza en cero (i=0), se irá incrementando según se repita el ciclo (i++), hasta
que no se puede aumentar mas “i”
{

println (variable1 [ i ]);

//escribe en la consola, en distintas líneas, cada uno de los resultados que el ciclo for va creando
en la variable “i”
}}

CVG 11
Ciclos while


Un ciclo while se ejecutará mientras se cumpla la condición la condición, que se escribirá dentro
de los paréntesis. Puede generar bucles infinitos.

EJEMPLO

int[ ] variable1={1,2,3,4,5,6,7,8,9,10};
// declara una matriz de enteros llamada variable1 con 10 datos y 10 posiciones.

int i=0;
// inicializa la variable “i”

void setup( )
// método que ejecuta una vez las instrucciones que están entre sus corchetes {...}.

{
while (i<10)
{

println (variable1 [ i ]);

// instrucción de impresión en la consola del valor asociado a cada una de las posiciones que
ocupa la ′′variable ′′ i ′′ en la matriz.

i++;
// instrucción para generar un incremento unitario de la′′variable ′′ i ′′ cada vez que se completa
la ejecución de un ciclo.
}
}

CVG 12
 Gráficos y geometrías
La función punto


la función punto point (x1,y1); dibuja un punto en las coordenadas indicadas.


EJERCICIO 1:

void setup ( )
{
size(500,500);
background(255);
stroke (0);
strokeWeight(30); // Hace un punto de 1px, lo que aumentas es el contorno de color
point (255,255); // Crea un punto en esa coordenada

La función linea
La función linea dibuja una línea definida entre dos puntos line (x1,y1,x2,y2); donde el primer
punto está en las coordenadas ′′x1′′ e ′′y1′′ y el segundo en ′′x2′′ e ′′y2′′.

EJERCICIO 2:

void setup ( )
{
size(500,500);
background(255);
stroke (0);
strokeWeight(10); // Aumenta el grosor de la línea a la cantidad indicada entre paréntesis
line (225,225,300,300); // Las dos primeras coordenadas indican la posición del primer punto y
las dos siguientes, las del segundo.

La función triángulo


La función triangle (x1,y1,x2,y2,x3,y3); dibuja los vértices del triángulo definidos por tres pares de
coordenadas ′′x1,y1′′, ′′x2,y2′′ y ′′x3,y3′′ indicadas dentro del paréntesis ( ).

EJERCICIO 3:

void setup ( )
{
size(500,500);
background(255);
stroke (0);
strokeWeight(10); // Aumenta el grosor de la línea a la cantidad indicada entre paréntesis
triangle(20,300,150,100,300,300); // Indican las coordenadas creando tres puntos que serán los
vértices del triángulo
}

CVG 13
La función cuadrilátero


La función quad (x1,y1,x2,y2,x3,y3,x4,y4); dibuja los vértices del cuadrilátero definidos por cuatro
pares de coordenadas ′′x1,y1′′, ′′x2,y2′′, ′′x3,y3′′ y ′′x4,y4′′ indicadas dentro del paréntesis ( ).

EJERCICIO 4:

void setup ( )
{
size(500,500);
background(255);
stroke (0);
strokeWeight(10); // Aumenta el grosor de la línea a la cantidad indicada entre paréntesis
quad(20,300,150,100,250,150,300,300); // Indican las coordenadas creando cuatro puntos que
serán los vértices del cuadrado
}

La función rectángulo y sus opciones



la función rect (x1,y1,Δx,Δy); permite dibujar geometrías rectangulares a partir de dos pares de
coordenadas ′′x1′′ e ′′y1′′ y ′′Δx′′ e ′′Δy′′ (estas dos últimas indicarían el ancho y el alto
respectivamente). El punto de referencia del rectángulo se encuentra en la esquina superior
izquierda. Podemos encontrar distintas variaciones de esta función:

rect (x1,y1,Δx,Δy,r1,r2,r3,r4); // En caso de querer una misma curvatura para todas las esquinas,
añadiremos un dato más ′′r1′′ indicando el radio, cuando queremos radios de curvatura distintos
en las esquinas hay que especificarlos en ′′r1′′, ′′r2′′, ′′r3′′y ′′r4′′ siendo estas las esquinas de
nuestro rectángulo respectivamente en sentido horario y empezando por la esquina superior
izquierda.

rectMode (CENTER); // pone el centro de referencia en el centro del rectángulo a partir del cual
se implementan las dimensiones del mismo, por lo que pasaría a ser rect (x1,y1,x2,y2). Para esto
también se podría utilizar ′′ width ′′ y ′′ height ′′ cuyos valores se toman del tamaño
determinado en ′′size ( )′′ y se pueden dividir entre cualquier fracción de denominador entero.

EJERCICIO 5:

void setup ( )

{
size(500,500);
background(255);

stroke (0);
strokeWeight(10); // Aumenta el grosor de la línea a la cantidad indicada entre paréntesis
strokeJoin(BEVEL); // la función BEVEL crearía un chaflán y ROUND redondearía las esquinas

fill(150); // Llena la figura del color indicado entre paréntesis

rectMode(CENTER); //Pone el centro de referencia en el centro del rectángulo, a partir del cual
escribiremos las coordenadas.

rect (100,120,110,160); // Crea el cuadrado condicionado a las funciones escritas anteriormente

}

CVG 14
La función elipse y sus opciones
la función ellipse(x1,y1,Δx,Δy); tiene su centro de referencia por defecto en el medio de las
dimensiones que la definen ′′x1′′ e ′′y1′′. Las otras dos coordenadas ′′Δx′′ e ′′Δy′′ indicarían el
ancho y el alto respectivamente. Podemos encontrar distintas variaciones de esta función:

ellipseMode (CORNER); // toma como punto de referencia la esquina superior izquierda del
rectángulo en el inscribe la elipse definida. También existen opciones como RADIUS, CORNERS,
y CENTER (predet), pero sus funciones pueden ser perfectamente sustituidas por otras ya
mencionadas.

Para su colocación también se puede utilizar ′′ width ′′ y ′′ height ′′ cuyos valores se toman del
tamaño determinado en ′′size ( )′′ y se pueden dividir entre cualquier fracción de denominador
entero.

EJERCICIO 6:

void setup ( )
{
size(500,500);
background(255);
stroke (0);
strokeWeight(10); // Aumenta el grosor de la línea a la cantidad indicada entre paréntesis
ellipseMode(RADIUS); //RADIUS,CORNER,CORNERS (no son muy útiles, se suele usar CENTER)
ellipse(250,250,200,50); // Crea la elipse condicionada a las funciones escritas anteriormente

La función curva y arco

la función curve (Cx1,Cy1, x1,y1, x2,y2,Cx2,Cy2); dibuja una curva definida entre dos puntos
extremos ′′x1,y1′′ y ′′x2,y2′′ cuya curvatura es definida por los puntos ′′Cx1′′ e ′′Cy1′′ y ′′Cx2′′
e ′′Cy2′′

la función arc (x1, y1, Δx, Δy, rad1, rad2 ,tipo de arco ); permite dibujar un arco a partir de dos
pares de coordenadas ′′x1′′ e ′′y1′′ y ′′Δx′′ e ′′Δy′′ (estas dos últimas indicarían el ancho y el
alto respectivamente). Se indican con ′′rad1′′ y ′′rad2′′ los ángulos de los extremos en radianes
(o con los parámetros PI, TWO_PI, HALF_PI y QUARTER_PI).

Con ′′tipo de arco′′ modificamos el cierre del arco: ′′OPEN′′ deja el arco abierto (modo por
defecto), ′′PIE′′ completa el arco con una línea recta que cubre el ángulo resultante y ′′CHORD′′
genera una cuerda que cierra el arco desde el punto de origen hasta el final.

EJERCICIO 7:

void setup ( )
{
size(500,500);
background(255);
stroke (0);
strokeWeight(10); // Aumenta el grosor de la línea a la cantidad indicada entre paréntesis
noFill( ); // Elimina el relleno de la figura
arc (255, 205, 200, 200, 0,HALF_PI,PIE); // Las dos primeras coordenadas indican el punto de
origen respecto al centro, las dos segundas el ancho y el alto, el tercer par son los ángulos en
radianes (en este caso con el parámetro HALF_PI, que corresponde a 1.5707 rad.) y por último la
forma del cierre del arco
}
CVG 15
Las curvas de bezier
La fució bezier (x1,y1,Cx1,Cy1,Cx2,Cy2,x2,y2); es una curva que se genera entre dos puntos
extremos ′′x1,y1′′ y ′′x2,y2′′ debida a una torsión de esos puntos, torsión que produce debido a
la acción de dos puntos de control que fucioan como tensores ′′Cxn,Cyn′′.

EJERCICIO 8:

void setup ( )
{
size(500,500);
background(255);
stroke (0);
strokeWeight(2); // Aumenta el grosor de la línea a la cantidad indicada entre paréntesis

bezier (20,20,480,20,20,480,480,480); //dibuja una curva definida entre dos puntos extremos
′′x1,y1′′ y ′′x2,y2′′ cuya curvatura es definida por los puntos de control o tensores ′′Cx1,Cy1′′y
′′Cx2,Cy2′′ asociados respectivamente a los puntos de control ′′x1,y1′′ y ′′x2,y2′′
}

Construcción de formas complejas

Las funciones “beginShape( )”, “vertex( )” y “endShape( )” unen una serie de puntos mediante líneas.



beginShape( ); // instrucción que ordena rellenar con líneas las distancias entre dos puntos o
vértices contiguos. Entre sus paréntesis pueden ir funciones como “LINE_LOOP, TRIANGLES,
TRIANGLE_STRIP, POLIGON y LINE_STRIP”.

vertex(xn,yn); // indicación de un vértice.

endShape( ); // instrucción que indica la finalización de la función. Entre sus paréntesis el

comando “CLOSE” es opcional, si no se incluye quedaría una línea abierta y si se se incluye
cerraría con una línea los extremos de la geometría creada.

EJERCICIO 9:

void setup ( )
{
size(500,500);
background(255);
strokeWeight(2); // Aumenta el grosor de la línea a la cantidad indicada entre paréntesis
beginShape( ); // Inicia la figura
vertex(250,30);
vertex(295,220);
vertex(490,220);
vertex(340,300);
vertex(480,480);
vertex(250,350);
vertex(20,480);
vertex(160,300);
vertex(10,220);
vertex(205,220);
endShape (CLOSE); // Cierra la figura con una línea
}
CVG 16
Distintas geometrías de la función “vertex”:

curveVertex (xn,yn); // Determina los vértices de una geometría curva. La función siempre consta
de 4 puntos, el primero y el último serán puntos de control y los del medio serán los vértices.

EJERCICIO 10:

void setup ( )

{
size(500,500);
background(255);
strokeWeight(4); // Aumenta el grosor de la línea a la cantidad indicada entre paréntesis
curveTightness(0); //Ajuste de la curva

beginShape( );
curveVertex(200,50); // Punto de control del extremo 1
curveVertex(50,50); // Extremo 1
curveVertex(350,350); // Extremo 2
curveVertex(450,550); // Punto de control del extremo 2
endShape( );
}

bezierVertex (Cx1, Cy1,Cx2,Cy2,xn,yn); // Dibuja una curva de bezier determinada por la posición
(xn,yn) y la curva vendrá determinada por los puntos de control (Cx1,Cy1) y (Cx2,Cy2).

EJERCICIO 11:

void setup ( )

{
size(500,500);
background(255);
strokeWeight(4); // Aumenta el grosor de la línea a la cantidad indicada entre paréntesis

beginShape( );
vertex(50,50); // 1º extremo curva
bezierVertex(350,10,350,50,150,150);
// (350,10)1º punto de control, (350,10) 2º punto de control, (150,150) 2º extremo de la curva.
bezierVertex(-50,250,250,450,350,350);
// (-50,250) 1º punto de control, (350,10) 2º punto de control, (350,350)2do extremo de la curva.

endShape( );
}

CVG 17
 El uso de los textos


La función “text( "hola",x1,y1)” se utiliza para la inclusión de texto. El texto se escribe entre
comillas y (x1,y1) sitúa la posición en la esquina inferior izquierda. Para modificar sus
características se utilizan las siguientes funciones:

textSize (x); // comando que indica el tamaño "x"en píxeles que tendrán las letras del texto.

text ("hola",x1,y1,Δx,Δy); //comando que añade un par de coordenadas al final (Δx,Δy)

representan la anchura y la altura de un rectángulo límite en el que se inscribe el texto.



text( "hola", width/x, height/x); //comando que inscribe el texto “hola" en una posición concreta
del ancho de la ventana determinado en ′′size ( )′′. El ancho está representado por la palabra
"width" y la altura por "height".

textAlign (X); //alinea el texto en el lugar indicado por la función, izquierda, arriba, derecha,
centro o abajo respectivamente: LEFT, TOP, RIGHT, CENTER o BOTTOM.

fill(x1,y1,z1); // esta función cambia el color del texto en formato RGB o en escala de grises.

EJERCICIO 12:

void setup ( )
{
size(500,500);
background(255);
fill (0);
textSize (20);
textAlign (CENTER); //La coordenada indicada se posiciona en el centro del texto

text("HOLA",40,40); //sin restricción

text("MUNDO",80,40,200,100); //con restricción del rectángulo 200·100 .

CVG 18
}

El uso de eventos de ratón

En processing podemos recurrir al uso de la programación dirigida por eventos o paradigmas de
programación, que están determinados por sucesos que ocurren en el sistema. Este tipo de
eventos necesitan de la presencia de un método void draw( ) que evalúe constantemente el
estado de las variables controladas.

void mousePressed(...) //método mousePressed, activa las instrucciones que están bajo su
área de influencia sus, es decir dentro de sus corchetes {...} cuando se pulsa y luego se retira la
presión sobre un botón del ratón.

EJERCICIO 13:

boolean bandera = false; // variable booleana inicializada como falsa

void setup ( )
{
size(500,500);
}

void draw( ) //método de ejecución cíclica en el que se evalúan constantemente las condiciones
y estados del sistema
{
if (bandera) // si la condición del if es verdadera se ejecuta la instrucción incluida entre los
corchetes que de el dependen.
{
background(0); //color de fondo negro
}
else // si no se cumple la condición del “if” se ejecuta la instrucción siguiente
{
background(255,0,0); //color de fondo rojo
}
}
void mousePressed( ) // función que va a detectar cualquier evento de pulsación sobre los
botones del ratón

{
bandera = ! bandera; // función que provoca la negación del estado de la variable booleana
declarada globalmente

(el resto de los ejemplos que se explican a continuación son iguales, solo varía el nombre
del void según la acción que se requiera)

void mouseClicked(…) // el método mouseClicked, activa las instrucciones que están dentro de
sus corchetes cuando se retira la presión de un botón del ratón.

void mouseDragged(…)// el método mouse Dragged activa las instrucciones que están dentro
de sus corchetes cuando se arrastra el ratón manteniendo algún botón del ratón pulsado.

void mouseMoved(...) // el método mouseMoved, activa las instrucciones que están dentro de
sus corchetes cuando se arrastra el ratón sin necesidad de pulsar ningún botón.

void mouseReleased(…) // el método mouseReleased activa las instrucciones que están dentro
de sus corchetes cuando se suelta un botón del ratón.

CVG 19
void mouseWheel(...) // el método mouseWheel activa las instrucciones que están dentro de sus
corchetes cuando se mueve la rueda del ratón.

Las siguientes condiciones se le aplican al if para que, según el botón pulsado, se ejecute
una opción u otra.

(mouseButton == RIGHT); //evento de ratón que indica que se ha pulsado el botón derecho del
ratón.

(mouseButton == CENTER); //evento de ratón que indica que se ha pulsado el botón central del
ratón.

(mouseButton == LEFT); //evento de ratón que indica se ha pulsado el botón derecho del ratón.

EJERCICIO 14:

void setup ( )
{
size(500,500);
background (200);
}
void draw ( )
{
if (mouseButton == LEFT) //si el botón izquierdo del ratón esta presionado.
{
fill(234,137,154); // el relleno del rectángulo es azul.
}
if (mouseButton == RIGHT) //si el botón izquierdo del ratón esta presionado.
{
fill(136,206,250); // el relleno del rectángulo es verde.
}
rectMode(CENTER);
rect (width/2,height/2,100,100); // rectángulo de 100x100 píxeles centrado a 1/2 del ancho y 1/2
del alto.
}

CVG 20
 El uso de eventos del teclado
En processing también podemos recurrir al uso de la programación dirigida por eventos o por
paradigmas de programación determinados por sucesos o acciones sobre el teclado. Este tipo
de eventos necesitan de la presencia de un método void draw( ) que evalúe constantemente el
estado de las variables controladas.

void keyPressed(...) // método keyPressed, activa las instrucciones que están bajo su área de
influencia, es decir dentro de sus corchetes {...} cuando se pulsa y luego se retira la presión sobre
alguna boton del teclado.

void keyReleased(...) // método keyReleased activa las instrucciones que están bajo su área de
influencia, es decir dentro de sus corchetes {...} cuando se suelta un botón del ratón.

(keyCode==TOP); // comprueba si se ha pulsado la tecla especial ↑.

(keyCode==BOTTOM); // comprueba si se ha pulsado la tecla especial ↓.

(keyCode==RIGHT); // comprueba si se ha pulsado la tecla especial →.

(keyCode==LEFT); // comprueba si se ha pulsado la tecla especial ←.

EJERCICIO 15:

boolean bandera = false; // inicializa la variable booleana bandera como falsa.

void setup ( )
{
size (500,500); // tamaño pantalla de presentación.
}
void draw ( )
{
if (bandera) // si la variable bandera es verdadera, se ejecuta la expresión del if.
{
background (0); // la pantalla de presentación se vuelve de color negro.
}
else // si no es verdadera, se ejecuta la expresión del else, que está entre sus corchetes.
{
background (255,0,0); // la pantalla de presentación se vuelve roja.
}
}
void keyPressed ( ) // llamada a una función definida posteriormente que se ejecutará cuando se
deje de pulsar una tecla.
{
if (key== 'a') // si la variable bandera es verdadera, se ejecuta la instrucción escrita en los
paréntesis del if. El programa distingue entre mayúsculas y minúsculas

{
bandera = true; // la pantalla de presentación se vuelve de color negro.
}
if (key== 'b') // si la variable bandera es verdadera, se ejecuta la instrucción escrita en los
paréntesis del if.
{
bandera = false; // la pantalla de presentación se vuelve de color negro.
}
}

CVG 21