Miniguía de Proccesing 

 
Por ​Pedro Ruiz Fernández 

Licencia 

¿Qué es proccesing? 
Proccesing  es  un  lenguaje  orientado a objetos, multiplataforma que se basa en  otros lenguajes como 
Java  y  c++.  Está  desarrollado  en  Java  y  su  entorno  de  desarrollo  (IDE)  está  basado en  wiring como 
Arduino, de ahí su aspecto muy similar. 

¿Dónde encuentro a proccesing? 
Proccesing  lo puedo descargar desde la web oficial  ​https://processing.org/​, en ella son  espacialmente 
importantes  entre  otros  los  apartados:  descargas  (​https://processing.org/download/​),  referencia 
(​https://processing.org/reference/​)  el  cual  nos  dá  una  ayuda  magnífica  a  todas  las  órdenes  del 
lenguaje, tutoriales (​https://processing.org/tutorials/​), etc.  

Entorno de proccesing 
 
  

Miniguía de Proccesing 2 
Sistema de coordenadas gráficas de Proccesing 
En  proccesing  el  origen  de  coordenadas  (0,0)  se  encuentra  en  la  esquina  superior  izquierda  donde 
las x son crecientes hacia la derecha y las y son crecientes hacia abajo. 

Instrucciones básicas de dibujo 
size (ancho, alto)​: establece el tamaño de la ventana gráfica. 
background  (r,g,b)​:  establece  el  color  de  fondo  de  la  ventana  gráfica,  en  este  caso  en   RGB,  cada 
valor entre 0 y 255. 
background  (gris)​:  establece  el  color  de  fondo  de  la  ventana  gráfica  en  escala  de  grises,  el  valor 
entre 0 (negro) y 255 (blanco). 
line (xPunto1,yPunto1,xPunto2,yPunto2)​: crea un línea entre dos puntos. 
rect  (x,y,ancho,alto)​:  crea  un  rectángulo,  donde   x  e  y  reflejan  la  posición  de  la  esquina  superior 
izquierda. 
ellipse  (x,y,diametroX,diametroY)​:  crea  una  elipse  o  círculo,  donde  x e y  establecen el centro de la 
misma,  además  tenemos  que  dar  los  valores  de  diámetros  en  los  ejes  X   e  Y,   si  dichos  valores  son 
los mismos tendremos un círculo. 
fill (r,g,b)​: establece color de relleno.  
stroke (r,g,b)​: establece el color del borde. 
strokeWeight (grosor)​: establece el grosor de borde. 
noFill()​: elimina el relleno. 
noStroke()​: elimina los bordes. 
 
Ejemplo de programa secuencial, utilizando las órdenes anteriores: 

Miniguía de Proccesing 3 
  

Estructura básica de programa en Proccesing 
En  proccesing  tenemos  dos  funciones  principales  (void),  una  de  ellas  es   ​setup  y  la  otra  ​draw,  en   la 
primera  se  realiza  una  configuración  de  nuestro  programa,  por  ejemplo  el  tamaño  de  la  ventana 
gráfica  con  ​size (tamañoX, tamañoY)​, y se ejecuta una  sóla vez. En la función ​draw todo lo que esté 
definido en la misma se va a repetir indefinidamente. 
En  el  siguiente  programa  antes  del  ​setup definimos la variable x como entera (integer) (​int  x​), y en el 
draw  en  cada  ciclo  aumentamos  su  valor  (x=x+1),  cambiando  el  color  de  fondo y desplazando hacia 
la derecha la circunferencia. 

Números aleatorios (Random). 
A  veces  es   necesario  la  generación  de  número  aleatorios,  para ello usamos la  orden random de dos 
formas diferentes 

Miniguía de Proccesing 4 
 ● random  (numero  máximo):  genera  un  número  aleatorio  entre  o  y  el número  dado, devuelve 
un valor tipo float (decimal). 
● random  (número  mínimo,   número  máximo):  genera  un  número  aleatorio  entre  un  número 
mínimo y el número máximo dado, devuelve un valor tipo float (decimal). 
Para  conocer  mejor  estas  órdenes  proponemos  un   ejercicio  que  genera  ellipses  aleatorias  de 
tamaños entre 0 y 100, de color de relleno aleatorio, sin bordes y sobre un fondo con transparencia. 
 
void setup () { 
  size (500, 500);  
  noStroke(); 
} 
 
void draw () { 
  fill (255, 10);//rellena de blanco con transparencia 10% 
  rect (0, 0, width, height);//realiza un rectángulo de toda la pantalla con transparencia 
  fill (random(255), random(255), random(255));//cambiamos a relleno aleatorio 
  ellipse (mouseX, mouseY, random (100), random(100));//dibuja elipses de tamaños aleatorios en la posición del ratón 
} 
 

Estructuras de control for y while. 
Con  la  estructura  de  control  ​for  vamos  a  realizar  una  serie  de  acciones  mientras  se  cumpla   una 
condición de salida del bucle. 
for (valor inicial de condición;condición de salida;acción sobre condición) { 
instrucciones; 
}  
Vamos  a  realizar  un  programa  que  repita  un  círculo  de  diámetro  20  de izquierda a derecha desde la 
primera  posición  (posición  x=10)  incrementando  su posición en 20 cada vez, hasta  que llegue al final 
de las posiciones x, la ventana gráfica será de 500x500. 
Para  ello  hemos  utilizado  dos  variables  de  proccesing  que  nos  dan   valores  de  la  ventana  gráfica, 
como: 
width​: variable predefinida que nos devuelve el ancho de la ventana gráfica. 
height​: variable predefinida que nos devuelve el alto de la ventana gráfica. 

 
También el programa se puede hacer con un bloque de control ​while: 
while (condición a cumplir) { 
instrucciones; 

Miniguía de Proccesing 5 
} 

 
Ejercicio  propuesto  círculos  concéntricos:  realizar  una  serie  de  círculos  concéntricos  de  color  tipo 
(r,g,b)  variable  aleatorio,  espaciados  3  unidades  sin  sobrepasar   una  ventana  gráfica  de  500  x  500. 
Investigar sobre la orden random antes de nada. 
 
Ahora  vamos  a  realizar  no  sólo  la  primera  fila  sino  todas,  rellenando  toda  la  pantalla  gráfica  de 
círculos,  haciendo  que   se  repita  la  primera  desplazándola  20  unidades  en  y.  Lo  haremos  tanto  con 
for como con ​while. 

Interactuar con el ratón. 

Variables de posición 
En proccesing tenemos dos variables predefinidas que nos dan los valores de la posición en X e Y ne 
nuestro cursor del ratón, que son: 
mouseX​: variable predefinida que nos devuelve la posición en X del cursor. 

Miniguía de Proccesing 6 
mouseY​: variable predefinida que nos devuelve la posición en Y del cursor. 
En  el  siguiente  programa  movemos  una  circunferencia  con  el  puntero  del  ratón.  Observar  que 
“background  (0)”  va  dentro  del  draw  para  que  se  borre  el   fondo  cada  vez  y  usamos  la  orden 
“​noCursor()​” para que no se muestre el puntero del ratón. 

 
 
Ejercicio  propuesto  1:  realizar  una  circunferencia   con  centro  en  el  centro  de  la  pantalla  gráfica  que 
cambie de diámetro moviendo el ratón. 
 
El  siguiente  programa  es  una  variante  del  anterior  donde  ahora  como  fondo  se  pone  un  rectángulo 
con  transparencia  “fill  (0,0,0,40)”,  y  de  tamaño  de  la  ventana  gráfica  “rec(0,0,width,height)”.  El 
resultado es que en el desplazamiento de la circunferencia nos va a dejar como un halo o rastro. 

Condicionales. If else. 
A  la  hora   de  tomar  decisiones   en  un  programa  las  estructuras  condicionales  son   fundamentales. En 
esta sección te vamos a enseñar el uso de condicionales mediante la estructura ​if. 
if (condición) { 
instrucciones; 

Miniguía de Proccesing 7 
} 
else { 
instrucciones; 
} 
Si  se   cumple  una  condición  se  van  a  realizar  unas  instrucciones  y  en  caso  contrario  otras.  Esta 
estructura puede ir sin else (en caso contrario). 
Como  ejemplo  proponemos  un  programa  que  si  el  cursor  del  ratón  está  situado  de  la  mitad  de 
pantalla  hacia  la  izquierda  ponga  un  fondo  rojo,  y  si  lo  está   de  la  mitad  de  pantalla hacia la derecha 
ponga un fondo azul. 

Variables de estado 
Además tenemos variables que controlan el estado del ratón como son: 
mousePressed​: que puede tomar los valores “true” o “false” 
mouseButton​: puede tomar los valores, “LEFT”.”RIGHT”,”CENTER”. 
 
En  el siguiente programa en función del botón  pulsado de ratón dibuja un rectángulo (botón derecho), 
una circunferencia (botón izquierdo) o borra la pantalla (botón central).  
 
int x=0; 
void setup() { 
 
  size (500, 400); 
  background(0); 
} 
 
void draw () { 
  if (mousePressed==true) { 
    if (mouseButton==LEFT) { 
      ellipse (mouseX, mouseY, 50, 50); 
    } 
 
    if (mouseButton==RIGHT) { 
      rect (mouseX, mouseY, 50, 50); 
    } 
 
    if (mouseButton==CENTER) { 

Miniguía de Proccesing 8 
      background(0); 
    } 
  } 
  println (mouseButton); 
} 
 
 
Ejercicio  propuesto  2:  realiza  un  programa  que  dibuje  líneas  blancas  a  base  de círculos de diámetro 
20  dejando  pulsado  el  botón  izquierdo  y  moviendo  el  ratón,  y  que  pulsando  el  botón  derecho  y 
moviendo el ratón borre. El fondo será negro y los dibujos en blanco. 

funciones o eventos 

Qué es una función 
Una  función  es  un  conjunto  de  instrucciones  que  tienen  entidad  propia  y  que  se  ejecutan  cuando 
llamamos a la misma. Ya conocemos dos: ​setup y ​draw.  
También  se  puede  interactuar  con el  ratón con eventos que son funciones que responden a acciones 
que se realizan en este caso con el ratón, estas funciones son: 
mousePressed()​: entra en juego cuando se pulsa el ratón. 
mouseReleased()​: se pone en funcionamiento cuando se suelta el botón del ratón. 
mouseMove()​: se pone en marcha cuando se mueve el ratón. 
mouseDragged()​: se activa cuando el ratón se pincha y arrastra.  
El  siguiente  programa  dibuja  líneas,  el  primer  punto  lo  marcas haciendo clic en el ratón y el segundo  
punto es dónde sueltas el ratón. 

int x1, y1, x2, y2; 
void setup () { 
  size (500, 500); 
} 
void draw() { 
} 
 
void mousePressed() { 
  x1=mouseX; 
  y1=mouseY; 
  println (x1, y1); 
} 
 
void mouseReleased() { 
  x2=mouseX; 
  y2=mouseY; 
  println (x2, y2); 
  line (x1, y1, x2, y2); 
}
 

Interactuar con el teclado.  

Variables 
Para interactuar con el teclado podemos usar variables del sistema, como:  
keyPressed:​ nos devuelve el estado actual de pulsación del teclado, puede ser true o false. 
key:​ que devuelve la última tecla pulsada. 

Miniguía de Proccesing 9 
En  el  siguiente  ejemplo  si la última tecla pulsada es “v” o “V” el fondo lo hace verde y si es “r” o “R” lo 
cambia  a  rojo.  Además  nos  colocamos  un  chivato  en  forma  de  texto  que  se  imprime  en  la  consola 
con  la orden  “println (key)”, que visualiza  constantemente en la  consola de texto el  valor de “key”, que 
recordamos que es la última tecla pulsada. 

Funciones o eventos 
Para el teclado además existen funciones que responden a eventos son: 
keyPressed ():​ se ejecuta una vez si se pulsa el teclado. 
keyReleased ()​: se ejecuta una vez si se suelta cualquier tecla pulsada anteriormente. 
En  el  siguiente  ejemplo  vamos  a  dibujar  en  el  centro  de  la  pantalla  gráfica  el   carácter  pulsado  en  el  
teclado. 

 
Actividad de investigación 1: investiga sobre la orden “text” en el manual de referencia de proccesing. 

Miniguía de Proccesing 10 
El  siguiente  ejercicio  dibuja  líneas  blancas  sobre  fondo   negro  a  base  de  círculos  de  diámetro  20, 
estas  líneas  se  mueven  con  las  teclas  “w”  (arriba),  “s”  (abajo),  “a”  izquierda  y  “d”  (derecha).  Los 
centros de los círculos no sobrepasan los límites del área de dibujo. 

int coorX, coorY; 
 
void setup() { 
  background(0); 
  size (600, 500); 
  coorX=width/2; 
  coorY=height/2; 
} 
 
void draw() { 
  ellipse(coorX, coorY, 20, 20); 
} 
 
 
void keyPressed() { 
 
  if (key=='d') { 
    coorX=coorX+5; 
  } 
 
  if (key=='a') { 
    coorX=coorX­5; 
  } 
 
  if (key=='w') { 
    coorY=coorY­5; 
  } 
 
  if (key=='s') { 
    coorY=coorY+5; 
  } 
 
 
  if (coorX>=width­10) { 
    coorX=width­10; 
  } 
  if (coorX<=10) { 
    coorX=10; 
  } 
  if (coorY>=height­10) { 
    coorY=height­10; 
  } 
  if (coorY<=10) { 
    coorY=10; 
  } 
 
  println(key); 
} 
 

Miniguía de Proccesing 11 
Estructura de control Switch case 
Vamos  a  resolver  el  ejercicio  anterior  pero  aprendiendo  una  nueva  estructura  de  control  de  flujo  de 
nuestro  programa,  switch,  que  permite  evaluar  los  valores  de  una  expresión  y  en  función  de  los 
mismos realizar acciones diferentes, esto también se puede solventar con varios if, o if else: 
switch (expresion) 
{ 
  case valor1:  
     instrucciones   
  case valor2:   
     instrucciones 
  default:   
     instrucciones   
} 
int coorX, coorY; 
 
void setup() { 
  background(0); 
  size (600, 500); 
  coorX=width/2; 
  coorY=height/2; 
} 
 
void draw() { 
  ellipse(coorX, coorY, 20, 20); 
} 
 
 
void keyPressed() { 
 
  switch (key) { 
  case 'w': 
    coorY=coorY­5; 
  case 's': 
    coorY=coorY+5; 
  case 'd': 
    coorX=coorX+5; 
  case 'a': 
    coorX=coorX­5; 
  } 
 
  if (coorX>=width­10) { 
    coorX=width­10; 
  } 
  if (coorX<=10) { 
    coorX=10; 
  } 
  if (coorY>=height­10) { 
    coorY=height­10; 
  } 
  if (coorY<=10) { 
    coorY=10; 
  } 
 
  println(key); 
} 
 
Vamos  a  resolver  el  ejercicio  anterior  pero  se  va  a  estar  moviendo  la  línea   blanca  en  una  dirección 
hasta  que  no  cambies  de  tecla.   La  clave  está  en  que  la  variable  ​key  siempre  toma  el  valor  de  la 
última tecla pulsada, y no cambia hasta que se pulse otra.  
 
int coorX, coorY; 
 

Miniguía de Proccesing 12 
void setup() { 
  background(0); 
  size (600, 500); 
  coorX=width/2; 
  coorY=height/2; 
} 
 
void draw() { 
  ellipse(coorX, coorY, 20, 20); 
 
  if (key=='d') { 
    coorX=coorX+5; 
  } 
 
  if (key=='a') { 
    coorX=coorX­5; 
  } 
 
  if (key=='w') { 
    coorY=coorY­5; 
  } 
 
  if (key=='s') { 
    coorY=coorY+5; 
  } 
 
 
  if (coorX>=width­10) { 
    coorX=width­10; 
  } 
  if (coorX<=10) { 
    coorX=10; 
  } 
  if (coorY>=height­10) { 
    coorY=height­10; 
  } 
  if (coorY<=10) { 
    coorY=10; 
  } 
 
  println(key); 
} 
 

Funciones propias 
En  proccesing  también  podemos  definir  funciones  nuestras  además  de   las  funciones  predefinidas 
como setup, draw, mousePressed, etc. 
En el ejemplo siguiente creamos una función planeta que llamamos dentro de la función ​draw. 
El  programa  llama  a  la  función  planeta  dentro  de   la  función  ​draw.  Además  hay  dos  cuestiones 
nuevas,  las  variables  ​centroX  y  ​centroY  que   definen  el  centro  de  los  círculos son ​variables locales​, 
esto  significa  que  sólo  están  definidas  en la función planeta, y no se pueden usar en otras funciones. 
Si  estuvieran  definidas  antes  del  setup  serían  ​variables  globales  y  se  podrían  usar  en  cualquier 
parte  del  programa.  Además  está  la  orden  ​delay  (tiempo)  que  supone  un  retardo  de  un  tiempo  en 
milisegundos. 

Miniguía de Proccesing 13 
void setup() { 
size (500,500);   
} 
 
void draw() { 
  background(0);   
  planeta(); 
  delay (1000); 
} 
 
void planeta() { 
float centroX=random (500); 
float centroY=random (500); 
 noStroke(); 
 fill (255,0,0); 
 ellipse (centroX,centroY,100,100); 
 noFill(); 
 stroke (0,255,0); 
 ellipse (centroX,centroY,200,200); 
 ellipse (centroX,centroY,250,250); 
} 
 
El  siguiente  programa  es  muy  parecido  al  anterior  pero ahora llamamos a la función ​planeta en ​draw 
pasándole  parámetros  o  valores  a  variables  de  la  función  planeta  como  son:  ​centroX,  ​centroY  y 
colorR.  

void setup() { 
size (500,500);   
} 
 
void draw() { 
  background(0);   
  planeta(random (width),random(height), random (255)); 
  delay (1000); 
} 
 
void planeta(float centroX,float centroY, float colorR) { 
 noStroke(); 
 fill (colorR,0,0); 
 ellipse (centroX,centroY,100,100); 
 noFill(); 
 stroke (0,255,0); 
 ellipse (centroX,centroY,200,200); 
 ellipse (centroX,centroY,250,250); 
} 
 

Algo de física con proccesing 
Pelota con aceleración gravitatoria 
Establecemos  variables  de  velocidad  en  x e y, y aceleración en y. Si la  pelota llega al final o principio 
de  y  la velocidad cambia de  sentido, pero la aceleración  siempre es positiva luego para abajo acelera 
y para arriba decelera. 

Miniguía de Proccesing 14 
float velX=0; 
float velY=1; 
float acelY=0.1; 
float posX; 
float posY=1; 
 
void setup() { 
size (600,500); 
background(0); 
posX=random (width); 
} 
 
void draw() { 
  background(0); 
  ellipse (posX,posY,20,20); 
  velX=random(­5,5); 
  posX=posX+velX; 
  velY=(velY+acelY); 
  posY=posY+velY; 
  if (posY>height) { posY=height;} 
  if (posY<0) {posY=0;} 
  if (posY>=height || posY<=0) { 
  velY=­velY; 
  //acelY=­acelY; 
  } 
  if (posX>width) { 
  posX=width; 
  } 
  if (posX<0) { 
    posX=0;} 
println (velY); 
} 
 

Arkanoid con Proccesing 

boolean gameOver = true;  
int score1; 
float posY;  
float posX;  
int speedX; 
float speedY; 
 
void setup () { 
  size(500, 500);  
  posX = width/2; //posición X de pelota 
  posY = height/2; //posición y de pelota 
  speedX = 2; //velocidad x de pelota 
  speedY= ­5; //velocidad y de pelota 
  score1= 0;//marcador 
  rectMode(CENTER); 
} 
 
void draw () { 
  background(0); 
 
  if (gameOver == true) {//si la variable gameOver es verdadera 

Miniguía de Proccesing 15 
    textAlign(CENTER); 
    textSize(14); 
    text ("Press a Key", width/2, (height/2)+20); 
    textSize(20); 
    text ("GAME OVER", width/2, height/2); 
  }  
  else {// en caso que gameOver sea falsa vamos a jugar 
 
    fill(255); 
    rect( mouseX, height*0.9, 60, 10);//dibujamos la pala 
    fill(255); 
    ellipse(posX, posY, 10, 10);//dibujamos la pelota 
 
    if (posY< 0) {// si la pelota está arriba del todo, cambiamos sentido  
      speedY= ­ speedY; 
      posY= 0; 
    } 
 
    if (posY >height) {// si la pelota está abajo del todo termina la partida 
      posX = width/2; 
      posY = height/2; 
      gameOver = true; 
      speedX = speedX ; 
      speedY = speedY ; 
    } 
    if (posX> width) {//si la pelota llega a la derecha cambia de sentido 
      speedX= ­ speedX; 
      posX= width; 
    } 
 
    if (posX< 0) {//si la pelota llega a la izquierda cambia de sentido 
      speedX= ­ speedX; 
      posX= 0; 
    } 
 
   
    if (posX > mouseX­30 && posX < mouseX + 30 && posY > 0.9*height­5 && posY < 0.9*height+5) { 
      //este if controla que esté tocando la pala 
      speedX = speedX; 
      speedY = ­1*speedY; 
      score1= score1+1; 
    }  
    else {// si no toca la pala 
 
      text(score1, 320, 30); 
    } 
 
    println(posY); 
    posX= posX + speedX;  
    posY= posY + speedY; 
  } 
} 
 
void keyPressed() { 
  if (gameOver == true) { 
    gameOver = false; 
    score1=0; 
  } 
} 

Miniguía de Proccesing 16 
  
 
 
 
 
 
 
 
 
 
 
 
 
 
  
 
 

Miniguía de Proccesing 17