Processing
DOMINGO MORENO
• Processing es un lenguaje de
programación y entorno de desarrollo
integrado de código abierto basado
en Java, de fácil utilización, y que sirve
como medio para la enseñanza y
producción de proyectos multimedia e
interactivos de diseño digital.
¿QUÉ ES PROCESING?
Interface de processing
o Es extremadamente importante la forma de escribir
la sintaxis de las instrucciones.
o En las sentencias debes respetar siempre las
mayúsculas y las minúsculas.
o Print() no existe
o print() si existe
o Las sentencias tienen un nombre y un argumento
que se pone entre paréntesis.
o Cuando acabamos una línea de código tenemos
que poner un “;”
size (100,100);
El nombre Los argumentos El punto y coma
Estructura de las sentencias
“size”
nos dimensiona el tamaño de la ventana
que saldrá y los argumentos nos dirán el
tamaño en píxeles:
size(400,300);
La ventana de dibujo de processing
• En muchas ocasiones es recomendable ir explicado lo que hace
cada función que escribimos, pero claro a processing hay que
decirle que ese texto no corresponde con ninguna función,
porque si no es así daría un error.
• Cuando queremos escribir un comentario debemos poner la
doble barra ”//” delante del comentario.
size(400,330); //con esta función elijo el tamaño de la ventana
• Cuando el comentario va a ocupar más de una línea también
podemos utilizar “/*” para iniciar el comentario y “*/” para
finalizarlo.
/* aquí iría el comentario
y puede ocupar varias líneas*/
Comentarios
o El origen de coordenadas en la ventana de dibujo es la
esquina superior izquierda.
o Las coordenadas en “X” crecen hacia la derecha y las
coordenadas en “Y” hacia abajo.
Coordenadas de Processing
o Para dibujar un punto pondremos:
point(x,y);
donde x e y son las coordenadas donde quiero dibujar el
punto.
o Para dibujar una línea pondremos:
line(x1,y1,x2,y2);
donde x1,y1 son las coordenadas del punto de inicio de la
línea
y x2,y2 son las coordenadas del punto final de la línea
Puntos y Líneas
Ejemplo
• Para simplificar los dibujos tenemos sentencias que
nos dibujan formas geométricas simples como:
• El triángulo:
triangle (x1,y1,x2,y2,x3,y3);
X, Y son los vértices del triángulo
• el cuadrilátero:
quad(x1,y1,x2,y2x3,y3,x4,y4);
X, Y son los vértices del cuadrilátero
Dibujamos triángulos y cuadrados
• Para dibujar un rectángulo:
rect (x,y,ancho,alto,radio);
X e Y: es el punto donde se inicia el rectángulo.
Ancho y alto: es el tamaño del rectángulo.
Radio: es el radio que queremos darle a las
esquinas, es opcional.
Dibujamos rectángulos y elipses
Ejemplo
• Para dibujar una elipse:
ellipse (x,y,ancho,alto);
X e Y: es el centro de la elipse.
Ancho y alto: es el tamaño de la elipse.
Dibujamos rectángulos y elipses
• El número de niveles distintos de gris que se
pueden dibujar en processing son 255.
• Para indicar el nivel de grises del fondo de la
ventana utilizaremos:
background(n);
Donde:
“n” es el nivel de gris y oscila entre 0-255
0 corresponde al negro puro.
255 al blanco puro.
Niveles de grises en la ventana
• Para asignar el nivel de gris en el relleno de las
figuras utilizaremos:
fill(n,t);
• Para asignar el nivel de gris en el contorno de las
figuras utilizaremos:
stroke(n,t);
Donde:
n: es el nivel de gris y oscila entre 0-255
t: es el nivel de transparencia y es opcional
Niveles de grises en las figuras
Ejemplo
1. Utilizando las sentencias que conoces dibuja las
siguientes figuras.
Ejercicios
• Una variable es un elemento donde se
almacenan datos.
• boolean: sólo puede tomar dos valores , verdadero o
falso.
• integer: son números enteros, es decir, sin decimales.
• float: números que pueden ser decimales.
• string: cadena de caracteres.
• color: el color que puede adoptar un pixel
Variables
• Las variables tienen que crearse para poderlas utilizar a
eso se le llama “declarar las variables”
int ancho;
En este ejemplo hemos declarado la variable “ancho” del tipo
“integer” porque va a almacenar un número entero.
• Ahora tenemos que asignarle un valor a la variable.
int ancho;
ancho=200;
La variable “ancho” ha tomado el valor de 200.
• También lo podemos hacer todo en la misma línea:
int ancho=200;
Variables
• La consola además de servir para informarnos de los
errores, puede presentar textos y números que nos
pueden servir de información a la hora de hacer pruebas
de programación. La función “print()” muestra en la
consola lo que hay dentro de los paréntesis.
print(“Hola Mundo”);
En la consola aparecerá: Hola Mundo
• println(): es igual pero lo escribe en una línea nueva
La consola
Ejemplo
Ejercicio:
2. Realiza un programa que haga todas estas operaciones.
Funciones aritméticas más usuales
Ejemplo
• Un bucle es una función que nos va a permitir
repetir una serie de instrucciones un determinado
número de veces.
Int i;
for (i=1;i<10;i++){ “ instrucciones que repetirá”}
i=1: es el iniciador del bucle “desde que i valga 1…”
i<10: es la condición “se repetirá siempre que i<10”
i++: cada vez que pasa por aquí le suma 1 a i
{ }: lo que haya dentro de estos paréntesis se repetirá hasta que se
cumpla la condición.
Bucles, for
Ejemplo
3. Escribe un programa que en una ventana de 400 x 400
dibuje 10 líneas paralelas que estén separadas 40
pixeles.
4. Escribe un programa que en una ventana de 400 x 400
dibuje 10 círculos concéntricos que estén separadas 40
pixeles.
5. Modifica el programa anterior para que los círculos
estén sombreados con distintos tonos de grises desde
el negro total al blanco, como muestra la figura.
Ejercicios
En processing, además de los 255
tonos de grises se pueden ver
más de 16 millones de colores.
Las pantallas están
compuestas por puntos de
luz llamados píxeles.
Cada pixel está formado por tres
luminóforos
Color
• Los tres luminóforos son de color rojo, verde, y azul.
• La intensidad de luz de cada uno de estos luminóforos
pueden reproducir casi cualquier color (más de 16
millones).
Luminóforos
• Las sentencias que controlan la intensidad de estos
luminóforos son las mismas que controlan el nivel de
grises.
• background(R,G,B); color del fondo de la ventana
• fill(R,G,B); color del relleno de la figura
• stroke(R,G,B); color del borde
Donde: R,G,B son valores de la intensidad luminosa de cada
luminóforo que puede estar comprendido entre 0-255
background(255,255,255); es una ventana de color blanco
background(0,0,0); es una ventana de color negro
• Recuerda que puedes poner un cuarto valor indicando el nivel
de transparencia.
Luminóforos
ejemplo
6. Utilizando tus conocimientos de los colores y la
sentencia “for” realiza un programa que nos muestre la
ventana de la figura.
Estructura de un programa en
processing
• En “void setup“ pondremos todas las sentencias que queremos
que se ejecuten sólo una vez.
• Después en “void draw” pondremos las sentencias que queremos
que se estén repitiendo continuamente.
Ejem:
int i=0;
void setup(){
size(400,400);
background(0,255,0);
stroke(255,0,0);}
void draw(){
line(20,20+i,380,20+i);
i++;}
setup
• Todas las funciones que hemos visto hasta ahora ejecutan
las ordenes y terminan, “draw” no para nunca de ejecutarse,
está siempre repitiéndose.
Ejecuta el siguiente código:
int i=0;
void draw(){
println(i);
i++;
delay(1000); //esperamos 1 segundo
}
• Como puedes observar todas las sentencias que hay dentro
de draw se repiten sin parar.
draw
if
• “ ” es una sentencia de control, que toma una
decisión en función de la condición dada.
If (condición){ // si se cumple la condición
Bloque 1 // se ejecuta este bloque
}
else{ // si no se cumple la
condición
Bloque2 // se ejecuta este otro bloque
}
• else es opcional.
Sentencia if
7. Modifica el programa del ejemplo anterior para que la
línea se dibuje de izquierda a derecha.
8. Haz un programa en el que se muevan dos líneas
verdes sobre fondo rojo, una de izquierda a derecha y
otra de arriba a abajo
Ejercicios
