Es el objetivo de este proyecto enseñar las
bases de Processing de forma fácil e
instintiva.
Processing
Introducción
Lucía Romero Prieto
CONTENIDO
1. Dibujar con Processing.............................................................................................................2
1.1 Sentencias y Sintaxis...........................................................................................................2
1.2 Ventana de dibujo..............................................................................................................2
1.3 Escribir comentarios...........................................................................................................2
1.4 Dibujar un punto................................................................................................................2
1.5 Dibujar una línea................................................................................................................2
1.6 Dibujar un triángulo...........................................................................................................2
1.7 Dibujar cuadriláteros..........................................................................................................3
1.8 Dibujar polígonos de 4 lados con la sentencia rect();...................................................3
1.9 Dibujar una elipse.........................................................................................................3
1.10 Dibujar arcos................................................................................................................4
1.11 Dibujar curvas bezier....................................................................................................4
2. Formas personalizadas.............................................................................................................4
2.1 Puntos y líneas................................................................................................................5
3. Variables...................................................................................................................................6
3.1 Variables de Programa.......................................................................................................6
4. Funciones aritméticas..............................................................................................................7
4.1 Aritmética...........................................................................................................................7
4.2 Prioridad en el Operador. Agrupación................................................................................7
4.3 Atajos.................................................................................................................................7
4.4 Limitando números............................................................................................................8
5. Repetición................................................................................................................................9
5.1 Iteración Anidada...............................................................................................................9
5.2 Formato de las estructuras...............................................................................................10
1. Dibujar con Processing
1.1 Sentencias y Sintaxis
Llamamos sentencias a las líneas de código de un lenguaje de programación, las cuales
siempre deben acabar con un punto y coma “;”.
Se debe tener en cuenta Processing sí distingue entre mayúsculas y minúsculas, por lo que es
necesario escribir las sentencias al pie de la letra, en este caso en minúscula. Se mostrará más
tarde cómo poner cada una.
1.2 Ventana de dibujo
Sabiendo que la página de Processing se mide en píxeles y se divide, a su vez, en dos ejes:
horizontal y vertical, que pertenecen al ancho y al alto de la página (siempre tomando como
centro la esquina noroeste de la pantalla), podremos elegir el tamaño más indicado para
futuros proyectos.
Utilizando la sentencia “size();” de tal forma que pondremos dos números separados por una
coma dentro del paréntesis
- Por ejemplo: Al poner “size(400,300);” se creará una ventana de 400 píxeles de ancho
y 300 de largo.
Importante no confundir esta sentencia con la creación de un punto que veremos a
continuación.
1.3 Escribir comentarios
Para escribir comentarios dentro del programa solo necesitamos poner dos barras inclinadas
después de haber escrito la sentencia. No hace falta alarmarse si el tono es más tenue, ya que
no forma parte del código.
1.4 Dibujar un punto
Usaremos la sentencia “point(x,y);” para dibujar pequeños puntos en la pantalla, donde:
- X será el parámetro que se moverá horizontalmente.
- Y será el parámetro que se moverá verticalmente.
1.5 Dibujar una línea
Necesitamos dos puntos para dibujar una línea, así que pondremos las coordenadas del primer
punto, junto con las del segundo punto en la sentencia “line(x1,y1,x2,y2);” de tal forma de
que queda de esta forma:
- Por ejemplo: “line(100,150,200,300);”
1.6 Dibujar un triángulo
Para dibujar un triángulo necesitaremos, al igual que en la línea, las coordenadas de los puntos
usando la sentencia “triangle(x1,y1,x2,y2,x3,y3);”, donde cada coordenada corresponde con
cada uno de los vértices del triángulo.
- Por ejemplo: triangle(100,100,300,100,200,300);
1.7 Dibujar cuadriláteros
Usando la sentencia “quad(x1,y1,x2,y2,x3,y3,x4,y4);” se pueden dibujar polígonos de 4 lados.
En los que, al igual que en el anterior caso, son 4 puntos, los cuales pertenecen a los vértices
del polígono en cuestión.
- Por ejemplo: quad(100,100,300,100,300,300,100,300);
1.8 Dibujar polígonos de 4 lados con la sentencia rect();
A la hora de dibujar un cuadrado no solo tenemos la opción de quad, sino que, el programa
también nos permite hacerlo igual y además con bordes redondeados gracias a la sentencia
“rect(x,y,ancho,alto,radio);” donde:
- x e y son las coordenadas de la esquina superior izquierda del rectángulo.
- Con el ancho y alto que le corresponden a la figura deseada
- Y el radio lo añadimos si queremos que nuestro cuadrilátero tenga los bordes
redondeados, siendo este parámetro el diámetro de cada uno de los radios.
- Por ejemplo: rect(100,100,200,200,25,50,50,20);
- O si no queremos los bordes redondeados: : rect(100,100,200,200);
Dentro de esta sentencia hay distintas funciones para usarla:
- rectMode(); modifica el modo en el que serán dibujados nuestros rectángulos
- rectMode(CORNER); es igual al anterior (por defecto): “rect(x,y,ancho,alto,radio);”
- rectMode(CORNERS); La sentencia “rect(x1,y1,x2,y2);“ dibuja el rectángulo a partir
de dos esquinas opuestas, el primer y segundo parámetro, definen la esquina superior
izquierda, y el tercer y cuarto parámetro, definen la esquina inferior derecha.
- rectMode(CENTER); La sentencia “rect(x,y,ancho,alto);” dibuja el rectángulo a partir
del primer y segundo parámetro como centro del rectángulo, el tercer parámetro el
ancho y el cuarto parámetro sería el alto del rectángulo.
Es importante recordar que la “rectMode();” cambia la manera de dibujar los rectángulos con
la sentencia “rect();” por lo que si la escribimos por debajo no cambia la forma de los
rectángulos superiores, pero sí de los inferiores.
1.9 Dibujar una elipse
Utilizando la sentencia “ellipse(x,y,ancho,alto); podemos dibujar elipses y círculos, donde:
- X e Y son las coordenadas que corresponden al punto central de la elipse
- Ancho y alto siendo las dimensiones de la elipse que queremos dibujar.
Por ejemplo: ellipse(200,200,200,100);
También hay distintas funciones para esta sentencia:
- “ellipseMode(CENTER);” Por defecto “rect(x,y,ancho,alto);
- “ellipseMode(RADIUS);” La sentencia “ellipse(x,y,radio1,radio2);” dibuja la elipse a
partir del centro de la misma que serían el primer y segundo parámetro, el tercer
parámetro determina el radio del ancho y el cuarto parámetro determina el radio de la
altura.
- “ellipseMode(CORNER);” La sentencia “elipse(x,y,ancho,alto);” es muy parecido al
modo CENTER, solo que en este caso el primer y segundo parámetro sirven para
posicionar la esquina superior izquierda del rectángulo que circunscribe la elipse, y el
tercer y cuarto parámetro son la anchura y altura respectivamente.
- “ellipseMode(CORNERS);” La sentencia “ellipse(x1,y1,x2,y2);” es muy parecido al
modo CORNER, solo que el tercer y cuarto parámetro establecen la esquina inferior
derecha de la elipse.
1.10 Dibujar arcos
Utilizando la sentencia “arc(x,y,ancho,alto, arc_start,arc_end);” podremos dibujar nuestros
arcos, donde:
- X e Y son las coordenadas que corresponden al punto central de la elipse
- Ancho y alto las dimensiones que le corresponden a la figura
Importante: Processing mide los ángulos en radianes por defecto, siendo estos el sistema de
medida en las coordenadas polares.
Podemos usar los valores: PI, TWO_PI, HALF_PI, QUARTER_PI o bien los valores decimales.
Aunque es algo complejo utilizar cálculos con radianes, por ese motivo tenemos la función
“radians()” que convierte radianes en grados.
- Por ejemplo: “arc(200,200,200,200,radians(0),radians(270));”
También podemos aplicarles funciones al igual que a las anteriores.
- “arc(x,y,ancho,alto,arc_start,arc_end,PIE);” el arco dibujará una forma de “quesito” y
añadirá una línea alrededor de todo el arco y la del ángulo que se forme.
- “arc(x,y,ancho,alto,arc_start,arc_end,OPEN);” el arco se rellenará desde el comienzo
del arco hasta el final en línea recta.
- “arc(x,y,ancho,alto,arc_start,arc_end,CHORD);” muy parecido a OPEN, solo que
añade una línea que cierra el arco.
1.11 Dibujar curvas bezier
Usando la sentencia “bezier(x1,y1,cx1,cy1,cx2,cy2,x2,y2);” podremos dibujar líneas curvas,
definidas por una serie de puntos de control y puntos de ancla, siendo la curva dibujada entre
el punto de ancla y el punto de control define su forma.
Esta función requiere de 8 parámetros, que definirán 4 punto donde la curva se dibuja entre el
primer y cuarto punto (primero, segundo, séptimo y octavo parámetro) y el control es definido
por el segundo y tercer puntos (tercer, cuarto, quinto y sexto parámetros).
- Por ejemplo: “bezier(100,100,300,50,100,350,300,300);”
2. Formas personalizadas
El mecanismo en sí no es muy complejo, es más es una función imprescindible en
programación.
Se comienza con la función “beginShape();”, a continuación definimos cada punto con la
función “vertex();” , la cual solo acepta 2 parámetros, es decir, un punto. Cuando ya hallamos
terminado de añadir puntos, cerramos la con la función endShape();
Además, usaremos funciones como fill(), stroke(), noFill(), noStroke() y strokeWeight(), para
así modificar nuestra figura visualmente.
Es importante remarcar, que en este caso, el orden en el que están colocados los vértices si
afecta a la figura.
2.1 Puntos y líneas
La función beginShape() puede aceptar diversos parámetros que sirven para definir datos en
los vértices. Los mismos vértices pueden ser usados para crear figuras sin relleno o líneas
continuas. Las constantes POINTS y LINES son usadas para definir la configuración de puntos y
líneas dentro de una figura.
- Por ejemplo: Dibuja un punto en cada vértice
beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();
No solo podemos configurar puntos y líneas, sino que también formas. Utilizando las
constantes TRIANGLES, TRIANGLE_STRIP, TRIANGLE_FAN, QUADS, y QUAD_STRIP con la
función beginShape(). En estos casos necesitaremos ser mucho más cuidadoso en el ámbito
espacial de la figura y el orden en que ponemos los vértices.
- Por ejemplo: Conecta cada grupo de tres vértices
beginShape(TRIANGLES);
vertex(75, 30);
vertex(10, 20);
vertex(75, 50);
vertex(20, 60);
vertex(90, 70);
vertex(35, 85);
endShape();
La función vertex() funciona muy bien para crear figuras a base de líneas, pero si queremos
crear una curva, necesitamos valernos de las funciones curveVertex() y bezierVertex(). Estas
funciones pueden usarse entre beginShape() y endShape(), siempre y cuando beginShape() no
tenga ningún parámetro. La función curveVertex() es usada para conectar dos puntos con una
curva. Se le envían dos parámetros: curveVertex(x, y) El primero y el último curveVertex(),
junto con beginShape() y endShape(), actúan como puntos de control. La curvatura de cada
segmento es calculada por los curveVertex() que hay en medio de los puntos de control:
- Por ejemplo:
smooth();
noFill();
beginShape();
curveVertex(20, 80); //C1
curveVertex(20, 40); //V1
curveVertex(30, 30); //V2
curveVertex(40, 80); //V3
curveVertex(80, 80); //C2
endShape();
En cambio, cada bezierVertex() define la posición de dos puntos de control y de un punto de
anclaje. bezierVertex(cx1, cy1, cx2, cy2, x, y).
El primer bezierVertex() se ubica junto con el beginShape(). Anteriormente al bezierVertex(),
debemos poner un vertex(), que definirá el primer punto ancla. La curva se forma entre punto
vertex() y las coordenadas x e y que se le envían a bezierVertex(). Los primeros cuatro
parámetros restantes de bezierVertex() corresponden al control de la curvatura de la figura.
- Por ejemplo:
noFill();
beginShape();
vertex(32, 20);
bezierVertex(80, 5, 80, 75, 30, 75);
endShape();
3. Variables
Sabiendo que los datos son, con frecuencia, características asociadas a algo, en los sistemas
informáticos, los datos son guardados como números y caracteres.
Processing puede almacenar y modificar muchos tipos de datos, como números, letras,
palabras, imágenes, colores, fuentes y valores booleanos (la más simple, true y false).
Una variable es un contenedor que sirve para guardar datos, y permiten que dicho dato dentro
de esa variable sea reutilizado varias veces en el programa.
Tipos de variables Tipo de valor
int Tipo entero
float Tipo flotante
boolean Tipo booleana (T o F)
- A cada variable solo se le puede asignar un dato.
- Se deben asignar un tipo de datos a cada variable, es decir, si es de tipo entero, añadir
un valor entero.
3.1 Variables de Programa
Processing, como lenguaje, ha construido variables muy útiles que ya vienen pre-programadas,
a fin de facilitarle el trabajo al usuario. Se las denomina variables del programa o variables del
sistema. El ancho y el alto de la ventana de representación están almacenadas como variables
denominadas width /ancho/ y height /alto/, respectivamente.
Si el programa no incluye size(), por defecto width y height adquieren el valor de 100.
println(width +” , “+ height); //Imprime “100, 100” en la consola
size(300, 200); println(width +” , “+ height); //Imprime “300, 200” en la consola
Frecuentemente son usadas cuando se requiere mantener la escritura del programa en
diferentes escalas y que estas sean proporcionales. size(100, 100); ellipse(width * 0.5, height *
0.5, width * 0.66, height * 0.66); line(width * 0.5, 0, width * 0.5, height);
4. Funciones aritméticas
4.1 Aritmética
En programación, podemos atribuir características visuales a una imagen a través de números.
- Por ejemplo:
int a = 153;
fill(a);
rect(10, 10, 55, 55);
a = a + 102;
fill(grisVal);
rect(35, 30, 55, 55);
Utilizando los operadores de suma, resta, multiplicación y división, podemos controlar, por
ejemplo, la posición de los elementos. El signo + se utiliza para la suma, el signo – para la resta,
el signo * para la multiplicación y el signo / para la división.
Los signos +, -, *, / y = posiblemente sean muy familiares, pero el signo % es mucho más
exótico. El operador % es el de módulo. Determina cuando un número es dividido por otro, o
sea, da como resultado el resto del mismo. El número a la derecha es dividido por el que
pongamos a la izquierda. Devolverá como resultado el resto de la operación.
Hay muchos usos para el módulo, como por ejemplo saber cuando un número es par o impar.
Sin embargo, en Processing es muy común utilizarlo para mantener a los números en rango.
Por ejemplo, si una variable sigue incrementándose (1, 2, 3, 4, 5, 6, 7, 8...), el módulo puede
convertirla en una secuencia. Un incremento continuo puede convertirse en un ciclo.
Es también importante prestar atención a algunos conceptos matemáticos, como por ejemplo
el concepto de límite, donde un número dividido por cero tiende a infinito. En esos casos el
programa producirá un error:
int a = 0;
int b = 12 / a;
4.2 Prioridad en el Operador. Agrupación
La prioridad del ordenador determina que operaciones se realizan antes que otras. Esto es de
gran importancia ya que puede ser determinante para nuestro resultado.
Por ejemplo, la expresión 6 + 3 * 4, nos dará como resultado 18, puesto que tiene prioridad la
multiplicación. Primero, 3 * 4 resultará en 12 y a continuación se le sumará 6, dando por
resultado 18. La prioridad puede ser cambiada agregando paréntesis. Si tuviéramos la
expresión (6 + 3) * 4, entonces la prioridad estaría en la suma, dando como resultado final 36.
4.3 Atajos
Cuando programamos, recurrimos mucho a estructuras cíclicas. Muchas veces es necesario
utilizar atajos de escritura para reducir el tamaño del código y que sea más legible.
El operador de incremento es ++, mientras que el de decremento es --. Ambos son usados
como atajos de suma y resta.
Por ejemplo:
int x = 1;
x++; //Equivale a x = x + 1;
println(x);
Al asignar el operador de suma con el operador de asignación (+=) obtendremos el operador
de suma asignada. En el caso de combinar el de resta con el de asignación (-=) obtendremos el
operador de resta asignada:
int y = 1;
println(y); //Imprime 1
y -= 5; //Equivale a y = y - 5;
println(y); //Imprime -4
Al asignar el operador de multiplicación con el operador de asignación (*=) obtendremos el
operador de multiplicación asignada. En el caso de combinar el de división con el de asignación
(/=) obtendremos el operador de división asignada:
int x = 4;
println(x); //Imprime 1
x *= 2; //Equivale a x = x * 2;
println(x); //Imprime 8
4.4 Limitando números
Las funciones ceil(), floor(), round(), min() y max() son utilizadas para perfeccionar las
operaciones matemáticas. La función ceil(), redondea un número decimal convirtiéndolo en un
entero. Lo convierte en el valor igual o mayor. Redondea hacia arriba.
int x = ceil(2.0); //Asigna 2 a x
int y = ceil(2.1); //Asigna 3 a y
int w = ceil(2.5); //Asigna 3 a w
int z = ceil(2.9); //Asigna 3 a z
- La función floor(), redondea un número decimal convirtiéndolo en un entero. Lo
convierte en el valor igual o menor. Redondea hacia abajo.
int x = floor(2.0); //Asigna 2 a x
int y = floor(2.1); //Asigna 2 a y
int w = floor(2.5); //Asigna 2 a w
int z = floor(2.9); //Asigna 2 a z
- Además, las funciones ceil(), floor() y round() funcionan con variables tipo decimales. A
pesar de no ser muy útil, puede utilizarse.
float y = round(2.1); //Asigna 2.0 a y
- La función min() determina el número más pequeño en una secuencia de números. La
función max() determina el número más grande en una secuencia de números. Ideal
para determinar el número mayor o menor de una secuencia. Ambas funciones
pueden admitir dos o tres parámetros.
int u = min(5, 9); //Asigna 5 a u
float t = min(12.6, 7.89) //Asigna 7.89 a t
int v = min(4, 88, 65); //Asigna 4 a v
5. Repetición
Las estructuras repetitivas son encargas de producir iteraciones. Es decir, a través de pocas
líneas de código se puede repetir, prácticamente, infinitas veces una misma línea de código.
Se utiliza una estructura denominada estructura FOR, la cual es encargada de repetir un ciclo
las veces que queramos. Por ejemplo:
size(200, 200);
for (int i = 20; i < 150; i += 10) {
line(30, 20, 30, 180); line(i, 20, i, 180);
}
La estructura FOR sigue la siguiente estructura:
for(iniciador, condición, actualización){
acciones;
}
Los pasos en un FOR son los siguientes:
1- El iniciador comienza a ejecutarse
2- La condición evalúa si es true o false
3- Si la condición es true, continúa en el paso, si es false, pasa al paso 6
4- Ejecuta las acciones en el bloque
5- Ejecuta la actualización y pasa al paso 2
6- Sale de la estructura y continúa ejecutando el resto del programa
5.1 Iteración Anidada
La estructura FOR produce repeticiones en una dimensión. Anidando iteraciones podemos
crear efectos muy interesantes.
La técnica es muy útil para crear fondos, texturas y los conocidos patterns. Los números
producidos por las variables de control de repeticiones pueden aplicarse a la posición, al color,
al tamaño, a la transparencia o a cualquier otra cosa de atributo visual.
noStroke();
for (int y = 0; y < 100; y += 10) {
for (int x = 0; x < 100; x += 10) {
fill((x+y) * 1.4);
rect(x, y, 10, 10);
}
}
5.2 Formato de las estructuras
Es importante el espacio entre las estructura para que sea legible y clara la lectura de las
mismas. Las líneas de código dentro de las mismas suelen llevar tabulaciones. Cuando el
programa se hace largo una clara lectura es ideal en esta clase de estructuras. En este libro
utilizamos la siguiente convención de espacios en blanco:
int x = 50;
if (x > 100) {
line(20, 20, 80, 80);
} else { line(80, 20, 20, 80);
}
