57

Punto 12 Funciones de usuario

Introduccin
En Processing cualquier usuario puede programar sus propias funciones. Llamamos a esto funcin
de usuario. Una funcin es un mdulo de programacin autocontenido. Las funciones de usuario
hacen ms conciso el cdigo redundante al extraer los elementos comunes e incluirlos en bloques de
cdigo para que puedan ejecutarse tantas veces se quiera dentro del programa. Esto permite una
lectura ms fcil del cdigo y reduce las probabilidades de error al actualizar el cdigo. Las
funciones generalmente tienen parmetros que definen sus acciones. Las funciones pueden operar
de forma diferente dependiendo del nmero de parmetros usados.
Una funcin puede ser imaginada como una caja con mecanismos dentro que actan sobre los datos
ingresados y devuelven un resultado.
Convencionalmente posee una o varias entradas, un bloque de cdigo que procesa dichas entradas,
y finalmente una salida:

Algunos ejemplos de diagramas de funcin de usuario:

Abstracciones
En trminos informticos, se llama abstraccin al proceso que permite esconder los detalles de
realizacin del cdigo y concentrarnos en las operaciones resueltas. En realidad todas las funciones
IntroduccinaProcessingv1.5+

Docente:RalLacabanne

58
de sistema que hemos visto hasta el momento son, tcnicamente, abstracciones: los autores han
escondido los detalles de implementacin para que el programador se concentre en los resultados.
Cuando construimos funciones estas podrn devolver un resultado o no. Depende evidentemente de
qu queramos hacer con ella. Pero en el caso de optar por la no devolucin de un resultado
deberemos comenzar por construir el bloque con la palabra clave void. Es por esto que todos los
ejemplos que veremos a continuacin comienzan a construirse con dicha palabra clave.
Ejemplo 1:
//Programacinbasadaenprimitivas
//usandofuncionespersonalizadasofuncionesdefinidasporelusuario
//Autor:ArielMalka|www.chronotext.org
//URL:http://goo.gl/1IMAhJ
//Traduccin:RalLacabanne2009
//estafuncinserllamadaautomticamenteporProcessing
//cuandoelprogramaseejecute
voidsetup(){
size(200,200);//configuraeltamaodepantalla
}
//estafuncintambinserllamadaautomticamenteluegodesetup()
voiddraw(){
rect(100,30,90,160);//creaunrectngulo
}
//El"flujodeejecucin"serelsiguiente:
//1)setup()
//2)size(200,200)
//3)draw()
//4)rect(10,10,90,160);

Ejemplo 2:
//Programacinbasadaenprimitivas
//usandofuncionespersonalizadasofuncionesdefinidasporelusuario
//Autor:ArielMalka|www.chronotext.org
//URL:http://goo.gl/1IMAhJ
//Traduccin:RalLacabanne2009
voidsetup(){
size(200,200);
background(255);//estableceelcolordefondoenblanco
}
voiddraw(){
//cuatrollamadasalafuncindefinidaporelusuariocross()
//el"origendelsistemadecoordenadas"pordefectoseencuentra
//enlaesquinasuperiorizquierdadelapantalla
cruz();//esquinasuperiorizquierdadelacruzen0,0
//el"origendelsistemadecoordenadas"semueve50px
//aladerechay50pxabajo
translate(50,50);
cruz();//esquinasuperiorizquierdadelacruzen50,50
IntroduccinaProcessingv1.5+

Docente:RalLacabanne

59
//el"origendelsistemadecoordenadas"semueveotros50px
//aladerechay50pxabajo
translate(50,50);
cruz();//esquinasuperiorizquierdadelacruzen100,100
//el"origendelsistemadecoordenadas"semueveotros50px
//aladerechay50pxabajo
translate(50,50);
cruz();//esquinasuperiorizquierdadelacruzen150,150
}
//nuestrafuncindefinidaporelusuario,quepodemosnombrarla
//comoqueramossiempreycuandonosesuperpongaconfunciones
//desistemapreestablecidas.
voidcruz(){
noStroke();
fill(255,0,0);//rojo
rect(0,10,30,10);
rect(10,0,10,30);
}

Ejemplo 3:
//Programacinbasadaenprimitivas
//usandofuncionespersonalizadasofuncionesdefinidasporelusuario
//Autor:ArielMalka|www.chronotext.org
//http://goo.gl/1IMAhJ
//Traduccin:RalLacabanne2009
//cuandodibujamosusandofuncionesesimportantepodertener
//laposibilidaddedibujarunaformadesdeelcentro...

voidsetup(){
size(200,200);
background(255);
}

voiddraw(){
cruz();//esquinasuperiorizquierdadelacruzen0,0
//el"origendelsistemadecoordenadas"semueve50px
//aladerechay50pxabajo
translate(50,50);
cruz();//esquinasuperiorizquierdadelacruzen50,50
//el"origendelsistemadecoordenadas"semueveotros50px
//aladerechay50pxabajo
translate(50,50);
cruz();//esquinasuperiorizquierdadelacruzen100,100
//el"origendelsistemadecoordenadas"semueveotros50px
//aladerechay50pxabajo
translate(50,50);
cruz();//esquinasuperiorizquierdadelacruzen150,150
}

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

60

voidcruz(){
noStroke();
fill(255,0,0);
rectMode(CENTER);//losrectngulosserndibujadosdesdeelcentro
rect(0,0,30,10);
rect(0,0,10,30);
}

Ejemplo 4:
//Programacinbasadaenprimitivas
//usandofuncionespersonalizadasofuncionesdefinidasporelusuario
//Autor:ArielMalka|www.chronotext.org
//URL:http://goo.gl/1IMAhJ
//Traduccin:RalLacabanne2009
//cuandocreamosfuncionespersonalizadasesposibleagregar
//unnmeroarbitrariode"parmetros"queactuarncomo
//variablesdentrodelbloquedelafuncin
voidsetup(){
size(200,200);
background(255);
}
voiddraw(){
//cuandollamamosanuestrafuncin,estamos"pasando"
//2parmetrosqueafectarnlaposicindelacruz
cruz(0,0);//elcentrodelacruzseencuentraen0,0
cruz(50,50);//elcentrodelacruzseencuentraen50,50
cruz(100,100);//elcentrodelacruzseencuentraen100,100
cruz(150,150);//elcentrodelacruzseencuentraen150,150
}
voidcruz(floatejeX,floatejeY){
//estamosusandodosparmetrosejeXyejeY(losnombramosavoluntad
//sinrepetirotrasvariablesdesistemaoyacreados)
noStroke();
fill(255,0,0);
rectMode(CENTER);
//ejeXyejeYestnactuandocomovariablesyhansido
//declaradasporfueradelbloquedelafuncin
rect(ejeX,ejeY,30,10);
rect(ejeX,ejeY,10,30);
}

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

61
Ejemplo 5:
//Programacinbasadaenprimitivas
//usandofuncionespersonalizadasofuncionesdefinidasporelusuario
//Autor:ArielMalka|www.chronotext.org
//URL:http://goo.gl/1IMAhJ
//Traduccin:RalLacabanne2009
//introduccindeparmetrosadicionales

voidsetup(){
size(200,200);
background(255);
}

voiddraw(){
//definicindevariablesquecontieneninformacindecolor
colorrojo=color(255,0,0);
colorazul=color(51,153,255);
colorgris=color(128,128,128);
colorverde=color(153,255,51);

//estamospasandountercerparmetroqueafectareltamaodelacruz
//yuncuartoparmetroquepermitirencontroldecolordelacruz

cruz(0,0,1,rojo);
cruz(50,50,3,azul);
cruz(100,100,0.5,gris);
cruz(150,150,5.5,verde);
}

voidcruz(floatx,floaty,floattamanio,colorcolorCruz){
//2nuevosparmetroshansidoagregadosalafuncin
noStroke();
fill(colorCruz);//estocontrolaelcolordelacruz
rectMode(CENTER);

rect(x,y,30*tamanio,10*tamanio);
rect(x,y,10*tamanio,30*tamanio);
}

Ejemplo 6:
//Programacinbasadaenprimitivas
//usandofuncionespersonalizadasofuncionesdefinidasporelusuario
//Autor:ArielMalka|www.chronotext.org
//URL:http://goo.gl/1IMAhJ
//Traduccin:RalLacabanne2009
//cuandoseprogramaesposiblealcanzarlosmismosresultadosutilizando
diferentesacercamientos!

voidsetup(){
size(200,200);
background(255);
}

voiddraw(){

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

62
fill(255,0,0);//rojo
cruz(0,0,1);

fill(51,153,255);//azul
cruz(50,50,3);

fill(128,128,128);//gris
cruz(100,100,0.5);

fill(153,255,51);//verde
cruz(150,150,5.5);
}

voidcruz(floatx,floaty,floattamanio){
noStroke();
rectMode(CENTER);

rect(x,y,30*tamanio,10*tamanio);
rect(x,y,10*tamanio,30*tamanio);
}

Ejemplo 7:
//Programacinbasadaenprimitivas
//usandofuncionespersonalizadasofuncionesdefinidasporelusuario
//Autor:ArielMalka|www.chronotext.org
//URL:http://goo.gl/1IMAhJ
//Traduccin:RalLacabanne2009
//usarfuncionesqueusanotrasfunciones...
//primerohagamosdosfigurasdiferentesyexaminmoslasporseparado

voidsetup(){
size(200,200);
background(255);
fill(0,0,0);//todaslasfigurasconrellenonegro
}

voiddraw(){
burbujas(50,100);
tubo(150,100);
}

voidtubo(floatx,floaty){
noStroke();
rectMode(CENTER);
ellipseMode(RADIUS);
rect(x,y,40,100);
rect(x,y50,60,10);
ellipse(x,y+50,20,20);
}

voidburbujas(floatx,floaty){
noStroke();
ellipseMode(RADIUS);
ellipse(x+4,y24,10,10);
ellipse(x4,y,9,9);

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

63
ellipse(x+4,y+24,8,8);
ellipse(x4,y+48,7,7);
}

Ejemplo 8:
//Programacinbasadaenprimitivas
//usandofuncionespersonalizadasofuncionesdefinidasporelusuario
//Autor:ArielMalka|www.chronotext.org
//URL:http://goo.gl/1IMAhJ
//Traduccin:RalLacabanne2009
//usarfuncionesqueusanotrasfunciones...
//ahorahagamosunafuncinqueusajuntasydemaneracompuesta
//nuestrasdosfuncionesanteriores

voidsetup(){
size(200,200);
background(255);
}

voiddraw(){
peligro(50,100);
peligro(75,80);
peligro(100,100);
peligro(125,120);
peligro(150,100);
}

voidpeligro(floatx,floaty){
fill(0,0,0);//negro
tubo(x,y);

fill(255,255,255);//blanco
burbujas(x,y);
}
voidtubo(floatx,floaty){
noStroke();
rectMode(DIAMETER);
ellipseMode(RADIUS);

rect(x,y,40,100);
rect(x,y50,60,10);
ellipse(x,y+50,20,20);
}

voidburbujas(floatx,floaty){
noStroke();
ellipseMode(RADIUS);

ellipse(x+4,y24,10,10);
ellipse(x4,y,9,9);
ellipse(x+4,y+24,8,8);
ellipse(x4,y+48,7,7);
}

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

64
Ejemplo 9:
//Programacinbasadaenprimitivas
//usandofuncionespersonalizadasofuncionesdefinidasporelusuario
//Autor:ArielMalka|www.chronotext.org
//URL:http://goo.gl/1IMAhJ
//Traduccin:RalLacabanne2009
//usarfuncionesqueusanotrasfunciones...
//generarunafuncinqueutilizanuestras2piezascompuestasjuntas
//mslaintroduccindeescalado(usandounparmetroadicional)
voidsetup(){
size(200,200);
background(255);
}
voiddraw(){
peligro(50,100,13);//msgrande
peligro(150,100,5);//mspequeo
}
voidpeligro(floatx,floaty,floattamanio){
fill(0,0,0);//negro
tubo(x,y,tamanio);
fill(255,255,255);//blanco
burbujas(x,y,tamanio);
}
voidtubo(floatx,floaty,floattamanio){
noStroke();
rectMode(DIAMETER);
ellipseMode(RADIUS);
rect(x,y,4*tamanio,10*tamanio);
rect(x,y5*tamanio,6*tamanio,1*tamanio);
ellipse(x,y+5*tamanio,2*tamanio,2*tamanio);
}
voidburbujas(floatx,floaty,floattamanio){
noStroke();
ellipseMode(RADIUS);
ellipse(x+0.4*tamanio,y2.4*tamanio,1*tamanio,1*tamanio);
ellipse(x0.4*tamanio,y,0.9*tamanio,0.9*tamanio);
ellipse(x+0.4*tamanio,y+2.4*tamanio,0.8*tamanio,0.8*tamanio);
ellipse(x0.4*tamanio,y+4.8*tamanio,0.7*tamanio,0.7*tamanio);
}

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

65
Ejemplo 10:
//Programacinbasadaenprimitivas
//usandofuncionespersonalizadas
//Autor:ArielMalka|www.chronotext.org
//URL:http://goo.gl/1IMAhJ
//Traduccin:RalLacabanne2009
//usarfuncionesqueusanotrasfunciones...
//generarunafuncinqueutilizanuestras2piezascompuestasjuntas
//mslaintroduccindeescaladobasadoenunamatrizdetransformacin

voidsetup(){
size(200,200);
background(255);
}

voiddraw(){
peligro(50,100,1.3);
peligro(150,100,0.5);
}

voidpeligro(floatx,floaty,floatsz){
fill(0,0,0);//negro
pushMatrix();
translate(x,y);
scale(sz);
tubo();
popMatrix();

fill(255,255,255);//blanco
pushMatrix();
translate(x,y);
scale(sz);
burbujas();
popMatrix();
}
voidtubo(){
noStroke();
rectMode(DIAMETER);
ellipseMode(RADIUS);

rect(0,0,40,100);
rect(0,50,60,10);
ellipse(0,50,20,20);
}

voidburbujas(){
noStroke();
ellipseMode(RADIUS);

ellipse(4,24,10,10);
ellipse(4,0,9,9);
ellipse(4,24,8,8);
ellipse(4,48,7,7);
}

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

66
Ejemplo 11:
//Programacinbasadaenprimitivas
//usandofuncionespersonalizadasofuncionesdefinidasporelusuario
//Autor:ArielMalka|www.chronotext.org
//URL:http://goo.gl/1IMAhJ
//Traduccin:RalLacabanne2009
//usarfuncionesqueusanotrasfunciones...
//generarunafuncinqueutilizanuestras2piezascompuestasjuntas
//mslaintroduccindeescaladobasadoenunamatrizdetransformacin
voidsetup(){
size(200,200);
background(255);
}
voiddraw(){
peligro(50,100,1.3);
peligro(150,100,0.5);
}
voidpeligro(floatx,floaty,floattamanio){
fill(255,0,0);//rojo
pushMatrix();
translate(x,y);
scale(tamanio);
tubo();
fill(255,255,255);//blanco
burbujas();
popMatrix();
}
voidtubo(){
noStroke();
rectMode(DIAMETER);
ellipseMode(RADIUS);
rect(0,0,40,100);
rect(0,50,60,10);
ellipse(0,50,20,20);
}
voidburbujas(){
noStroke();
ellipseMode(RADIUS);
ellipse(4,24,10,10);
ellipse(4,0,9,9);
ellipse(4,24,8,8);
ellipse(4,48,7,7);
}

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

67
Ejemplo 12:
voidsetup(){
size(640,360);
background(102);
smooth();
}
voiddraw(){
elipseVariable(mouseX,mouseY,pmouseX,pmouseY);
}
//elipseVariable()calculalavelocidaddelratn.
//Sielratnsemuevelentamente:dibujaunaelipsepequea,
//sielratnsemueverpidamente:dibujaunaelipsemayorsi
voidelipseVariable(intx,inty,intpx,intpy){
floatspeed=abs(xpx)+abs(ypy);
stroke(speed);
ellipse(x,y,speed,speed);
}

Valor de retorno
Hasta ahora, en todos los ejemplos, hemos visto que la salida de una funcin que dibuja primitivas
se ha realizado en el rea de representacin. Sin embargo a veces necesitaremos que la salida de
una funcin sea un nmero u otro tipo de dato. La salida de una funcin se llama valor de retorno.
Se espera que todas las funciones regresen un valor, tal como un entero o un decimal. Si la funcin
no regresa un valor, se utiliza la palabra especial void. El tipo de dato regresado por una funcin se
encuentra a la izquierda del nombre de funcin.
El comando clave return es usado para salir de una funcin y regresar al lugar desde el cual fue
llamado. Cuando una funcin regresa un valor, return es usado para especificar qu valor debe ser
regresado.
La instruccin que incluye return es generalmente la ltima de una funcin, ya que la misma
finaliza inmediatamente despus de un retorno. Ya hemos usado funciones que devuelven valores:
por ej.: random() regresa un decimal, color() regresa un tipo de dato de color, etc.
Si una funcin regresa un valor, dicha funcin casi siempre aparece a la derecha de un operador de
asignacin o como parte de una expresin mayor. Una funcin que no regresa un valor es
frecuentemente usada como una instruccin completa.
Las funciones no estn limitadas a regresar nmeros: pueden regresar boolean, String, PImage o
cualquier otro tipo de dato.
Para escribir una funcin de usuario que regrese un valor, reemplace void con el tipo de dato que
necesite regresar, e incluya dentro de la funcin la palabra clave return seguido de la variable que
contenga el valor que desee regresar para habilitar la salida del mismo.
A continuacin veremos un ejemplo:
voidsetup(){
size(100,100);
floatf=promedio(12.0,6.0);//Asigna9.0af
println(f);
}

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

68
floatpromedio(floatnum1,floatnum2){
floatav=(num1+num2)/2.0;
returnav;
}

Sobrecarga de funciones (Function overloading)

Se llama sobrecarga de funciones al procedimiento de crear diferentes versiones de una misma
funcin. Las distintas versiones pueden compartir el mismo nombre de funcin siempre y cuando
tengan diferentes nmeros de parmetros o tipos de datos de los mismos. Es decir, un programa
puede tener dos funciones con el mismo nmero de parmetros, pero slo si el tipo de dato de uno
de sus parmetros es diferente.
Processing identifica automticamente qu versin de funcin debe ejecutar al comparar el nmero
y el tipo de dato de sus parmetros.
Veamos el prximo ejemplo:
voidsetup(){
size(100,100);
smooth();
}
voiddraw(){
dibujoX(255);//EjecutaprimerdibujoX()
dibujoX(5.5);//EjecutasegundodibujoX()
dibujoX(0,2,44,48,36);//EjecutatercerdibujoX()
}
//dibujoXconelvalordegrisdeterminadoporelparmetro
voiddibujoX(intgris){
stroke(gris);
strokeWeight(20);
line(0,5,60,65);
line(60,5,0,65);
}
//dibujoXnegroconelvaloranchodecontornodeterminadoporelparmetro
voiddibujoX(floatancho){
stroke(0);
strokeWeight(ancho);
line(0,5,60,65);
line(60,5,0,65);
}
//dibujoXconlaposicin,elvalordegris,tamaoyelanchode
//contornodeterminadosporsuscorrespondientesparmetros
voiddibujoX(intgris,intancho,intx,inty,ints){
stroke(gris);
strokeWeight(ancho);
line(x,y,x+s,y+s);
line(x+s,y,x,y+s);
}

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

69

Lectura recomendada

Buioli, I. & Prez Marn, J. "Processing: un lenguaje al alcance de todos", Autoedicin,

2013, Unidad 19 "Estructuras: Funciones" (pag. 95).
Reas, C. & Fry, B. "Processing: A Programming Handbook for Visual Designers and
Artists, MIT Press, 2007, Captulo "Structure 3: Functions" (pag. 181).

Ejercicio 13

Crear una forma animada autnoma que comunique la idea de "orden".

Utilizar funciones de usuario.
Comentar todas las instrucciones.

Ejercicio 14

Crear una forma animada autnoma que comunique la idea de "caos".

Utilizar funciones de usuario.
Comentar todas las instrucciones.

Ejercicio 15

Crear una forma interactiva que comunique la idea de "orden y caos".

Utilizar funciones de usuario.
Comentar todas las instrucciones.

IntroduccinaProcessingv1.5+

Docente:RalLacabanne