Processing Un Lenguaje Al Alcance de Todos

Processing,
un lenguaje al alcance de todos

Edicin 2013
versin 02
Ignacio Buioli | Jaime Prez Marn 2
ndice
ndice......................................................................................................................................................................3
Introduccin............................................................................................................................................................4
Estructuras Elementos del !digo........................................................................................................................"
#ormas !oordinadas $ Primiti%as.........................................................................................................................&
'atos (aria)les...................................................................................................................................................*+
Matem,ticas #unciones -ritmticas....................................................................................................................2.
!ontrol 'ecisiones..............................................................................................................................................2/
!ontrol 0e1eticin...............................................................................................................................................3*
#ormas (rtices..................................................................................................................................................3"
Matem,ticas !ur%as............................................................................................................................................43
!olor !olor 1or 23meros....................................................................................................................................44
Imagen (isualizacin $ 5inta.............................................................................................................................../"
'atos 5e6to........................................................................................................................................................../&
'atos !on%ersin $ 7)8etos................................................................................................................................"*
5i1ogra9a (isualizacin......................................................................................................................................"/
Matem,ticas 5rigonometra................................................................................................................................."&
Matem,ticas -leatoriedad...................................................................................................................................++
5rans9ormaciones Matrices $ 5raslaciones.........................................................................................................4*
5rans9ormaciones 0otacin $ Escala..................................................................................................................44
Estructuras !ontinuidad......................................................................................................................................4&
Estructuras #unciones.........................................................................................................................................&/
#ormas Par,metros $ 0ecursin .....................................................................................................................*./
(alores de Entrada Mouse................................................................................................................................**.
'i)u8o #ormas Est,ticas....................................................................................................................................**+
(alores de Entrada 5eclado..............................................................................................................................*2.
(alores de Entrada E%entos..............................................................................................................................*23
(alores de Entrada Mouse II.............................................................................................................................*24
(alores de Entrada 5iem1o $ #ec:as...............................................................................................................*34
Mo%imiento ;neas $ !ur%as.............................................................................................................................*34
Mo%imiento Mec,nicos $ 7rg,nicos.................................................................................................................*4"
'atos -rra$s......................................................................................................................................................*/*
Imagen -nimacin.............................................................................................................................................*".
Imagen P6eles..................................................................................................................................................*"4
5i1ogra9a Mo%imiento.......................................................................................................................................*"4
5i1ogra9a 0es1uesta........................................................................................................................................*+2
!olor !om1onentes..........................................................................................................................................*+/
Imagen #iltro< Mezcla< !o1ia< M,scara............................................................................................................*4*
Imagen Procesamiento de Imagen...................................................................................................................*4"
'atos de =alida Im,genes................................................................................................................................*&4
'atos de =alida E61ortar -rc:i%os....................................................................................................................*&+
Estructuras 7)8etos...........................................................................................................................................2..
'i)u8os #ormas !inticas.................................................................................................................................2*2
E6tensin Modos...............................................................................................................................................2*"
E6tensin #iguras 3'........................................................................................................................................22.
E6tensin >M;..................................................................................................................................................22&
-1artados 'ocumentacin................................................................................................................................23*
El 1resente li)ro< de ti1o manual actualiza)le< corres1onde al a1rendiza8e del so9t?are de Processing 2... El
:ec:o de 1oseer una %ersin anterior o 1osterior no entor1ece ni im1ide el a1rendiza8e con el 1resente
manual. =in em)argo< se recomienda actualizarse a la 3ltima %ersin esta)le. @ante cualAuier duda< consultar
en :tt1BB1rocessing.orgBdo?nloadBC.
Dueda entendido Aue Processing es creado< en 1rinci1io< 1or !ase$ 0eas $ Ben #r$< $ se trata de un so9t?are
de cdigo a)ierto Aue se distri)u$e )a8o una licencia E2F E;P @General Public LicenseC.
Introduccin
'ado el a%ance de los medios de 1roduccin multimedial< nace un 1otente so9t?are dedicado a la 1roduccin
de im,genes< animaciones e interacti%os. El so9t?are denominado Processing. El 1ro$ecto da inicio en el
2..*< realizado 1or !ase$ 0eas $ Ben #r$< a 1artir de terminologas realizadas en el MI5 ;a)< dirigido 1or
Jo:n Maeda< e in9luenciado 1or el 1ro$ecto Design by Numbers. Es as Aue Processing se con%ierte en un
1oderoso entorno de 1roduccin )asado en Ja%a.
2os 1areci im1ortante la creacin de un li)ro ti1o manual de introduccin a Processing Aue se encuentre
dis1oni)le en es1aGol< 1uesto Aue la ma$ora de los manuales del mercado se encuentran 3nicamente en
ingls $ no :a$ ninguna %ersin al castellano. 2o es de 1oca monta la cantidad de :is1ano:a)lantes Aue
e6isten en el mundo< es1ecialmente interesados en a1render lengua8es de 1rogramacin orientados a
entornos Ja%a. Por tal moti%o< este manual comenz< en 1rinci1io< como una traduccin de los manuales de
Processing. 2o o)stante< la distri)ucin de los mismos no nos con%encan en cuanto a ductilidad de lectura<
1or lo tanto decidimos tomarlos de )ase 1ara crear nuestro 1ro1io manual Aue a$ude a aAuellos @Aue 1or
di%ersos moti%os no sa)en leer en inglsC interesados en la 1roduccin multimedial Aue el so9t?are o9rece.
En este li)ro< se o9rece< adem,s< a1ndices corres1ondientes a cada sector $ e8em1los Aue muestran el
9uncionamiento de las estructuras $ de los 1rogramas. =e recomienda Aue< una %ez conseguido el 1rograma<
los e8em1los sean %istos desde a: $ no solo desde la imagen Aue lo acom1aGa.
!omo se menciona anteriormente< este li)ro< 1rinci1almente< comienza como una traduccin del li)ro
Processing: A programming Handbook for Visual Designer and Artist de !ase$ 0eas $ Ben #r$. 2o o)stante<
se inclu$en conce1tos $ material no 1resente en dic:o li)ro @as como tam)in se Auitan cosas del mismo Aue
no nos :an 1arecido 1ertinentesC.
Software
-u! es Processing"
Es un so9t?are de cdigo a)ierto< $ cualAuier 1ersona 1uede contri)uir en su me8ora. 'es1ro%isto de
inter9aces innecesarias< se %ale de un lengua8e de 1rogramacin @de igual nom)reC )asado en Ja%a 1ara
realizar com1osiciones de gran inters.
!omo so9t?are< consiste ),sicamente en un sim1le editor de te6to 1ara escri)ir cdigo< un ,rea de mensa8e<
una consola de te6to< un sistema de 1estaGas 1ara mane8ar arc:i%os< una )arra de :erramientas con )otones
de accionar com3n $ una )arra de men3. !uando el 1rograma se e8ecuta< se a)re una %entana de
re1resentacin. ;os arc:i%os Aue se escri)en en Processing se denominan sketch. Esos sHetc: se escri)en
en el editor de te6to. -dmite las 9unciones de co1iarB1egar $ )uscarBreem1lazar te6to. ;a consola muestra
errores 1roducidos al e8ecutar el 1rograma. 5am)in< 1uede mostrar te6to a tra%s de las 9unciones print! $
println!.
-#escarga
El so9t?are de Processing 1uede descargarse del sitio ?e) :omnimo del 1rograma. 'esde un na%egador
?e)< ingresar a """.processing.org $ )uscar la seccin de descarga @do"nloadC. -dmite sistemas o1erati%os
de ;inu6< Macintos: $ Iindo?s. En el sitio se encuentran las instrucciones mismas 1ara la descarga.
-$onte%to
Barra de Men3
#ile #Archi$o#. !omandos 1ara mane8ar $ e61ortar arc:i%os.
Edit #%ditar#. !ontroles 1ara editar te6to. @!o1iar< 1egar< cortar< encontrar< reem1lezar< etc.C.
=Hetc: #&ketch#. !ontrol 1ara e8ecutarB9renar el 1rograma $ 1ara aGadir li)reras.
5ools #Herramientas#. Jerramientas de asistencia 1ara Processing.
Jel1 #Ayuda#. 0e9erencias a arc:i%os $ al lengua8e.
Barra de Jerramientas
0un #%'ecutar#. !om1ila el cdigo< a)re una %entana de re1resentacin $ muestra el 1rograma.
=to1 #Parar#. 5ermina de correr el 1rograma.
2e? #Nue$o#. !rea un nue%o =Hetc:.
71en #Abrir#. Pro%ee de o1ciones 1ara a)rir un sHetc: del li)ro de sHetc:< a)rir un e8em1lo< o un
sHetc: en cualAuier sitio del ordenador.
=a%e #Guardar#. Euarda el actual sHetc: en la actual u)icacin. Para otra u)icacin usar el o1cion
K=a%e asL.
E61ort #%(portar#. E61orta el actual sHetc: como un a11let de Ja%a unido a una arc:i%o J5M;.
Ignacio Buioli | Jaime Prez Marn /
&nidad 1
Estructuras' Ele(entos del $digo
Ele(entos )ue se introducen en esta &nidad'
// (comentario), /* */ (comentario multilinea),;(terminador de accin), , (coma), print(),
println()
El :ec:o de crear un 1rograma im1lica recurrir a la escritura $ a1render un lengua8e. =imilar a cuando
a1rendemos un nue%o lengua8e oral o escrito< necesitamos a1render una sinta6is $ una lgica. Escri)ir en un
lengua8e :umano es mu$ com1licado. Posee am)igMedad en las 1ala)ras< $ muc:a 9le6i)ilidad 1ara la
construccin de 1,rra9os. En ese sentido< el lengua8e de m,Auina es m,s sencillo< 1ero 1osee una di9icultad
clara la lgica de la 1rogramacin. Fsualmente< un ser :umano 1uede 1ercatarse de un error de sinta6is $
darlo 1or alto< rest,ndole 1arcial o com1leta im1ortancia. =in em)argo< en un lengua8e de m,Auina las cosas
son de una 9orma o de otra 7 est, )ien< o est, mal.
-$o(entarios
;os comentarios son ignorados 1or los ordenadores< 1ero son (u* i(+ortantes 1ara los :umanos.
Processing 1ermite agregar notas en cualAuier sector del cdigo. Pueden ser de solo una lnea o de muc:as
lneas. Na Aue los 1rogramas usan signos mu$ arcaicos $ de di9cil identi9icacin< muc:as %eces es
com1licado recordar Aue :aca cada sector indi%idualmente. Por lo tanto se recurre a la utilidad del
comentario< mu$ 3til a la :ora de re%isar el cdigo< $a sea 1or el 1ro1io 1rogramador como 1or otros. El
siguiente 1rograma e61lica< 1or s solo< como se comenta
// Dos barras laterales son usadas para comentar
// Todo el texto en la misma lnea es parte de un comentario
// No debe haber espacio entre las barras, por eemplo / /, de lo contrario
// el comentario no !uncionar"#
// $i desea muchas lneas
// lo ideal es usar el m%todo multilinea#
/*
&na barra lateral se'uida por un asterisco
permite el comentario de multilinea#
*/
-,unciones
;as 9unciones 1ermiten di)u8ar 9ormas< colores< realizar c,lculos matem,ticos< entre otras %ariadas acciones.
Por lo general se escri-en en (in.sculas * seguidas +or +ar!ntesis. -lgunas 9unciones ace1tan
par)metros< los cuales se escri)en entre los 1arntesis. =i ace1ta m,s de uno< son se1arados 1or una coma
@,C. - continuacin un 1rograma Aue inclu$e dos 9unciones si(e() $ bac)'round().
//*on esta !uncin establecemos el tama+o de la ,entana de presentacin
//-l primer par"metro corresponde al ancho de la ,entana
//-l se'undo par"metro corresponde al alto#
si(e(.//, 0//);
//*on esta !uncin establecemos el color de !ondo de la ,entana
//1cepta di,ersos par"metros, para una escala de 'rises bastar" con ,alores de /
(ne'ro) a 233 (blanco)#
bac)'round(/);
-E%+resiones * /cciones
=i us,ramos una analoga< la e61resin de un so9t?are es como una 9rase. ;as e61resiones< 1or lo general<
Ignacio Buioli | Jaime Prez Marn "
%an acom1aGadas de alg3n o1erador como 4< 5< * o /< $a sea a la izAuierda o a la derec:a del %alor. Fna
e61resin en 1rogramacin 1uede ser ),sica< como un solo n3mero< o una com1le8a cadena de elementos.
'e esta manera< una e61resin siem1re tiene un %alor determinado.
E61resin (alor
3 3
6/#3*2 26#/
((042)*56/)46 5.7
Ja$ e61resiones Aue tam)in 1ueden usarse en com1aracin de un %alor con otro. ;os o1eradores de 8
#mayor a# $ 9 #menor a# de%uel%en solo dos %alores true @$erdadero! $ !alse @falso!.
E61resin (alor
: 8 0 true
3. 9 3/ !alse
Fn con8unto de e61resiones 1ueden 9ormar una acci*n< lo Aue en 1rogramacin eAui%ale a una oraci*n. =e
com1leta cuando se 1resenta el terminador de la accin. En Processing< el terminador de accin es el 1untoO
$Ocoma @;C. -l igual Aue :a$ di%ersos ti1os de oraciones< :a$ di%ersos ti1os de acciones. Fna accin 1uede
de9inir una %aria)le< e8ecutar una %aria)le< asignar una %aria)le< e8ecutar una 9uncin< o construir un o)8eto. -
continuacin unos e8em1los
si(e(2//, 2//); //eecuta la !uncin si(e ; determina los ,alores 2// ; 2//
int x; //declara una nue,a ,ariable
x < 6/2 //asi'na un ,alor a la ,ariable
bac)'round(x); //eecuta la !uncin bac)'round
=i se eliminara el 1untoO$Ocoma< el 1rograma dara un error.
-Sensi-ilidad
En nuestra lengua< :a$ casos en los Aue las 1ala)ras comienzan en ma$3sculas $ casos en los Aue no. Es a
lo Aue se llama letra capital. Por e8em1lo< nom)res de lugares como Buenos -ires o -ndaluca< o nom)res
1ro1ios como Pa)lo o EnriAue< todos ellos comienzan con la letra ca1ital @1rimer letra en ma$3sculasC. Ja$
di%ersos lengua8es de 1rogramacin Aue son 1ermisi%os con esto $ suelen de8arlo 1asar. En el caso de
Processing< se 1roduce una diferenciacin entre ma$3sculas $ min3sculas< siendo Aue la correcta 9orma de
escritura es en (in.sculas. Escri)ir si(e() como $i(e() 1roducira un error.
si(e(2//, 2//);
=ac)'round(6/2); //->>?> 5 @a = en bac)'round est" como letra capital#
Ignacio Buioli | Jaime Prez Marn +
-Es+acios en 0lanco
E6iste una gran %ariedad de lengua8es de 1rogramacin Aue son estrictos en cuanto a los es1acios en )lanco
Aue se de8an entre cada estructura. =in em)argo< Processing se 1resta 1ara esto $ le resta im1ortancia.
Podemos tener el siguiente cdigo
si(e(2//, 2//);
bac)'round(6/2);
N escrito de la siguiente manera 9uncionar, e6actamente igual
si(e
(2// ,
2// );
bac)'round ( 6/2 )
;
-$onsola
!uando un 1rograma es e8ecutado< la com1utadora realiza acciones a tal %elocidad Aue es im1osi)le
1erci)irlas 1ara el o8o :umano. Por lo tanto< es im1ortante mirar la consola< no solo 1ara errores< sino tam)in
1ara entender Aue ocurre detr1s del 1rograma.
;a consola en Processing< se encuentra como un es1acio en negro de)a8o del editor de te6to. !omo es mu$
im1ortante entender Aue ocurre dentro del 1rograma< e6isten las 9unciones print() $ println(). Estas
9unciones no en%an 1,ginas a im1rimir< ni muestran nada en la %entana de re1resentacin. =im1lemente
muestran te6to en la consola. ;a consola 1uede ser usada 1ara mostrar una %aria)le< con9irmar un e%ento o
c:eAuear datos e6ternos Aue est,n ingresando. -l igual Aue los comentarios< print() $ println() 1ueden
:acer m,s clara la lectura del cdigo.
//$i se desea imprimir texto, este debe estar entre comillas
println(Arocessin'###); //Bmprime Arocessin'### en la consola
//$i se desea imprimir una ,ariable
//no debe ponerse su nombre entre comillas
int x < 2/;
println(x); //Bmprime 2/ en la consola
//Cientras println() escribe cada cosa en una sola lnea, print() escribe todo
en la misma lnea
print(2/);
println(0/); //Bmprime 2/0/ en la consola
println(D/); //Bmprime D/ en una nue,a lnea de la consola
//Tambi%n pueden concatenarse mEltiples textos con el operador 4 (no con!undir
con su uso matem"tico)
int x < 2/;
int ; < D/;
println(x 4 F 4 ;); //Bmprime 2/ F D/ en la consola
&nidad 2
,or(as' $oordinadas * Pri(itivas
si(e(), point(), line(), trian'le(), Guad(), rect(), ellipse(), be(ier(), bac)'round(), !ill(),
stro)e(), noHill(), no$tro)e(), stro)eIei'ht(), stro)e*ap(), stro)eJoin(), smooth(), no$mooth(),
ellipseCode(), rectCode()
'i)u8ar una 9orma con un cdigo 1uede ser di9cil 1orAue todos sus as1ectos de su u)icacin de)en ser
es1eci9icados con un n3mero. !uando uno est, acostum)rado a di)u8ar con un l,1iz o 9ormas mo%indose en
una 1antalla con el ratn< 1uede tomar muc:o tiem1o em1ezar a 1ensar en la relacin de la red con una
1antalla de coordenadas estrictas. ;a di9erencia 9undamental entre %er una com1osicin so)re 1a1el o en su
mente $ su traduccin en notacin de cdigo es mu$ am1lia< 1ero mu$ sencilla de entender.
-$oordenadas
-ntes de :acer un di)u8o< es im1ortante Aue 1ensemos acerca del tamaGo $ las caractersticas de la
su1er9icie so)re la Aue %amos a di)u8ar. =i %amos a :acer un di)u8o en 1a1el< 1odemos elegir multitud de
utensilios $ ti1os de 1a1el. Para un es)ozo r,1ido< 1a1el de 1eridico $ car)oncillo es lo m,s a1ro1iado. Para
un di)u8o m,s re9inado< 1uede ser 1re9eri)le 1a1el sua%e :ec:o a mano $ l,1ices. !ontrariamente< cuando
est,s di)u8ando en un ordenador< las o1ciones 1rinci1ales dis1oni)les son el tamaGo de la %entana $ el color
del 9ondo.
;a 1antalla de un ordenador es una rejilla de 1eAueGos elementos luminosos llamados 16eles. ;as 1antallas
%ienen en muc:os tamaGos $ resoluciones. E6isten tres ti1os di9erentes de 1antallas 1ara nuestro estudio< $
todas ellas tienen un n3mero di9erente de 16eles. ;os 1ort,tiles tienen *.+"4.... 16eles @*"4. de anc:o 1or
*./. de altoC< las 1antallas 1lanas tienen *.3*..+2. 16eles @*24. de anc:o 1or *.24 de altoC $ los %ie8os
monitores tienen +4".432 16eles @*.24 de anc:o 1or +"4 de altoC. Millones de 16eles 1ueden sonar como
una cantidad mu$ %asta< 1ero 1roducen una 1o)re calidad %isual com1arado a un medio 9sico< como el 1a1el.
;as 1antallas modernas tienen una resolucin de a1ro6imadamente cien 1untos 1or 1ulgada< mientras Aue las
im1resoras modernas 1ro%een m,s de mil 1untos 1or 1ulgada. Por otra 1arte< las im,genes en 1a1el son
9i8as< mientras Aue las 1antallas tienen la %enta8a de ser ca1aces de cam)iar su imagen muc:as %eces 1or
segundo. ;os 1rogramas en Processing 1ueden controlar todos o un su-conjunto de 16eles de la 1antalla.
!uando 1ulsa el )otn 0un< una %entana de re1resentacin se a)re $ te 1ermite leer $ escri)ir dentro de los
16eles. Es 1osi)le crear im,genes m,s grandes Aue la 1antalla< 1ero en la ma$ora de los casos< :aremos
una %entana de re1resentacin igual o menor a la 1antalla. El tamaGo de la %entana de re1resentacin est,
controlada 1or la 9uncin si(e()
si(e(ancho, alto)
;a 9uncin si(e() tiene dos 1ar,metros el 1rimero esta)lece el anc:o de la %entana $ el segundo su alto.
//Dibua la ,entana de representacin de 02/ de ancho ; 2./ de alto (pxeles)#
si(e(02/,2./);
Fna 1osicin de la 1antalla est, com1rendida 1or un e8e de coordenadas 6 $ un e8e de coordenadas $. El e8e
de coordenadas 6 es la distancia :orizontal desde el origen $ el e8e de coordenadas $ es la distancia %ertical.
En Processing< el origen es la es)uina su+erior i2)uierda de la %entana de re1resentacin $ coordina los
%alores :acia a)a8o $ :acia la derec:a. ;a imagen de la izAuierda muestra el sistema de coordenadas< $ la
imagen de la derec:a muestra %arias 1osiciones en la re8illa
Ignacio Buioli | Jaime Prez Marn &
Fna 1osicin se escri)e con el valor del eje % seguido del valor del eje *< se1arados 1or una coma. ;a
notacin 1ara el origen es (/,/)< la coordenada (3/,3/) tiene /. de coordenada 6 $ /. de coordenada $< $
la coordenada (2/,:/) tiene 2. de coordenada 6 $ ". de coordenada $. =i el tamaGo de la %entana de
re1resentacin es de *.. 16eles de anc:o $ *.. 16eles de alto< el 16el de la esAuina su1erior izAuierda es
(/,/)< el 16el de la esAuina su1erior derec:a es (77,/)< el 16el de la esAuina in9erior izAuierda es
(/,77)< $ el 16el de la esAuina in9erior derec:a es (77,77). Esto se %e m,s claro si usamos la 9uncin
point().
-,iguras +ri(itivas
Fn 1unto es el elemento %isual m,s sim1le $ se di)u8a con la 9uncin point()
point(x,;)
Esta 9uncin tiene dos 1ar,metros el 1rimero es la coordenada 6 $ el segundo es la coordenada $. - menos
Aue se es1eci9iAue otra cosa< un 1unto es del tamaGo de un slo 16el.
point(2/, 2/);
point(0/, 0/);
point(./, ./);
point(3/, 3/);
point(:/, :/);
point(53//, 6//); //@os par"metros ne'ati,os no pro,ocan
point(.//, 5://); //error, pero no se ,er"n en la ,entana de
point(6./, 23//); //representacin#
point(23//, 6//);
Es 1osi)le di)u8ar cualAuier lnea mediante una serie de 1untos< 1ero son m,s sim1les de di)u8ar con la
9uncin line(). Esta 9uncin tiene cuatro 1ar,metros< dos 1or cada e6tremo
line(x6, ;6, x2, ;2)
;os 1rimeros dos 1ar,metros esta)lecen la 1osicin donde la lnea em1ieza $ los dos 3ltimos esta)lecen la
1osicin donde la lnea termina.
line(23, 7/, D/, :/);
line(3/, 62, .2, 7/);
line(.3, 0/, 6D, 0:);
Ignacio Buioli | Jaime Prez Marn *.
line(63, 2/, 3, D/);
line(7/, :3, 3, D/);
;a 9uncin trian'le() di)u8a un tri,ngulo. 5iene seis 1ar,metros< dos 1or cada 1unto
trian'le(x6, ;6, x2, ;2, x0, ;0)
El 1rimer 1ar de9ine el 1rimer 1unto< el segundo 1ar el segundo 1unto $ el 3ltimo 1ar el tercer 1unto. !ualAuier
tri,ngulo 1uede ser di)u8ado conectando tres lneas< 1ero la 9uncin trian'le() :ace 1osi)le di)u8ar una
9igura con relleno. 5ri,ngulos de todas 9ormas $ tamaGos 1ueden ser creados cam)iando los %alores de los
1ar,metros.
trian'le(33, 7, 66/, 6//, D3, 6//);
trian'le(33, 7, D3, 6//, K3, 6//);
trian'le(56, .:, 6:, 0., 5K, 6//);
trian'le(6:, 0., 5K, 6//, ./, 6//);
;a 9uncin Guad() di)u8a un cuadril,tero< un 1olgono de cuatro lados. Esta 9uncin tiene oc:o 1ar,metros<
dos 1or cada 1unto.
Guad(x6, ;6, x2, ;2, x0, ;0, x., ;.)
(ariando los %alores de los 1ar,metros se 1uede construir rect,ngulos< cuadrados< 1aralelogramos $
cuadril,teros irregulares.
Guad(2/, 2/, 2/, K/, :/, 7/, :/, ./);
Guad(2/, 2/, K/, 52/, 66/, /, :/, ./);
'i)u8ar rect,ngulos $ eli1ses 9uncionan de una manera di9erente a las 9iguras %istas anteriormente. En lugar
de de9inir cada 1unto< los cuatro 1ar,metros esta)lecen la 1osicin $ las dimensiones de la 9igura. ;a 9uncin
rect() di)u8a un rect,ngulo
rect(x, ;, ancho, alto)
rect(x, ;, ancho, alto, radio) //1 partir de la ,ersin 2#/
rect(x, ;, ancho, alto, si, sa, id, ii) //1 partir de la ,ersin 2#/
;os dos 1rimeros 1ar,metros esta)lecen la localizacin de la esAuina su1erior izAuierda< el tercero esta)lece
el anc:o< $ el cuarto el alto. Fse el mismo %alor de ancho $ alto 1ara di)u8ar un cuadrado. ;a %ersin con el
1ar,metro radio 1ermite agregar )orde redondeados al rect,ngulo. El 1ar,metro radio corres1onde al
radio de redondeo. ;a %ersin con otros cuatro 1ar,metros 1ermite agregar un radio distinto de redondeo a
Ignacio Buioli | Jaime Prez Marn **
cada esAuina. =iendo si @=u1erior IzAuierdoC< sa @=u1erior 'erec:oC< id @In9erior 'erec:oC $ ii @In9erior
IzAuierdoC.
rect(/, /, 7/, 3/);
rect(3, 3/, K3, .);
rect(2., 3., :, :);
rect(:., 3., :, :);
rect(2/, :/, K3, 6/);
rect(6/, K/, D/, 2);
;a 9uncin ellipse() di)u8a una eli1se en la %entana de re1resentacin
ellipse(x, ;, ancho, alto)
;os dos 1rimeros 1ar,metros esta)lecen la localizacin del centro de la eli1se< el tercero esta)lece la anc:o<
$ el cuarto la altura. Fse el mismo %alor de ancho $ de alto 1ara di)u8ar un crculo.
ellipse(03, /, 62/, 62/);
ellipse(0D, :2, :, :);
ellipse(./, 6//, K/, K/);
;a 9uncin be(ier() 1uede di)u8ar lneas Aue no son rectas. Fna cur%a Bzier est, de9inida 1or una serie
de 1untos de control $ 1untos de ancla8e. Fna cur%a es di)u8ada entre dos 1untos de ancla8e< $ los 1untos de
control de9inen su 9orma
be(ier(x6, ;6, cx6, c;6, cx2, c;2, x2, ;2)
Esta 9uncin reAuiere oc:o 1ar,metros 1ara de9inir cuatro 1untos. ;a cur%a se di)u8a entre el 1rimer 1unto $ el
cuarto< $ los 1untos de control est,n de9inidos 1or el segundo $ tercer 1unto. En los 1rogramas Aue se utilizan
cur%as Bzier< tales como -do)e Illustrator o InHsca1e< los 1untos de control son re1resentados 1or 1eAueGos
nodos Aue so)resalen de los )ordes de la cur%a.
be(ier(02, 2/, D/, 3, D/, K3, 0/, K3);
//Dibuamos los puntos de control#
line(02, 2/, D/, 3);
ellipse(D/, 3, ., .);
line(D/, K3, 0/, K3);
ellipse(D/, K3, ., .);
be(ier(D3, 2/, ./, 6/, :/, 7/, 63, D/);
//Dibuamos los puntos de control#
line(D3, 2/, ./, 6/);
ellipse(./, 6/, ., .);
line(:/, 7/, 63, D/);
ellipse(:/, 7/, ., .);
-3rden de di-ujo
El orden en Aue di)u8amos las 9iguras en el cdigo< de9ine Au 9iguras a1arecer,n so)re otras en la %entana
de re1resentacin. =i di)u8amos un rect,ngulo en la 1rimera lnea de un 1rograma $ una eli1se en la segunda
lnea< el rect,ngulo a1arecer, de)a8o de la eli1se cuando e8ecutemos el 1rograma. 0e%irtiendo el orden< el
Ignacio Buioli | Jaime Prez Marn *2
rect,ngulo se coloca arri)a.
rect(63, 63, 3/, 3/); //1bao
ellipse(:/, :/, 33, 33); //1rriba
ellipse(:/, :/, 33, 33); //1bao
rect(63, 63, 3/, 3/); //1rriba
-4alores de grises
;os e8em1los %istos anteriormente :an usado el 9ondo 1or de9ecto de color gris claro< lneas negras< $ 9iguras
)lancas. Para cam)iar estos %alores< es necesario introducir sinta6is adicional. ;a 9uncin bac)'round()
esta)lece el color de la %entana de re1resentacin con un n3mero entre . $ 2//. Este rango 1uede ser
incmodo si no est,s 9amiliarizado con 1rogramas de di)u8o en el ordenador. El %alor 2// es )lanco $ el %alor
. es negro< con un rango de %alores de grises en medio. =i no se de9ine un %alor 1ara el 9ondo< se usa el %alor
1or de9ecto 2.4 @gris claroC.
;a 9uncin !ill() de9ine el %alor del relleno de las 9iguras< $ la 9uncin stro)e() de9ine el %alor del
contorno de las 9iguras di)u8adas. =i no se de9ine un %alor de relleno< se usa el %alor 1or de9ecto 233
@)lancoC. =i no se de9ine un %alor de contorno< se usa el %alor 1or de9ecto / @negroC.
rect(6/, 6/, 3/, 3/);
!ill(2/.);
stro)e(6/2);
rect(2/, 2/, 3/, 3/);
!ill(630);
stro)e(630);
rect(0/, 0/, 3/, 3/);
!ill(6/2);
stro)e(2/.);
rect(./, ./, 3/, 3/);
!uando se :a de9inido un %alor de relleno o contorno< se a1lica a todas las 9iguras di)u8adas des1us. Para
cam)iar el %alor de relleno o contorno< usamos la 9uncin !ill() o stro)e() de nue%o.
Fn 1ar,metro o1cional adicional 1ara !ill() o stro)e() regula la trans1arencia. 'e9iniendo el 1ar,metro
a 233 :ace Aue la 9igura sea totalmente o1aca< $ a / totalmente trans1arente
bac)'round(/);
!ill(233, 22/);
rect(63, 63, 3/, 3/);
rect(03, 03, 3/, 3/);
El relleno $ el contorno de una 9igura se 1uede eliminar. ;a 9uncin noHill() detiene a Processing de
rellenar 9iguras< $ la 9uncin no$tro)e() detiene la creacin de lneas $ contornos de las 9iguras. =i usamos
noHill() $ no$tro)e() no di)u8aremos nada en la 1antalla.
-/tri-utos de di-ujo
-dem,s de cam)iar los %alores de relleno $ contorno de las 9iguras< tam)in es 1osi)le cam)iar atri)utos de
la geometra. ;as 9unciones smooth() $ no$mooth() acti%an $ desacti%an el sua%izado @conocido como
9iltro antialiasingC. !uando usamos una de estas 9unciones< a9ectar, a todas las 9unciones di)u8adas des1us.
=i usamos 1rimero smooth()< usar no$mooth() cancelar, el a8uste< $ %ice%ersa.
smooth();
ellipse(0/, .D, 0:, 0:);
no$mooth();
ellipse(K/, .D, 0:, 0:);
;os atri)utos de la lnea< est,n controlados 1or las 9unciones stro)eIei'ht()< stro)e*ap() $
stro)eJoin(). ;a 9uncin stro)eIei'ht() tiene un 1ar,metro numrico Aue de9ine el grosor de todas
las lneas di)u8adas des1us de usar esta 9uncin. ;a 9uncin stro)e*ap() reAuiere un 1ar,metro Aue
1uede ser >?&ND< $L&1>- o A>?J-*T. >?&ND redondea los 1untos 9inales< $ $L&1>- los cuadra. A>?J-*T
es una mezcla de am)os redondea las esAuinas cuadradas sua%emente. Esta 9uncin se usa en lneas. ;a
9uncin stro)eJoin() tiene un 1ar,metro Aue 1uede ser =-M-@< CBTT-> o >?&ND. Estos 1ar,metros
determinan la 9orma del contorno de la 9igura. =-M-@ corta en diagonal las esAuinas cuadradas< CBTT->
cuadra las esAuinas @es el %alor 1or de9ectoC $ >?&ND redondea las esAuinas.
smooth();
stro)eIei'ht(62);
stro)e*ap(>?&ND);
line(2/, 0/, D/, 0/); //@nea superior
stro)e*ap($L&1>-);
line(2/, 3/, D/, 3/); //@nea central
stro)e*ap(A>?J-*T);
line(2/, K/, D/, K/); //@nea in!erior
smooth();
stro)eIei'ht(62);
stro)eJoin(=-M-@);
rect(62, 00, 63, 00); //Hi'ura i(Guierda
stro)eJoin(CBT->);
rect(.2, 00, 63, 00); //Hi'ura central
stro)eJoin(>?&ND);
rect(K2, 00, 63, 00); //Hi'ura derecha
-5odos de di-ujo
Por de9ecto< los 1ar,metros 1ara ellipse() de9inen la coordenada 6 del centro< la coordenada $ del centro<
el anc:o $ el alto. ;a 9uncin ellipseCode() cam)ia la 9orma en Aue se usan estos 1ar,metros 1ara di)u8ar
eli1ses. ;a 9uncin ellipseCode() reAuiere un 1ar,metro Aue 1uede ser *-NT->< >1DB&$< *?>N-> o
*?>N->$. El modo 1or de9ecto es *-NT->. El modo >1DB&$ tam)in usa el 1rimer $ segundo 1ar,metro de
ellipse() 1ara esta)lecer el centro< 1ero el tercer 1ar,metro de)er ser la mitad del anc:o< $ el cuarto
1ar,metro de)e ser la mitad del alto. El modo *?>N-> :ace Aue ellipse() 9uncione de manera 1arecida a
rect(). !ausa Aue el 1rimer $ segundo 1ar,metro se trasladen a la esAuina su1erior izAuierda del
rect,ngulo Aue circunscri)e la eli1se $ usa el tercer $ cuarto 1ar,metro 1ara de9inir la anc:ura $ la altura. El
modo *?>N->$ tiene un e9ecto similar a *?>N->< 1ero causa Aue el tercer $ cuarto 1ar,metro de
ellipse() se de9inan en la esAuina in9erior derec:a del rect,ngulo.
smooth();
no$tro)e();
ellipseCode(>1DB&$);
!ill(62:);
ellipse(00, 00, :/, :/); //-lipse 'ris
!ill(233);
ellipseCode(*?>N->);
ellipse(00, 00, :/, :/); //-lipse blanca
!ill(/);
ellipseCode(*?>N->$);
ellipse(00, 00, :/, :/); //-lipse ne'ra
!on un estilo similar< la 9uncin rectCode() a9ecta a cmo se di)u8an los rect,ngulos. 0eAuiere un
1ar,metro Aue 1uede ser *?>N->< *?>N->$ o *-NT->. El modo 1or de9ecto es *?>N->< $ *?>N->$ causa
Aue el tercer $ cuarto 1ar,metro de rect() se de9inan en la esAuina contraria a la 1rimera. El modo *-NT->
causa Aue el 1rimer $ segundo 1ar,metro de rect() de9inan el centro del rect,ngulo $ usa el tercer $ cuarto
1ar,metro 1ara el anc:o $ el alto.
no$tro)e();
rectCode(*?>N->);
!ill(62:);
rect(./, ./, :/, :/); //>ect"n'ulo 'ris
rectCode(*-NT->);
!ill(233);
rect(./, ./, :/, :/); //>ect"n'ulo blanco
rectCode(*?>N->$);
!ill(/);
rect(./, ./, :/, :/); //>ect"n'ulo ne'ro
Ignacio Buioli | Jaime Prez Marn */
/+!ndice de Pri(itivas
Ignacio Buioli | Jaime Prez Marn *"
&nidad 3
#atos' 4aria-les
int,!loat, boolean, true, !alse, < (asi'nacin), Nidth, hei'ht
PDu son los datosQ ;os datos< con 9recuencia son caractersticas 9sicas asociadas a un algo. Por e8em1lo<
cuando decimos Aue una 1ersona llamada Juan Prez< en su registro de conducir 9igura una M @1or gnero
masculinoC sa)emos Aue ese %alor M esta asociado a la 1ersona Juan Prez.
En los sistemas in9orm,ticos< los datos son guardados como n3meros $ caracteres. Por e8em1lo< los
ordenadores est,n constantemente reci)iendo datos del mouse $ el teclado. !uando se crea un 1rograma<
1ueden guardarse datos de< 1or e8em1lo< una 9orma< un color< o el cam)io constante de la 1osicin del
mouse.
-6i+os de datos
Processing 1uede al(acenar * (odificar muc:os ti1os de datos< como n3meros< letras< 1ala)ras< im,genes<
colores< 9uentes $ %alores )ooleanos @true $ !alseC. El :ec:o de guardar datos im1lica un ma$or o menor
uso de la memoria del ordenador donde estemos tra)a8ando. 2o es lo mismo guardar la 1ala)ra K-ndalucaL
Aue guardar sim1lemente la K-L. !ada dato es re1resentado como una serie de )its @. $ *C. Por e8em1lo<
.*....*.. 1uede ser inter1retado como una letra.
!omo seres :umanos< no :ar, 9alta a1render el lengua8e )inario 1ara 1rogramar< Processing se 1resta 1ara
Aue el tra)a8o nos sea muc:o m,s sencillo. =in em)argo< .*.....* 1uede ser inter1retado como al letra K-L o
como el n3mero "/. Por lo tanto< es im1ortante de9inir Aue ti1o de dato estamos tra)a8ando.
El 1rimer ti1o de datos Aue enunciaremos< ser,n los datos numricos. E6isten dos clases de datos numricos
enteros $ decimales @9lotantesC. !uando :a)lamos de enteros< nos re9erimos a n3meros com1letos< como /<
O*2.< 4 $ &4/. Processing re1resenta %aria)les de ti1o entero con int. En cam)io< los n3mero decimales<
tam)in llamados de punto+flotante< crean 9racciones de los n3meros enteros como *2.4< O*2..+/< 4.333 $
&4/.4"+"/43. Processing re1resenta los datos ti1o decimales con !loat.
;a %aria)le m,s sim1le en Processing es de ti1o boolean. =olo admite dos %alores true o !alse
#$erdadero o falso#. =uele utilizarse cuando es necesario Aue el 1rograma tome una decisin ignorando el
resto de las 1osi)ilidades. - continuacin< una ta)la con los ti1os de %aria)le $ el tamaGo Aue ocu1a cada
una
2om)re 5amaGo 0ango de (alores
boolean 6 bit true / !alse
b;te D bits 562D a 62K
char 6: bits / a :3303
int 02 bits 526.K.D0:.D a 26.K.D0:.K
!loat 02 bits 0#./2D20.K-40D a 5 0#./2D20.K-40D
color 02 bits 6:KKK26: colores
-4aria-les
Fna %aria)le es un contenedor 1ara guardar datos. ;as %aria)les 1ermiten Aue cada datos sea reutilizado
(uc7as veces en un 1rograma. !ada %aria)le tiene dos 1artes un nombre $ un $alor. =i una %aria)le
almacena el %alor 2* $ es llamada edad< el nom)re edad 1uede a1arecer muc:as %eces en el 1rograma.
!uando el 1rograma se e8ecute< la 1ala)ra edad cam)iar, 1or el %alor de 2*. En adicin a este nom)re $
%alor< :a$ Aue declarar Aue ti1o de datos so1orta esa %aria)le.
Fna %aria)le de)e ser< siem1re< declarada antes de ser usada. Fna declaracin de %aria)le consta del ti1o de
datos Aue ace1tar, esa %aria)le< seguida de un nom)re creado 1or nosotros. En el siguiente e8em1lo se
declaran %arios ti1os de %aria)les $ se les asigna un %alor
int x; //Declaracin de ,ariable x del tipo entero
Ignacio Buioli | Jaime Prez Marn *+
!loat ;; //Declaracin de ,ariable ; del tipo !lotante
boolean b; //Declaracin de ,ariable b del tipo booleana
x < 3/; //1si'nar el ,alor 3/ a la ,ariable x
; < 62#:; //1si'nar el ,alor 62#: a la ,ariable ;
b < true; //1si'nar el ,alor true a la ,ariable b
Ja$ una 9orma mas sintetizada de :acer lo mismo. Podemos< entonces< escri)ir lo mismo en una sola lnea
int x < 3/;
!loat ; < 62#:;
boolean b < true;
M,s de una %aria)le del mismo ti1o 1ueden ser declaradas en la misma lnea $ luego asignarse un %alor 1or
se1arado a cada una
!loat x, ;, b;
x < 53#3:;
; < 62#:;
b < K:#KD7;
!uando una %aria)le es declarada< es im1ortante %er Aue clase de dato se le %a a asignar 1ara elegir
correctamente el ti1o de dato. 2i el nom)re< ni el ti1o de dato 1uede ser cam)iado una %ez declarado. =i es
1osi)le reasignar otro %alor
int x < :7; //Declara ,ariable x ; le asi'na el ,alor de :7
x < K/; //*ambiar el ,alor de x por K/
int x < K6; //->>?> O @a ,ariable x ;a existe
El sm)olo de igual @<C se utiliza 1ara asignar %alores< 3nicamente. ;e asigna el %alor Aue se encuentra en el
lado derec:o< a la %aria)le del lado izAuierdo. Por lo tanto< es im1ortante Aue lo Aue se encuentre del lado
izAuierdo sea una %aria)le
3 < 23; //->>?> O @o Gue se encuentre del lado i(Guierdo debe ser una
//,ariable
Ja$ Aue tener en cuenta el ti1o de datos Aue estemos mane8ando. 2o es 1osi)le asignar un ti1o de datos a
una %aria)le Aue solo ace1te otra clase. Por e8em1lo< no 1odemos asignar %alores decimales a una %aria)le
ti1o entero
int x < 62#D7; //->>?> O @a ,ariable es tipo entero ; se le est" asi'nando un
//,alor decimal
!loat ! < 62#D7;
int ; < !; //->>?> O @a ,ariable es tipo entero ; se le est" asi'nando un
//,alor decimal
;as %aria)les 1ueden tener nom)res Aue descri)an su contenido. Eso sim1li9ica muc:o la tarea a la :ora de
1rogramar. -dem,s< esto 1odra a$udar a reducir la cantidad de comentarios. -3n as< Aueda en el
1rogramador elegir Aue clase de nom)res utilizar. Por e8em1lo< 1ara %aria)les de tem1eratura< se 1odran
utilizar los siguientes nom)res
t
temp
temperatura
temp*uarto
temperatura*uarto
;a 1rimer letra tiene Aue ser un car,cter en min3sculas< las siguientes 1ueden ser 1r,cticamente cualAuier
cosa. -3n as< no se admiten acentos en ninguna 1arte del cdigo.
-4aria-les de Progra(a
Processing< como lengua8e< :a construido %aria)les mu$ 3tiles Aue $a %ienen 1reO1rogramadas< a 9in de
9acilitarle el tra)a8o al usuario. =e las denomina $ariables del programa o $ariables del sistema. El anc:o $ el
alto de la %entana de re1resentacin est,n almacenadas como %aria)les denominadas Nidth #ancho# $
hei'ht #alto#< res1ecti%amente. =i el 1rograma no inclu$e si(e()< 1or de9ecto Nidth $ hei'ht adAuieren
el %alor de *...
println(Nidth 4 , 4 hei'ht); //Bmprime 6//, 6// en la consola
si(e(0//, 2//);
println(Nidth 4 , 4 hei'ht); //Bmprime 0//, 2// en la consola
#recuentemente son usadas cuando se reAuiere mantener la escritura del 1rograma en di9erentes escalas $
Aue estas sean 1ro1orcionales.
si(e(6//, 6//);
ellipse(Nidth * /#3, hei'ht * /#3, Nidth * /#::, hei'ht * /#::);
line(Nidth * /#3, /, Nidth * /#3, hei'ht);
Ignacio Buioli | Jaime Prez Marn *&
&nidad 8
5ate(1ticas' ,unciones /rit(!ticas
4 (suma), 5 (resta), * (multiplicacin), / (di,isin), P (mdulo), () (par%ntesis)
44 (incremento), O (decremento), 4< (asi'nar de suma), 5< (asi'nar resta),
*< (asi'nar multiplicacin), /< (asi'nar di,isin),
5 (ne'ati,o)
ceil(), !loor(), round(), min(), max()
5ener am1lios conocimientos en matem,ticas 1uede ser im1ortante a la :ora de 1rogramar. =in em)argo< no
es necesario ser un )asto conocedor de la misma 1ara dis9rutar de la 1rogramacin. Ja$ muc:as 9ormas $
estilos 1ara 1rogramar< $ cada Auien elige indi%idualmente a Aue as1ectos otorgarles un ma$o grado de
minuciosidad $ a cuales descuidarlos un 1oco.
Es mu$ com3n Aue aAuellos Aue tu%ieron una cantidad ele%ada de matem,ticas en la escuela @1or e8em1lo<
en orientaciones en ciencias naturales o en alguna tcnicaC se sientan atrados al %er su matem,tica
con%ertida en mo%imiento. 2o o)stante< no es necesario ser un %erdadero conocedor. Processing es un
lengua8e Aue se 1resta a la matem,tica desde un as1ecto m,s tranAuilo. =i )ien 1ueden realizarse com1le8as
o1eraciones< tam)in 1ueden lograrse resultados similares con una matem,tica m,s intuiti%a. En esta clase
de manuales< se e61lican 9unciones aritmticas sencillas 1ara lograr grandes resultados< 1uesto 9unciones de
ma$or com1le8idad caen 9uera de los o)8eti%os de este li)ro.
-/rit(!tica
En 1rogramacin< las 1ro1iedades %isuales de una imagen son asignadas 1or n.(eros. Esto Auiere decir
Aue 1odemos controlarlas de 9orma aritmtica. El siguiente es un claro e8em1lo de eso
int 'risMal < 630;
!ill('risMal);
rect(6/, 6/, 33, 33); //Dibua un rect"n'ulo 'ris
'risMal < 'risMal 4 6/2; //1si'na 233 a 'risMal
!ill('risMal);
rect(03, 0/, 33, 33); //Dibua un rect"n'ulo blanco
Ftilizando los o1eradores de suma< resta< multi1licacin $ di%isin< 1odemos controlar< 1or e8em1lo< la
1osicin de los elementos. El signo 4 se utiliza 1ara la suma< el signo O 1ara la resta< el signo * 1ara la
multi1licacin $ el signo / 1ara la di%isin.
int a < 0/;
line(a, /, a, hei'ht);
a < a 4 ./; //1si'na K/ a la ,ariable a
stro)eIei'ht(.);
int a < 0/;
int b < ./;
line(b, /, b, hei'ht);
stro)eIei'ht(.);
line(b 5 a, /, b 5 a, hei'ht); //Aueden usarse c"lculos
//entre ,ariables como
//,alores
Ignacio Buioli | Jaime Prez Marn 2.
int a < D;
int b < 6/;
stro)eIei'ht(.);
line(a * b, /, a * b, hei'ht);
int a < D;
int b < 6/;
stro)eIei'ht(.);
line(a / b, /, a / b, hei'ht);
int ; < 2/;
line(/, ;, Nidth, ;);
; < ; 4 :; //1si'na 2: a la ,ariable ;
; < ; 4 :; //1si'na 02 a la ,ariable ;
; < ; 4 :; //1si'na 0D a la ,ariable ;
;os signos 4< 5< *< / $ < 1osi)lemente sean mu$ 9amiliares< 1ero el signo P es muc:o m,s e6tico. El
o1erador P es el de mdulo. 'etermina cuando un n3mero es di%idido 1or otro< o sea< da como resultado el
resto del mismo. El n3mero a la derec:a es di%idido 1or el Aue 1ongamos a la izAuierda. 'e%ol%er, como
resultado el resto de la o1eracin.
E61resin 0esultado E61licacin
7 P 0 / El 3 solo entra tres %eces en el &< no so)ra nada.
7 P 2 6 El 2 solo entra cuatro %eces en el &< so)ra *.
03 P . 0 El 4 entra oc:o %eces en el 3/< so)ra 3.
=in muc:os 1ro)lemas< 1uede e61licarse m,s claramente con un cuento. !uatro 1ersonas est,n :am)rientas
$ %an a comer 1anes a un restaurante. =i :a$ solo 3/ 1anes< entonces esas 4 1ersonas solo 1odr,n comer 4
1anes cada uno< $ so)rar,n 3 1anes. Eso Aue so)ra es el resultado del mdulo. Ja$ muc:os usos 1ara el
mdulo< como 1or e8em1lo sa)er cuando un n3mero es 1ar o im1ar. =in em)argo< en Processing es mu$
com3n utilizarlo 1ara mantener a los n3meros en rango. Por e8em1lo< si una %aria)le sigue increment,ndose
@*< 2< 3< 4< /< "< +< 4...C< el mdulo 1uede con%ertirla en una secuencia. Fn incremento continuo 1uede
con%ertirse en un ciclo entre . $ 3 1or a1licar P 4
x 0 1 2 3 4 5 6 7 8 9 10
__________________________________________________________________________
x%4 0 1 2 3 0 1 2 3 0 1 2
Muc:os e8em1los a lo largo de las e61licaciones usar,n el mdulo de esta 9orma.
-l tra)a8ar con o1eraciones matem,ticas $ %aria)les< es im1ortante tener en claro Aue ti1o de datos estamos
mane8ando. ;a com)inacin de dos enteros @intC nos dar, como resultado otro entero. ;a com)inacin de
dos decimales @!loatC siem1re nos dar, como resultado un decimal. Pero la com)inacin de un entero @intC
con un decimal @!loatC siem1re nos dar, un n3mero decimal< a 1esar de la o1eracin diera un resultado
e6acto. Es im1ortante ser cuidadoso al momento de com)inar ti1os de datos 1ara e%itar errores
Ignacio Buioli | Jaime Prez Marn 2*
int i < .;
!loat ! < 0#/;
int a < i / !; //->>?> O Bmposible asi'nar un nEmero decimal a una
//,ariable tipo entero
!loat b < i / !; //1si'na 6#000000. a la ,ariable b del tipo !lotante
Es tam)in im1ortante 1restar atencin a algunos conce1tos matem,ticos< como 1or e8em1lo el conce1to de
lmite< donde un n3mero di%idido 1or cero tiende a infinito. En esos casos el 1rograma 1roducir, un error
int a < /;
int b < 62 / a; //->>?> O -xcepcin Catem"ticaF producida por el cero#
-Prioridad en el 3+erador9 /gru+acin
;a 1rioridad del ordenador determina Aue o1eraciones se realizan antes )ue otras. Esto es de gran
im1ortancia $a Aue 1uede ser determinante 1ara nuestro resultado. Por e8em1lo< la e61resin 0 4 . * 3<
nos dar, como resultado 20< 1uesto Aue tiene 1rioridad la multi1licacin. Primero< . * 3 resultar, en 2/ $ a
continuacin se le sumar, 0< dando 1or resultado 20. ;a 1rioridad 1uede ser cam)iada agregando 1arntesis.
=i tu%iramos la e61resin (0 4 .) * 3< entonces la 1rioridad estara en la suma< dando como resultado
9inal 3/.
x < 0 4 . * 3; //1si'na 20 a la ,ariable
; < (0 4 .) * 3 //1si'na 03 a la ,ariable
;a siguiente ta)la< a modo e61licati%o< muestra Aue elementos tiene 1rioridad so)re otros. =iendo< 1ues< Aue
los Aue se encuentran mas arri)a< tiene mas 1rioridad Aue los Aue est,n de)a8o
Multi1licati%os * / P
-diti%os 4 5
-signacin <
-/tajos
!uando 1rogramamos< recurrimos muc:o a estructuras cclicas. Muc:as %eces es necesario utilizar ata8os de
escritura 1ara reducir el tamaGo del cdigo $ Aue sea mas legi)le. El o1erador de incremento es 44< mientras
Aue el de decremento es 55. -m)os son usados como ata8os de suma $ resta.
int x < 6;
x44; //-Gui,ale a x < x 4 6;
println(x); //Bmprime 2
int ; < 6;
;55; //-Gui,ale a ; < ; 5 6;
println(;); //Bmprime /
=i dese,ramos Aue se actualic el %alor antes de la e61resin< solo cam)iaremos de lugar el o1erador de
incrementoBdecremento
int x < 6;
println(44x); //Bmprime 2
-l asignar el o1erador de suma con el o1erador de asignacin @4<C o)tendremos el o1erador de suma
asignada. En el caso de com)inar el de resta con el de asignacin @5<C o)tendremos el o1erador de resta
asignada
int x < 6;
x 4< 3; //-Gui,ale a x < x 4 3;
println(x); //Bmprime :
int ; < 6;
println(;); //Bmprime 6
; 5< 3; //-Gui,ale a ; < ; 5 3;
println(;); //Bmprime 5.
-l asignar el o1erador de multi1licacin con el o1erador de asignacin @*<C o)tendremos el o1erador de
multi1licacin asignada. En el caso de com)inar el de di%isin con el de asignacin @/<C o)tendremos el
o1erador de di%isin asignada
int x < .;
x *< 2; //-Gui,ale a x < x * 2;
println(x); //Bmprime D
int x < .;
x /< 2; //-Gui,ale a x < x / 2;
El o1erador de negacin @5C es utilizado cuando deseamos cam)iar el signo @1ositi%oBnegati%oC de alg3n
n3mero
int x < 3;
x < 5x; //-Gui,ale a x < x * 56
-:i(itando ;.(eros
;as 9unciones ceil()< !loor()< round()< min() $ max() son utilizadas 1ara 1er9eccionar las
o1eraciones matem,ticas. ;a 9uncin ceil()< redondea un n3mero decimal con%irtindolo en un entero. ;o
con%ierte en el %alor igual o ma$or. 0edondea :acia arri)a.
int x < ceil(2#/); //1si'na 2 a x
int ; < ceil(2#6); //1si'na 0 a ;
int N < ceil(2#3); //1si'na 0 a N
int ( < ceil(2#7); //1si'na 0 a (
;a 9uncin !loor()< redondea un n3mero decimal con%irtindolo en un entero. ;o con%ierte en el %alor igual
o menor. 0edondea :acia a)a8o.
int x < !loor(2#/); //1si'na 2 a x
int ; < !loor(2#6); //1si'na 2 a ;
int N < !loor(2#3); //1si'na 2 a N
int ( < !loor(2#7); //1si'na 2 a (
;a 9uncin round()< redondea un n3mero decimal con%irtindolo en un entero. ;o con%ierte en un entero
ma$or o menor< de1endiendo el decimal. =i el decimal es menor a ./< entonces redondea :acia a)a8o. =i el
decimal es ma$or o igual a ./< redondea :acia arri)a.
int x < round(2#/); //1si'na 2 a x
int ; < round(2#6); //1si'na 2 a ;
int N < round(2#3); //1si'na 0 a N
int ( < round(2#7); //1si'na 0 a (
-dem,s< las 9unciones ceil()< !loor() $ round() 9uncionan con %aria)les ti1o decimales. - 1esar de no
ser mu$ 3til< 1uede utilizarse.
!loat ; < round(2#6); //1si'na 2#/ a ;
;a 9uncin min() determina el n3mero mas c:ico en una secuencia de n3meros. ;a 9uncin max()
determina el n3mero m,s grande en una secuencia de n3meros. Ideal 1ara determinar el n3mero ma$o o
menor de una secuencia. -m)as 9unciones 1ueden admitir dos o tres 1ar,metros.
int u < min(3, 7); //1si'na 3 a u
!loat t < min(62#:, K#D7) //1si'na K#D7 a t
int , < min(., DD, :3); //1si'na . a ,
int ; < max(3, 7); //1si'na 7 a ;
!loat x < max(62#:, K#D7) //1si'na 62#: a x
int N < max(., DD, :3); //1si'na DD a N
&nidad <
$ontrol' #ecisiones
8 (ma;or a), 9 (menor a), 8< (ma;or o i'ual a), 9< (menor o i'ual a), << (i'ual), Q< (distinto)
i!, else, R S (corchetes), TT (l'ica ?), UU (l'ica V), Q (l'ica N?)
!uando un 1rograma corre< lo :ace en el orden en Aue u)icamos la lneas. Primero la 1rimer lnea< luego la
segunda< luego la tercera< $ as. El 1rograma 9inaliza cuando lee la 3ltima lnea. Muc:as %eces< $ 1ara
agregar inters< es necesario Aue esta lectura se Auie)re. - ese orden suele llam,rselo flu'o. E6isten<
entonces< estructuras de control 1ara rom1e el 9lu8o del 1rograma.
-E%+resiones =elacionales
PDu es la %erdadQ Esta gran cuestin 9ilos9ica es mu$ sencilla de res1onder en la 1rogramacin.
=encillamente< si algo es true @%erdaderoC es una verdad< $ si algo es !alse @9alsoC es todo lo contrario.
=e trata tan solo de una nocin lgica< no es necesario Aue se trate realmente de una K%erdadL. =in em)argo<
si en la lgica del 1rograma< eso es una %erdad< entonces el 1rograma de%ol%er, un %alor true< de lo
contrario de%ol%er, un %alor !alse. 5an sencillo como un * $ un ..
E61resin E%aluacin
0 9 3 true
0 8 3 !alse
3 9 0 !alse
3 8 0 true
!ualAuiera de estas e61resiones 1uede leerse en es1aGol. PEl n3mero tres es menor al n3mero cincoQ =i la
res1uesta es KsiL e61resa el %alor true @%erdaderoC. -l com1ararse dos %alores con una e61resin relacional<
solo 1ueden dar dos resultados 1osi)les true o !alse. - continuacin< una ta)la con los %alores
relacionales $ su signi9icado
71erador =igni9icado
8 Ca;or Gue
9 Cenor Gue
8< Ca;or o i'ual a
9< Cenor o i'ual a
<< B'ual a
Q< Distinto de
;as siguientes lneas de cdigo muestran el resultado de com1rar dos %alores con una e61resin relacional
println(0 8 3); //Bmprime !alse
println(3 8 0); //Bmprime true
println(3 8 3); //imprime !alse
println(3 9 0); //Bmprime !alse
println(3 9 3); //imprime !alse
println(0 8< 3); //Bmprime !alse
println(3 8< 0); //Bmprime true
println(3 8< 3); //imprime true
println(0 9< 3); //Bmprime true
println(3 9< 0); //Bmprime !alse
println(3 9< 3); //imprime true
Ignacio Buioli | Jaime Prez Marn 2/
El o1erador de igualdad @<<C determina si los dos %alores Aue se e%al3an son eAui%alentes. 'e%uel%e true si
la igualdad se cum1le. En cam)io< el o1erador de di9erenciacin @Q<C e%al3a si dos %alores no son
eAui%alentes. 'e%uel%e true si la desigualdad se cum1le.
println(0 << 3); //Bmprime !alse
println(3 << 0); //Bmprime !alse
println(3 << 3); //imprime true
println(0 Q< 3); //Bmprime true
println(3 Q< 0); //Bmprime true
println(3 Q< 3); //imprime !alse
-Estructuras $ondicionales
;as estructuras condicionales le 1ermiten a un 1rograma sa)er Aue lnea de cdigo e8ecutar $ cuales no. ;as
lneas de cdigo solo ser,n K%isi)lesL 1ara el 1rograma si se cum1le una condicin. Permiten al 1rograma
di9erenciar acciones de1endiendo el %alor de %aria)les. Por e8em1lo< el 1rograma di)u8a una lnea o una eli1se
de1endiendo el %alor de una %aria)le. ;as estructura BH es usada en Processing 1ara tomar esas decisiones
i!(condicin)R
acciones;
S
;a condicin de)e ser una e61resin Aue se resuel%e con true o !alse. =i la condicin es true< el cdigo
Aue este desde la a1ertura del corc:ete @ R C :asta el cierre del mismo @ S C< se e8ecuta. En caso de ser
!alse< el 1rograma directamente no KleeL las acciones.
;os siguientes tres e8em1los 1retenden mostrar el 9uncionamiento de la estructura BH. =e recurre al mismo
cdigo< solo Aue con di9erentes %alores la %aria)le x
//@as condiciones son x 8 6// ; x 9 6//
//*omo el ,alor de x es 63/
//se eecutar" el primer bloGue BH
//; se eliminar" lo Gue ocurre en el se'undo
int x < 63/;
i! (x 8 6//)R //si es ma;or Gue 6//
ellipse(3/, 3/, 0:, 0:); //dibua una elipse
S
i!(x 9 6//)R //si es menor Gue 6//
rect(03, 03, 0/, 0/); //dibua un rect"n'ulo
S
line(2/, 2/, D/, D/);
//*omo el ,alor de x es 3/
//se eecutar" el se'undo bloGue BH
//; se eliminar" lo Gue ocurre en el primero
int x < 3/;
S
S
line(2/, 2/, D/, D/);
Ignacio Buioli | Jaime Prez Marn 2"
//*omo el ,alor de x es 6//
//no se eecutar" lo Gue ocurre en nin'una estructura BH
int x < 6//;
S
S
line(2/, 2/, D/, D/);
En el caso es1ec9ico de Aue la condicin de como resultado !alse< $ estemos deseando Aue a3n as< ocurra
alg3n e%ento< se utilizar,< como agregado a la estructura BH< la estructura -@$-. ;a estructura -@$- e6tiende
a la estructura BH< 1ermitiendo agregar acciones cuando la condicin de%uel%e un resultado !alse.
int x < 7/; //*omo x ,ale 7/, dibuar" un rect"n'ulo
S else R //sino,
S
line(2/, 2/, D/, D/); //siempre dibua una lnea
int x < 27/; //*omo x ,ale 27/, dibuar" una elipse
S else R //sino,
S
line(2/, 2/, D/, D/); //siempre dibua una lnea
;as condicionales 1ueden ser KencadenadasL una dentro de otra 1ara tener com1leto control de las lneas de
cdigo. En el siguiente e8em1lo se e%al3a si el %alor es ma$or a *..< $ luego de eso si es ma$or a 3...
int x < .2/;
i! (x 8 6//)R //*ondicin para dibuar elipse o lnea
i! (x 9 0//)R //*ondicin, lo determina
ellipse(3/, 3/, 0:, 0:);
S else R
line(3/, /, 3/, 6//);
S
S else R
rect(00, 00, 0., 0.);
S
Podemos< tam)in< ganar incluso un ma$or control en las decisiones al com)inar la estructura BH con la
estructura -@$-< consiguiendo la estructura -@$- BH.
int x < .2/;
i! (x 9 6//)R //$i es menor a 6//
rect(00, 00, 0., 0.); //dibua un rect"n'ulo
Selse i! (x 8 0//)R //$ino, si es ma;or a 0//
ellipse(3/, 3/, 0:, 0:); //dibua una ellipse
S else R //$ino,
line(3/, /, 3/, 6//); //dibua una lnea
S
Ignacio Buioli | Jaime Prez Marn 2+
-3+eradores :gicos
;os o1eradores lgicos se utilizan al com)inar dos o mas e61resiones relacionales $ 1ara in%ertir los %alores
lgicos. ;os sm)olos de los o1eradores lgicos corres1onden a los conce1tos de N< 7 $ 27.
71erador =igni9icado
UU V
TT ?
Q N?
;a siguiente ta)la muestra todas las o1eraciones 1osi)les $ los resultados
E61resin E%aluacin
true UU true true
true UU !alse !alse
!alse UU !alse !alse
true TT true true
true TT !alse true
!alse TT !alse !alse
Qtrue !alse
Q!alse true
El o1erador lgico 7 @TTC< :ace Aue el %alor sea un true solo si una 1arte de la e61resin es true
@%erdaderaC.
int a < 6/;
int b < 2/;
i!((a 8 3 ) TT (b 9 0/))R //$i a es ma;or a 3 o b es menos
//a 0/ dibua una
line(2/, 3/, D/, 3/); //lnea# *omo ambas condiciones
//se cumples, se
S //dibua la lnea
i!((a 8 63) TT (b 9 0/))R //$i a es ma;or a 63 o b es menor
//a 0/, dibuar una
ellipse(3/, 3/, 0:, 0:);//elipse# $olo una de las
//condiciones se cumplen, se
S //dibua la elipse
;os 1rocesos de lgica se desco(+onen en +asos. ;os 1arntesis son utilizados 1ara delimitar las
com1onentes $ as si(+lificar el tra)a8o. En las siguientes lneas se muestra un )re%e 1aso a 1aso de como
de)e inter1retarse
Aaso 6 (a 8 3) TT (b 9 0/)
Aaso 2 (6/ 8 3) TT (2/ 9 0/)
Aaso 0 true TT true
Aaso . true
El o1erador lgico N @UUC< :ace Aue el %alor sea true solo si am)as e61resiones son true.
int a < 6/;
int b < 2/;
i!((a 8 3 ) UU (b 9 0/))R //$i a es ma;or a 3 ; b es menos
//a 0/ dibuar una
line(2/, 3/, D/, 3/); //lnea# *omo ambas condiciones
//se cumples, se
S //dibua la lnea
i!((a 8 63) UU (b 9 0/))R //$i a es ma;or a 63 ; b es menor
//a 0/ dibuar una
ellipse(3/, 3/, 0:, 0:);//elipse# $olo una de las
//condiciones se cumplen,
S //N? se dibua la elipse
El o1erador lgico 27 @QC es una marca. =im1lemente invierte el %alor lgico. Por e8em1lo< si se trata de un
%alor true< al escri)ir Qtrue< estaramos con%irtiendo su %alor en !alse. =olo es 1osi)le a1licarlo a una
%aria)le del ti1o boolean.
boolean b < true;
println(b); //Bmprime true
b < Qb;
println(b); //Bmprime !alse
println(Qb); //Bmprime true
println(Q(3 8 0)); //Bmprime !alse
int x < 2/;
println(Qx); //->>?> O $olo puede aplicarse a ,ariables boolean
Ignacio Buioli | Jaime Prez Marn 2&
/+!ndice de Estructura I,, E:SE * E:SE-I,
&nidad >
$ontrol' =e+eticin
!or
;a )re%e :istoria Aue 1oseen los ordenadores nos remonta a su antigua 9uncin Aue era realizar c,lculos
%elozmente. -ctualmente< las com1utadoras emergen como m,Auinas Aue 1ueden realizar ecuaciones
matem,ticas mu$ com1le8as a una incre)le %elocidad. ;os antiguos ordenadores eran distri)uidos como
m,Auinas Aue 1oda realizar 1recisas $ r,1idas ecuaciones re1etiti%as.
-Iteracin
;as estructuras re1etiti%as son encargas de 1roducir iteraciones. Es decir< a tra%s de 1ocas lneas de cdigo
se 1uede re+etir< 1r,cticamente< in9initas %eces una misma lnea de cdigo. Esto a$uda a un me8or
rendimiento del 1rograma< 1ero es1ecialmente a un me8or rendimiento del 1rogramador< Aue con sim1les
estructuras 1uede reducir nota)lemente el tiem1o $< 1or ende< errores. =e utiliza una estructura denominada
estructura H?>< la cual es encargada de re1etir un ciclo las %eces Aue Aueramos. En el siguiente e8em1lo se
muestra el original cdigo< com1uesto de unas *4 lneas< $ la %ersin con el ciclo H?> com1uesto tan solo de
4
!digo 7riginal !digo utilizando un #70
si(e(2//, 2//); si(e(2//, 2//);
line(2/, 2/, 2/, 6D/); !or (int i < 2/; i 9 63/; i 4< 6/) R
line(0/, 2/, 0/, 6D/); line(i, 2/, i, 6D/);
line(./, 2/, ./, 6D/); S
line(3/, 2/, 3/, 6D/);
line(:/, 2/, :/, 6D/);
line(K/, 2/, K/, 6D/);
line(D/, 2/, D/, 6D/);
line(7/, 2/, 7/, 6D/);
line(6//, 2/, 6//, 6D/);
line(66/, 2/, 66/, 6D/);
line(62/, 2/, 62/, 6D/);
line(60/, 2/, 60/, 6D/);
line(6./, 2/, 6./, 6D/);
;a estructura H?> 1er9ecciona las re1eticiones< 1udiendo sim1li9icarse su cdigo ),sico en esta sim1le $
9uncional estructura
!or(iniciador, condicin, actuali(acin)R
acciones;
S
;os 1arntesis asociados a esta estructura corres1onden a tres acciones internas iniciador< condicin
$ actuali(acin. ;as acciones dentro del )loAue del cdigo se e8ecutan constantemente< siem1re $
cuando la condicin de%uel%a un true @%erdaderoC. El iniciador asigna el %alor inicial de la iteracin<
mientras Aue la actuali(acin modi9ica el %alor del iniciador con cada )ucle. ;os 1asos en un H?> son los
siguientes
*O El iniciador comienza a e8ecutarse
2O ;a condicin e%al3a si es true o false
3O =i la condicin es true< contin3a en el 1aso 4< si es !alse< 1asa al 1aso "
4O E8ecuta las acciones en el )loAue
/O E8ecuta la actualizacin $ 1asa al 1aso 2
"O =ale de la estructura $ contin3a e8ecutando el resto del 1rograma
;os siguientes e8em1los muestran di%ersas 9ormas de uso de la estructura H?> en un 1rograma
// -l iniciador esWint i < 2/W, la condicin esWi 9 D/W,
// ; la actuali(acin es Wi 4< 3W# *abe notar Gue el
// punto5;5coma termina los dos primeros elementos
!or (int i < 2/; i 9 D/; i 4< 3) R
// -sta lnea continuar" eecut"ndose hasta Gue i
// sea ma;or a D/#
line(2/, i, D/, i463);
S
!or (int x < 56:; x 9 6//; x 4< 6/) R
line(x, /, x463, 3/);
S
stro)eIei'ht(.);
!or (int x < 5D; x 9 6//; x 4< 6/) R
line(x, 3/, x463, 6//);
S

noHill();
!or (int d < 63/; d 8 /; d 5< 6/) R
ellipse(3/, 3/, d, d);
S
!or (int i < /; i 9 6//; i 4< 2) R
stro)e(2335i);
line(i, /, i, 2//);
S
-Iteracin /nidada
;a estructura H?> 1roduce re1eticiones en una dimensin. -nidando iteraciones 1odemos crear e9ectos
sumamente interesantes. Por e8em1lo< teniendo tan solo dos coordenadas de 1untos< si los anidamos en una
estructura H?>< 1odemos cam)iar una sim1le dimensin a una 9igura de dos dimensiones.
!or (int ; < 6/; ; 9 6//; ; 4< 6/) R
point(6/, ;);
S
!or (int x < 6/; x 9 6//; x 4< 6/) R
point(x, 6/);
S
!or (int ; < 6/; ; 9 6//; ; 4< 6/) R
!or (int x < 6/; x 9 6//; x 4< 6/) R
point(x, ;);
S
S
;a tcnica es mu$ 3til 1ara crear 9ondos< te6turas $ los conocidos patterns. ;os n3meros 1roducidos 1or las
%aria)les de control de re1eticiones 1ueden a1licarse a la 1osicin< al color< al tamaGo< a la trans1arencia o a
cualAuier otra cosa de atri)uto %isual.
!ill(/, K:);
no$tro)e();
smooth();
!or (int ; < 56/; ; 9< 6//; ; 4< 6/) R
!or (int x < 56/; x 9< 6//; x 4< 6/) R
ellipse(x 4 ;/D#/, ; 4 x/D#/, 63 4 x/2, 6/);
S
S
no$tro)e();
!or (int ; < /; ; 9 6//; ; 4< 6/) R
!or (int x < /; x 9 6//; x 4< 6/) R
!ill((x4;) * 6#.);
rect(x, ;, 6/, 6/);
S
S
!or (int ; < 6; ; 9 6//; ; 4< 6/) R
!or (int x < 6; x 9 ;; x 4< 6/) R
line(x, ;, x4:, ;4:);
line(x4:, ;, x, ;4:);
S
S
-,or(ato de las Estructuras
Es im1ortante el es1acio entre las estructura 1ara Aue sea legi)le $ clara la lectura de las mismas. ;as lneas
de cdigo dentro de las mismas suelen lle%ar ta)ulaciones. !uando el 1rograma se :ace largo una clara
lectura es ideal en esta clase de estructuras. En este li)ro utilizamos la siguiente con%encin de es1acios en
)lanco
int x < 3/;
i! (x 8 6//) R
line(2/, 2/, D/, D/);
S else R
line(D/, 2/, 2/, D/);
S
;a siguiente es una alternati%a de 9ormato usada mu$ 9recuentemente
int x < 3/;
i! (x 8 6//) R
line(2/, 2/, D/, D/);
S else R
line(2/, D/, D/, 2/);
S
Es esencial utilizar un 9ormato lim1io 1ara mostrar la 8erarAua del cdigo. El entorno de Processing tratar, de
a8ustar su cdigo a medida de Aue escri)e. -3n as< en la seccin ,ools siem1re 1uede utilizarse la
:erramienta -Auto .ormat/ 1ara lim1iar el cdigo cuando se lo necesite.
/+!ndice de Estructura ,3=
&nidad ?
,or(as' 4!rtices
be'in$hape(), end$hape(), ,ertex(), cur,eMertex(), be(ierMertex()
;as 9iguras geomtricas introducidas en la unidad .ormas: 0oordenadas y Primiti$as1 consiguen un e9ecto
%isual altamente 1otente. 2o o)stante< un 1rogramador 1uede %alerse de sim1les ecuaciones Aue le 1ermiten
crear 9iguras mas com1le8as. Na no estamos :a)lando de 9iguras 1rimiti%as< Aue solo reci)en coordenadas en
6 $ en $< sino de 9iguras de ma$or com1le8idad construidas a )ase de %rtices.
Estas 9iguras son realmente sim1les en com1aracin a las 1osi)ilidades Aue o9rece. En los %ideoO8uegos
actuales< se utilizan a1ro6imadamente una media de 1<000 %rtices< lo Aue con%ierte a esta :erramienta
como una 9uncin im1rescindi)le en 1rogramacin.
-4!rtice
Para crear una 9igura :ec:a con %rtices< utilizaremos< en 1rinci1io< la 9uncin be'in$hape()< des1us
de9iniremos cada 1unto @%rticeC con la 9uncin ,ertex()1 $< 9inalmente< com1letaremos la 9igura con
end$hape(). ;as 9unciones de be'in$hape() $ end$hape() siem1re de)en usarse en 1ares. ;os
1arntesis de la 9uncin ,ertex() ace1tan dos 1ar,metros< una coordenada de 6 e $
,ertex(x, ;)
Por de9ecto< la 9igura Aue se 9orme tendr, un relleno )lanco con contorno en negro. ;as 9unciones !ill()<
stro)e()1 noHill()1 no$tro)e() $ stro)eIei'ht()< introducidas en la unidad .ormas: 0oordenadas
y Primiti$as< son 3tiles 1ara controlar la %isualizacin de la 9igura. Para cerrar la 9igura< 1uede usarse la
constante *@?$- en la 9uncin end$hape().
noHill();
be'in$hape();
,ertex(0/, 2/);
,ertex(D3, 2/);
,ertex(D3, K3);
,ertex(0/, K3);
end$hape();
noHill();
be'in$hape();
,ertex(0/, 2/);
,ertex(D3, 2/);
,ertex(D3, K3);
,ertex(0/, K3);
end$hape(*@?$-);
El orden en Aue se escri)en los %rtices ca(-ia la 9orma en la Aue la 9igura es di)u8ada. El siguiente e8em1lo
es e6actamente igual Aue el e8em1lo anterior< solo Aue se :an in%ertido el tercer %rtice 1or el cuarto
noHill();
be'in$hape();
,ertex(0/, 2/);
,ertex(D3, 2/);
,ertex(0/, K3);
,ertex(D3, K3);
end$hape();
-Gadiendo mas %rtices $ 9ormatos se 1uede 1otenciar de manera incre)le la 1otencia %isual. 5am)in< como
se %io antes< se 1uede utilizar la estructura H?> 1ara me8orar el sistema.
!ill(/);
no$tro)e();
smooth();
be'in$hape();
,ertex(6/, /);
,ertex(6//, 0/);
,ertex(7/, K/);
,ertex(6//, K/);
,ertex(6/, 7/);
,ertex(3/, ./);
end$hape();
noHill();
smooth();
stro)eIei'ht(2/);
be'in$hape();
,ertex(32, 27);
,ertex(K., 03);
,ertex(:/, 32);
,ertex(:6, K3);
,ertex(./, :7);
,ertex(67, K3);
end$hape();
no$tro)e();
!ill(/);
be'in$hape();
,ertex(./, 6/);
!or (int i < 2/; i 9< 6//; i 4< 3) R
,ertex(2/, i);
,ertex(0/, i);
S
,ertex(./, 6//);
end$hape();
Fna 9igura com1le8a 1uede ser com1uesta 1or miles de %rtices< 1ero :a$ Aue tener en cuenta Aue muc:os
%rtices 1odran :acer m,s lento al 1rograma.
-Puntos * :@neas
;a 9uncin be'in$hape() 1uede ace1tar di%ersos 1ar,metros Aue sir%en 1ara de9inir datos en los %rtices.
;os mismos %rtices 1ueden ser usados 1ara crear 9iguras sin relleno o lneas continuas. ;as constantes
A?BNT$ $ @BN-$ son usadas 1ara de9inir la con9iguracin de 1untos $ lneas dentro de una 9igura.
//Dibua un punto en cada ,%rtice
be'in$hape(A?BNT$);
,ertex(0/, 2/);
,ertex(D3, 2/);
,ertex(D3, K3);
,ertex(0/, K3);
end$hape();
//Dibua una lnea ente cada par de ,%rtices
be'in$hape(@BN-$);
,ertex(0/, 2/);
,ertex(D3, 2/);
,ertex(D3, K3);
,ertex(0/, K3);
end$hape();
-,or(as
2o solo 1odemos con9igurar 1untos $ lneas< sino Aue tam)in for(as. Ftilizando las constantes
T>B1NX@-$1 T>B1NX@-Y$T>BA1 T>B1NX@-YH1N1 L&1D$< $ L&1DY$T>BA con la 9uncin be'in$hape().
En estos casos necesitaremos ser muc:o m,s cuidadoso en el ,m)ito es1acial de la 9igura $ el orden en Aue
1onemos los %rtices.
//*onecta cada 'rupo de tres ,%rtices
be'in$hape(T>B1NX@-$);
,ertex(K3, 0/);
,ertex(6/, 2/);
,ertex(K3, 3/);
,ertex(2/, :/);
,ertex(7/, K/);
,ertex(03, D3);
end$hape();
//*omien(a con el tercer ,%rtice, conecta todos los
//,%rtices subsecuentes a los dos primeros
be'in$hape(T>B1NX@-Y$T>BA);
,ertex(K3, 0/);
,ertex(6/, 2/);
,ertex(K3, 3/);
,ertex(2/, :/);
,ertex(7/, K/);
,ertex(03, D3);
end$hape();
be'in$hape(T>B1NX@-YH1N);
,ertex(6/, 2/);
,ertex(K3, 0/);
,ertex(K3, 3/);
,ertex(7/, K/);
,ertex(6/, 2/);
end$hape();
be'in$hape(L&1D$);
,ertex(0/, 23);
,ertex(D3, 0/);
,ertex(D3, 3/);
,ertex(0/, .3);
,ertex(0/, :/);
,ertex(D3, :3);
,ertex(D3, D3);
,ertex(0/, D/);
end$hape();
be'in$hape(L&1DY$T>BA);
,ertex(0/, 23);
,ertex(D3, 0/);
,ertex(0/, .3);
,ertex(D3, 3/);
,ertex(0/, :/);
,ertex(D3, :3);
,ertex(0/, D/);
,ertex(D3, D3);
end$hape();
-$urvas
;a 9uncin ,ertex() 9unciona mu$ )ien 1ara crear 9iguras a )ase de lneas< 1ero si Aueremos crear una
cur%a< necesitamos %alernos de las 9unciones cur,eMertex() $ be(ierMertex(). Estas 9unciones
1ueden usarse entre be'in$hape() $ end$hape()< siem1re $ cuando be'in$hape() no tenga ning3n
1ar,metro.
;a 9uncin cur,eMertex() es usada 1ara conectar dos 1untos con una cur%a. =e le en%an dos 1ar,metros
cur,eMertex(x, ;)
El 1rimero $ el 3ltimo cur,eMertex()< 8unto con be'in$hape() $ end$hape()< act3an como 1untos de
control. ;a cur%atura de cada segmento es calculada 1or los cur,eMertex() Aue :a$ en medio de los
1untos de control
smooth();
noHill();
be'in$hape();
cur,eMertex(2/, D/); //*6
cur,eMertex(2/, ./); //M6
cur,eMertex(0/, 0/); //M2
cur,eMertex(./, D/); //M0
cur,eMertex(D/, D/); //*2
end$hape();
En cam)io< cada be(ierMertex() de9ine la 1osicin de dos 1untos de control $ de un 1unto de ancla8e.
be(ierMertex(cx6, c;6, cx2, c;2, x, ;)
El 1rimer be(ierMertex() se u)ica 8unto con el be'in$hape(). -nteriormente al be(ierMertex()<
de)emos 1oner un ,ertex()< Aue de9inir, el 1rimer 1unto ancla. ;a cur%a se 9orma entre 1unto ,ertex() $
las coordenadas x e ; Aue se le en%an a be(ierMertex().
;os 1rimeros cuatro 1ar,metros restantes de be(ierMertex() corres1onden al control de la cur%atura de la
9igura.
noHill();
be'in$hape();
,ertex(02, 2/); //M6
be(ierMertex(D/, 3, D/, K3, 0/, K3); //*6, *2, M2
end$hape();
Para cur%as mas com1le8as< es necesario agregar una ma$or cantidad de be(ierMertext()< $ 1ar,metros
de 9ormato
smooth();
noHill();
be'in$hape();
,ertex(63, 0/); //M6
be(ierMertex(2/, 53, K/, 3, ./, 03); //*6, *2, M2
be(ierMertex(3, K/, .3, 6/3, K/, K/); //*0, *., M0
end$hape();
smooth();
no$tro)e();
be'in$hape();
,ertex(7/, 07); //M6
be(ierMertex(7/, 07, 3., 6K, 2:, D0); //*6, *2, M2
be(ierMertex(2:, D0, 7/, 6/K, 7/, 07); //*0, *., M0
end$hape();
smooth();
noHill();
be'in$hape();
,ertex(63, ./); //M6
be(ierMertex(3, /, D/, /, 3/, 33); //*6, *2, M2
,ertex(0/, .3); //M0
,ertex(23, K3); //M.
be(ierMertex(3/, K/, K3, 7/, D/, K/); //*0, *., M3
end$hape();
El tra)a8o con cur%as del ti1o Bzier suele ser mu$ com1licado< tan solo 1ara di)u8ar unas 1ocas cur%as.
'e1endiendo la di9icultad de lo Aue se 1retenda di)u8ar< a %eces es 1re9eri)le o1tar 1or la o1cin Aue sea m,s
sencilla. =in em)argo< :a$ contri)uciones de usuarios mu$ 3tiles Aue 1odran ser de gran a$uda. Entre una de
ellas se encuentra la Bzier 5ool @Aue 1uede descargarse desde http:##processing.org#reference#tools# C la cual
nos da un sim1le entorno de tra)a8o %isual< donde 1odemos di)u8ar cur%as Bzier como si 9uese un 1rograma
de gr,9icos %ectoriales @como -do)e Illustrator o InHsca1eC. -l 9inalizar nuestro di)u8o< 1odemos co1iarlo $
1egarlo en nuestro entorno de tra)a8o en 9orma de cdigo. ;o con%ierte en una :erramienta de suma utilidad
cuando se 1retende tra)a8ar con cur%as del ti1o Bzier.
/+!ndice de 4!rtices
/+!ndice de $urvas
&nidad A
5ate(1ticas' $urvas
sG(), sGrt(), poN(), norm(), lerp(), map()
;as ecuaciones de matem,tica ),sica 1ueden ser usadas 1ara di-ujar la +osicin * varios atri-utos de
una 9orma. Esas ecuaciones :an sido discutidas 1re%iamente. Estas ecuaciones se utilizan 1ara acelerar o
desacelerar las 9ormas en mo%imiento $ su recorrido a )ase de cur%as.
-E%+onentes * =a@ces
;a 9uncin sG() se utiliza 1ara calcular el cuadrado de un n3mero. 7 sea< ese mismo n3mero multi1licado
1or s mismo. !omo )ien se sa)e< aunAue el n3mero sea negati%o< de%ol%er, un resultado 1ositi%o. -ce1ta
solo un %alor como 1ar,metro
sG(,alor)
El $alor 1uede ser cualAuier n3mero. !uando sG() es usado< el %alor 1uede ser asignado a una %aria)le
!loat a < sG(6); //1si'na 6 a la ,ariable aF -Gui,ale a 6 * 6
!loat b < sG(53); //1si'na 23 a la ,ariable bF -Gui,ale a 53 * 53
!loat c < sG(7); //1si'na D6 a la ,ariable cF -Gui,ale a 7 * 7
;a 9uncin sGrt() se utiliza 1ara calcular la raiz cuadrada de un n3mero. 7 sea< el numero Aue multi1licado
1or s mismo da determinado %alor. !omo )ien se sa)e< aunAue el n3mero sea negati%o< de%ol%er, un
resultado 1ositi%o. -ce1ta solo un %alor como 1ar,metro
sGrt(,alor)
El $alor 1uede ser cualAuier n3mero. !uando sGrt() es usado< el %alor 1uede ser asignado a una %aria)le
!loat a < sGrt(:3:6); //1si'na D6 a la ,arible a
!loat b < sGrt(:23); //1si'na 23 a la ,ariable b
!loat c < sGrt(6); //1si'na 6 a la ,ariable c
;a 9uncin poN() es usada 1ara calcular un n3mero ele%ado 1or el e61onente Aue uno desee. -ce1ta dos
1ar,metros
poN(nEmero, exponente)
El n2mero es aAuel n3mero a multi1licar. El e(ponente es la cantidad de %eces Aue se %a a multi1licar.
!loat a < poN(6, 0); //1si'na 6#/ a la ,ariable aF -Gui,ale a 6*6*6
!loat b < poN(0, .); //1si'na D6#/ a la ,ariable bF -Gui,ale a 0*0*0*0
!loat c < poN(0, 52); //1si'na /#66 a la ,ariable cF -Gui,ale a 6 / 0*0
!loat d < poN(50, 0); //1si'na 52K#/ a la ,ariable dF -Gui,ale a 50*50*50
!ualAuier n3mero @e6ce1to .C Aue es ele%ado a la . da como resultado *. =i se ele%a 1or * da como resultado
el mismo n3mero
!loat a < poN(D, /); //1si'na 6
!loat b < poN(0, 6); //1si'na 0
!loat c < poN(., 6); //1si'na .
-;or(ali2acin * 5a+eo
Ja$ %eces en Aue necesitamos con%ertir una serie de n3meros en un rango de ... a *... Esto es a lo Aue se
denomina Normali3aci*n. !uando n3meros entre ... $ *.. son multi1licados entre s< nunca dar, un resultado
menor a ... ni ma$or a *... Esto 1ermite multi1licar un n3mero 1or otro o 1or s mismo tantas %eces como
Aueramos sin Aue se salga del rango. !omo la normalizacin suele de%ol%er n3meros decimales< utilizaremos
%aria)les del ti1o !loat si lo reAuerimos.
Para normalizar un n3mero< de)eremos di%idirlo 1or el m,6imo %alor del rango
(alor Inicial !,lculo (alor 2ormalizado
/#/ /#/ / 233#/ /#/
6/2#/ 6/2#/ / 233#/ /#.
233#/ 233#/ / 233#/ 6#/
Podemos< 1ues< sim1li9icar la tarea con la 9uncin norm(). Esta ace1ta tres 1ar,metros
norm(,alor, menor, ma;or)
El $alor es el n3mero a normalizar en uno entre ... $ *... El menor $ el mayor son el n3mero menor $ el
ma$or Aue com1onen el rango a utilizar. =i el resultado est, 9uera de rango resultar, en n3mero menor Aue .
o ma$or Aue *.
!loat x < norm(/#/, /#/, 233#/); //1si'na /#/ a x
!loat ; < norm(6/2#/, /#/, 233#/); //1si'na /#. a ;
!loat ( < norm(233#/, /#/, 233#/); //1si'na 6#/ a (
;uego de Aue un %alor es normalizado entre ... $ *..< ese mismo %alor +uede convertirse en un %alor
normalizado de otro rango. Por e8em1lo< si normalizamos un n3mero su %alor se encontrar, entre ... $ *..< al
multi1licar ese n3mero 1or /.... o)tendremos un %alor normalizado entre un rango de ... $ /..... Para
normalizar n3meros Aue est,n entre ... $ *..< a un rango de 2.... $ 2/...< es necesario multi1licar 1rimero
1or /. $ luego sumarle 2...
0ango Inicial 0ango 'eseado !,lculo
/#/ a 6#/ /#/ a 233#/ x * 233#/
/#/ a 6#/ 56#/ a 6#/ (x * 2#/) 5 6#/
/#/ a 6#/ 52/#/ a :/#/ (x * D/#/) O 2/#/
;a 9uncin lerp() es usada 1ara sim1li9icar esos c,lculos. 5iene tres 1ar,metros
lerp(,alor6, ,alor2, amt)
El $alor4 $ el $alor5 de9inen el rango al cual se Auiere normalizar un %alor normalizado entre ... $ *... El amt
es aAuel %alor normalizado entre ... $ *... Es decir< :ace Aue las con%ersiones %istas en la ta)la anterior
sean mas r,1idas $ sencillas 1ara el usuario.
!loat x < lerp(52/#/, :/#/, /#/); //1si'na 52/#/ a x
!loat ; < lerp(52/#/, :/#/, /#3); //1si'na 2/#/ a ;
!loat ( < lerp(52/#/, :/#/, 6#/); //1si'na :/#/ a (
Por otro lado< la 9uncin map() 1ermite con%ertir directamente un n3mero Aue est, en un rango< a otro rango.
Esta 9uncin utiliza tres 1ar,metros
map(,alor, menor6, ma;or6, menor2, ma;or2)
El $alor es el n3mero a reOma1ear. =imilar a la 9uncin norm!< menor4 $ mayor4 de9inen el rango en Aue se
encuentra ese %alor. El menor5 $ mayor5 de9inen el nue%o rango.
!loat x < map(2/#/, /#/, 233#/, 56#/, 6#/); // 1si'na 5/#D. a x
!loat ; < map(/#/, /#/, 233#/, 56#/, 6#/); // 1si'na 56#/ a ;
!loat ( < map(233#/, /#/, 233#/, 56#/, 6#/); // 1si'na 6#/ a (
-$urvas Si(+les
;as 9unciones e61onenciales son 3tiles 1ara crear cur%as mu$ sim1les $ r,1idamente. -l normalizar %alores
de la 9uncin poN()< 1odemos o)tener r,1idamente cur%as ascendentes $ descendentes< con n3meros Aue
no e6ceden el %alor de *. ;a ecuacin tendra la siguiente 9orma
; < x
n
'onde el %alor de ( sera un %alor normalizado entre ... $ *..< $ el %alor de n un n3mero entero. El siguiente
es un sim1le e8em1lo de como se u)ican estos %alores en una grilla de e8es cartesianos
Z V
/#/ /#/
/#2 /#//6:
/#. /#/23:
/#: /#627:
/#D /#./7:
6#/ 6#/
- continuacin se muestran una serie de e8em1los de la ca1acidad de las ecuaciones e61onenciales< con
normalizacin $ utilizando ciclos H?>.
!or (int x < /; x 9 6//; x44) R
!loat n < norm(x, /#/, 6//#/); //>an'o de /#/ a 6#/
!loat ; < poN(n, .); //*alcula la *ur,a
; *< 6//; //>an'o de /#/ a 6//#/
point(x, ;);
S
!or (int x < /; x 9 6//; x44) R
!loat ; < poN(n, /#.); //*alcula la *ur,a
; *< 6//; //>an'o de /#/ a 6//#/
point(x, ;);
S
//Dibua crculos de puntos alrededor de la cur,a ; < x[.
noHill();
smooth();
!or (int x < /; x 9 6//; x 4< 3) R
!loat ; < poN(n, .); //*alcula la *ur,a
; *< 6//; //-scala ; ran'o de /#/ a 6//#/
stro)eIei'ht(n * 3); //Bncrementa
ellipse(x, ;, 62/, 62/);
S
//Dibua una lnea de arriba a los puntos de
//la cur,a ; < x[. de x en un ran'o de 56#/ a 6#/
!or (int x < 3; x 9 6//; x 4< 3) R
!loat n < map(x, 3, 73, 56, 6);
!loat p < poN(n, .);
!loat ;pos < lerp(2/, D/, p);
line(x, /, x, ;pos);
S
//*rea un 'radiente de ; < x ; de ; < x[.
!or (int x < /; x 9 6//; x44) R
!loat n < norm(x, /#/, 6//#/);
!loat ,al < n * 233#/;
stro)e(,al);
line(x, /, x, 3/);
!loat ,al$Guare < poN(n, .) * 233#/;
stro)e(,al$Guare);
line(x, 3/, x, 6//);
S
/+!ndice de $urvas 5ate(1ticas
&nidad B
$olor' $olor +or ;.(eros
color, color(), colorCode()
5ra)a8ar con colores a tra%s de una 1antalla es di9erente a :acerlo en 1a1el o lienzo. Mientras Aue se
a1liAuen las mismas reglas< el conocimiento de los 1igmentos 1ara 1intar @ro8o cadmio< azul 1rusiano< ocre
tostadoC $ 1ara im1rimir @cian< amarillo< magentaC no necesitan ser traducidos 1ara crear colores digitales. Por
e8em1lo< unir todos los colores en un monitor de ordenador tiene como resultado el color )lanco< mientras Aue
unir todos los colores con 1intura tiene como resultado el color negro @o un marrn e6traGoC. Fn monitor de
ordenador mezcla los colores con luz. ;a 1antalla es una su1er9icie negra $ se aGade luz coloreada. Esto se
conoce como colores aditi%os< en contraste con el modelo de color sustracti%o 1ara tinta en 1a1el $ lienzo.
Esta imagen e61one la di9erencia entre los dos modelos
*olor aditi,o *olor sustracti,o
;a 9orma m,s com3n de es1eci9icar un color en el ordenador es mediante %alores 0EB. Fn %alor 0EB a8usta
la cantidad de luz ro8a< %erde $ azul en un 16el de la 1antalla. =i miras de cerca la 1antalla de tu tele%isor o el
monitor de tu ordenador< %er,s Aue cada 16el se com1one de tres elementos inde1endientes de luz ro8a<
%erde $ azulR 1ero de)ido a Aue nuestros o8os slo 1ueden %er una cantidad limitada de detalle< los tres
colores se mezclan 1ara 9ormar uno solo. ;a intensidad de cada elemento de color est, es1eci9icada con
%alores entre . $ 2//< donde . es el mnimo $ 2// el m,6imo.
O/juste de color
En Processing< los colores est,n de9inidos 1or los 1ar,metros de las 9unciones bac)'round()< !ill() $
stro)e()
bac)'round(,alor6, ,alor2, ,alor0)
!ill(,alor6, ,alor2, ,alor0)
!ill(,alor6, ,alue2, ,alor0, al!a)
stro)e(,alor6, ,alor2, ,alor0)
stro)e(,alor6, ,alor2, ,alor0, al!a)
Por de9ecto< el 1ar,metro $alue4 de9ine el com1onente de color ro8o< $alor5 el com1onente %erde $ $alue6 el
azul. El 1ar,metro o1cional al9a 1ara !ill() o stro)e() de9ine la o1acidad. El %alor 2// del 1ar,metro alfa
indica Aue el color es totalmente o1aco< $ el %alor . indica Aue es totalmente trans1arente @no ser, %isi)leC.
bac)'round(6K., 226, :/);
=elector de color
Podemos seleccionar el color con el cursor
sim1lemente introducir los %alores Aue
deseamos.

bac)'round(627, 60/, DK);
no$tro)e();
!ill(6K., 226, :/);
rect(6K, 6K, ::, ::);
bac)'round(627, 60/, DK);
noHill();
stro)eIei'ht(.);
stro)e(6K., 226, :/);
rect(67, 67, :2, :2);
bac)'round(66:, 670, 2/:);
no$tro)e();
!ill(627, 60/, DK, 6/2); //Cenos opacidad
rect(2/, 2/, 0/, :/);
!ill(627, 60/, DK, 2/.); //C"s opacidad
rect(3/, 2/, 0/, :/);
bac)'round(66:, 670, 2/:);
int x < /;
no$tro)e();
!or (int i < 36; i 9< 233; i 4< 36) R
!ill(627, 60/, DK, i);
rect(x, 2/, 2/, :/);
x 4< 2/;
S
bac)'round(3:, 7/, 7.);
smooth();
stro)eIei'ht(62);
stro)e(2.2, 2/., .K, 6/2); //Cenos opacidad
line(0/, 2/, 3/, D/);
stro)e(2.2, 2/., .K, 2/.); //C"s opacidad
line(3/, 2/, K/, D/);
bac)'round(3:, 7/, 7.);
smooth();
int x < /;
stro)eIei'ht(62);
!or (int i < 36; i 9< 233; i 4< 36) R
stro)e(2.2, 2/., .K, i);
line(x, 2/, x42/, D/);
x 4< 2/;
S
;a o1acidad se 1uede usar 1ara crear nue%os colores mediante su1er1osicin de 9ormas. ;os colores
originados de1enden del orden en Aue se di)u8en las 9ormas.
bac)'round(/);
no$tro)e();
smooth();
!ill(2.2, 2/., .K, 6:/); //1marillo
ellipse(.K, 0:, :., :.);
!ill(6K., 226, :/, 6:/); //Merde
ellipse(7/, .K, :., :.);
!ill(66:, 670, 2/:, 6:/); //1(ul
ellipse(3K, K7, :., :.);
bac)'round(233);
no$tro)e();
smooth();
!ill(2.2, 2/., .K, 6:/); //1marillo
ellipse(.K, 0:, :., :.);
!ill(6K., 226, :/, 6:/); //Merde
ellipse(7/, .K, :., :.);
!ill(66:, 670, 2/:, 6:/); //1(ul
ellipse(3K, K7, :., :.);
-#ato de color
El ti1o dato de color se usa 1ara almacenar colores en un 1rograma< $ la 9uncin color() se usa 1ara
asignar una %aria)le de color. ;a 9uncin color() 1uede crear %alores de gris< %alores de gris con o1acidad<
%alores de color $ %alores de color con o1acidad. ;as %aria)les del ti1o dato de color 1uede almacenar todas
estas con9iguraciones
color('ris)
color('ris, al!a)
color(,alor6, ,alor2, ,alor0)
color(,alor6, ,alor2, ,alor0, al!a)
;os 1ar,metros de la 9uncin color() de9ine un color. El 1ar,metro gris usado slo o con alfa< de9ine un
rango de tonos de )lanco a negro. El 1ar,metro alfa de9ine la o1acidad con %alores de entre . @trans1arenteC
a 2// @o1acoC. ;os 1ar,metros $alor4< $alor5 $ $alor6 de9inen %alores 1ara los distintos com1onentes. ;as
%aria)les del ti1o de dato de color se de9inen $ se asignan de la misma 9orma Aue los ti1os de dato int $
!loat discutidos en la unidad 'atos (aria)les.
color c6 < color(36); //*rea 'ris#
color c2 < color(36, 2/.); //*rea 'ris con opacidad#
color c0 < color(36, 6/2, 630); //*rea a(ul#
color c. < color(36, 6/2, 630, 36); //*rea a(ul con opacidad#
'es1us de Aue una %aria)le color se :a$a de9inido< se 1uede usar como 1ar,metro 1ara las 9unciones
bac)'round()< !ill() $ stro)e().

Ignacio Buioli | Jaime Prez Marn /.
color rub; < color(266, 2., 2., 6:/);
color pin) < color(20K, 637, 6K:);
bac)'round(pin));
no$tro)e();
!ill(rub;);
rect(03, /, 2/, 6//);
=C0, DS0
Processing usa el 9ormato de color 0EB como 1redeterminado 1ara tra)a8ar< 1ero se 1uede usar en su lugar
la es1eci9icacin J=B 1ara de9inir colores en 9uncin del matiz< saturacin $ )rillo. El matiz de un color es lo
Aue normalmente 1iensa la gente del nom)re del color amarillo< ro8o< azul< naran8a< %erde< %ioleta. Fn matiz
1uro es un color sin diluir mu$ intenso. ;a saturacin es el grado de 1ureza en un color. (a desde el matiz sin
diluir :asta el matiz com1letamente diluido< donde el color no tiene )rillo. El )rillo de un color es su relacin de
luz $ oscuridad. ;a 9uncin colorCode() esta)lece el 9ormato de color 1ara un 1rograma
colorCode(modo)
colorCode(modo, ran'o)
colorCode(modo, ran'o6, ran'o2, ran'o0)
;os 1ar,metros de colorCode() cam)ian la 9orma en Aue Processing inter1reta el dato de color. El
1ar,metro modo 1uede ser tanto 0EB como J=B. El rango de 1ar,metros 1ermite a Processing usar %alores
di9erentes al 1redeterminado @. a 2//C. En los gr,9icos de ordenador se usa 9recuentemente un rango de
%alores entre ... $ *... 5anto si un 1ar,metro de un slo rango esta)lece el rango 1ara todos los colores<
como si los 1ar,metros rango4< rango5 $ rango6 esta)lecen el rango de cada uno S tanto ro8o< %erde< azul
como matiz< saturacin< )rillo< de1endiendo del %alor del 1ar,metro modo.
//-stablece el ran'o para los ,alores roo, ,erde ; a(ul de /#/ a 6#/
colorCode(>X=, 6#/);
Fn a8uste 3til 1ara el 9ormato J=B es esta)lecer los 1ar,metros de rango4< rango5 $ rango6 res1ecti%amente
a 3".< *.. $ *... ;os %alores de matiz desde . a 3". son los grados alrededor de la rueda de color< $ los
%alores de saturacin $ )rillo desde . a *.. son 1orcenta8es. Este a8uste coincide con los %alores usados en
muc:os selectores de color $< 1or tanto< :ace m,s sencilla la transicin de dato de color entre otros
1rogramas $ Processing
//-stablece el ran'o para el mati( con ,alores desde / a 0:/ ; la
//saturacin ; el brillo con ,alores entre / ; 6//
colorCode(\$=, 0:/, 6//, 6//);
;os siguientes e8em1los re%elan la di9erencia entre matiz< saturacin $ )rillo.
//*ambia el mati(; saturacin ; brillo constante
colorCode(\$=);
!or (int i < /; i 9 6//; i44) R
stro)e(i*2#3, 233, 233);
line(i, /, i, 6//);
S
//*ambia la saturacin; mati( ; brillo constante
colorCode(\$=);
!or (int i < /; i 9 6//; i44) R
stro)e(602, i*2#3, 2/.);
line(i, /, i, 6//);
S
Ignacio Buioli | Jaime Prez Marn /*
//*ambia el brillo; mati( ; saturacin constante
colorCode(\$=);
!or (int i < /; i 9 6//; i44) R
stro)e(602, 6/D, i*2#3);
line(i, /, i, 6//);
S
//*ambia la saturacin ; el brillo; mati( constante
colorCode(\$=);
!or (int i < /; i 9 6//; i44) R
!or (int < /; 9 6//; 44) R
stro)e(602, *2#3, i*2#3);
point(i, );
S
S
Es 9,cil :acer transiciones sua%es entre colores cam)iando los %alores 1ara color()< !ill() $ stro)e().
El 9ormato J=B tiene una enorme %enta8a so)re el 9ormato 0EB cuando tra)a8amos con cdigos< 1orAue es
m,s intuiti%o. !am)iando los %alores de los com1onentes ro8o< %erde $ azul< a menudo o)tenemos resultados
ines1erados< mientras Aue estimando los resultados de los cam)ios del matiz< saturacin $ )rillo seguimos un
camino m,s lgico. ;os siguientes e8em1los muestran la transicin del %erde al azul. El 1rimer e8em1lo :ace
la transicin usando el 9ormato 0EB. 0eAuiere calcular los tres %alores de color< $ la saturacin del color
cam)ia ines1eradamente en el centro. El segundo e8em1lo :ace la transicin usando el 9ormato J=B. =lo es
necesario alterar un n3mero< $ el matiz cam)ia sua%emente e inde1endientemente de las otras 1ro1iedades
del color.
//*ambio del a(ul al ,erde en !ormato >X=
colorCode(>X=);
!or (int i < /; i 9 6//; i44) R
!loat r < :6 4 (i*/#72);
!loat ' < 63: 4 (i*/#.D);
!loat b < 2/. O (i*6#.0);
stro)e(r, ', b);
line(i, /, i, 6//);
S
// *ambio del a(ul al ,erde en !ormato \$=
colorCode(\$=, 0:/, 6//, 6//);
!or (int i < /; i 9 6//; i44) R
!loat neN\ue < 2// O (i*6#2);
stro)e(neN\ue, K/, D/);
line(i, /, i, 6//);
S
-De%adeci(al
;a notacin :e6adecimal @:e6C es una notacin alternati%a 1ara de9inir el color. Este mtodo es 1o1ular entre
diseGadores Aue tra)a8an en la Ie) 1orAue est,ndares como J$1er5e6t
MarHu1 ;anguage @J5M;C $ !ascading =t$le =:eets @!==C usan esta notacin. ;a notacin Je6 1ara el color
codi9ica cada n3mero desde el . al 2// en un %alor de dos dgitos usando los n3meros de . a & $ las letras de
- a #. 'e esta 9orma< tres %alores 0EB desde . a 2// se 1ueden escri)ir como un solo %alor :e6 de seis
dgitos. Fnas 1ocas con%ersiones de e8em1lo demuestran esta notacin
0EB Je6
233, 233, 233 ]HHHHHH
/, /, / ]//////
Ignacio Buioli | Jaime Prez Marn /2
6/2, 630, 2/. ]::77**
673, 2.., 37 ]*0H.0=
66:, 2/:, 2/: ]K.*-*-
;a con%ersin de los %alores 0EB a notacin :e6 no es intuiti%a. - menudo< el %alor se toma del selector de
color. Por e8em1lo< 1uedes co1iar $ 1egar un %alor :e6 desde el selector de color de Processing en tu cdigo.
!uando se usan %alores de color codi9icados en notacin :e6< de)emos colocar un T antes del %alor 1ara
distinguirlo dentro del cdigo.
// *di'o del tercer eemplo reescrito usando nEmeros hex
bac)'round(]D6D23K);
no$tro)e();
!ill(]1-DD0*);
rect(6K, 6K, ::, ::);
-4alores de grises
;os e8em1los %istos anteriormente :an usado el 9ondo 1or de9ecto de color gris claro< lneas negras< $ 9iguras
)lancas. Para cam)iar estos %alores< es necesario introducir sinta6is adicional. ;a 9uncin bac)'round()
esta)lece el color de la %entana de re1resentacin con un n3mero entre . $ 2//. Este rango 1uede ser
incmodo si no est,s 9amiliarizado con 1rogramas de di)u8o en el ordenador. El %alor 2// es )lanco $ el %alor
. es negro< con un rango de %alores de grises en medio. =i no se de9ine un %alor 1ara el 9ondo< se usa el %alor
1or de9ecto 2.4 @gris claroC.
;a 9uncin !ill() de9ine el %alor del relleno de las 9iguras< $ la 9uncin stro)e() de9ine el %alor del
contorno de las 9iguras di)u8adas. =i no se de9ine un %alor de relleno< se usa el %alor 1or de9ecto 2//
@)lancoC. =i no se de9ine un %alor de contorno< se usa el %alor 1or de9ecto . @negroC.
rect(6/, 6/, 3/, 3/);
!ill(2/.);
stro)e(6/2);
rect(2/, 2/, 3/, 3/);
!ill(630);
stro)e(630);
rect(0/, 0/, 3/, 3/);
!ill(6/2);
stro)e(2/.);
rect(./, ./, 3/, 3/);
!uando se :a de9inido un %alor de relleno o contorno< se a1lica a todas las 9iguras di)u8adas des1us. Para
cam)iar el %alor de relleno o contorno< usamos la 9uncin !ill() o stro)e() de nue%o.
Fn 1ar,metro o1cional adicional 1ara !ill() o stro)e() regula la trans1arencia. 'e9iniendo el 1ar,metro
a 2// :ace Aue la 9igura sea totalmente o1aca< $ a . totalmente trans1arente
bac)'round(/);
!ill(233, 22/);
rect(63, 63, 3/, 3/);
rect(03, 03, 3/, 3/);
El relleno $ el contorno de una 9igura se 1uede eliminar. ;a 9uncin noHill() detiene a Processing de
rellenar 9iguras< $ la 9uncin no$tro)e() detiene la creacin de lneas $ contornos de las 9iguras. =i usamos
noHill() $ no$tro)e() no di)u8aremos nada en la 1antalla.
-/tri-utos de di-ujo
-dem,s de cam)iar los %alores de relleno $ contorno de las 9iguras< tam)in es 1osi)le cam)iar atri)utos de
la geometra. ;as 9unciones smooth() $ no$mooth() acti%an $ desacti%an el sua%izado @conocido como
9iltro antialiasingC. !uando usamos una de estas 9unciones< a9ectar, a todas las 9unciones di)u8adas des1us.
=i usamos 1rimero smooth()< usar no$mooth() cancelar, el a8uste< $ %ice%ersa.
smooth();
ellipse(0/, .D, 0:, 0:);
no$mooth();
ellipse(K/, .D, 0:, 0:);
;os atri)utos de la lnea< est,n controlados 1or las 9unciones stro)eIei'ht()< stro)e*ap() $
stro)eJoin(). ;a 9uncin stro)eIei'ht() tiene un 1ar,metro numrico Aue de9ine el grosor de todas
las lneas di)u8adas des1us de usar esta 9uncin. ;a 9uncin stro)e*ap() reAuiere un 1ar,metro Aue
1uede ser >?&ND< $L&1>- o A>?J-*T. >?&ND redondea los 1untos 9inales< $ $L&1>- los cuadra. A>?J-*T
es una mezcla de am)os redondea las esAuinas cuadradas sua%emente. Esta 9uncin se usa en lneas. ;a
9uncin stro)eJoin() tiene un 1ar,metro Aue 1uede ser =-M-@< CBTT-> o >?&ND. Estos 1ar,metros
determinan la 9orma del contorno de la 9igura. =-M-@ corta en diagonal las esAuinas cuadradas< CBTT->
cuadra las esAuinas @es el %alor 1or de9ectoC $ >?&ND redondea las esAuinas.
smooth();
stro)eIei'ht(62);
stro)e*ap(>?&ND);
line(2/, 0/, D/, 0/); //@nea superior
stro)e*ap($L&1>-);
line(2/, 3/, D/, 3/); //@nea central
stro)e*ap(A>?J-*T);
line(2/, K/, D/, K/); //@nea in!erior
smooth();
stro)eIei'ht(62);
stro)eJoin(=-M-@);
rect(62, 00, 63, 00); //Hi'ura i(Guierda
stro)eJoin(CBT->);
rect(.2, 00, 63, 00); //Hi'ura central
stro)eJoin(>?&ND);
rect(K2, 00, 63, 00); //Hi'ura derecha
5odos de di-ujo
Por de9ecto< los 1ar,metros 1ara ellipse() de9ine la coordenada 6 del centro< la coordenada $ del centro<
la anc:ura $ la altura. ;a 9uncin ellipseCode() cam)ia la 9orma en Aue se usan estos 1ar,metros 1ara
di)u8ar eli1ses. ;a 9uncin ellipseCode() reAuiere un 1ar,metro Aue 1uede ser *-NT->< >1DB&$<
*?>N-> o *?>N->$. El modo 1or de9ecto es *-NT->. El modo >1DB&$ tam)in usa el 1rimer $ segundo
1ar,metro de ellipse() 1ara esta)lecer el centro< 1ero el tercer 1ar,metro de)er ser la mitad del anc:o< $
el cuarto 1ar,metro de)e ser la mitad del alto. El modo *?>N-> :ace Aue ellipse() 9uncione de manera
1arecida a rect(). !ausa Aue el 1rimer $ segundo 1ar,metro se trasladen a la esAuina su1erior izAuierda
del rect,ngulo Aue circunscri)e la eli1se $ usa el tercer $ cuarto 1ar,metro 1ara de9inir la anc:ura $ la altura.
El modo *?>N->$ tiene un e9ecto similar a *?>N->< 1ero causa Aue el tercer $ cuarto 1ar,metro de
ellipse() se de9inan en la esAuina in9erior derec:a del rect,ngulo.
smooth();
no$tro)e();
!ill(62:);
ellipse(00, 00, :/, :/); //-lipse 'ris
!ill(233);
ellipseCode(*?>N->);
ellipse(00, 00, :/, :/); //-lipse blanca
!ill(/);
ellipseCode(*?>N->$);
ellipse(00, 00, :/, :/); //-lipse ne'ra
!on un estilo similar< la 9uncin rectCode() a9ecta a cmo se di)u8an los rect,ngulos. 0eAuiere un
1ar,metro Aue 1uede ser *?>N->< *?>N->$ o *-NT->. El modo 1or de9ecto es *?>N->< $ *?>N->$ causa
Aue el tercer $ cuarto 1ar,metro de rect() se de9inan en la esAuina contraria a la 1rimera. El modo *-NT->
causa Aue el 1rimer $ segundo 1ar,metro de rect() de9inan el centro del rect,ngulo $ usa el tercer $ cuarto
1ar,metro 1ara la anc:ura $ la altura.
no$tro)e();
rectCode(*?>N->);
!ill(62:);
rect(./, ./, :/, :/); //>ect"n'ulo 'ris
rectCode(*-NT->);
!ill(233);
rect(./, ./, :/, :/); //>ect"n'ulo blanco
rectCode(*?>N->$);
!ill(/);
rect(./, ./, :/, :/); //>ect"n'ulo ne'ro
Ignacio Buioli | Jaime Prez Marn //
&nidad 10
I(agen' 4isuali2acin * 6inta
ABma'e, loadBma'e(), ima'e()
tint(), noTint()
;as 9otogra9as digitales son mu$ di9erentes si las com1aramos con las 9otogra9as analgicas ca1turadas en
9ilm. -l igual Aue las 1antallas de ordenador< las im,genes digitales son re8illas rectangulares de color. ;as
dimensiones de las im,genes digitales se miden en unidades de 16eles. =i una imagen es de 32. 16eles de
anc:o $ 24. 16eles de alto< tiene +".4.. 16eles totales. =i una imagen es de *24. 16eles de anc:o $ *.24
16eles de anc:o< el n3mero total de 16eles es de *3*.+2. @*<3 mega16elesC. !ada imagen digital tiene una
1ro9undidad de color. ;a 1ro9undidad de color se re9iere al n3mero de )its utilizado 1ara almacenar cada 16el.
=i la 1ro9undidad de color de una imagen es *< cada 16el 1uede ser uno de dos %alores< 1or e8em1lo< negro o
)lanco. =i la 1ro9undidad de color es de 4< cada 16el 1uede ser uno de *" %alores. =i la 1ro9undidad de color
de una imagen es de 4< cada 16el 1uede ser uno de 2/" %alores. En cuanto a la imagen< se muestra con
di9erentes 1ro9undidades de color. Esto a9ecta a la a1ariencia
*O)it @2 coloresC 2O)it @4 coloresC 4O)it @*" coloresC 4O)it @2/" coloresC
Jo$ en da< la ma$ora de las com1utadoras tra)a8an con una 1ro9undidad de 24 )its< lo Aue Auiere decir uno
de *"+++2*" colores. =e lo llama com3nmente como millones de colores.
;as im,genes digitales se co(+onen de n.(eros Aue re1resentan los colores. El 9ormato de arc:i%o de una
imagen determina como los n3meros se ordenan en el arc:i%o. -lgunos 9ormatos de arc:i%o de
almacenamiento de los datos de color< utilizan ecuaciones de matem,ticas com1le8as 1ara com1rimir los
datos $ reducir el tamaGo resultante del arc:i%o 9inal. Fn 1rograma Aue se carga un arc:i%o de imagen de)e
conocer el 9ormato de la misma 1ara Aue 1ueda traducir los datos de arc:i%o en la imagen es1erada. E6isten
di9erentes ti1os de 9ormatos de im,genes digitales Aue sir%en 1ara necesidades es1ec9icas. Processing
1ueden cargar arc:i%os EI#< JPEE< $ P2E< 8unto con algunos otros 9ormatos como se descri)e en la
re9erencia. =i no tiene su imagen en uno de estos 9ormatos< se 1uede con%ertir a otros ti1os de 9ormatos con
1rogramas como EIMP o -do)e P:otos:o1.
#ormat E6tension Pro9undidad de color 5rans1arencia
EI# .gi9 *O)it a 4O)it *O)it
JPEE .81g 24O)it 2o Posee
P2E .1ng *O)it a 24O)it 4O)it
-4isuali2acin
Processing 1uede cargar im,genes< mostrarlas en 1antalla< cam)iar su 1osicin< tamaGo< color< tinta $
trans1arencia. El ti1o de dato Aue se utiliza 1ara almacenar im,genes es conocido 1or el nom)re de ABma'e.
-l igual Aue los n3meros enteros son almacenados en %aria)les del ti1o int< $ los %alores true $ !alse en
%aria)les del ti1o boolean< las im,genes son almacenadas en %aria)les ti1o ABma'e. -ntes de mostrarla en
al %entana< es necesario cargar la imagen con la 9uncin loadBma'e(). =e de)e re%isar con cuidado Aue
adem,s de ingresar el nom)re correcto tam)in este la e6tensin de 9ormato correcta @1or e8em1lo< kant.'pg<
"oah.gif< hola.pngC. ;as im,genes a cargar de)en encontrarse en la car1eta data< dentro de la car1eta del
sketch. E6iste una 9orma mu$ sencilla de aGadir una imagen a esa car1eta sin cometer ning3n error. En la
Ignacio Buioli | Jaime Prez Marn /"
)arra de men3< dentro de la o1cin K=Hect:L< se encuentra el comando K-dd #ileL. =e 1odr, entonces na%egar
1or su ordenador $ )uscar el arc:i%o deseado. Fna %ez Aue se encuentra< se le da clicH a K71enL 1ara aGadir
el arc:i%o a la car1eta data de su sHect:. !on la imagen dentro de la car1eta< :a)indose declarado un nue%o
ABma'e $< 1osteriormente< cargado en ese ABma'e un arc:i%o de imagen< este 1uede ser mostrado en
1antalla con la 9uncin ima'e()
ima'e(nombre, x, ;)
ima'e(nombre, x, ;, ancho, alto)
;os 1ar,metros de ima'e() determinan la 1osicin $ el tamaGo de la imagen @similar a otras 9unciones %istas
1re%iamenteC. El nombre es tan solo el nom)re de la %aria)le ABma'e donde se encuentra almacenada
nuestra imagen. =i no se utilizan los 1ar,metros ancho $ alto< la imagen ser, mostrada en su tamaGo original.
ABma'e im';
//@a ima'en debe estar 'uardada en la carpeta data
im' < loadBma'e(Warch#p'W);
ima'e(im', /, /);
ABma'e im';
//@a ima'en debe estar 'uardada en la carpeta data
ima'e(im', 2/, 2/, :/, :/);
-$olor de la I(agen * 6rans+arencia
;as im,genes 1ueden ser coloreadas con la 9uncin tint(). Esta act3a del mismo modo Aue !ill() $
stro)e()< solo Aue a9ecta 3nicamente a las im,genes
tint('ris)
tint('ris, al!a)
tint(,alor6, ,alor2, ,alor0)
tint(,alor6, ,alor2, ,alor0, al!a)
tint(color)
5odas las im,genes Aue se di)u8an luego de declarada la 9uncin tint()< ser, 1intada 1or ella. =i en alg3n
momento se desea Aue no se 1inte< se 1uede utilizar la 9uncin noTint().
ABma'e im';
tint(6/2); //Ainta de 'ris
ima'e(im', /, /);
noTint(); //Desacti,a tint()
ima'e(im', 3/, /);
ABma'e im';
tint(/, 630, 2/.); //Ainta de a(ul
ima'e(im', /, /);
noTint(); //Desacti,a tint()
ima'e(im', 3/, /);
Ignacio Buioli | Jaime Prez Marn /+
color amarillo < color(22/, 26., .6);
color ,erde < color(66/, 6:., 02);
color tan < color(6D/, 6KK, 602);
ABma'e im';
tint(amarillo);
ima'e(im', /, /);
tint(,erde);
ima'e(im', 00, /);
tint(tan);
ima'e(im', ::, /);
;os 1ar,metros de tint() est,n ligados a lo esta)lecido 1or colorCode(). Ja$ Aue tener cuidado de no
cam)iar el modo de color o el rango del mismo< $a Aue eso a9ectar, los 1ar,metros de tint().
Para generar trans1arencia sim1lemente utilizaremos la misma 9uncin tint() 1ero con un %alor de )lanco
@2// en un modo 0EBC.
ABma'e im';
bac)'round(233);
tint(233, 6/2); //1l!a de 6/2 sin cambiar el color de pintura
ima'e(im', /, /, 6//, 6//);
tint(233, 2/., /, 630); //Ainta amarillo con una
ima'e(im', 2/, 2/, 6//, 6//); //transparencia de 630
ABma'e im';
bac)'round(233);
tint(233, 36);
//Dibua las im"'enes 6/ ,eces mo,iendo las mismas
//a la derecha
!or (int i < /; i 9 6/; i44) R
ima'e(im', i*6/, /);
S
;as im,genes de 9ormato EI# $ P2E 1ueden almacenar la trans1arencia de la imagen. Mientras Aue las EI#
solo 1ueden con%ertir un color @$a Aue solo 1osee *O)it de trans1arenciaC. En cam)io< las im,genes P2E
tienen una 1ro9undidad de trans1arencia de 4O)it< 1or lo tanto admiten 2/" colores de trans1arencia.
//*ar'a una ima'en XBH con 65bit de transparencia
ABma'e im';
im' < loadBma'e(WarchTrans#'i!W);
bac)'round(233);
ima'e(im', /, /);
ima'e(im', 52/, /);
//*ar'a una ima'en ANX con D5bit de transparencia
ABma'e im';
im' < loadBma'e(Warch#pn'W);
bac)'round(233);
ima'e(im', /, /);
ima'e(im', 52/, /);
&nidad 11
#atos' 6e%to
Elementos que se introducen en esta Unidad:
char, $trin'
'esde la a1aricin del ordenador se 1lantearon lengua8es de 1rogramacin 1ara sus acciones. - 1artir de ese
momento< :u)o muc:a in%estigacin en la entrada $ la salida de te6to. 'e esta 9orma se e61andi el cam1o
de la 1rogramacin a lo Aue 9ueron los 1rimeros intentos 1or I- @Inteligencia -rti9icialC. Fna serie de 1rogramas
en los Aue uno escri)a lo Aue desea)a $ el mismo 1rograma< a duras 1enas< res1onda algo mas o menos
acorde. Esta clase de 1rogramas :a e%olucionado< m,s all, de Aue e6isten toda%a 1ro)lemas con esta clase
de ideas.
M,s adelante< se e61eriment con 1rogramas @1re9erentemente en la ?e)C de traduccin de idiomas< con
resultados e6traordinarios 1or 1arte de algunos ser%idores< Aue a3n e6isten en la actualidad.
Esta unidad no discute temas acerca de traduccin de idiomas o inteligencia arti9icial< sin em)argo el te6to es
el ti1o de dato mas com3n creado $ modi9icado 1or el 1rograma. El te6to creado 1or eOmails< 1u)licaciones $
sitios ?e) es un %asto recurso de in9ormacin Aue 1uede ser almacenada $ 1resentada en 9orma de datos.
-$aracteres
;os datos del ti1o char 1ueden almacenar ti1ogra9as como -< e< / $ U. El nom)re char es el diminuti%o
1ara character cu$o signi9icado es car,cter< $ este ti1o de datos se distingue 1or se escritos entre comillas @V
VC. ;as %aria)les ti1o char son declaradas como %aria)les ti1o int o ti1o !loat.
char a < ^n^; //1si'na ^n^ a la ,ariable a
char b < n; //->>?> 5 $in comillas, n es una ,ariable
char c < WnW; //->>?> 5 @as comillas dobles (W W) de!inen a n como un
//$trin', no un char
char d < ^not^; //->>?> O @as ,ariables tipo char pueden almacenar
//solo un car"cter
El siguiente e8em1lo crea una nue%a %aria)le ti1o char< asigna %alores $ los im1rime en la consola
char letra < ^1^; //Declara una ,ariable letra ; asi'na el ,alor de ^1^
println(letra); //Bmprime 1 en la consola
letra < ^=^; //1si'na ^=^ a la ,ariable letra
println(letra); //Bmprime = en la consola
Muc:os %alores char tienen un %alor n3mero Aue les corres1onde 1or el cdigo de la ta)la -=!II. Por
e8em1lo< - es "/< B es ""< ! es "+< $ as. Puede 1ro)ar cada cdigo usando la 9uncin println()
char letra < ^1^;
println(letra); //Bmprime 1 en la consola
int n < letra; //1si'na el ,alor num%rico de 1 a la ,arible n
println(n); //Bmprime :3 en la consola
Es 1osi)le articular 9unciones matem,ticas con %alores al9a)ticos. En el siguiente e8em1lo se utiliza un ciclo
H?> 1ara im1rimir el al9a)eto de la - a la W< 1or aumentar los %alores char con la 9uncin de incremento
char letra< ^1^; //Declara una ,ariable tipo char ; asi'na el ,alor de 1
!or (int i < /; i 9 2:; i44) R
print(letra); //Bmprime un car"cter en la consola
letra44; //$uma 6 al ,alor del car"cter
S
println(^#^); //1're'a un punto al !inal del al!abeto
Ignacio Buioli | Jaime Prez Marn /&
-Pala-ras * 3raciones
-l utilizar una %aria)le de ti1o $trin' 1ueden almacenarse 1ala)ras $ oraciones com1letas. Para distinguir
los datos $trin' del resto del 1rograma se utilizan comillas do)les @WWC. ;as do)les comillas di9erencian VVsVV
como $trin' de VsV como car,cter. ;os datos ti1os $trin' son di9erentes a los del ti1o int1 !loat o char<
$a Aue se trata de un ob'eto1 o sea un ti1o de dato Aue 1uede almacenar muc:os elementos $ 9unciones. ;as
%aria)les ti1o ABma'e $ AHont tam)in son o)8etos. ;as %aria)les ti1o $trin' se declaran $ se asignan
como cualAuiera
$trin' a < W1nnimoW; //1si'na W1nnimoW a la ,ariable a
$trin' b < ^-^; //->>?> O @as comillas ^ ^ deben ser dobles#
$trin' c < W-W; //1si'na W-W a c
strin' d < W-W; //->>?> 5 $trin' debe comen(ar con ma;Esculas
;os siguientes e8em1los muestran algunos usos ),sicos de las %aria)les ti1o $trin'
//@os datos tipo $trin' pueden contener lar'os textos
$trin' s6 < W>a)ete bee bee_W;
$trin' s2 < W>rrrrrrrrrrrrrrrummmmmp!!!! till!!!! tooooo_W;
println(s6); //Bmprime W>a)ete bee bee_W
println(s2); //Bmprime W>rrrrrrrrrrrrrrrummmmmp!!!! till!!!! tooooo_W
//Datos tipo $trin' combinados con el operador 4
$trin' s0 < W>a)ete W;
$trin' s. < Wrinn(e)eteW;
$trin' s3 < s0 4 s.;
println(s3); //Bmprime W>a)ete rinn(e)eteW
Ignacio Buioli | Jaime Prez Marn ".
&nidad 12
#atos' $onversin * 3-jetos
boolean(), b;te(), char(), int(), !loat(), str()
# (Aunto como ?perador)
ABma'e#Nidth, ABma'e#hei'ht
$trin'#len'th(), $trin'#startsIidth(), $trin'#endsIidth(),
$trin'#char1t(), $trin'#to*har1rra;(), $trin'#sub$trin'(),
$trin'#to@oNer*ase(), $trin'#to&pper*ase()
$trin'#eGuals()
!uando creamos una %aria)le< es1eci9icamos el ti1o de datos con el Aue %a a tra)a8ar. =i la %aria)le almacena
n3meros< su utilizar, una %aria)le ti1o int o ti1o !loat. =i la %aria)le almacena te6to< se usar, el ti1o
$trin' o< si se tratara de solo un car,cter< del ti1o char. -s< %aria)les Aue almacenan %alores true o
!alse son del ti1o boolean< 1ara almacenar una imagen digital la %aria)le ser, del ti1o ABma'e $ 1ara
almacenar una ti1ogra9a del ti1o AHont. ;uego de ser declarada< se le asigna un %alor del ti1o de la %aria)le.
=in em)argo< muc:as %eces es necesario con%ertir una %aria)le de determinado ti1o en otro ti1o.
;os ti1os de datos int1 !loat1 char $ boolean son llamadas %aria)les 1rimiti%as< $a Aue almacenan un
si(+le elemento. En cam)io< las del ti1o $trin'1 ABma'e $ AHont son di9erentes< las %aria)les Aue se
crean son o-jetos. ;os o)8etos son usualmente com1uestos 1or muc:as %aria)les 1rimiti%as $ otros o)8etos<
$ 1ueden 1oseer 9unciones dentro de ellos mismos. ;os o)8etos se distinguen 1or comenzar la 1rimer letra en
ma$3sculas.
-$onversin de #atos
-lgunos ti1os de datos 1ueden con%ertirse en otro ti1o autom,ticamente con solo se reasignados a una
%aria)le de otro ti1o. Por e8em1lo< una %aria)le del ti1o int 1uede con%ertirse autom,ticamente en una del
ti1o !loat< 1ero una del ti1o !loat no 1uede con%ertirse autom,ticamente en una del ti1o int.
!loat ! < 62#:;
int i < 62K;
! < i; //*on,ierte 62K en 62K#/
i < !; //->>?> O No se puede con,ertir autom"ticamente un !loat en un int
PDu ocurre si necesitamos con%ertir otra clase de %aria)le en otros ti1osQ Para esto e6isten una gran
cantidad de 9unciones de con%ersin de un ti1o de dato a otro. =in em)argo< :a$ Aue aclarar Aue< como los
datos almacenan di9erentes cantidad de )it< es mu$ 1ro)a)le Aue en algunos 1ases se 1ierda una gran
cantidad de in9ormacin @mu$ 3til 1ara a:orrar memoria del 1rogramaC. ;as 9unciones de con%ersin son las
siguientes boolean()1 b;te()1 char()1 !loat()1 int()< $ str(). !ada una trans9orma cualAuier clase
de dato en el corres1ondiente a cada 9uncin.
;a 9uncin boolean() con%ierte el n3mero . en un %alor !alse $ cualAuier otro n3mero en un %alor true.
int i < /;
boolean b < boolean(i); //1si'na !alse a b
int n < 62;
b < boolean(n); //1si'na true a b
$trin' s < W!alseW;
b < boolean(s); //1si'na !alse a b
;a 9uncin b;te() con%ierte cualAuier %alor en una re1resentacin de )$te. ;a 1ro9undidad numrica es tan
solo de O*2+ a *24. =in em)argo< si el n3mero esta 9uera del rango< la 9uncin lo con%ierte en una
re1resentacin en )$te.
Ignacio Buioli | Jaime Prez Marn "*
!loat ! < :3#/;
b;te b < b;te(!); //1si'na :3 a b
char c < ^-^;
b < b;te(c); //1si'na :7 a b
! < 60/#/;
b < b;te(!); //1si'na 562: a b
;a 9uncin char() con%ierte cualAuier %alor numrico en un car,cter. El numero corres1onde a una
re1resentacin de la ta)la -=!II.
int i < :3;
b;te ; < K2#/;
char c < char(i); //1si'na ^1^ a c
c < char(;); //1si'na ^\^ a c
;a 9uncin !loat() con%ierte cualAuier clase de dato en un n3mero decimal. Es usado 9recuentemente
cuando :acemos c,lculos matem,ticos.
int i < 2;
int < 0;
!loat !6 < i/; //1si'na /#/ a !6
!loat !2 < i/!loat(); //1si'na /#::::::K a !2
;a 9uncin int() con%ierte cualAuier clase de datos en un n3mero entero. Es mu$ utilizado 1ara redondear
un resultado !loat $ as este no ocu1e demasiada memoria innecesariamente. En muc:as casos :a$
9unciones Aue de%uel%en %alores !loat $ en necesario con%ertirlos.
!loat ! < :3#0;
int i < int(!); //1si'na :3 a i
char c < ^-^;
i < int(c); //1si'na :7 a i
;a 9uncin str() con%ierte cualAuier clase de datos en una re1resentacin $trin'.
int i < 0;
$trin' s < str(i); //1si'na W0W a s
!loat ! < 562#:;
s < str(!); //1si'na W562#:W a s
boolean b < true;
s < str(b); //1si'na WtrueW a s
;a 9uncin n!() @Aue se %er, m,s adelanteC 1ro%ee de mas control cuando con%ertimos un int o un !loat
a un $trin'.
-3-jetos
;as %aria)les ti1o $trin'< ABma'e $ AHont son del ti1o o)8eto. ;as %aria)les dentro de un o)8eto se
denominan campos $ las 9unciones se denominan m7todos. =e 1uede acceder a los cam1os $ a los mtodos
con el o1erador punto @.C. El o1erador 1unto 9unciona como 1uente entre el nom)re del o)8eto $ el elemento
dentro del mismo. ABma'e1 AHont $ $trin' son o)8etos< $ 1or tanto 1oseen elementos.
;os o)8eto ti1o ABma'e 1oseen dos 9unciones Aue almacenan el anc:o $ el alto de la imagen cargada. =e
llaman< de manera a1ro1iada< Nidth @anc:oC $ hei'ht @altoC. Para acceder a ellas< se escri)e el nom)re del
o)8eto seguido 1or el o1erador 1unto $ el nom)re de la 9uncin.
Ignacio Buioli | Jaime Prez Marn "2
ABma'e im' < loadBma'e(WbuenosYaires#p'W); //*ar'a una Bma'en de 02/ x 2./
pixeles
int N < im'#Nidth; //1si'na 02/ to N
int h < im'#hei'ht; //1si'na 2./ to h
println(N); //Bmprime W02/W
println(h); //Bmprime W2./W
M,s adelante< se discutir,n una gran %ariedad de 9unciones del o)8eto ABma'e.
Por otro lado< el o)8eto $trin' 1osee tam)in una gran cantidad de elementos Aue lo com1onen. Fno de
ellos es el mtodo len'th()1 el cual regresa de %alor la cantidad de caracteres Aue lo com1onen
$trin' s6 < WTocar AianoW;
$trin' s2 < WTW;
println(s6#len'th()); //Bmprime W66W
println(s2#len'th()); //Bmprime W6W
;os mtodos startsIith() $ endsIith() e%al3an cuando un $trin' em1ieza o termina< siem1re $
cuando se utilice el 1ar,metros adecuados
$trin' s6 < W=uenos 1iresW;
println(s6#startsIith(W=W)); //Bmprime WtrueW
println(s6#startsIith(W1iresW)); //Bmprime W!alseW
println(s6#endsIith(W1iresW)); //Bmprime WtrueW
El mtodo char1t() es usado 1ara leer un solo car,cter de un &tring. 0eci)e como 1ar,metro un n3mero
Aue indica la u)icacin del mismo
$trin' s < WMerdeW;
println(s#char1t(/)); //Bmprime WMW
println(s#char1t(2)); //Bmprime WrW
println(s#char1t(.)); //Bmprime WeW
El mtodo to*har1rra;() crea un nue%o arra$ de caracteres del contenido del $trin':
$trin' s < W1(ulW;
charà c < s#to*har1rra;();
println(c`/a); //Bmprime W1W
println(c`6a); //Bmprime W(W
El mtodo substrin'() es usado 1ara leer a 1orcin del $trin'. - di9erencia de char1t() Aue solo lee
un car,cter< substrin'() 1uede leer un $trin' de caracteres. =e utiliza de 1ar,metro un n3mero Aue
indica la 1osicin de un car,cter $ de%uel%e un $trin' desde esa 1osicin 1ara delante. =i se utilizan dos
1ar,metros determina una 1orcin es1ec9ica.
$trin' s < WXialloW;
println(s#substrin'(2)); //Bmprime WalloW
println(s#substrin'(.)); //Bmprime WloW
println(s#substrin'(6, .)); //Bmprime WialW
println(s#substrin'(/, s#len'th()56)); //Bmprime WXiallW
El mtodo to@oNer*ase() 1uede usarse 1ara de%ol%er una co1ia del $trin' com1letamente en
min3sculas. 'e la misma 9orma< to&pper*ase() :ace lo mismo 1ero de%uel%e el te6to en ma$3sculas.
$trin' s < WNe'roW;
println(s#to@oNer*ase()); //Bmprime Wne'roW
println(s#to&pper*ase()); //Bmprime WN-X>?W
!omo un $trin' es un o)8eto< no es 1osi)le com1arar resultados con el o1erador relacional de igualdad
@<<C. =in em)argo< el mtodo eGuals() del o)8eto $trin' sir%e 1recisamente 1ara eso. !om1ara el
contenido de dos %aria)les $trin'.
$trin' s6 < W=lancoW;
$trin' s2 < W=lancoW;
$trin' s0 < WNe'roW;
println(s6#eGuals(s2)); //Bmprime WtrueW
println(s6#eGuals(s0)); //Bmprime W!alseW
&nidad 13
6i+ograf@a' 4isuali2acin
AHont, loadHont(), textHont(), text()
text$i(e(), text@eadin'(), text1li'n(), textIidth()
;as letras en una 1antalla son creadas 1or esta)lecer el color de los 16eles en una determinada u)icacin.
Por lo tanto< la calidad de la ti1ogra9a se %e limitada 1or la resolucin de la 1antalla. !omo las 1antallas
tienen una resolucin )a8a en com1aracin con el 1a1el< se :an desarrollado tcnicas 1ara me8orar la
a1ariencia del te6to en la misma. ;as 9uentes de las 1rimeras com1utadoras de -11le Macintos: esta)an
com1uestas 1or 1eAueGas im,genes de ma1a de )its< creadas es1ec9icamente en tamaGos como de *.< *2<
$ 24 1untos. Ftilizando esta tecnologa< una %ariacin de cada 9uente 9ue diseGada 1ara cada tamaGo de un
ti1o de letra en 1articular. Por e8em1lo< el car,cter de un ti1o de letra en el =an #rancisco< utiliza una imagen
di9erente 1ara mostrar el car,cter en un tamaGo de *2 $ *4. Por otra 1arte< cuando la im1resora ;aserIriter
se introdu8o en *&4/< la tecnologa Postscri1t de9ini 9uentes con una descri1cin matem,tica del esAuema de
cada car,cter. Este ti1o 1ermiti< en la 1antalla< una escala de tamaGos grandes. -11le $ Microso9t
desarrollaron< m,s tarde< el 5rue5$1e< otro 9ormato de 9uente. 0ecientemente< estas tecnologas se 9usionaron
en el 9ormato 71en5$1e. Mientras tanto< el mtodo 1ara sua%izar te6to de 1antalla en )lancoO$Onegro se
introdu8o. Estas tcnicas del ti1o anti+aliasing utilizan 16eles grises en el )orde de los caracteres 1ara
com1ensar la )a8a resolucin de 1antalla.
-$argando ,uentes * #i-ujando 6e%to
-ntes Aue las letras sean mostradas en la %entana de Processing< es necesario cargar la 9uente $ 1ara esto
de)emos con%ertir el arc:i%o en uno de 9ormato (;I. Para esto< Processing nos o9rece una sencilla
:erramienta. En el men3 K5oolsL @:erramientasC seleccionar la o1cin K!reate #ontL @!rear #uenteC. Fn
%entana se a)rir, $ le mostrar, las 9uentes Aue tiene actualmente instaladas en su eAui1o $ Aue 1ueden ser
con%ertidas al 9ormato es1ec9ico. =eleccione la 9uente deseada de la lista $< a continuacin< :aga clicH en
K7XL. ;a 9uente se co1iar, $ con%ertir, al 9ormato (;I. ;uego< autom,ticamente< ser, mo%ida a la car1eta
K'ataL de su =Hetc: @de 9orma similar a como se carga una imagenC.
!omo en las 1rimeras com1utadoras de -11le Macintos:< el 9ormato (;I 1ermite cargar el al9a)eto de una
9uente como una serie de sim1les im,genes. En la %entana del K!reate #ontL tam)in se encuentra una
o1cin Aue 1ermite seleccionar el tamaGo al e61ortar al 9uente en un 9ormato (;I. Esto es 3til< $a Aue 9uentes
mu$ grandes reAuieren ma$or cantidad de memoria. =i se %a a utilizar una 9uente no mas grande Aue *2<
e61ortarla en tamaGo &" ser, totalmente innecesario.
'es1us Aue la 9uente es creada< antes de Aue el 1rograma la 1ueda utilizar es necesario cargarla en el
mismo. Processing 1osee un ti1o de dato llamado AHont< en el Aue de)en cargarse las 9uentes. =e crea una
nue%a %aria)le ti1o AHont $ se utiliza las 9uncin loadHont() 1ara cargarla. ;a 9uncin de textHont() se
utiliza 1ara seleccionar la 9uente Aue se Auiere utilizar. Por 3ltimo< el te6to es escrito con la 9uncin text().
text(datos, x, ;)
text(strin'datos, x, ;, ancho, alto)
El 1ar,metro datos 1uede ser un $trin'1 char1 int o !loat. El 1ar,metro stringdatos es un 1ar,metro
Aue solo ace1ta datos ti1o $trin'. ;os 1ar,metros ( e y cam)ian la 1osicin :orizontal $ %ertical del te6to
@como en cualAuier 9igura o imagenC. E6isten los 1ar,metros o1cionales ancho $ alto< los cuales modi9ican el
tamaGo del te6to. ;a 9uncin !ill() controla el color del te6to $ la trans1arencia< as como tam)in a9ecta a
9iguras como ellipse() o rect(). El te6to no es a9ectado 1or stro)e().
;os siguientes e8em1los utilizan una 9uente llamada -ressence< 1ara Aue 1ueda %er su te6to aseg3rese de
cargar su 1ro1ia 9uente $ cargarla correctamente @con la e6tensinC en la 9uncin loadHont().
Ignacio Buioli | Jaime Prez Marn "/
AHont !ont; // Declare the ,ariable
!ont < loadHont(W1ressence502#,lNW); //*ar'a la !uente
textHont(!ont); //$elecciona la !uente actual
!ill(/);
text(W@1ZW, /, ./); //-scribe W@1ZW en la posicin (/,./)
text(W1C$W, /, K/); //-scribe W1C$W en la posicin (/,K/)
text(WH>1W, /, 6//); //-scribe WH>1W en la posicin (/,6//)
AHont !ont;
!ont < loadHont(W1ressence502#,lNW);
textHont(!ont);
!ill(/);
text(67, /, 0:); //-scribe 67 en la posicin (/,0:)
text(K2, /, K/); //-scribe K2 en la posicin (/,K/)
text(^>^, :2, K/); //-scribe ^>^ en la posicin (:2,K/)
AHont !ont;
textHont(!ont);
!ill(/);
$trin' s < WArocessin' est" escribiendo TextoW;
text(s, 6/, 2/, D/, 3/);
AHont !ont;
textHont(!ont);
!ill(233); //=lanco
text(WD1VW, /, ./);
!ill(/); //Ne'ro
text(W*MXW, /, K/);
!ill(6/2); //Xris
text(W1T@W, /, 6//);
AHont !ont;
!ont < loadHont(W1ressence5K2#,lNW);
textHont(!ont);
!ill(/, 6:/); //Ne'ro con baa ?pacidad
text(W6W, /, D/);
text(W2W, 63, D/);
text(W0W, 0/, D/);
text(W.W, .3, D/);
text(W3W, :/, D/);
5am)in 1ueden utilizarse dos 9uentes distintas en el mismo 1rograma< 1ero de)er,n crearse dos %aria)les
ti1o AHont Aue las almacenen
AHont !ont6, !ont2;
!ont6 < loadHont(W1ressence502#,lNW);
!ont2 < loadHont(W1rhermann502#,lNW);
!ill(/);
textHont(!ont6);
text(WXN&W, :, .3);
textHont(!ont2);
text(WXN&W, :, D/);
-/tri-utos de 6e%to
Processing inclu$e 9unciones 1ara controlar la 9orma en la Aue el te6to se muestra @1or e8em1lo< alterando su
tamaGo o alineacinC. Processing< adem,s< 1uede calcular el anc:o de alg3n car,cter o gru1o de caracteres $
Ignacio Buioli | Jaime Prez Marn ""
1onerlo en 9uncin de alguna 9igura o 9orma.
;as 9uentes en Processing son tomadas como im,genes< $ no como %ectores. Por eso si la 9uente Aue
cargamos est, en *2 de tamaGo< $ luego la agrandamos a &"< se %er, desen9ocada. ;a 9uncin correcta 1ara
cam)iar el tamaGo de la 9uente es la de text$i(e().
text$i(e(tama+o)
El 1ar,metro tama8o de9ine la dimensin Aue ocu1ar,n las letras en unidades de 16eles.
//>educcin del tama+o de la letra
AHont !ont;
textHont(!ont);
!ill(/);
text(W@NbW, /, ./); //Xrande
text$i(e(6D);
text(W$TNW, /, K3); //Cediano
text$i(e(62);
text(W=?$W, /, 6//); //AeGue+o
//1'randar tama+o de letra
AHont !ont;
textHont(!ont);
text$i(e(02);
!ill(/);
text(W@NbW, /, ./); //Xrande
text$i(e(6D);
text(W$TNW, /, K3); //Cediano
text$i(e(62);
text(W=?$W, /, 6//); //AeGue+o
;a 9uncin text@eadin'() 1ermite alterar el es1acio entre lineas
text@eadin'(dist)
;a 1ro1iedad dist de9ine la distancia del es1acio en unidad de 1i6eles.
AHont !ont;
textHont(!ont);
$trin' lines < W@6 @2 @0W;
text@eadin'(6/);
!ill(/);
text(lines, 3, 63, 0/, 6//);
text@eadin'(2/);
text(lines, 0:, 63, 0/, 6//);
text@eadin'(0/);
text(lines, :D, 63, 0/, 6//);
-dem,s< el te6to 1uede ser marginado al centro< a la izAuierda o a la derec:a utilizando la 9uncin
text1li'n()
text1li'n(C?D?)
En este caso< el modo es una constante Aue 1uede ser *-NT-> @centroC< >BX\T @derec:aC $ @-HT
Ignacio Buioli | Jaime Prez Marn "+
@izAuierdaC< $ se re9iere sim1lemente a la alineacin Aue tendr, el te6to mostrado en 1antalla.
AHont !ont;
textHont(!ont);
line(3/, /, 3/, 6//);
!ill(/);
text1li'n(@-HT);
text(WB(GuierdaW, 3/, 2/);
text1li'n(>BX\T);
text(WDerechaW, 3/, ./);
text1li'n(*-NT->);
text(W*entroW, 3/, D/);
;a 9uncin textIidth() calcula $ regresa el anc:o de 1i6el de un car,cter o te6to. El calculo se realiza
de1endiendo de las 1ro1iedades de textHont() $ text$i(e(). Na Aue cada car,cter 1osee un anc:o
di9erente entre s< es im1osi)le sa)er la medida e6acta de una cadena de caracteres. Para esos casos donde
necesitamos una medida es1ec9ica< o conocer el tamaGo de nuestra cadena< se utiliza esta 9uncin.
AHont !ont;
textHont(!ont);
!ill(/);
char c < ^&^;
!loat cN < textIidth(c);
text(c, 22, ./);
rect(22, .2, cN, 3);
$trin' s < W&*W;
!loat sN < textIidth(s);
text(s, 22, K:);
rect(22, KD, sN, 3);
&nidad 18
5ate(1ticas' 6rigono(etr@a
AB, L&1>T->YAB, \1@HYAB, TI?YAB, radians(), de'rees()
sin(), cos(), arc()
;a trigonometra 1ermite de9inir relaciones entre lados $ ,ngulos de los tri,ngulos. ;a 9unciones
trigonomtricas de seno $ coseno nos 1ermiten generar n3meros re1etiti%os 1ara di)u8ar ondas< arcos<
crculos $ es1irales.
-Engulos * 3ndas
;os grados son una 9orma com3n de medir ,ngulos. Fn ,ngulo recto es de &.Y< a mitad de camino< alrededor
de un crculo< es *4.Z< $ el crculo com1leto es de 3".Z. -l tra)a8ar con trigonometra< los ,ngulos se miden
en unidades llamadas radianes. Ftilizando los radianes< el ,ngulo de un %alor se e61resa en relacin con el
%alor de [ de matem,tica< escrito en caracteres latinos como \1i\. En trminos de unidades radianes< el
,ngulo recto es [B2< a mitad de camino alrededor de un crculo es sim1lemente [ < $ el 1unto de 1artida es
2[.

El %alor numrico de [ es una constante Aue es in9initamente larga $ sin ning3n 1atrn de re1eticin. Es la
razn de la circun9erencia de un crculo a su di,metro. -l escri)ir el cdigo en Processing< se 1uede utilizar la
constante matem,tica P9 1ara re1resentar a este n3mero. 7tros %alores de uso de [ se e61resa con las
constantes :;A<,%<=P91 HAL.=P9 $ ,>?=P9. =i se e8ecuta la siguiente lnea de cdigo< se 1odr, %er el
%alor de [ con sus 4 dgitos signi9icati%os
println(AB); //Bmprime el ,alor de c en la consola
En el uso cotidiano< el %alor numrico de [ suele denominarse como 3<*4. 'e esta manera< los ,ngulos
1uede con%ertirse en radianes a tra%s de la 9uncin radians()< $ %ice%ersa con la 9uncin de'rees().
!loat r6 < radians(7/);
!loat r6 < radians(6D/);
println(r6); //Bmprime W6#3K/K7:.W
println(r2); //Bmprime W0#6.6372KW
!loat d6 < de'rees(AB);
!loat d2 < de'rees(TI?YAB);
println(d6); //Bmprime W6D/#/W
println(d2); //Bmprime W0:/#/W
=i uno tiene 1re9erencia 1or el tra)a8o en ,ngulos< se %uel%e mu$ 1r,ctico el utilizar la 9uncin de con%ersin
Ignacio Buioli | Jaime Prez Marn "&
1ara estar m,s cmodo a la :ora de 1rogramar.
Por otro lado< las 9unciones sin() $ cos() determinan el %alor de seno $ coseno< res1ecti%amente< de un
,ngulo determinado. -m)as 9unciones ace1tan tan solo * 1ar,metro
sin(an'ulo)
cos(an'ulo)
El 1ar,metro angulo es siem1re un %alor en radianes es1ec9ico. El %alor Aue de%uel%e es del ti1o decimal
entre O*.. $ *... ;as relaciones esta)lecidas entre el %alor en radianes $ el %alor de su seno son mostradas en
el siguiente gr,9ico
-
- medida Aue el %alor del ,ngulo incrementa su %alor< el %alor de seno se re1ite. En el %alor de ,ngulo .< el
%alor de seno tam)in es .. - medida Aue comienza a aumentar el ,ngulo< el seno decrece< :asta llegar a
&.Y< donde el seno aumenta< 1asando 1or el %alor *4.Y @en cual el seno %uel%e a ser .C :asta el 2+.Y @donde
el seno llega a su 1unto mas altoC. Por 3ltimo< cuando el %alor llega a 3".Y< el seno %uel%e a ser .< $ el ciclo
%uel%e a re1etirse. ;os %alores del seno 1ueden ser %isto en su totalidad sim1lemente 1or ser u)icados dentro
de una estructura H?>
!or (!loat an'le < /; an'le 9 TI?YAB; an'le 4< AB/2.#/) R
println(sin(an'le));
S
!omo los %alores de seno son entre O*.. $ *.. son mu$ 9,ciles de usar en una com1osicin. Por e8em1lo< al
multi1licarlos 1or /.< o)tendremos un rango de entre O/... $ /...
println(sin(an'le) * 3/#/);
S
Para con%ertir %alores de seno en n3meros 1ositi%os< :a$ Aue sumar el %alor *.. 1ara Aue el rango 1ase a ser
de ... a 2... ;uego< al di%idir esos %alores 1or 2.. o)tendremos un rango entre ... $ *... ;a 9uncin de
map() tam)in 1uede utilizarse 1ara sim1li9icar el tra)a8o. En el siguiente e8em1lo se 1onen los %alores de
seno en un rango entre . $ *...
Ignacio Buioli | Jaime Prez Marn +.
!loat neNMalue < map(sin(an'le), 56, 6, /, 6///);
println(neNMalue);
S
=i utiliz,ramos estos %alores seno en una coordenadaO$< 1ara di)u8ar una serie de 1untos< o)tendremos como
resultado una onda.
si(e(K//, 6//);
no$tro)e();
!ill(/);
!loat an'le < /#/;
!or (int x < /; x 9< Nidth; x 4< 3) R
!loat ; < 3/ 4 (sin(an'le) * 03#/);
rect(x, ;, 2, .);
an'le 4< AB/./#/;
S
-l reem1lazar algunos n3meros con %aria)les< 1ermiten controlar la 9orma de onda de una 9orma m,s e6acta.
;a %aria)le offset controla la coordenadaO$ de la onda< la %aria)le scaleVal controla el anc:o de a onda $ la
%aria)le angle9nc controla la %elocidad con la cual aumenta el ,ngulo de la onda< creando una onda de ma$or
o menor 9recuencia.
si(e(K//, 6//);
no$tro)e();
smooth();
!ill(/);
!loat o!!set < 3/#/; //*ompensacin en V
!loat scaleMal < 03#/; //-scala el ,alor de la ma'nitud de
?nda
!loat an'leBnc < AB/2D#/; //Bncremento entre "n'ulos
!loat an'le < /#/; //-l "n'ulo recibe ,alores desde /
!or (int x < /; x 9< Nidth; x 4< 3) R
!loat ; < o!!set 4 (sin(an'le) * scaleMal);
rect(x, ;, 2, .);
an'le 4< an'leBnc;
S
En el caso de la 9uncin cos()< regresa el coseno de un ,ngulo. En otras 1ala)ras< son los mismos %alores
Aue en seno< con la di9erencia Aue :a$ una com1ensacin de &.Y.
Ignacio Buioli | Jaime Prez Marn +*
si(e(K//, 6//);
no$tro)e();
smooth();
!loat o!!set < 3/#/;
!loat scaleMal < 2/#/;
!loat an'leBnc < AB/6D#/;
!loat an'le < /#/;
!or (int x < /; x 9< Nidth; x 4< 3) R
!ill(233);
rect(x, ;, 2, .);
; < o!!set 4 (cos(an'le) * scaleMal);
!ill(/);
rect(x, ;, 2, .);
an'le 4< an'leBnc;
S
;os siguientes e8em1los muestran una manera de generar 9ormas utilizando la 9uncin sin().
si(e(K//, 6//);
!loat o!!set < 3/;
!loat scaleMal < 0/#/;
!loat an'leBnc < AB/3:#/;
!loat an'le < /#/;
be'in$hape(T>B1NX@-Y$T>BA);
!or (int x < . ; x 9< Nidth43; x 4< 3) R
!loat ; < sin(an'le) * scaleMal;
i! ((x P 2) << /) R //Xenera un loop
,ertex(x, o!!set 4 ;);
S else R
,ertex(x, o!!set 5 ;);
S
an'le 4< an'leBnc;
S
end$hape();
Ignacio Buioli | Jaime Prez Marn +2
si(e(K//, 6//);
smooth();
stro)eIei'ht(2);
!loat o!!set < 62:#/;
!loat scaleMal < 62:#/;
!loat an'leBnc < /#.2;
!loat an'le < /#/;
!or (int x < 532; x 9< Nidth; x 4< 3) R
stro)e(;);
line(x, /, x43/, hei'ht);
an'le 4< an'leBnc;
S
si(e(K//, 6//);
smooth();
!ill(233, 2/);
!loat scaleMal < 6D#/;
!loat an'leBnc < AB/2D#/;
!loat an'le < /#/;
!or (int o!!set < 56/; o!!set 9 Nidth46/; o!!set 4< 3) R
!or (int ; < /; ; 9< hei'ht; ; 4< 2) R
!loat x < o!!set 4 (sin(an'le) * scaleMal);
no$tro)e();
ellipse(x, ;, 6/, 6/);
stro)e(/);
point(x, ;);
an'le 4< an'leBnc;
S
an'le 4< AB;
S
-$@rculos, /rcos * Es+irales
;os crculos 1ueden ser di)u8ados directamente desde ondas seno $ coseno. En el siguiente e8em1lo< el
,ngulo aumenta de a *2Y :asta com1letar los 3".Y Aue tiene un crculo. En cada 1aso< la 9uncin cos() se
utiliza 1ara determinar la 1osicin en 6< $ la 9uncin sin@C se utiliza 1ara la 1osicin en $. Na Aue am)as
9unciones de%uel%en tan solo %alores entre O*.. $ *..< el resultado es multi1licado 1or la %aria)le radio1 la cual
%ale 34. Por 3ltimo< al agregar /. a cada %alor< el crculo se mantendr, en la 1osicin @/.</.C.
no$tro)e();
smooth();
int radio < 0D;
!or (int de' < /; de' 9 0:/; de' 4< 62) R
!loat an'le < radians(de');
!loat x < 3/ 4 (cos(an'le) * radio);
!loat ; < 3/ 4 (sin(an'le) * radio);
ellipse(x, ;, :, :);
S
=i el ,ngulo al incrementar no 9inaliza en los 3".Y< entonces 1uede 9ormarse un sim1le arco
no$tro)e();
smooth();
int radius < 0D;
!or (int de' < /; de' 9 22/; de' 4< 62) R
!loat x < 3/ 4 (cos(an'le) * radius);
!loat ; < 3/ 4 (sin(an'le) * radius);
S
Para sim1li9icar el tra)a8o con arcos< Processing inclu$e la 9uncin arc().
arc(x, ;, ancho, alto, iniciar, parar)
;os arcos son di)u8ados a 1artir de una eli1se in%isi)le< cu$os 1ar,metros est,n determinados 1or (1 y1 ancho
$ alto. ;os 1ar,metros iniciar $ parar necesitan de unidades en radianes 1ara generar la cur%atura del arco.
;os siguientes e8em1los muestran un sencillo uso de los mismos
stro)eIei'ht(2);
arc(3/, 33, 3/, 3/, /, \1@HYAB);
arc(3/, 33, :/, :/, \1@HYAB, AB);
arc(3/, 33, K/, K/, AB, TI?YAB 5 \1@HYAB);
noHill();
arc(3/, 33, D/, D/, TI?YAB 5 \1@HYAB, TI?YAB);

smooth();
noHill();
random$eed(/);
stro)eIei'ht(6/);
stro)e(/, 63/);
!or (int i < /; i 9 6:/; i 4< 6/) R
!loat be'in < radians(i);
!loat end < be'in 4 \1@HYAB;
arc(:K, 0K, i, i, be'in, end);
S
=i se desea crear es1irales< sim1lemente se multi1lica el seno $ coseno 1or una escala de %alores
ascendentes o descendentes.
no$tro)e();
smooth();
!loat radius < 6#/;
!or (int de' < /; de' 9 0:/*:; de' 4< 66) R
!loat x < K3 4 (cos(an'le) * radius);
!loat ; < .2 4 (sin(an'le) * radius);
radius < radius 4 /#0.;
S
smooth();
!loat radius < /#63;
!loat cx < 00; //*entro de coordenadas x e ;
!loat c; < ::;
!loat px < cx; //-mpie(a con el centro como
!loat p; < c;; //las coordenadas anteriores
!or (int de' < /; de' 9 0:/*3; de' 4< 62) R
!loat x < cx 4 (cos(an'le) * radius);
!loat ; < c; 4 (sin(an'le) * radius);
line(px, p;, x, ;);
radius < radius * 6#/3;
px < x;
p; < ;;
S
Ignacio Buioli | Jaime Prez Marn +/
/+!ndice de Engulos 5ate(1ticos
Ignacio Buioli | Jaime Prez Marn +"
&nidad 1<
5ate(1ticas' /leatoriedad
random(), random$eed(), noise(), noise$eed()
;o aleatorio tiene una 9undamental im1ortancia en nuestra :istoria< es1ecialmente en el arte moderno. !on
acciones como arrastrar o)8etos< rom1erlos< $ dem,s< los artistas generar una 1ieza con cierto ni%el de %alor
aleatorio. Por e8em1lo< una tcnica mu$ usada de este estilo es llenar 1eAueGas )olsas con 1intura $ u)icarlas
en un lienzo. Posteriormente< se lanzan dardos Aue rom1en estas )olsas $ de8an caer la 1intura de una 9orma
com1letamente ines1erada< $ con resultados de te6turas mu$ interesantes. Es as< como se 1resenta un
contraste mu$ ele%ado entre una estructura rgida $ el com1leto caos.
-4alores Ines+erados
;a 9uncin random() 1ermite de%ol%er un %alor com1letamente aleatorio e ines1erado de un rango
es1eci9icado 1or 1ar,metros
random(alto)
random(bao, alto)
;a 9uncin regresa un %alor aleatorio decimal @!loatC desde el . :asta el 1ar,metro alto. 7tra 9orma de
ingresar 1ar,metros a la 9uncin es a tra%s de dos 1ar,metros en lugar de uno solo. El %alor ba'o ser, el
1rimer %alor del rango< $ el %alor alto ser, el 3ltimo. Eso signi9ica Aue si ingresamos el %alor 3 1rimero< $ luego
el %alor /< nos de%ol%er, un %alor aleatorio decimal entre< 1or su1uesto< 3 $ /. -dem,s< ace1ta 1er9ectamente
%alores negati%os.
El %alor siem1re ser, del ti1o !loat. =i se deseara o)tener un %alor aleatorio 1ero entero @intC< de)eremos
recurrir a la 9uncin int() 1ara con%ertirlo.
!loat ! < random(3#2); //1si'na a ! un ,alor decimal entre / ; 3#2
int i < random(3#2); //->>?>Q No se puede asi'nar un ,alor aleatorio a
//una ,ariable int
int < int(random(3#2)); //1si'na a un ,alor entero entre / to 3
Na Aue< como Aueda dic:o< los %alores Aue de%uel%e %alores im1redeci)les< cada %ez Aue el 1rograma se
e8ecuta o)tendremos di9erentes resultados. Este n3mero 1uede ser utilizado 1ara controlar alg3n as1ecto del
1rograma.
smooth();
stro)eIei'ht(6/);
stro)e(/, 60/);
line(/, random(6//), 6//, random(6//));
=i utilizamos la %ersin de random() Aue ace1ta dos 1ar,metros< tendremos mas control so)re algunas
1ro1iedades.
smooth();
stro)eIei'ht(2/);
stro)e(/, 20/);
!loat r < random(3, .3);
stro)e(r * 3#:, 20/);
Ignacio Buioli | Jaime Prez Marn ++
line(/, r, 6//, random(33, 73));
r < random(3, .3);
stro)e(r * 3#:, 20/);
line(/, r, 6//, random(33, 73));
r < random(3, .3);
stro)e(r * 3#:, 20/);
line(/, r, 6//, random(33, 73));
Podemos< adem,s< crear com)inaciones. Por e8em1lo< 1odemos utilizar un ciclo H?> 1ara crear te6turas mu$
interesantes $ sacar ma$or 1ro%ec:o al la aleatoriedad.
bac)'round(/);
smooth();
stro)e(233, :/);
!or (int i < /; i 9 6//; i44) R
!loat r < random(6/);
stro)eIei'ht(r);
!loat o!!set < r * 3#/;
line(i52/, 6//, i4o!!set, /);
S
;os %alores aleatorios determinan el 9lu8o de un 1rograma. Por lo tanto< 1odemos im1lementarlos 8unto con
alguna e61resin relacional< 1or e8em1lo un I#. En el siguiente e8em1lo< se e%al3a si el %alor es ma$or o
menor Aue /.< $ di)u8a una 9igura di9erente de1endiendo el caso
!loat r < random(6//);
i! (r 9 3/#/) R
line(/, /, 6//, 6//);
S else R
ellipse(3/, 3/, K3, K3);
S
5am)in 1odemos utilizarlo 1ara limitar la 9recuencia con la Aue se di)u8a alguna 9igura
int num < int(random(3/)) 4 6;
!or (int i < /; i 9 num; i44) R
line(i * 2, /, i * 2, 6//);
S
- %eces deseamos conseguir un %alor aleatorio< 1ero Aueremos 9orzar a Aue siem1re sea el mismo. Para eso
se utiliza la 9uncin random$eed(). Esta es la manera en la Aue 1roduciremos dic:os n3meros
random$eed(,alor)
El 1ar,metro $alor tiene Aue ser del ti1o entero @intC. Ftilizar el mismo n3mero 1roducir, siem1re el mismo
orden de %alores. Es decir< mantendremos un %alor aleatorio< 1ero 9orzaremos a Aue siem1re se trate del
mismo %alor.
int s < :; //Malor del $eed
bac)'round(/);
smooth();
stro)e(233, :/);
random$eed(s); //Aroduce el mismo nEmero cada ,e(
!or (int i < /; i 9 6//; i44) R
!loat r < random(6/);
stro)eIei'ht(r);
!loat o!!set < r * 3;
line(i52/, 6//, i4o!!set, /);
S
-;oise
;a 9uncin noise() nos 1ermite tener un am1lio control en los %alores aleatorios Aue creamos.
Princi1almente< se utiliza 1ara crear mo%imientos org,nicos. Ja$ tres %ersiones de la 9uncin< ace1ta un
1ar,metro< dos 1ar,metros e incluso tres 1ar,metros
noise(x)
noise(x, ;)
noise(x, ;, ()
;a %ersin de un solo 1ar,metro 1ermite crear una sim1le secuencia de n3meros aleatorios. Por ende< m,s
cantidad de 1ar,metros 1ermiten crear mas dimensiones de aleatoriedad. 'os 1ar,metros 1ueden ser usados
1ara crear te6turas en dos dimensiones< mientras Aue tres 1ar,metros 1ueden utilizarse 1ara crear 9iguras en
tres dimensiones o mo%imientos de animacin %ariados. Inde1endientemente del %alor ingresado< siem1re se
de%uel%e un %alor entre ... $ *... =i se desea otra clase de %alor< se 1uede recurrir a alguna de las
o1eraciones aritmticas $a %istas.
;os n3meros generados 1or esta 9uncin< 1ueden ser utilizados 1ara 1roducir le%es cam)ios dentro de un
mismo rango. Por e8em1lo< mo%imientos mu$ cortos 1ero aleatorios de la misma 9igura @Aue sumados a
%alores seno $Bo coseno 1roducir,n una %ariedad de mo%imientos org,nicosC. Por lo general< los me8ores
%alores 1ara tra)a8ar son los Aue %an de entre ..../ $ ..3< 1ero de1ende de Aue es lo Aue se Auiera
conseguir. -dem,s< 1osee en adicin la 9uncin noise$eed() la cual tra)a8a e6actamente igual Aue
random$eed(). En el siguiente e8em1lo se incor1orar< tam)in< una %aria)le inc< la cual se utiliza 1ara
controlar las di9erencias entre %alores aleatorios
inc < /#6
inc < /#/6
si(e(://, 6//);
!loat , < /#/;
!loat inc < /#6;
no$tro)e();
!ill(/);
noise$eed(/);
!or (int i < /; i 9 Nidth; i < i4.) R
!loat n < noise(,) * K/#/;
rect(i, 6/ 4 n, 0, 2/);
Ignacio Buioli | Jaime Prez Marn +&
, < , 4 inc;
S
=i se utiliza el segundo 1ar,metro< se nos da la 1osi)ilidad de crear te6turas en dos dimensiones. En el
siguiente e8em1lo< se utiliza 8unto con %ariaciones de la %aria)le inc $ un ciclo H?> 1ueden utilizarse 1ara crear
sistemas mu$ interesantes
!loat xnoise < /#/;
!loat ;noise < /#/;
!loat inc < /#/.;
!or (int ; < /; ; 9 hei'ht; ;44) R
!or (int x < /; x 9 Nidth; x44) R
!loat 'ra; < noise(xnoise, ;noise) * 233;
stro)e('ra;);
point(x, ;);
xnoise < xnoise 4 inc;
S
xnoise < /;
;noise < ;noise 4 inc;
S
-:ora )ien< las com)inaciones con las estructuras $a %istas $ el e9ecto de la aleatoriedad del ti1o noise son
ilimitadas $ de muc:a %ariedad. Fn e9ecto interesante es com)inarlo con un %alor de seno 1ara generar una
te6tura con tur)ulencia.
!loat poNer < 0; //Bntensidad de la turbulencia
!loat d < D; //Densidad de la turbulencia
no$tro)e();
!or (int ; < /; ; 9 hei'ht; ;44) R
!or (int x < /; x 9 Nidth; x44) R
!loat total < /#/;
!or (!loat i < d; i 8< 6; i < i/2#/) R
total 4< noise(x/d, ;/d) * d;
S
!loat turbulence < 62D#/ * total / d;
!loat base < (x * /#2) 4 (; * /#62);
!loat o!!set < base 4 (poNer * turbulence /
23:#/);
!loat 'ra; < abs(sin(o!!set)) * 23:#/;
stro)e('ra;);
point(x, ;);
S
S
&nidad 1>
6ransfor(aciones' 5atrices * 6raslaciones
translate(), pushCatrix(), popCatrix()
El sistema de coordenadas introducido en la unidad de #ormas utiliza la esAuina su1erior izAuierda 1ara
%isualizar en la %entana de re1resentacin< con un origen en un sistema de coordenadas > e N. 'ic:o sistema
1uede ser modi9icado con trans9ormaciones. ;as coordenadas 1ueden< entonces< ser trasladadas< rotadas $
escaladas< de esta 9orma las 9iguras %ariar,n su 1osicin< rotacin $ tamaGo.
-6raslacin
;a 9uncin translate() mue%e el origen de la esAuina su1erior izAuierda @la cual 1or de9ecto se encuentra
en el .< .C a otra localizacin. -ce1ta dos 1ar,metros. El 1rimero es la coordenada en ( $ el segundo en y.
translate(x, ;)
;os %alores de ( $ de y Aue se ingresan a9ectan a cualAuier 9igura o 9orma Aue se 1retenda di)u8ar des1us.
=i *. es el 1ar,metro de (< $ 3. es el 1ar,metro de y< un 1unto di)u8ado en la 1osicin @.< /C se mostrar, en
la 1osicin @*.< 3/C.
//-l mismo rect"n'ulo es dibuado, pero solo el se'undo es
//a!ectado por la !uncin translate, ;a Gue este es dibuado
//lue'o de su declaracin
rect(/, 3, K/, 0/);
translate(6/, 0/); //Cue,e 6/ pixeles a la derecha ; 0/
rect(/, 3, K/, 0/); //abao
//$i se utili(ara un nEmero ne'ati,o,
//la posicin se mue,e de manera opuesta
rect(/, 3, K/, 0/);
translate(6/, 56/); //Cue,e 6/ pixeles a la derecha ;
rect(/, 3, K/, 0/); //otros 6/ arriba
Ja$ Aue tener en cuenta Aue la 9uncin translate() es aditi%a. =i translate(6/, 0/) se e8ecuta dos
%eces< entonces la 1osicin de )ase ser, (2/, :/).
rect(/, 3, K/, 0/);
translate(6/, 0/);//Cue,e 6/ pixeles a la derecha ; 0/ abao
rect(/, 3, K/, 0/)
translate(6/, 0/);//>epite traslacin, por lo tanto
rect(/, 3, K/, 0/);//mue,e 2/ pixeles a la derecha ; :/ abao
-$ontrolando 6ransfor(aciones
;a trans9ormacin 1or matri6 es un con8unto de n3meros Aue de9ine como< en trminos geomtricos< la 9igura
o 9orma es di)u8ada en 1antalla. 5rans9ormaciones $ 9unciones como translate()< alteran los n3meros en
esta matri6< 1ro%ocando Aue se di)u8e di9erente. En el e8em1lo anterior< :a)lamos de como estas
trans9ormaciones 1osean la caracterstica de acumularse entre s. Es as Aue la 9uncin pushCatrix() nos
sir%e 1ara guardar el estado de todas las trans9ormaciones en ese momento< as el 1rograma 1uede
de%ol%erlo m,s tarde. Para regresar al estado anterior< se llama a la 9uncin popCatrix().
(amos a 1ensar< entonces< a una matri6 como una :o8a de 1a1el Aue lle%a escrito en su su1er9icie una lista
con las trans9ormaciones Aue deseamos @trasladar< rotar< escalarC. !uando una 9uncin translate() se
e8ecuta< esta se agrega al 1a1el. Para guardar la actual matri6< 1ara utilizarla luego< agregamos una nue%a
:o8a de 1a1el 1or encima de la 1ila $ co1iamos la in9ormacin. !ualAuier cam)io Aue generemos en la :o8a de
arri)a< 1reser%ar,< sin em)argo< los n3meros originales Aue est,n de)a8o. Para %ol%er al sistema anterior de
coordenadas< sim1lemente retiramos la :o8a Aue Aued encima @en la cual realizamos los cam)iosC.
=ir%e 1ensarlo< 1ara Auienes mane8an 1rogramas al estilo del -do)e P:otos:o1 o EIMP< como Aue la matri6
es tan solo una ca1a. - dic:a ca1a 1odemos darle caractersticas di%ersas @trasladar< rotar< escalarC.
Es esencial como se ingresan dic:as coordenadas en una matri6< 1ero se trata tan solo de una terminologa
mas tcnica $ mec,nica. ;a 9uncin pushCatrix() se utiliza 1ara aGadir una nue%a coordenada al gru1o<
mientras Aue popCatrix() se utiliza 1ara remo%er dic:o gru1o. Por ende< la 9uncin pushCatrix() no
1uede ser utilizada sin popCatrix() $ %ice%ersa.
Para esto< com1araremos los siguientes e8em1los. -m)os di)u8an dos rect,ngulos< 1ero con di9erentes
resultados. En el segundo e8em1lo uno de los rect,ngulos se encuentra en una matri6 asociada a la 9uncin
translate().
translate(33, 0); //Mueve 33 pxeles a la !ere"#a
re"t(0, 20, 66, 30);
re"t(0, 50, 66, 30);
pus#Matrx();
translate(33, 0); //Mueve 33 pxeles a la !ere"#a
re"t(0, 20, 66, 30);
p$pMatrx(); //%e&ueve el &$v&ent$
//'a s(uente f$r&a n$ es afe"ta!a p$r translate(), )a *ue la
//transf$r&a"+n est, es"rta entre pus#Matrx()) p$pMatrx()
re"t(0, 50, 66, 30);
-l utilizar una ma$or cantidad de matrices< uno 1uede tener m,s control de todo lo Aue 1asa en el 1rograma.
En el siguiente e8em1lo< el 1rimer rect,ngulo es a9ectado 1or la 1rimer traslacin< el segundo 1or la 1rimera $
1or la segunda< el tercero solo 1or la 1rimera< $a Aue la segunda traslacin est, asociada a una matri6
es1eci9ica.
pushCatrix();
translate(2/, /);
rect(/, 6/, K/, 2/); //Dibua en (2/, 0/)
pushCatrix();
translate(0/, /);
rect(/, 0/, K/, 2/); //Dibua en (3/, 0/)
popCatrix();
rect(/, 3/, K/, 2/); //Dibua en (2/, 3/)
popCatrix();
rect(/, K/, K/, 2/); //Dibua en (/, K/)
;as trans9ormaciones restantes son incluidas en la siguiente unidad @Fnidad *+C.
&nidad 1?
6ransfor(aciones' =otacin * Escala
rotate!1 scale!
;as 9unciones de trans9ormacin son 1oderosas maneras 1ara cam)iar la geometra de un sector es1ec9ico
del 1rograma. Na sea 1or el uso de tan solo una< o 1or la com)inacin de %arias< se reAuiere entender como
tra)a8a cada una 1or se1arado. El orden en Aue las trans9ormaciones son escritas< a9ecta de 9orma mu$
notoria el com1ortamiento del 1rograma.
-=otando * Escalando
;a 9uncin rotate() 1ermite rotar las coordenadas de un sistema< de modo tal Aue las 9iguras $ 9ormas
sean di)u8adas con cierto ,ngulo. 0eci)e tan solo un 1ar,metro< el cual modi9ica la rotacin de acuerdo a un
,ngulo
rotate(an'ulo)
El 1ar,metro angulo asume Aue el %alor se encuentra en radianes. ;as 9iguras son siem1re rotadas en
relacin a la 1osicin de origen @.< .C. !omo en todas las trans9ormaciones< el e9ecto de rotacin tam)in es
acumulati%o. =i :a$ una rotacin de [B4 radianes $ otra de [B4 radianes< entonces la 9igura Aue se di)u8e se
rotar, en [B2 radianes.
smooth();
rect(33, /, 0/, .3);
rotate(AB/D);
rect(33, /, 0/, .3);
smooth();
rect(6/, :/, K/, 2/);
rotate(5AB/6:);
rect(6/, :/, K/, 2/);
rotate(5AB/D);
rect(6/, :/, K/, 2/);
Estos e8em1los de8an en claro Aue la rotacin a )ase de la 1osicin de origen tiene sus limitaciones. Mas
adelante se e61licar, como com)inar trans9ormaciones.
Por otro lado< la 9uncin scale() 1ermite controlar las coordenadas del sistemas 1ara magni9icarlas $ di)u8ar
9iguras de ma$or escala. Esta so1orta uno o dos 1ar,metros
scale(tama+o)
scale(xtama+o, ;tama+o)
;a %ersin de un solo 1ar,metro 1ermite escalar la 9igura en todas sus dimensiones< mientras Aue la de dos
1ar,metros a)arca la escala en el e8e 6 $ en el e8e $ de manera indi%idual. ;os 1ar,metros a ingresar se
e61resan como %alores decimales con una relacin de 1orcenta8es. Por e8em1lo< 2.. :ace alusin a 2..U< *./
a */.U< $ ../ a /.U.
smooth();
ellipse(02, 02, 0/, 0/);
scale(6#D);
ellipse(02, 02, 0/, 0/);
smooth();
ellipse(02, 02, 0/, 0/);
scale(2#D, 6#D);
ellipse(02, 02, 0/, 0/);
En los e8em1los anteriores se %e Aue el contorno de la 9igura es a9ectado 1or la escala. Para solucionar este
incon%eniente 1uede usarse algo similar al siguiente cdigo
!loat s < 6#D;
smooth();
ellipse(02, 02, 0/, 0/);
scale(s);
stro)eIei'ht(6#/ / s);
ellipse(02, 02, 0/, 0/);
N de la misma 9orma Aue translate() $ rotate()< en scale() los %alores tam)in son acumulati%os
rect(6/, 2/, K/, 2/);
scale(6#K);
rect(6/, 2/, K/, 2/);
scale(6#K);
rect(6/, 2/, K/, 2/);
-$o(-inando 6ransfor(aciones
!uando una 9igura es a9ectada 1or transtale()< rotate() o scale()< siem1re todo es en relacin a la
coordenada de origen. Por e8em1lo< al rotar un rect,ngulo en la coordenada @/.< 2.C< la rotacin se :ar, so)re
ese mismo e8e
Para :acer Aue la 9igura rote so)re su 1ro1ia esAuina< se de)e cam)iar la coordenada a la 1osicin @.< .C.
Para esto< utilizaremos la 9uncin translate(). !uando la 9igura rote< lo :ar, so)re su esAuina su1erior
izAuierda.
Ja$ dos maneras de 1ensar las trans9ormaciones. Fn mtodo es utilizar las 9unciones 1ara trans9ormar< $
luego corregir el 1ro)lema de 1osicin con las coordenadas 1ro1ias de la 9igura. El otro mtodo consiste en
utilizar las 1ro1ias 9unciones de trans9ormacin 1ara corregir lo no deseado. Ftilizando este mtodo :a$ Aue
tener cuidado en el orden Aue se u)ica cada 9uncin. En el siguiente e8em1lo se muestra el mismo cdigo dos
%eces 1ero con las 9unciones in%ertidas
translate(Nidth/2, hei'ht/2);
rotate(AB/D);
rect(523, 523, 3/, 3/);
rotate(AB/D);
rect(523, 523, 3/, 3/);
;os siguientes e8em1los demuestran el 1otencial de com)inar 9unciones de trans9ormacin< 1ero tam)in
Aueda en claro Aue estas acciones reAuieren un ma$or 1laneamiento.
translate(6/, :/);
rect(/, /, K/, 2/);
rotate(5AB/62);
rect(/, /, K/, 2/);
rotate(5AB/:);
rect(/, /, K/, 2/);
translate(.3, :/);
rect(503, 53, K/, 6/);
rotate(5AB/D);
rect(503, 53, K/, 6/);
rotate(5AB/D);
rect(503, 53, K/, 6/);
noHill();
translate(6/, 2/);
rect(/, /, 2/, 6/);
scale(2#2);
rect(/, /, 2/, 6/);
scale(2#2);
rect(/, /, 2/, 6/);
noHill();
translate(3/, 0/);
rect(56/, 3, 2/, 6/);
scale(2#3);
rect(56/, 3, 2/, 6/);
;a 1ro1iedad acumulati%a de las 9unciones de trans9ormacin 1uede ser mu$ 3til 1ara generar e9ectos mu$
interesantes con una estructura H?>.
bac)'round(/);
smooth();
stro)e(233, 62/);
translate(::, 00); //*on!i'ura posicin inicial
!or (int i < /; i 9 6D; i44) R//6D repeticiones
stro)eIei'ht(i); //Bncrementa 'rosor del contorno
rotate(AB/62); //1cumula rotacin
line(/, /, 33, /);
S
bac)'round(/);
smooth();
no$tro)e();
!ill(233, .D);
translate(00, ::); //*on!i'ura posicin inicial
!or (int i < /; i 9 62; i44) R//62 repeticiones
scale(6#2); //1cumula escala
ellipse(., 2, 2/, 2/);
S
-;uevas $oordenadas
;a 1osicin de origen 1or de9ecto se encuentra en el (/, /)< esAuina su1erior izAuierda< $ :ace re9erencia a
una 1osicin de los 1i6eles. ;as 9unciones de trans9ormacin 1ueden alterar este sistema de coordenadas< en
)ase a alg3n e9ecto Aue deseamos 1roducir.
//Cue,e el ori'en del (/,/) al centro
si(e(6//, 6//);
line(5Nidth/2, /, Nidth/2, /); //Dibua ee Z
line(/, 5hei'ht/2, /, hei'ht/2); //Dibua ee V
smooth();
no$tro)e();
!ill(233, 2/.);
ellipse(/, /, .3, .3); //Dibua en el ori'en
ellipse(5Nidth/2, hei'ht/2, .3, .3);
ellipse(Nidth/2, 5hei'ht/2, .3, .3);
-l com)inar las 9unciones de translate() $ scale()< 1uede cam)iarse un rango de %alores.
//Cue,e el ori'en del (/,/) al centro
//; cambia el tama+o del sistema de coordenadas
si(e(6//, 6//);
scale(Nidth/2, hei'ht/2);
translate(6#/, 6#/);
stro)eIei'ht(6#//Nidth);
line(56, /, 6, /); //Dibua ee Z
line(/, 56, /, 6); //Dibua ee Z
smooth();
no$tro)e();
!ill(233, 2/.);
ellipse(/, /, /#7, /#7); //Dibua en el ori'en
ellipse(56#/, 6#/, /#7, /#7);
ellipse(6#/, 56#/, /#7, /#7);
-dem,s< 1uede usarse 1ara cam)iar el sistema de coordenadas a la esAuina in9erior izAuierda. Este es el
sistema de coordenadas Aue usan el -do)e Illustrator $ el Post=cri1t.
//Cue,e el ori'en del (/,/) a la esGuina in!erior i(Guierda
si(e(6//, 6//);
translate(/, hei'ht);
scale(6#/, 56#/);
line(/, 6, Nidth, 6); //Dibua ee Z
line(/, 6, /, hei'ht ); //Dibua ee V
smooth();
no$tro)e();
!ill(233, 2/.);
ellipse(/, /, .3, .3); //Dibua en el ori'en
ellipse(Nidth/2, hei'ht/2, .3, .3);
ellipse(Nidth, hei'ht, .3, .3);
&nidad 1A
Estructuras' $ontinuidad
draN(), !rame>ate(), !rame*ount, setup(), no@oop()
5odos los 1rogramas< mostrados en las unidades anteriores< e8ecutan el cdigo $< 1osteriormente< lo detienen.
;os 1rogramas con animaciones o Aue modi9ican su contenido en %i%o< reAuieren estar e8ecut,ndose
continuamente. 'ic:os 1rogramas< se e8ecutan de manera continua $ 1ermiten< 1or lo tanto< animaciones o
)ien conseguir datos a tra%s de dis1ositi%os de entrada.
-Evaluacin $ontinua
Fn 1rograma Aue estar, e8ecut,ndose continuamente reAuiere de la 9uncin draN(). El cdigo dentro de un
)loAue draN() es e8ecutado en un continuo loo1 @re1eticinC :asta Aue se detenga de e8ecutar el 1rograma o
se cierre la %entana de re1resentacin. Fn 1rograma 1uede tener solo un )loAue draN(). !ada %ez Aue el
cdigo dentro del )loAue draN() es terminado de leer< lo muestra en la %entana de re1resentacin $ %uel%e a
leer desde la 1rimer lnea @siem1re dentro del )loAue draN()C.
Por de9ecto< las im,genes son di)u8adas a ". cuadros 1or segundo @91sC. ;a 9uncin !rame>ate() nos
1ermite cam)iar la cantidad de esos cuadros 1or segundo. El 1rograma se e8ecutar, a la %elocidad Aue se le
d al !rame>ate()< a3n as< muc:os 1rogramadores am)iciosos suelen e6ceder la cantidad de cuadros 1or
segundos en relacin al 1oder de su ordenador. =e recomienda no e6ceder los ". cuadros Aue $a %ienen 1or
de9ecto.
;a %aria)le !rame*ount siem1re contiene el n3mero de cuadros Aue se est1 ejecutando desde Aue el
1rograma 9ue iniciado. Fn 1rograma Aue 1osee un )loAue draN() siem1re %ariar, el n3mero de cuadros @*<
2< 3< 4< /< "...C :asta Aue el 1rograma sea detenido< la com1utadora agote su ca1acidad de 1rocesamiento o
se 1ierda la 9uente de tensin Aue la alimenta.
//Bmprime cada nEmero de cuadro en la consola
,oid draN() R
println(!rame*ount);
S
//$e eecuta a . cuadros por se'undo, imprime cada cuadro en la consola
,oid draN() R
!rame>ate(.);
println(!rame*ount);
S
!on cam)iar alg3n 1ar,metro dentro de la estructura draN()< 1roduciremos un sim1le e9ecto de mo%imiento.
Por e8em1lo< a tra%s de una %aria)le< cam)iar la 1osicin en la Aue se encuentra una lnea.
!loat ; < /#/;
,oid draN() R
!rame>ate(0/);
line(/, ;, 6//, ;);
; < ; 4 /#3;
S
!uando este cdigo es e8ecutado< las %aria)les son reem1lazadas con los %alores actuales $ %uel%e a correr
las acciones en este orden
!loat ; < /#/
!rame>ate(0/)
55555555555555555555555555555555555555555555555555555555 -ntra al draN()
line(/, /#/, 6//, /#/)
; < /#3
!rame>ate(0/)
55555555555555555555555555555555555555555555555555555555 -ntra al draN() por
se'unda ,e(
line(/, /#3, 6//, /#3)
; < 6#/
!rame>ate(0/)
55555555555555555555555555555555555555555555555555555555 -ntra al draN() por
tercera ,e(
line(/, 6#/, 6//, 6#/)
; < 6#3
-tc###
;a %aria)le de control mostrada anteriormente @llamada yC de)e ser declarada 9uera del )loAue draN(). 'e
otro modo< cada %ez Aue el )loAue se actualice %ol%er, a crear la %aria)le< es decir< es como si es %alor se
restear).
!omo se 1uede com1ro)ar anteriormente< el 9ondo del 1rograma no se actualiza autom,ticamente con cada
%uelta del )loAue draN(). Esto 1roduce un e9ecto de )arrido. =in em)argo< PAu 1asa si lo Aue Aueremos es
solo una lnea mo%indose< en lugar de una es1ecie de )arridoQ. 0ecurriremos a declararlo como una de las
+ri(eras l@neas dentro del draN() $ con un color en es1ec9ico. ;a solucin se 1iensa como si se estu%iese
di)u8ando cada cuadro a mano. =i Aueremos Aue la 1osicin antigua de una 9igura desa1arezca< %ol%emos a
1intar el 9ondo< este 1intar, la 9igura $< 1osteriormente< se di)u8ar, la 9igura en la 1osicin actualizada.
!loat ; < /#/;
,oid draN() R
!rame>ate(0/);
bac)'round(2/.);
; < ; 4 /#3;
line(/, ;, 6//, ;);
S
;a %aria)le Aue controla la 1osicin de la lnea 1uede ser usada 1ara otros 1ro1sitos. Por e8em1lo< alterar el
color del 9ondo
!loat ; < /#/;
,oid draN() R
!rame>ate(0/);
bac)'round(; * 2#3);
; < ; 4 /#3;
line(/, ;, 6//, ;);
S
Pasado unos 1ocos segundos del 1rograma< la lnea desa1arece 1or de)a8o. !on una sim1le estructura BH
solucionamos ese 1ro)lema
Ignacio Buioli | Jaime Prez Marn &.
!loat ; < /#/;
,oid draN() R
!rame>ate(0/);
bac)'round(; * 2#3);
; < ; 4 /#3;
line(/, ;, 6//, ;);
i! (; 8 6//) R
; < /;
S
S
-$ontrolando el ,lujo
Ja$ 9unciones Aue< incluso en 1rogramas din,micos< solo reAuieren ser e8ecutadas una %ez. El )loAue
setup() 1ermite Aue cualAuier 9uncin Aue se escri)a dentro de el se e8ecute solo una %ez. Mu$ 3til 1ara
9unciones como si(e() o loadBma'e()< Aue suelen ser e8ecutadas 3nicamente la 1rimera %ez.
El )loAue setup() se escri)e siem1re antes Aue el )loAue draN() $< al igual Aue con el )loAue draN()<
1uede :a)er solo un )loAue setup() 1or 1rograma. !uando un 1rograma es e8ecutado< 1rimero se lee lo
Aue est, 9uera de los )loAues setup() $ draN()< luego se lee todo lo Aue est, dentro del setup() $<
9inalmente< lo Aue est, dentro del draN(). En el siguiente e8em1lo< el tamaGo de la %entana< el 9iltro de
sua%izado $ el relleno no cam)iar,n< as Aue se incluir,n en el )loAue setup().
Ignacio Buioli | Jaime Prez Marn &*
!loat ; < /#/;
,oid setup() R
si(e(6//, 6//);
smooth();
!ill(/);
S
,oid draN() R
bac)'round(2/.);
ellipse(3/, ;, K/, K/);
; 4< /#3;
i! (; 8 63/) R
; < 53/#/;
S
S
!uando este cdigo es e8ecutado< las %aria)les son reem1lazadas con los %alores actuales $ %uel%e a correr
las acciones en este orden
!loat ; < /#/
si(e(6//, 6//)
55555555555555555555555555555555555555555555555 -ntra al setup()
smooth()
!ill(/)
bac)'round(2/.)
55555555555555555555555555555555555555555555555 -ntra al draN()
ellipse(3/, /#/, K/, K/)
; < /#3
bac)'round(2/.)
55555555555555555555555555555555555555555555555 -ntra al draN() por se'unda ,e(
ellipse(3/, /#3, K/, K/)
; < 6#/
bac)'round(2/.)
55555555555555555555555555555555555555555555555 -ntra al draN() por tercera ,e(
ellipse(3/, 6#/, K/, K/)
; < 6#3
-tc####
!uando el %alor de y es ma$or a */.< el cdigo en la estructura I# con%ierte el %alor a O/.. ;a %aria)le Aue
cam)ia con cada re1eticin del )loAue draN() de)e ser declarada fuera de los )loAues setup() $ draN().
=i est, es declarada dentro del draN()< se estar, reOcreando con cada re1eticin del mismo< 1or lo tanto su
%alor nunca cam)iara. Por otro lado< 9uera de los )loAues setup() $ draN() solo 1ueden declararse $
asignarse %aria)les. =i se declarara una 9uncin< causar, un error.
=i un 1rograma solo di)u8ar, un cuadro< este 1uede declararse en el setup(). ;a 3nica di9erencia entre
setup() $ draN() es Aue el setup() se e8ecuta solo una ve2.
,oid setup() R
si(e(6//, 6//);
smooth();
!ill(/);
ellipse(3/, 3/, ::, ::);
S
Ftilizando la 9uncin no@oop()< 1odemos :acer Aue el draN() de8e de re1etir $ sim1lemente di)u8e un
cuadro. El siguiente e8em1lo es similar al anterior< con la di9erencia Aue la eli1se es di)u8ada en el draN()
Ignacio Buioli | Jaime Prez Marn &2
,oid setup() R
si(e(6//, 6//);
smooth();
!ill(/);
no@oop();
S
,oid draN() R
ellipse(3/, 3/, ::, ::);
S
-E%tensin de la 4aria-le
!uando tra)a8amos con los )loAues setup() $ draN() es necesario tomar consciencia de donde
declaramos $ asignamos cada %aria)le. ;a localizacin de la %aria)le determina su e(tensi*n. ;a regla 1ara
conocer la e6tensin Aue 1osee una %aria)le es mu$ sim1le su la %aria)le est, dentro de una estructura< esa
%aria)le es local $ 1uede usarse solamente dentro de esa estructuraR si la %aria)le est, en el 1rograma< 9uera
de cualAuier estructura< esa %aria)le es glo)al $ 1uede usarse en cualAuier estructura. ;as %aria)les
declaradas en el setup() 1ueden usarse solo en el setup(). ;as %aria)les declaradas en el draN()
1ueden usarse solo en el draN().
int d < 36; //@a ,ariable d es 'lobal, puede ser usada donde sea
,oid setup() R
si(e(6//, 6//);
int ,al < d * 2; //@a ,ariable local ,al, puede ser usada solo en el
!ill(,al); //setup()
S
,oid draN() R
int ; < :/; //@a ,ariable local ;, puede ser usada solo en el draN()
line(/, ;, d, ;);
; 5< 23;
line(/, ;, d, ;);
S
!uando una %aria)le es creada dentro de un )loAue< al salir del )loAue< esa %aria)le es destruida. Esto
signi9ica Aue no 1uede utilizarse 9uera de ese )loAue.
,oid draN() R
int d < D/; //-sta ,ariable puede usarse donde sea en el draN()
i! (d 8 3/) R
int x < 6/; //-sta ,ariable puede usarse solo en este bloGue BH
line(x, ./, x4d, ./);
S
line(/, 3/, d, 3/);
line(x, :/, x4d, :/); //->>?>Q No se puede leer esta ,ariable !uera del
S //bloGue
,oid draN() R
!or (int ; < 2/; ; 9 D/; ; 4< :) R //@a ,ariable puede usarse
line(2/, ;, 3/, ;); //solo en el bloGue H?>
S
line(;, /, ;, 6//); //->>?>Q No se puede acceder a ; !uera del H?>
S
;a im1lementacin de %aria)les locales $ glo)ales 1ermite Aue se 1ueda tener dos o m,s %aria)les con el
mismo nom)re. -3n as< no se recomienda el tra)a8o con %aria)les del mismo nom)re $a Aue 1uede 1roducir
con9usin en Auien 1rograma.
int d < .3; //1si'na .3 a la ,ariable d
,oid setup() R
si(e(6//, 6//);
int d < 7/; //1si'na 7/ a la ,ariable local d
rect(/, /, 00, d); //&sa la ,ariable local d con
S //,alor 7/
,oid draN() R
rect(00, /, 00, d); //&sa d con ,alor de .3
S
Fna %aria)le dentro de un )loAue con el mismo nom)re Aue una %aria)le 9uera del )loAue es< com3nmente<
un error mu$ di9cil de encontrar.
&nidad 1B
Estructuras' ,unciones
,oid, return
Fna 9uncin contiene en s misma un modulo de modi9icacin de 1rograma. =e :an utilizado :asta a:ora
9unciones Aue %ienen incluidas en Processing< tales como si(e()< line()< stro)e()< $ translate()<
1ara escri)ir los 1rogramas. =in em)argo< es 1osi)le escri)ir nuestras 1ro1ias 9unciones. ;as 9unciones :acen
Aue el cdigo redundante sea mas conciso al mostrarlo en 9orma de )loAue< 1or e6traer elementos comunes.
-l mantener 9orma de )loAue< 1ermite Aue el mismo cdigo se utilice una in9inidad de %eces sin necesidad de
re1etir las lneas. -dem,s< mantiene una estructura mas sencilla de leer en caso de tener alg3n error.
;as 9unciones de Processing 1or lo general ace1tan una determinada cantidad de 1ar,metros. Por e8em1lo<
line() ace1ta cuatro 1ar,metros< los cuales de9inen la 1osicin de dos 1untos. -l cam)iar los n3meros< se
cam)ia la 1osicin de la linea. 5am)in el com1ortamiento de la 9uncin 1uede de1ender de la cantidad de
1ar,metros Aue le sean en%iados. Por e8em1lo< la 9uncin !ill() al reci)ir un 1ar,metro 1intar, en escala
de grises< con dos 1ar,metros ser,n grises con trans1arencia $ con tres 1ar,metros 0EB.
Fna 9uncin 1uede ser imaginada como una ca8a con una serie de mecanismos dentro Aue 1ermiten actuar
so)re una serie de datos. Por lo general :a$ datos de entrada $ cdigo dentro de la ca8a< los cuales 1roducen
datos de salida
Por e8em1lo< una 9uncin 1uede utilizarse 1ara sumar *. a un n3mero o multi1licar dos
El e8em1lo anterior es sumamente sim1le< 1ero el conce1to 1uede e6tenderse a cuestiones Aue no sean
necesariamente tan o)%ias
Ignacio Buioli | Jaime Prez Marn &/
-/-straccin
En trminos de 1rograma< la 1ala)ra a)straccin tiene un signi9ica distinto a el sim1le :ec:o de como uno
1uede 1intar o di)u8ar. =e re9iere a la accin de esconder detalles< en9oc,ndose 3nicamente en los
resultados. ;a inter9az de un autom%il 1ermite Aue el trans1orte se mue%a 1or el accionar de los 1edales $
el %olante< ignorando los 1rocesos Aumicos internos de los 1istones $ la com)ustin.
;a idea de a)straccin 1uede 1ensarse tam)in desde el cuer1o :umano. Por e8em1lo< 1odemos controlar
nuestra res1iracin< 1ero 1or lo general este 1roceso es in%oluntario. Imaginemos 1or un momento Aue
tu%iramos total control de cada accionar de nuestro cuer1o. =i control,ramos nuestra res1iracin< los latidos
del corazn< las reacciones Aumicas Aue se 1roducen en nuestro cuer1o $ la retroalimentacin de las
neuronas< nos sera com1letamente im1osi)le :acer algo tan sim1le como leer un li)ro o escri)ir un cdigo
1ara un 1rograma. 2uestro cere)ro a)strae estos as1ectos 1ara Aue 1odamos concentrarnos en otros
as1ectos de la %ida.
'e esta 9orma< la a)straccin es 9undamental a la :ora de escri)ir un 1rograma. En Processing contamos con
a)stracciones< 9unciones como line()< ellipse() $ !ill()< ocultan los 1rocesos Aue realizan 1ara Aue
1odemos concentrarnos en su 1ro1ia im1lementacin. =i nos interesa di)u8ar una lnea< 1osi)lemente nos
interese su 1osicin< tamaGo< color $ grosor< $ no el tener una gran cantidad de cdigo Aue e8ecute dic:o
sistema.
-$reando ,unciones de &suario
-ntes de e61licar en detalle como crear una 9uncin de usuario< e61licaremos el 1orAue alguien Auerra crear
su 1ro1ia 9uncin. El siguiente 1rograma e61lica como acortar un sistema< 1ara Aue sea m,s modular< a
tra%s de una sim1le 9uncin. Esto :ace Aue el cdigo sea m,s sencillo de leer< modi9icar< e61andir.
-lgo mu$ com3n es di)u8ar una 9igura en 1antalla re1etidas %eces. Poseemos el cdigo Aue 1ermite crear la
9orma Aue se muestra a continuacin< $ reAuerimos 1oder generar la te6tura Aue se %e a la derec:a
;o 1rimero Aue :aremos ser, di)u8ar sim1lemente la 9igura en 1antalla< solo 1ara corro)orar Aue el cdigo
9uncione
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
no@oop();
S
,oid draN() R
!ill(233);
ellipse(3/, 3/, :/, :/); //*rculo =lanco
!ill(/);
ellipse(3/46/, 3/, 0/, 0/); //*rculo Ne'ro
!ill(233);
ellipse(3/46:, .3, :, :); //*rculo =lanco ; AeGue+o
S
El 1rograma anterior muestra una 9orma mu$ lim1ia $ clara de di)u8ar una sim1le 9igura. Pero si dese,ramos
Ignacio Buioli | Jaime Prez Marn &"
Aue 9uesen dos< nos %eremos o)ligados a multi1licar el n3mero de lneas de cdigo. =i el cdigo tiene "
lneas< tendremos *2. Para diseGar nuestra te6tura< necesitaremos " 9iguras< 1or lo tanto son 3" lneas de
cdigo. Imaginemos un caso con 3. 9iguras< dentro del )loAue draN() se 1resentaran *4. lneas de sim1le
cdigo.
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
no@oop();
S
,oid draN() R
//Hi'ura de la Derecha
!ill(233);
ellipse(:3, .., :/, :/);
!ill(/);
ellipse(K3, .., 0/, 0/);
!ill(233);
ellipse(D6, 07, :, :);
//Hi'ura de la B(Guierda
!ill(233);
ellipse(2/, 3/, :/, :/);
!ill(/);
ellipse(0/, 3/, 0/, 0/);
!ill(233);
ellipse(0:, .3, :, :);
S
!omo las 9iguras son idnticas< 1odemos utilizar una 9uncin 1ara sim1li9icar la tarea. =im1lemente
agregaremos los datos de entrada de la 1osicin en 6 $ en $.
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
no@oop();
S
,oid draN() R
oo(:3, ..);
oo(2/, 3/);
S
,oid oo(int x, int ;) R
!ill(233);
ellipse(x, ;, :/, :/);
!ill(/);
ellipse(x46/, ;, 0/, 0/);
!ill(233);
ellipse(x46:, ;53, :, :);
S
;a 9uncin es de 4 lneas de cdigo< 1ero tan solo lo escri)iremos una %ez. !on esta estrategia< es 1osi)le
di)u8ar 3. o8os con 34 lneas de cdigo.
!ada %ez Aue la 9uncin es usada con el draN()< las lneas de cdigo dentro de la 9uncin son e8ecutadas. El
9lu8o casual del 1rograma es interrum1ido 1or la 9uncin. Fna %ez terminada la e8ecucin del cdigo dentro de
la 9uncin< se dis1one a leer lo Aue sigue en el )loAue draN()
Ignacio Buioli | Jaime Prez Marn &+
555555555555555555 Bncia le;endo el cdi'o del setup()
si(e(6//, 6//)
no$tro)e()
smooth()
no@oop()
!ill(233)
555555555555555555 -ntra al draN(), se des,a a la !uncin oo
ellipse(:3, .., :/, :/)
!ill(/)
ellipse(K3, .., 0/, 0/)
!ill(233)
ellipse(D6, 07, :, :)
!ill(233)
555555555555555555 Muele,e al draN(), se des,a a la !uncin oo por se'unda ,e(
ellipse(2/, 3/, :/, :/)
!ill(/)
ellipse(0/, 3/, 0/, 0/)
!ill(233)
ellipse(0:, .3, :, :)
555555555555555555 Hinali(a el Aro'rama
-:ora Aue la 9uncin est, tra)a8ando< 1odemos crear tantas 9iguras como Aueramos. 'e esta 9orma
de8aremos de 1reocu1arnos 1or como la 9igura es di)u8ada< $ nos concentraremos en en%iar correctamente la
1osicin a tra%s de los dos 1ar,metros
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
no@oop();
S
,oid draN() R
oo(:3, ..);
oo(2/, 3/);
oo(:3, K.);
oo(2/, D/);
oo(:3, 6/.);
oo(2/, 66/);
S
,oid oo(int x, int ;) R
!ill(233);
ellipse(x, ;, :/, :/);
!ill(/);
ellipse(x46/, ;, 0/, 0/);
!ill(233);
ellipse(x46:, ;53, :, :);
S
;o im1ortante a la :ora de escri)ir una 9uncin< es tener la idea clara de lo Aue se %a a :acer. P'i)u8ar, una
9iguraQP!alcular, un n3meroQP-1licara un 9iltro de imagenQ Fna %ez Aue se 1iensa en Aue se Auiere :acer<
:a$ Aue 1ensar en los 1ar,metros Aue reci)ir,. 'e este modo se construir, una 9uncin en 1ocos 1asos.
En el siguiente e8em1lo< el mismo e61lora algunos detalles de la 9uncin antes de escri)irla. 'es1us< se
constru$e la 9uncin< donde se agrega un 1ar,metro cada %ez Aue se com1rue)a el cdigo
,oid setup() R
si(e(6//, 6//);
smooth();
no@oop();
S
,oid draN() R
//Dibuar una 'ruesa Z color 'ris claro
stro)e(6:/);
stro)eIei'ht(2/);
line(/, 3, :/, :3);
line(:/, 3, /, :3);
//Dibua una normal Z color ne'ro
stro)e(/);
stro)eIei'ht(6/);
line(0/, 2/, 7/, D/);
line(7/, 2/, 0/, D/);
//Dibua una sua,e Z color blanco
stro)e(233);
stro)eIei'ht(2);
line(2/, 0D, D/, 7D);
line(D/, 0D, 2/, 7D);
S
Para conseguir una 9uncin Aue 1ueda di)u8ar las tres >< 1rimero crearemos el cdigo 1ara Aue solo di)u8e
una. ;lamaremos a la 9uncin dibuarZ() 1ara Aue sea m,s claro. 'entro< escri)iremos el cdigo 1ara
di)u8ar la > de color gris claro @el mismo Aue est, arri)aC $ la llamaremos a la 9uncin desde el draN(). !omo
la 9uncin no reci)e 1ar,metros< di)u8ar, la > tal cual est, en el cdigo
,oid setup() R
si(e(6//, 6//);
smooth();
no@oop();
S
,oid draN() R
dibuarZ();
S
,oid dibuarZ() R
//Dibuar una 'ruesa Z color 'ris claro
stro)e(6:/);
stro)eIei'ht(2/);
line(/, 3, :/, :3);
line(:/, 3, /, :3);
S
Para di)u8ar una > di9erente< necesitaremos agregar un 1ar,metro. En el siguiente e8em1lo< la %aria)le gris a
sido aGadida 1ara 1oder reci)ir un 1ar,metro Aue act3e como %aria)le de control de la escala de grises de la
>. Este 1ar,metro %aria)le< de)e incluir el ti1o $ un nom)re.
,oid setup() R
si(e(6//, 6//);
smooth();
no@oop();
S
,oid draN() R
dibuarZ(/); //$e en,a como par"metro el ,alor /
S
,oid dibuarZ(int 'ris) R //$e declara la ,ariable 'ris
stro)e('ris); //; se le asi'na el ,alor del
stro)eIei'ht(2/); //par"metro
line(/, 3, :/, :3);
line(:/, 3, /, :3);
S
Ignacio Buioli | Jaime Prez Marn &&
Esto est, )ien 1ara un e8em1lo sencillo< 1ero una 9uncin 1uede no necesariamente ace1tar solo un
1ar,metro. Podemos crear una cantidad ilimitada de estos. !ada 1ar,metro de)e tener un lugar entre los
1arntesis< 1osterior al llamado de la 9uncin. 'e)e es1eci9icarse el ti1o de dato $ el nom)re de cada uno de
ellos. En el siguiente e8em1lo< se agrega el 1ar,metro grosor:
,oid setup() R
si(e(6//, 6//);
smooth();
no@oop();
S
,oid draN() R
dibuarZ(/, 0/); //Aasa los ,alores / ; 0/ a dibuarZ()
S
,oid dibuarZ(int 'ris, int 'rosor) R
stro)e('ris);
stro)eIei'ht('rosor);
line(/, 3, :/, :3);
line(:/, 3, /, :3);
S
En el siguiente e8em1lo< se e6tiende sus 1ro1iedades con tres 1ar,metros m,s adicionales a los anteriores
,oid setup() R
si(e(6//, 6//);
smooth();
no@oop();
S
,oid draN() R
dibuarZ(/, 0/, ./, 0/, 0:);
S
,oid dibuarZ(int 'ris, int 'rosor, int x, int ;, int lar'o) R
stro)e('ris);
line(x, ;, x4lar'o, ;4lar'o);
line(x4lar'o, ;, x, ;4lar'o);
S
Ja$ Aue ser cuidadosos a la :ora de 1rogramar 9unciones< :aciendo 1aso 1or 1aso< sin 1erder el o)8eti%o
original. En este caso< 1odemos concluir generando el di)u8o de las > originales de la siguiente 9orma
,oid setup() R
si(e(6//, 6//);
smooth();
no@oop();
S
,oid draN() R
dibuarZ(6:/, 2/, /, 3, :/);
dibuarZ(/, 6/, 0/, 2/, :/);
dibuarZ(233, 2, 2/, 0D, :/);
S
stro)e('ris);
S
Ignacio Buioli | Jaime Prez Marn *..
-:ora Aue tenemos 1rogramada nuestra 9uncin dibuarZ()1 es 1osi)le crear cosas mu$ interesantes Aue
seran 1oco 1r,cticas sin la im1lementacin de una de ellas. Por e8em1lo< con un llamado de la 9uncin dentro
de una estructura H?>< 1odemos iterar con 1eAueGas %ariaciones el modo en Aue se muestra la 9igura
,oid setup() R
si(e(6//, 6//);
smooth();
no@oop();
S
,oid draN() R
!or (int i < /; i 9 2/; i44) R
dibuarZ(2//5 i*6/, (2/5i)*2, i, i/2, K/);
S
S
stro)e('ris);
S
,oid setup() R
si(e(6//, 6//);
smooth();
no@oop();
S
,oid draN() R
!or (int i < /; i 9 K/; i44) R //Dibua K/ Hi'uras
dibuarZ(int(random(233)), int(random(0/)),
int(random(Nidth)), int(random(hei'ht)), 6//);
S
S
stro)e('ris);
S
Para el siguiente e8em1lo usaremos una 9uncin Aue nom)raremos hoa() $ otra Aue llamaremos parra().
!on esto se 1retende demostrar como una 9uncin 1uede correr dentro de otra. Para em1ezar de9iniremos
Aue 1ar,metros reAuerimos
!loat x *oordenada Z
!loat ; *oordenada V
!loat ancho 1ncho de la !i'ura en pixeles
int dir Direccin, siendo 6 (i(Guierda) o 56 (derecha)
El 1rograma 1ara di)u8ar la 9igura es mu$ sencillo
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
no@oop();
S
,oid draN() R
Ignacio Buioli | Jaime Prez Marn *.*
hoa(2:, D0, :/, 6);
S
,oid hoa(int x, int ;, int ancho, int dir) R
pushCatrix();
translate(x, ;); //Cue,e la posicin
scale(ancho); //-scala el tama+o
be'in$hape(); //Dibua la !i'ura
,ertex(6#/*dir, 5/#K);
be(ierMertex(6#/*dir, 5/#K, /#.*dir, 56#/, /#/, /#/);
be(ierMertex(/#/, /#/, 6#/*dir, /#., 6#/*dir, 5/#K);
end$hape();
popCatrix();
S
;a 9uncin parra()< 1osee 1ar,metros 1ara cam)iar la 1osicin< el n3mero de :o8as $ el tamaGo de las
mismas
int x *oordenada Z
int num\oas NEmero total de hoas en la parra
!loat hoas1ncho 1ncho de las hoas en pixeles
!on esta 9uncin se di)u8a una lnea %ertical $ luego determina el es1acio entre cada :o8a
,oid setup() R
si(e(6//, 6//);
smooth();
no@oop();
S
,oid draN() R
parra(00, 7, 6:);
S
,oid parra(int x, int num\oas, int hoas1ncho) R
stro)e(233);
line(x, /, x, hei'ht);
no$tro)e();
int 'ap < hei'ht / num\oas;
int direccion < 6;
!or (int i < /; i 9 num\oas; i44) R
int r < int(random('ap));
hoa(x, 'ap*i 4 r, hoas1ncho, direccion);
direccion < 5direccion;
S
S
//*opiar ; pe'ar la !uncin hoa() aGu
-So-recarga de ,unciones
;as 9unciones 1ueden tener el mismo nom)re< siem1re $ cuando tengan distinta cantidad de 1ar,metros. -l
crear 9unciones con el mismo nom)re< se lo denomina sobrecarga de funciones. Esto es lo Aue 1ermite Aue
Processing tenga 9unciones mas de una %ersin de 9unciones como !ill()1 ima'e() $ text()1 cada una
ace1ta di9erentes 1ar,metros. Por e8em1lo< !ill() 1uede tener uno< dos< tres o :asta cuatro 1ar,metros.
!ada %ersin de !ill() con9igura el color de relleno de una 9igura< $a sea en escala de grises< grises con
trans1arencia< 0EB o 0EB con trans1arencia< res1ecti%amente.
Fn 1rograma 1uede< tam)in< tener dos 9unciones con el mismo nom)re $ el mismo n3mero de 1ar,metros<
1ero sus 1ar,metros son de ti1os de datos di9erentes. Por e8em1lo< :a$ tres %ersiones di9erentes de !ill()
Aue ace1tan un solo 1ar,metro. ;a 1rimer %ersin utiliza un 1ar,metro ti1o int< 1ara escala de grises. ;a
segunda %ersin utiliza uno del ti1o float< tam)in 1ara escala de grises. N la tercer %ersin ace1ta un
Ignacio Buioli | Jaime Prez Marn *.2
1ar,metro del ti1o color< 1ara con9igurar directamente desde un color. En el lengua8e de Processing< sera
mu$ 9rustrante con9igurar un nom)re distinto solo 1ara o)tener el mismo resultado.
El siguiente e8em1lo utiliza tres %ersiones distintas de dibuarZ()< 1ero con el mismo nom)re.
,oid setup() R
si(e(6//, 6//);
smooth();
no@oop();
S
,oid draN() R
dibuarZ(233); //-ecuta la primer !uncin dibuarZ()
dibuarZ(3#3); //-ecuta la se'unda !uncin dibuarZ()
dibuarZ(/, 2, .., .D, 0:); //-ecuta la tercer !uncin
S //dibuarZ()
//Dibua una Z con un ,alor de 'ris
,oid dibuarZ(int 'ris) R
stro)e('ris);
stro)eIei'ht(2/);
line(/, 3, :/, :3);
line(:/, 3, /, :3);
S
//Dibua una Z ne'ra con determinado ,alor de 'rosor
,oid dibuarZ(!loat 'rosor) R
stro)e(/);
line(/, 3, :/, :3);
line(:/, 3, /, :3);
S
//Dibua una Z con determinado ,alro de 'ris, 'rosor
//posicin ; tama+o
,oid dibuarZ(int 'ris, int 'rosor, int x, int ;, int s) R
stro)e('ris);
line(x, ;, x4s, ;4s);
line(x4s, ;, x, ;4s);
S
-$alculando * =egresando 4alores
En los e8em1los anteriores< la salida 1roducida 1or una 9uncin di)u8a una 9igura o una 9orma en la 1antalla.
2o o)stante< :a$ %eces Aue 1re9erimos Aue la 1ro1ia salida Aue se 1roduce sea un ti1o de dato. - esto se lo
llama regresar un $alor. 5odas las 9unciones 1uede regresar un %alor< como un int o un !loat. =i la 9uncin
no regresa ning3n %alor en 1articular< se utiliza la 9uncin es1ecial llamada ,oid @cu$o signi9icado es $ac@o<
es decir< la 9uncin regresa un %alor %acoC. El ti1o de dato Aue regresa la 9uncin se declara a la izAuierda del
nom)re de la misma.
;a 1ala)ra return es usada 1ara salir de la 9uncin $ regresar a la 1osicin de la cual 9ue llamada. =i una
9uncin regresar, un %alor< se utiliza return 1ara indicar Aue %alor se de)e de%ol%er. ;a accin de utilizar
return es usualmente usada en la 3ltima lnea de la 9uncin< 1uesto Aue ine%ita)lemente saldr, de la
9uncin una %ez usada. Por lo general< con las 9unciones de Processing< solemos utilizar 9unciones Aue
de%uel%en %alores. Por e8em1lo< random() de%uel%e un %alor ti1o !loat< $ la 9uncin color() de%uel%e un
%alor ti1o color.
=i la 9uncin %a a de%ol%er un %alor< de)e llamarse dentro de una %aria)le
!loat d < random(/, 6//);
-dem,s< de)emos ser cuidadosos con el ti1o de dato Aue estamos utilizando 1ara guardar el %alor
int d < random(/, 6//); //->>?>Q random() re'resa un ,alor tipo !loat
=i consultamos la re9erencia de cada 9uncin< 1odemos tener una idea de Aue clase de dato mane8a cada
9uncin en 1articular. El 1ro)lema ocurre cuando utilizamos 9unciones de usuario.
Para escri)ir nuestras 1ro1ias 9unciones< sim1lemente reem1lazaremos el ti1o de datos ,oid 1or el ti1o de
datos Aue 1retendemos de%ol%er. 2o :a$ Aue ol%idar incluir la 1ala)raOcla%e return dentro< de 1re9erencia
en la 3ltima lnea. El siguiente e8em1lo muestra una manera mu$ sim1le de escri)ir una 9uncin Aue de%uel%e
datos
,oid setup() R
si(e(6//, 6//);
!loat ! < a,era'e(62#/, :#/); //1si'na 7#/ a !
println(!);
S
!loat a,era'e(!loat num6, !loat num2) R
!loat a, < (num6 4 num2) / 2#/;
return a,;
S
,oid setup() R
si(e(6//, 6//);
!loat c < !ahrenheit1*elsius(.36#/); //1si'na 202#KKKK7 a c
println(c);
S
!loat !ahrenheit1*elsius(!loat t) R
!loat ! < (t502#/) * (3#//7#/);
return !;
S
&nidad 20
,or(as' Par1(etros * =ecursin
;os 1rogramas 1ro%een de :erramientas mnimas 1ara la e61loracin $ la )3sAueda de sistemas con
com1ortamientos 1articulares. Fna de estas o1ciones es recurrir al uso de 9unciones. !uando una 9igura es
di)u8ada a 1artir de los 1ar,metros Aue reci)e< se dice Aue esa 9orma esta parametri3ada. -dem,s< una
9uncin 1uede contener en s misma una lnea de cdigo Aue utilice la misma 9uncin dentro de s misma.
Est, tcnica es conocida como recursi*n.
-,or(as Para(etri2adas
;a 9uncin hoa() @%ista anteriormenteC es un claro e8em1lo de una 9orma 1arametrizada. 'e1endiendo los
1ar,metros Aue reci)a< 1roduce un 9orma di9erente. ;a 9orma est, condicionada a sus 1ar,metros
;as cartas -rs Magna creadas 1or 5atsu$a =aito< muestra un e8em1lo de un sistema de im,genes modulares.
2ue%e im,genes di%idas en dos
Fna de las cartas 9rontales es usada en com)inacin con una de las traseras 1ara crear resultados
ines1erados
Fn sim1le 1rograma Aue 1uede em1learse 1ara generar dic:os resultados 1odra ser el siguiente
Ignacio Buioli | Jaime Prez Marn *./
si(e(62/, 6//);
int !rentre < int(random(6, 6/)); //$eleccionar una carta del !rente
int atras < int(random(6, 6/)); //$eleccionar una carta de atr"s
ABma'e im'Hrente < loadBma'e(!rente 4 W!#p'W);
ABma'e im'1tras < loadBma'e(atras 4 Wb#p'W);
ima'e(im'Hrente, /, /);
ima'e(im'1tras, :/, /);
El sistema de -rs Magna nos 1ermite crear< sin em)argo< un n3mero 9inito de com)inaciones. 7tra 9orma de
crear 9ormas 1arametrizadas es 1or incluir %alores de entrada a tra%s de alg3n dis1ositi%o. Este es uno de
los m,s grandes a%ances de crear %isual con cdigo.
Fna sim1le 9uncin arco()< creada usando be(ierMertex()< 1uede generar cam)ios continuos
modulares 1or cam)iar un sim1le 1ar,metro. El 1ar,metro 1ara la 9uncin arco() es un n3mero decimal
@9loatC< as Aue 1ueden generarse %ariaciones sumamente 1eAueGas.
!loat c < 23#/; //1l cambiar los ,alores de c
,oid setup() R //cambia la cur,atura
si(e(6//, 6//);
smooth();
no@oop();
S
,oid draN() R
arco(c);
S
,oid arco(!loat cur,atura) R
!loat ; < 7/#/;
stro)eIei'ht(:);
noHill();
be'in$hape();
,ertex(63#/, ;);
be(ierMertex(63#/, ;5cur,atura, 0/#/, 33#/, 3/#/, 33#/);
be(ierMertex(K/#/, 33#/, D3#/, ;5cur,atura, D3#/, ;);
end$hape();
S
En un sistema 1arametrizado< como la 9uncin arco!< el %alor de un 1ar,metro 1uede a9ectar a mas de una
%aria)le. Esto es llamado coupling @1are8asC. =i cam)iamos un 1oco el cdigo dentro de la 9uncin arco!< el
%alor de entrada cur$atura 1uede control el grosor de la lnea< adem,s de la cur%a.
,oid arco(!loat cur,atura) R
!loat ; < 7/#/;
!loat sN < (:3#/ 5 cur,atura) / .#/;
stro)eIei'ht(sN);
noHill();
be'in$hape();
,ertex(63#/, ;);
be(ierMertex(63#/, ;5cur,atura, 0/#/, 33#/, 3/#/, 33#/);
be(ierMertex(K/#/, 33#/, D3#/, ;5cur,atura, D3#/, ;);
end$hape();
S
Esto se trata tan solo de un e8em1lo mu$ sencillo. El mismo 1ar,metro 1uede utilizarse 1ara cam)iar as1ectos
como la %isualizacin< la rotacin o la escala. El siguiente 1rograma es 1rue)a de ello
Ignacio Buioli | Jaime Prez Marn *."
int x < 2/; //*oordenada Z
int u < 6.; //&nidades
!loat a < 5/#62; //dn'ulo
,oid setup() R
si(e(6//, 6//);
stro)e(/, 630);
smooth();
no@oop();
S
,oid draN() R
bac)'round(2/.);
tra(o(x, u, a);
S
,oid tra(o(int xpos, int unidad, !loat an'ulo) R
pushCatrix();
translate(xpos, /);
!or (int i < unidad; i 8 /; i55) R //*uenta >e'resi,a
stro)eIei'ht(i);
line(/, /, /, D);
translate(/, D);
rotate(an'ulo);
S
popCatrix();
S
-=ecursin
Fn e8em1lo 1r,ctico de algo recurrente es situarse entre dos es1e8os $ %er el Kin9initoL. En trminos del
1rograma< la recursin se 1roduce cuando una 9uncin 1uede llamarse a s misma si tener ninguna clase de
)loAueo. Para e%itar Aue se llama a s misma eternamente< es necesario agregar una salida. El siguiente
1rograma genera el mismo resultado de dos maneras distintas. Fna es 1or un ciclo H?> $ la otra 1or
recursin.
int x < 3;
!or (int num < 63; num 8< /; num 5< 6) R
line(x, 2/, x, D/);
x 4< 3;
S
,oid setup() R
dibuar@ineas(3, 63);
S
,oid dibuar@ineas(int x, int num) R
line(x, 2/, x, D/);
i! (num 8 /) R
dibuar@ineas(x43, num56);
S
S
El e8em1lo de recursin consume muc:os m,s recursos $ 1uede em1eorar el rendimiento de nuestro
1rograma. Para c,lculos mu$ sim1les< una estructura .?< es una gran solucin. 2o o)stante< la recursin
a)re un a)anico de 1osi)ilidades )astante interesantes. ;os siguientes e8em1los utilizan una 9uncin llamada
dibuarT()< 1ara as mostrar los di9erentes e9ectos de la recursin
Ignacio Buioli | Jaime Prez Marn *.+
int x < 3/; //*oordenada Z del centro
int ; < 6//; //*oordenada V de abao
int a < 03; //Citad del ancho
,oid setup() R
si(e(6//, 6//);
no@oop();
S
,oid draN() R
dibuarT(x, ;, a);
S
,oid dibuarT(int xpos, int ;pos, int apex) R
line(xpos, ;pos, xpos, ;pos5apex);
line(xpos5(apex/2), ;pos5apex, xpos4(apex/2), ;pos5
apex);
S
;a 9uncin dibuarT() 1uede :acerse una recursin si se llama a los elementos del )loAue nue%amente.
=im1lemente se necesitar, agregar una %aria)le num Aue 1ermita aumentar o decrecer la cantidad de %eces
Aue se llama a dic:a 9uncin
int x < 3/; //*oordenada Z del centro
int ; < 6//; //*oordenada V de abao
int a < 03; //Citad del ancho
int n < 0; //NEmero de recursiones
,oid setup() R
si(e(6//, 6//);
no@oop();
S
,oid draN() R
dibuarT(x, ;, a, n);
S
,oid dibuarT(int x, int ;, int apex, int num) R
line(x, ;, x, ;5apex);
line(x5apex, ;5apex, x4apex, ;5apex);
//-sta expresin relacional debe permitir de,ol,er un
//,alor !also para detener la recursin ; dibuar en
//pantalla#
i! (num 8 /) R
dibuarT(x5apex, ;5apex, apex/2, num56);
dibuarT(x4apex, ;5apex, apex/2, num56);
S
S
;a estructura )inaria en 9orma de ,r)ol< 1uede ser %isualizada de di%ersas maneras. El siguiente 1rograma
di)u8ar un crculo en cada nodo $ elimina las uniones.
int x < :0; //*oordenada Z
int r < D3; //>adio de Bnicio
int n < :; //NEmero de recursiones
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
no@oop();
S
,oid draN() R
dibuar*irculo(x, r, n);
S
,oid dibuar*irculo(int x, int radius, int num) R
!loat tt < 62: * num/.#/;
!ill(tt);
ellipse(x, 3/, radius*2, radius*2);
i! (num 8 6) R
num < num 5 6;
dibuar*irculo(x 5 radius/2, radius/2, num);
dibuar*irculo(x 4 radius/2, radius/2, num);
S
S
Fna 1eAueGa modi9icacin a las %aria)les 1roducen di9erentes resultados en la %isualizacin. =i a cada crculo
se le agregara una %alor aleatorio 1ara marcar la 1osicin< el resultado sera una imagen con una mezcla
eAuili)rada entre orden $ desorden. En el siguiente e8em1lo< en cada recursin< la escala de los crculos
decrece< la distancia con el crculo anterior tam)in< $ aumenta su ni%el de oscuridad. -l cam)iar el n3mero
utilizado con el random$eed()< la com1osicin %ara.
int x < :0; //*oordenada Z
int ; < 3/; //*oordenada V
int r < D/; //>adio de Bnicio
int n < K; //NEmero de recursiones
int rs < 62; //Malor para random$eed
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
no@oop();
random$eed(rs);
S
,oid draN() R
dibuar*irculo(x, ;, r, n);
S
,oid dibuar*irculo(!loat x, !loat ;, int radius, int num) R
!loat ,alue < 62: * num / :#/;
!ill(,alue, 630);
ellipse(x, ;, radius*2, radius*2);
i! (num 8 6) R
num < num 5 6;
int branches < int(random(2, :));
!or (int i < /; i 9 branches; i44) R
!loat a < random(/, TI?YAB);
!loat nue,ox < x 4 cos(a) * :#/ * num;
!loat nue,o; < ; 4 sin(a) * :#/ * num;
dibuar*irculo(nue,ox, nue,o;, radius/2,
num);
S
S
S
Ignacio Buioli | Jaime Prez Marn *.&
&nidad 21
4alores de Entrada' 5ouse
mouseX, mouseY, pmouseX, pmouseY, mousePressed, mouseButton
cursor(), noCursor()
;a 1antalla del ordenador es tan solo un 1uente entre nuestro cuer1o 9sico $ una cantidad a)ismal de
circuitos elctricos Aue :a)itan dentro de una com1utadora. !ontrolamos los elementos de la 1antalla a
tra%s de K1rtesisL 9sicas< tales como 1antallas t,ctiles< tracH)alls o 8o$sticHs. =in em)argo< el m,s com3n de
todos estos dis1ositi%os 1osi)lemente sea el mouse @ratnC. El mouse de los ordenadores data de 9inales de
*&".< cuando 'ouglas Engel)art lo 1resent como un dis1ositi%o del o2O;ine =$stem @2;=C< uno de los
1rimeros sistemas de ordenadores con %isualizacin de %ideo. El mouse 9ue incluido como conce1to en >ero6
Palo -lto 0esearc: !enter @P-0!C< 1ero no 9ue :asta *&44 Aue la -11le Macintos: lo con%irti en catalizador
de su actual uso. El diseGo del mouse :a tenido di%ersas modi9icaciones a tra%s de los aGos. 2o o)stante< su
9orma de uso sigue siendo la mismo. =e encarga de cam)iar en 1antalla la 1osicin >ON del cursor.
-#atos del 5ouse
En Processing< las %aria)les Aue nos 1ermiten o)tener datos del mouse son mouseZ $ mouseV @ntese el uso
de ma$3sculas en la > $ en la NC tomando como re9erencia la esAuina su1erior izAuierda como e8e .<.. Para
%er los %alores actuales del mouse en la consola< se recurre a un sim1le 1rograma
,oid draN() R
!rame>ate(62);
println(mouseZ 4 W F W 4 mouseV);
S
!uando un 1rograma inicia< el %alor de mouseZ $ mouseV es .. =i el cursor se mue%e dentro de la %entana de
re1resentacin< el %alor cam)ia a la actual 1osicin del mismo. =i el cursor se encuentra a la izAuierda< el
%alor de mouseZ ser, . $ comenzar, a incrementar a medida Aue este se mue%e :acia la derec:a. En
cam)io< si el cursor esta arri)a< el %alor de mouseV ser, . $ comenzar, a aumentar a medida Aue este se
mue%e :acia a)a8o. =i mouseZ $ mouseV se encuentran en un 1rograma donde no e6iste una estructura
draN() o est, acti%ada la 9uncin no@oop() en el setup()< los %alores de am)os ser,n siem1re ..
Eeneralmente< la 1osicin del mouse es utilizada 1ara controlar la 1osicin de algunos elementos de 1antalla.
;o interesante se 1roduce cuando e6isten di9erentes relaciones entre unos elementos $ otros a )ase de
conseguir datos de entrada 1or la 1osicin del mouse. Para in%ertir los %alores del mouse< sim1lemente :a$
Aue restarle a mouseZ el anc:o de 1antalla @NidthC $ a mouseV el alto de 1antalla @hei'htC.
// &n circulo si'ue al cursor
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
S
,oid draN() R
bac)'round(62:);
ellipse(mouseZ, mouseV, 00, 00);
S
Ignacio Buioli | Jaime Prez Marn **.
//1're'ando operaciones
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
S
,oid draN() R
bac)'round(62:);
ellipse(mouseZ, 6:, 00, 00); //*irculo de 1rriba
ellipse(mouseZ42/, 3/, 00, 00); //*irculo de el Cedio
ellipse(mouseZ52/, D., 00, 00); //*irculo de 1bao
S
//1l multiplicar ; di,idir se crean posiciones escalares
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
S
,oid draN() R
bac)'round(62:);
ellipse(mouseZ, 6:, 00, 00); //*irculo de 1rriba
ellipse(mouseZ/2, 3/, 00, 00); //*irculo de el Cedio
ellipse(mouseZ*2, D., 00, 00); //*irculo de 1bao
S
//Bn,ertir la posicin del cursor para crear se'undas
//respuestas
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
S
,oid draN() R
!loat x < mouseZ;
!loat ; < mouseV;
!loat ix < Nidth 5 mouseZ; //Bn,ertir Z
!loat i; < mouseV 5 hei'ht; //Bn,ertir V
bac)'round(62:);
!ill(233, 63/);
ellipse(x, hei'ht/2, ;, ;);
!ill(/, 637);
ellipse(ix, hei'ht/2, i;, i;);
S
;as %aria)les de Processing< pmouseZ $ pmouseV im1rimen como %alor la 1osicin del mouse 1re%ia al
cuadro Aue se esta e8ecutando. =i el mouse no se mue%e< el %alor siem1re ser, el mismo. =in em)argo< si el
mouse se mue%e r,1idamente< lo %alores 1ueden oscilar entre di%ersos 1ar,metros. Para %er esta di9erencia<
se 1uede e8ecutar un sim1le 1rograma Aue alterne los mo%imientos lentos $ r,1idos del mouse
,oid draN() R
!rame>ate(62);
println(pmouseZ 5 mouseZ);
S
Ignacio Buioli | Jaime Prez Marn ***
-l di)u8ar una lnea desde la anterior 1osicin del mouse :asta la 1osicin actual< se re%ela la %elocidad $ la
direccin del trazado. !uando el mouse est, Auieto< si di)u8a un 1unto. 2o o)stante< al mo%er el mouse< se
di)u8an largas lneas.
// Dibua un lnea entre la anterior posicin ; la actual
//posicin
,oid setup() R
si(e(6//, 6//);
stro)eIei'ht(D);
smooth();
S
,oid draN() R
bac)'round(2/.);
line(mouseZ, mouseV, pmouseZ, pmouseV);
S
;os %alores de mouseZ $ mouseV 1ueden utilizarse 1ara controla la escala< 1osicin $ rotacin de los
elementos del 1rograma. Por e8em1lo< 1ueden em1learse 8unto a la 9uncin translate().
// &tili(ando translate() para mo,er la !i'ura
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
S
,oid draN() R
bac)'round(62:);
translate(mouseZ, mouseV);
ellipse(/, /, 00, 00);
S
-ntes de utilizar los %alores o)tenidos 1or mouseZ $ mouseV< :a$ Aue 1ensar 1rimero en la clase de
1ar,metros Aue ace1tan dic:as 9unciones de trans9ormacin. Por e8em1lo< la 9uncin rotate() solo ace1ta
%alores en radianes. Para :acer Aue una 9igura rote en 3". grados< es necesario con%ertir los %alores de
mouseZ en %alores de ... a 2[. En el siguiente e8em1lo< se utiliza la 9uncin map() 1ara con%ertir dic:os
%alores. El %alor o)tenido es utilizado en la 9uncin rotate().
// &tili(ando rotate() para rotar la !i'ura
,oid setup() R
si(e(6//, 6//);
stro)eIei'ht(D);
smooth();
S
,oid draN() R
bac)'round(2/.);
!loat an'le < map(mouseZ, /, Nidth, /, TI?YAB);
translate(3/, 3/);
rotate(an'le);
line(/, /, ./, /);
S
Ignacio Buioli | Jaime Prez Marn **2
'e la misma 9orma< se 1uede utilizar una estructura BH 1ara reconocer indi%idualmente di9erentes sectores de
la 1antalla
// @a posicin del cursor selecciona una mitad de la pantalla
,oid setup() R
si(e(6//, 6//);
no$tro)e();
!ill(/);
S
,oid draN() R
bac)'round(2/.);
i! (mouseZ 9 3/) R
rect(/, /, 3/, 6//); //B(Guierda
S else R
rect(3/, /, 3/, 6//); //Derecha
S
S
// @a posicin del cursor selecciona la i(Guierda, derecha o
//el centro de la pantalla
,oid setup() R
si(e(6//, 6//);
no$tro)e();
!ill(/);
S
,oid draN() R
bac)'round(2/.);
i! (mouseZ 9 00) R
rect(/, /, 00, 6//); //B(Guierda
S else i! ((mouseZ 8< 00) UU (mouseZ 9< ::)) R
rect(00, /, 00, 6//); //Cedio
S else R
rect(::, /, 00, 6//); //Derecha
S
S
// @a posicin del cursor selecciona un cuadrante de la
//pantalla
,oid setup() R
si(e(6//, 6//);
no$tro)e();
!ill(/);
S
,oid draN() R
bac)'round(2/.);
i! ((mouseZ 9< 3/) UU (mouseV 9< 3/)) R
rect(/, /, 3/, 3/); //1rriba5B(Guierda
S else i! ((mouseZ 9< 3/) UU (mouseV 8 3/)) R
rect(/, 3/, 3/, 3/); //1bao5B(Guierda
S else i! ((mouseZ 8 3/) UU (mouseV 9 3/)) R
rect(3/, /, 3/, 3/); //1rriba5Derecha
S else R
rect(3/, 3/, 3/, 3/); //1bao5Derecha
S
S
// @a posicin del cursor selecciona un "rea rectan'ular
,oid setup() R
si(e(6//, 6//);
no$tro)e();
!ill(/);
S
,oid draN() R
bac)'round(2/.);
i! ((mouseZ 8 ./) UU (mouseZ 9 D/) UU (mouseV 8 2/)
UU (mouseV 9 D/)) R
!ill(233);
S else R
!ill(/);
S
rect(./, 2/, ./, :/);
S
-0otones del 5ouse
;os dis1ositi%os de entrada de las com1utadora< 1or lo general< 1oseen entre 2 $ 3 )otones< $ Processing
1uede detectarlos. ;a deteccin de la 1osicin del mouse< sumado a los )otones< 1ermiten utilizar al mouse
como un im1ortante dis1ositi%o de entrada en un 1rograma interacti%o. ;a %aria)le mouseAressed de%uel%e
un %alor true cuando un )otn del mouse es o1rimido< 1or el contrario de%uel%e un !alse. -dem,s< 1ermite
detectar Aue )otn 9ue o1rimido a tra%s de la %aria)le mouse=utton< 1udiendo ser su %alor @-HT
@izAuierdoC< >BX\T @derec:oC $ *-NT-> @centroC< de1endiendo el )otn Aue se desee detectar. Estas %aria)les
1ueden utilizarse inde1endientes o en com)inacin
// -l cuadrado cambia a blanco cuando el botn es presionado
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
bac)'round(2/.);
i! (mouseAressed << true) R
!ill(233); //=lanco
S else R
!ill(/); //Ne'ro
S
rect(23, 23, 3/, 3/);
S
// -l cuadro se ,uel,e ne'ro cuando se oprime el botn
//i(Guierdo ; blanco cuando se oprime el derecho, ; 'ris
//cuando no se oprime nin'uno#
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
i! (mouse=utton << @-HT) R
!ill(/); //Ne'ro
S else i! (mouse=utton << >BX\T) R
!ill(233); //=lanco
S
S else R
!ill(62:); //Xris
S
rect(23, 23, 3/, 3/);
S
2ota -l utilizar so9t?are Aue detecte dis1ositi%os de entrada< se suele correr el riesgo de Aue el usuario no
1osea el dis1ositi%o indicado @es1ecialmente si se 1lanea su)ir el 1ro$ecto a la ?e)C. Por e8em1lo< e6isten
usuarios Aue 1oseen un dis1ositi%o de mouse con dos )otones $ otros Aue tienen tres )otones. Es im1ortante
tener esto en mente a la :ora de 1rogramar con dis1ositi%os de entrada.
-Icono del $ursor
El cursor 1uede ser ocultado con la 9uncin no*ursor()< $ del mismo modo 1uede reem1lazarse 1or la
9uncin cursor(). !uando la 9uncin no*ursor() se est, e8ecutando< el cursor se encuentra totalmente
oculta< sin em)argo< la 1osicin 1uede conseguirse con mouseZ $ mouseV.
// Dibua una elipse para mostrar la posicin del cursor oculto
,oid setup() R
si(e(6//, 6//);
stro)eIei'ht(K);
smooth();
no*ursor();
S
,oid draN() R
bac)'round(2/.);
ellipse(mouseZ, mouseV, 6/, 6/);
S
=i la 9uncin no*ursor() se est, e8ecutando< el cursor estar, com1letamente oculto :asta Aue se llame a la
9uncin cursor()
// -sconde el cursor hasta Gue se oprima el botn del mouse
,oid setup() R
si(e(6//, 6//);
no*ursor();
S
,oid draN() R
bac)'round(2/.);
cursor();
S
S
-dem,s< la 9uncin cursor() ace1ta determinados 1ar,metros Aue 1ermiten cam)iar el cursor determinado
1or de9ecto 1or otro di9erente. ;os 1ar,metros autoOdescri1ti%os son 1>>?I @9lec:aC< *>?$$ @cruzC< \1ND
@manoC< C?M- @mo%erC< T-ZT @te6toC $ I1BT @es1eraC.
// Dibuar el cursor como una mano cuando el botn es oprimido
,oid setup() R
si(e(6//, 6//);
smooth();
S
,oid draN() R
bac)'round(2/.);
cursor(\1ND);
S else R
cursor(C?M-);
S
Ignacio Buioli | Jaime Prez Marn **/
line(mouseZ, /, mouseZ, hei'ht);
line(/, mouseV, hei'ht, mouseV);
S
;as im,genes Aue se muestren como cursor son las Aue est,n instaladas 1or de9ecto en el ordenador< $
%aran entre sistemas o1erati%os.
Ignacio Buioli | Jaime Prez Marn **"
&nidad 22
#i-ujo' ,or(as Est1ticas
El :ec:o de di)u8ar im1lica trasladar las 1erce1ciones indi%iduales $ la imaginacin en 9ormas %isuales de
re1resentacin. ;as di9erencias entre los di)u8os de las 1ersonas demuestran Aue cada KmanoL $ cada mente
es 3nica. ;os di)u8os %an desde las redes mec,nicas de =ol ;eIitt< 1asando 1or las lneas l3cidas de Paul
Xlee< la 9iguracin a)stracta de Mariano #errante< las 9iguraciones crom,ticas de >ul =olar< $ muc:o m,s all,.
Es in9initamente a)arcador el uni%erso Aue en%uel%e al di)u8o.
El di)u8o 1or com1utadora se inicia a 1lantear en la dcada de *&".. I%an =ut:erland :a)a creado en *&"3<
el so9t?are de &ketchpad @ta)la de di)u8oC 1ara su disertacin de P:'. El =Hetc:1ad se con%irti en el
antecesor de 1rogramas como el -utocad< el -do)e Illustrator o el InHsca1e.
-Derra(ientas Si(+les
Fna 9orma mu$ sencilla de di)u8ar con Processing es no incluir la 9uncin bac)'round() dentro del )loAue
draN(). Esta omisin 1ermite acumular 1i6eles cuadro a cuadro.
//Dibua un punto en la posicin del cursor
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
point(mouseZ, mouseV);
S
//Dibua desde la anterior posicin del mouse a la actual
//para crear lneas continuas
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
S
//Dibua una lnea cuando el botn del mouse es oprimido
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
S
S
,oid setup() R //Dibua lneas con di!erentes ,alores
si(e(6//, 6//); //de 'rises
S
,oid draN() R
i! (mouseAressed << true) R //$i el mouse est"
stro)e(233); //presionado el contorno
S else R //ser" blanco# $ino,
stro)e(/); //ser" ne'ro#
S
S
El :ec:o de di)u8ar con so9t?are no restringe a solo seguir %alores de entrada con el mouse. Inclu$endo algo
Ignacio Buioli | Jaime Prez Marn **+
tan sim1le como una estructura H?>< es 1osi)le di)u8ar lineas mas com1le8as con 1oca cantidad de cdigo.
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
!or (int i < /; i 9 3/; i 4< 2) R
point(mouseZ4i, mouseV4i);
S
S
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
!or (int i < 56.; i 9< 6.; i 4< 2) R
point(mouseZ4i, mouseV);
S
S
,oid setup() R
si(e(6//, 6//);
no$tro)e();
!ill(233, ./);
bac)'round(/);
S
,oid draN() R
!ill(/, 2:);
S else R
!ill(233, 2:);
S
!or (int i < /; i 9 :; i44) R
ellipse(mouseZ 4 i*i, mouseV, i, i);
S
S
-#i-ujando con I(1genes
'e la misma 9orma Aue se em1lean las 9iguras 1reOdiseGadas de Processing como :erramientas de di)u8o< las
im,genes Aue nosotros mismos cargamos 1ueden ser em1leadas 1ara la misma la)or.
// Dibuando con una ima'en
ABma'e lineaBma'en;
,oid setup() R
si(e(6//, 6//);
// -sta ima'en es de 6// pixeles de ancho, pero solo 6
//pixel de alto
lineaBma'en < loadBma'e(Wima'enlinea#p'W);
S
,oid draN() R
ima'e(lineaBma'en, mouseZ5lineBma'e#Nidth/2, mouseV);
S
// Dibuando con una ima'en Gue posee transparencia
ABma'e alphaBm';
,oid setup() R
si(e(6//, 6//);
// -sta ima'en tiene transparencia
alphaBm' < loadBma'e(Walpha1rch#pn'W);
S
,oid draN() R
int ix < mouseZ 5 alphaBm'#Nidth/2;
int i; < mouseV 5 alphaBm'#hei'ht/2;
ima'e(alphaBm', ix, i;);
S
Ignacio Buioli | Jaime Prez Marn **&
&nidad 23
4alores de Entrada' 6eclado
)e;Aressed, )e;, )e;*ode
;os teclados son com3nmente utilizados como dis1ositi%os de entrada de caracteres 1ara com1oner
documentos de te6to< Email< mensa8era instant,nea< $ relacionados. =in em)argo< el 1otencial de un teclado
de com1utadora %a muc:o m,s all, Aue su uso com3n. ;a e61ansin de la m,Auina de escri)ir al teclado
1ermiti utilizar este mismo como medio 1ara e8ecutar 1rogramas< mo%erse entre a1licaciones $ na%egar en
3' en los di%ersos %ideoO8uegos. Es 1osi)le ignorar la im1resin de caracteres $ concentrarse solo en el ritmo
en el Aue se o1rimen las teclas. 'e esta 9orma< 1odremos crear un 1rograma Aue o)tenga como %alor de
entrada la %elocidad con la Aue se escri)e< $ utilizar dic:os %alores 1ara controlar la %elocidad de un e%ento.
En los 3ltimos aGos< el teclado :a sido re%alorizado 1or otra clase de dis1ositi%os Aue no res1onden al estilo
de escritura DIE05N. Mtodos de tamaGo m,s 1eAueGo< como el teclado numrico de los tel9onos @a 1esar
de Aue dic:a inter9az :alla 9allado en la industria $ a:ora los tel9onos m%iles utilicen teclado ti1o DIE05NC.
Por otro lado< el reconocimiento de %oz est, a%anzando 9uertemente< $ se 1roclama como una alternati%a
9utura a la escritura 1or medio del teclado.
-#atos del 6eclado
Processing 1uede registrar la 3ltima tecla 1resionada 1or un dis1ositi%o de teclado. Por lo tanto< la %aria)le
Aue se em1lea es denominada )e;Aressed1 $ de%uel%e un %alor de ti1o boolean. 'ic:o %alor ser, true
solo cuando una tecla :alla sido 1resionada< de lo contrario ser, !alse. Mientras la tecla es 1resionada< este
%alor se mantendr, true< sin em)argo< se con%ertir, en un !alse cuando la tecla sea li)erada.
// Dibua una lnea si al'una tecla est" siendo presionada
,oid setup() R
si(e(6//, 6//);
smooth();
stro)eIei'ht(.);
S
,oid draN() R
bac)'round(2/.);
i! ()e;Aressed << true) R // $i una telcla es
line(2/, 2/, D/, D/); // presionada, dibua una
S else R // lnea# $ino,
rect(./, ./, 2/, 2/); // dibua un rect"n'ulo
S
S
// Cue,e una lnea mientras una tecla es presionada
int x < 2/;
,oid setup() R
si(e(6//, 6//);
smooth();
stro)eIei'ht(.);
S
,oid draN() R
bac)'round(2/.);
i! ()e;Aressed << true)R // $i una tecla es presionada
x44; // a're'a 6 a x
S
line(x, 2/, x5:/, D/);
S
Ignacio Buioli | Jaime Prez Marn *2.
;a %aria)le )e; es del ti1o char1 1ermite almacenar un car,cter< el 3ltimo 1resionado. ;a %aria)le )e; solo
almacenar, un %alor cada %ez. 'e esta manera< 1odemos crear un 1rograma Aue muestre te6to utilizando la
%aria)le )e; $ la 9uncin text().
AHont !ont;
,oid setup() R
si(e(6//, 6//);
!uente < loadHont(WThesisCono@i'ht5K2#,lNW);
textHont(!uente);
S
,oid draN() R
bac)'round(/);
text()e;, 2D, K3);
S
;a %aria)le )e;< suele em1learse 1ara detectar cual 9ue la 3ltima tecla o1rimida. El siguiente e8em1lo usa la
e61resin relacional )e; << ^1^. El em1leo de las comillas sim1les @^ ^C $ no de las comillas do)les @ C
se de)e a Aue las comillas do)le se inter1retan como %alores del ti1o $trin'< $ )e; solo de%uel%e %alores
del ti1o char. Por lo tanto< si utiliz,ramos comillas do)les nos 1roducira un error. El e%ento se 1roducir,
cuando se o1rima la - ma$3scula 3nicamente.
,oid setup() R
si(e(6//, 6//);
smooth();
stro)eIei'ht(.);
S
,oid draN() R
bac)'round(2/.);
// $i ^1^ es presionada, dibua una lnea
i! (()e;Aressed << true) UU ()e; << ^1^)) R
line(3/, 23, 3/, K3);
S else R // $ino, dibua una elipse
ellipse(3/, 3/, 3/, 3/);
S
S
En contadas ocasiones necesitaremos detectar si una tecla< Aue 1roducir, un e%ento< es 1resionada< 1ero se
1uede correr el riesgo de Aue el usuario tenga acti%ada la ma$3scula. Por ende< %amos a recurrir a com1ro)ar
am)as teclas 1ara un mismo e%ento. Para esto< utilizaremos la e61resin relacional TT @oC.
i! (()e;Aressed << true) UU (()e; << â^) TT ()e; << ^1^))) R
Na Aue cada tecla tiene un %alor numrico asignado @-=!IIC< el %alor de una )e; 1uede utilizarse como
%aria)le de control.
int x < /;
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
i! ()e;Aressed << true) R
Ignacio Buioli | Jaime Prez Marn *2*
x < )e; 5 02;
rect(x, 56, 2/, 6/6);
S
S
!loat an'le < /;
,oid setup() R
si(e(6//, 6//);
smooth();
stro)eIei'ht(D);
S
,oid draN() R
bac)'round(2/.);
i! ()e;Aressed << true) R
i! (()e; 8< 02) UU ()e; 9< 62:)) R
// $i es una tecla al!anum%rica,
// con,ertir este ,alor en un "n'ulo
an'le < map()e;, 02, 62:, /, TI?YAB);
S
S
arc(3/, 3/, ::, ::, an'le5AB/:, an'le4AB/:);
S
-6eclas $odificadas
-dem,s de leer letras numricas< caracteres< $ sm)olos< Processing 1uede leer %alores de otras letras tales
como -lt< !ontrol< =:i9t< BarraOEs1aciadora< Enter< 0eturn< Esca1e $ la )arra de )orrar. ;a %aria)le )e;*ode
almacena constantes encargadas de administrar esa in9ormacin. =e em1lea con la e61resin )e;*ode <<
*?D-D1 donde la constante 1uede ser 1@T1 *?NT>?@1 $\BHT1 &A @arri)aC< D?IN @a)a8oC< @-HT @izAuierdaC< $
>BX\T @derec:aC. E6isten caracteres Aue no son al9anumricos< como =1*e$A1*-1 T1=1 -NT->1 >-T&>N1
-$*< $ D-@-T-1 $ sin em)argo no se los considera caracteres codi9icados. Esto se de)e a Aue su
im1lementacin es mu$ %aria)le de1endiendo la 1lata9orma en la Aue se realicen. =e %er, m,s adelante.
int ; < 03;
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
bac)'round(2/.);
line(6/, 3/, 7/, 3/);
i! ()e; << *?D-D) R
i! ()e;*ode << &A) R
; < 2/;
S else i! ()e;*ode << D?IN) R
; < 3/;
S
S else R
; < 03;
S
rect(23, ;, 3/, 0/);
S

&nidad 28
4alores de Entrada' Eventos
mouseAressed(), mouse>eleased(), mouseCo,ed(), mouseDra''ed()
)e;Aressed(), )e;>eleased()
loop(), redraN()
;as 9unciones 1ueden llamar e%entos Aue alteran el normal 9lu8o del 1rograma cuando una accin como un
)otn o una tecla es o1rimida. Por lo tanto< un e%ento de una interru1cin del 9lu8o normal del 1rograma. Fna
tecla o1rimida< o la 1osicin del mouse< es almacenada :asta Aue el )loAue draN() termin de e8ecutarse.
En esos casos< se 1uede 1roducir un distur)io en el modo de di)u8ar. El cdigo dentro de un e%ento se
e8ecuta una %ez< cuando el e%ento ocurre. Por e8em1lo< si se utilizara un e%ento Aue detecta el 1resionar un
)otn del mouse< las acciones ocurrir,n solo una %ez :asta Aue el )otn sea li)erado $ 1resionado
nue%amente. Esto 1ermite Aue los datos Aue mane8en los e%entos del mouse o el teclado sean ledos
inde1endientemente de lo Aue est ocurriendo en el )loAue 1rinci1al.
-Eventos del 5ouse
;os e%entos del mouse son mouseAressed()< mouse>eleased()< mouseCo,ed()< $ mouseDra''ed():
mouseAressed() El cdigo dentro se e8ecuta cuando un )otn del mouse es o1rimido.
mouse>eleased() El cdigo dentro se e8ecuta cuando un )otn del mouse es li)erado.
mouseCo,ed() El cdigo dentro se e8ecuta cuando el cursor se mue%e.
mouseDra''ed() El cdigo dentro se e8ecuta cuando el cursor se mue%e mientras un )otn del mouse
es o1rimido
;a 9uncin mouseAressed() se e8ecuta de 9orma di9erente a la %aria)le mouseAressed. El %alor de la
%aria)le mouseAressed es un true :asta Aue el )otn sea li)erado. En cam)io< el cdigo dentro de un
)loAue mouseAressed() se e8ecuta cuando el )otn del mouse es o1rimido. En el siguiente e8em1lo se
1uede %er como el 9ondo del 1rograma cam)ia gradualmente su ni%el de gris a medida Aue un )otn del
mouse es o1rimido.
!loat 'ris < /;
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
bac)'round('ris);
S
,oid mouseAressed() R
'ris 4< 2/;
S
En el siguiente e8em1lo se e8ecuta lo mismo Aue el e8em1lo anterior< con la di9erencia Aue lo Aue controla el
ni%el de gris es el e%ento de li)erar el )otn del mouse. ;a di9erencia 1uede a1reciarse manteniendo a1retado
el )otn del mouse 1or un largo tiem1o $ as ad%ertir Aue el 9ondo se altera cuando dic:o )otn es li)erado.
!loat 'ra; < /;
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
bac)'round('ra;);
S
,oid mouse>eleased() R
'ra; 4< 2/;
S
-ntes de di)u8ar dentro de estas 9unciones< es im1ortante 1ensar en el 9lu8o del 1rograma. Por e8em1lo< :a$
crculos Aue son di)u8ados dentro de mouseAressed()1 $ luego dentro del )loAue draN() $a Aue retiramos
la 9uncin bac)'round(). =in em)argo< si estu%iese bac)'round() declarado< los elementos solo
a1areceran un sim1le cuadro en 1antalla $ luego de8aran de %erse.
,oid setup() R
si(e(6//, 6//);
!ill(/, 6/2);
S
,oid draN() R S // =loGue draN() ,aco, mantiene al
,oid mouseAressed() R //pro'rama eecut"ndose
rect(mouseZ, mouseV, 00, 00);
S
El cdigo de las 9unciones mouseCo,ed() $ mouseDra''ed() se e8ecuta cuando :a$ alg3n cam)io de
1osicin en el cursor. El cdigo dentro de mouseCo,ed() se e8ecuta al 9inal de cada cuadro cuando la
1osicin del mouse cam)ia $ no es 1resionado ning3n )otn. En cam)io< el cdigo dentro de
mouseDra''ed() se e8ecuta cuando la 1osicin del cursor es alterada a la %ez Aue es o1rimido el )otn del
mouse.
int dra'Z, dra'V, mo,eZ, mo,eV;
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
S
,oid draN() R
bac)'round(2/.);
!ill(/);
ellipse(dra'Z, dra'V, 00, 00); //*rculo Ne'ro
!ill(630);
ellipse(mo,eZ, mo,eV, 00, 00); //*rculo Xris
S
,oid mouseCo,ed() R //Cue,e el crculo 'ris
mo,eZ < mouseZ;
mo,eV < mouseV;
S
,oid mouseDra''ed() R //Cue,e el crculo ne'ro
dra'Z < mouseZ;
dra'V < mouseV;
S
-Eventos del 6eclado
!ada tecla 1resionada es registrada $ 1osee dos clases de e%entos< )e;Aressed() $ )e;>eleased()
)e;Aressed() El cdigo dentro de este )loAue se e8ecuta cuando un tecla es 1resionada
)e;>eleased() El cdigo dentro de este )loAue se e8ecuta cuando un tecla es li)erada
!ada %ez Aue una tecla es 1resionada 1odemos registrar el e%ento $ relacionarlo a una serie de acciones. 'e
esta 9orma< 1odemos usar )e;Aressed() 1ara controlar %alores numricos $ as utilizarlos 1ara< 1or
e8em1lo< cam)iar la 1osicin de un rect,ngulo.
,oid setup() R
si(e(6//, 6//);
no$tro)e();
!ill(233, 36);
S
,oid draN() R S //=loGue draN() ,aco, mantiene al
,oid )e;Aressed() R //pro'rama eecut"ndose
int ; < )e; 5 02;
rect(/, ;, 6//, .);
S
!ada %ez Aue una tecla es li)erada el cdigo dentro de )e;>eleased() es e8ecutado. En el siguiente
e8em1lo< se di)u8a una 5 cuando la tecla 5 se o1rime< $ desa1arece cuando la tecla se suelta.
boolean dibuarT < !alse;
,oid setup() R
si(e(6//, 6//);
no$tro)e();
S
,oid draN() R
bac)'round(2/.);
i! (dibuarT << true) R
rect(2/, 2/, :/, 2/);
rect(07, ./, 22, .3);
S
S
,oid )e;Aressed() R
i! (()e; << ^T^) TT ()e; << ^t^)) R
dibuarT < true;
S
S
,oid )e;>eleased() R
dibuarT < !alse;
S
;os siguientes dos e8em1los tra)a8an con )e;Aressed() 1ara leer $ analizar los %alores de entrada 1or el
teclado com)in,ndolos con datos del ti1o $trin'.
// &n eemplo extremadamente simple de un editor de texto
// permite a're'ar ; remo,er elementos de una lnea
AHont !uente;
$trin' letras < WW;
,oid setup() R
si(e(6//, 6//);
!uente < loadHont(W*onsolas52.#,lNW);
textHont(!uente);
stro)e(233);
!ill(/);
S
,oid draN() R
bac)'round(2/.);
!loat cursorAosition < textIidth(letras);
line(cursorAosition, /, cursorAosition, 6//);
text(letras, /, 3/);
S
,oid )e;Aressed() R
i! ()e; << =1*e$A1*-) R //=arra de -spacio
i! (letras#len'th() 8 /) R
letras< letras#substrin'(/, letras #len'th()56);
Ignacio Buioli | Jaime Prez Marn *2/
S
S else i! (textIidth(letras4)e;) 9 Nidth)R
letras < letras4)e;;
S
S
// *ompara los ,alores de entrada del teclado
// sea ne'ro o 'ris ; cambia el !ondo de acuerdo al ,alor#
// Aresionar -nter o >eturn para acti,ar los ,alores de
//entrada#
AHont !uente;
$trin' letras < WW;
int bac) < 6/2;
,oid setup() R
si(e(6//, 6//);
!uente < loadHont(W*onsolas52.#,lNW);
textHont(!uente);
text1li'n(*-NT->);
S
,oid draN() R
bac)'round(bac));
text(letras, 3/, 3/);
S
,oid )e;Aressed() R
i! (()e; << -NT->) TT ()e; << >-T&>N)) R
letras < letras#to@oNer*ase();
println(letras); //Bmprime en la consola
//el ,alor de entrada
i! (letras#eGuals(Wne'roW)) R
bac) < /;
S else i! (letras#eGuals(W'risW)) R
bac) < 2/.;
S
letras < WW; // @impia la ,ariable
S else i! (()e; 8 06) UU ()e; Q< *?D-D)) R
//$i la tecla es al!anum%rica, la a're'a al $trin'
letras < letras 4 )e;;
S
S
-$ontrolando el ,lujo
;os 1rogramas utilizan el )loAue draN() 1ara di)u8ar cuadro a cuadro las acciones Aue se 1retenden tan
r,1ido como sea 1osi)le. !on la 9uncin !rame>ate()< es 1osi)le limitar la cantidad de cuadros Aue e8ecuta
una accin cada segundo< $ la 9uncin no@oop() es utilizada 1ara :acer Aue el )loAue draN() de8e de
e8ecutarse constantemente. ;as 9unciones adicionales< loop() $ redraN()< 1ro%een de mas o1ciones
cuando se utilizan e%entos del mouse $ el teclado.
'e este modo< se 1odr, e8ecutar un 1rograma Aue se encuentre con no@oop() $ utilizar la 9uncin loop()
solo cuando se reAuiera. Esto sir%e 1ara a:orrar una gran cantidad de recursos @es1ecialmente si se 1iensa
utilizar el 1ro$ecto en la ?e)C. El siguiente e8em1lo e8ecuta un )loAue draN() 1or dos segundos cada %ez
Aue el )otn del mouse es o1rimido. Pasado el tiem1o< el 1rograma se 1one en 1ausa.
int !rame < /;
,oid setup() R
si(e(6//, 6//);
!rame>ate(0/);
S
,oid draN() R
Ignacio Buioli | Jaime Prez Marn *2"
i! (!rame 8 :/) R // $i ;a pasaron mas de :/ cuadros
no@oop(); // desde Gue el mouse !ue oprimido, pausar el pro'rama
bac)'round(/); // ; ,ol,er el !ondo ne'ro#
S else R // $ino, hacer el !ondo 'ris
bac)'round(2/.); // ; dibuar lneas en la
line(mouseZ, /, mouseZ, 6//); // posicin del mouse#
line(/, mouseV, 6//, mouseV);
!rame44;
S
S
loop();
!rame < /;
S
;a 9uncin redraN() e8ecuta el cdigo del )loAue draN() una %ez $ des1us detiene su e8ecucin. Esto es
mu$ 3til si nuestro 1rograma no necesita ser actualizado continuamente. - continuacin< se 1resenta un
e8em1lo donde el )loAue draN() se e8ecuta una %ez cuando se o1rime el )otn del mouse
,oid setup() R
si(e(6//, 6//);
no@oop();
S
,oid draN() R
bac)'round(2/.);
line(mouseZ, /, mouseZ, 6//);
S
redraN(); // -ecuta el cdi'o en el draN() una ,e(
S
Ignacio Buioli | Jaime Prez Marn *2+
&nidad 2<
4alores de Entrada' 5ouse II
constrain(), dist(), abs(), atan2()
;a 1osicin del cursor es un 1unto en la %entana de re1resentacin Aue se actualiza en cada cuadro. Este
1unto 1uede ser analizado $ modi9icado en relacin a otros elementos 1ara 1roducir nue%os %alores. Es
1osi)le contraer los %alores del mouse en un rango es1ec9ico< calcula la distancia entre su 1osicin $ otro
elemento< inter1olar entre dos %alores< determinar su %elocidad< $ calcular el ,ngulo del mouse en relacin a
otra 1osicin.
-=estringir
;a 9uncin constrain() 1ermite limitar un n3mero en un determinado rango. 0eci)e tres 1ar,metros
constrain(,alor, min, max)
El 1ar,metro $alor es el n3mero a limitar< el 1ar,metro min determina el %alor mnimo del rango< $ el
1ar,metro ma( determina el m,6imo %alor del rango. =i el $alor es menor o igual al 1ar,metro min1 entonces
el $alor eAui%ale a min. 0egresa< entonces el %alor de ma( si el $alor es ma$or o igual a ma(.
int x < constrain(03, 6/, 7/); // 1si'na 03 a x
int ; < constrain(3, 6/, 7/); // 1si'na 6/ a ;
int ( < constrain(76, 6/, 7/); // 1si'na 7/ a (
!uando se utiliza 8unto con mouseZ $ mouseV1 1odemos determinar el rango de %alores 1or el Aue se %a a
mo%er el cursor. Por e8em1lo< un ,rea.
// @imita la posicin del cursor en un "rea
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
S
,oid draN() R
bac)'round(/);
// @imita mx entre 03 ; :3
!loat mx < constrain(mouseZ, 03, :3);
// @imita m; entre ./ ; :/
!loat m; < constrain(mouseV, ./, :/);
!ill(6/2);
rect(2/, 23, :/, 3/);
!ill(233);
ellipse(mx, m;, 0/, 0/);
S
-#istancia
;a 9uncin dist() calcula la distancia entre dos coordenadas. Esta 9uncin 1uede utilizarse 1ara calcular la
distancia entre la 1osicin del cursor $ un 1unto en la 1antalla. 0eci)e cuatro 1ar,metros
dist(x6, ;6, x2, ;2)
;os 1ar,metros (4 $ y4 determinan el 1rimer 1unto< mientras Aue (5 $ y5 determinan el segundo 1unto. ;a
distancia entre am)os es calculado como un n3mero de ti1o decimal @!loatC.
!loat x < dist(/, /, 3/, /); // 1si'na 3/#/ a x
!loat ; < dist(3/, /, 3/, 7/); // 1si'na 7/#/ a ;
!loat ( < dist(0/, 2/, D/, 7/); // 1si'na D:#/2023. a (
El %alor regresado 1or dist() 1uede utilizarse 1ara 1ara cam)iar las 1ro1iedades de una 9igura
//@a distancia entre el centro de la ,entana de representacin
//; el cursor determinan el tama+o del crculo#
,oid setup() R
si(e(6//, 6//);
smooth();
S
,oid draN() R
bac)'round(/);
!loat d < dist(Nidth/2, hei'ht/2, mouseZ, mouseV);
ellipse(Nidth/2, hei'ht/2, d*2, d*2);
S
// Dibua una 'rilla de crculos ; calcula la
// la distancia para determinar su tama+o
!loat maxDistancia;
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
!ill(/);
maxDistancia < dist(/, /, Nidth, hei'ht);
S
,oid draN() R
bac)'round(2/.);
!or (int i < /; i 9< Nidth; i 4< 2/) R
!or (int < /; 9< hei'ht; 4< 2/) R
!loat mouseDist < dist(mouseZ, mouseV,
i, );
!loat diametro < (mouseDist / maxDistancia)
* ::#/;
ellipse(i, , diametro, diametro);
S
S
S
-Inter+olacin
;a Inter1olacin es una tcnica de animacin< Aue 1ermite generar mo%imiento entre dos 1untos. El :ec:o de
mo%er una 9raccin de la distancia total 1or cuadro< 1ermite generar desacelariones o incluso aceleraciones
en la 9orma Aue se mue%e una 9igura. El siguiente diagrama muestra lo Aue ocurre cuanto un 1unto se mue%e
siem1re la mitad entre su actual localizacin $ su 1r6ima localizacin
Ignacio Buioli | Jaime Prez Marn *2&
!uadro*
!uadro2
!uadro3
!uadro4
!uadro/
!uadro"
!uadro+
$o(ien2o 3-jetivo
!omo la 9igura disminu$e su %elocidad al acercarse al o)8eti%o< la 9igura )a8a. En el siguiente e8em1lo< la
%aria)le x es la 1osicin actual del crculo< $ la %aria)le obeti,oZ es el o)8eti%o al cual se 1retende llegar.
!loat x < /#/;
!loat interp < /#/3; //NEmeros de /#/ ; 6#/
,oid setup() R
si(e(6//, 6//);
smooth();
S
,oid draN() R
bac)'round(/);
!loat obeti,oZ < mouseZ;
x 4< (obeti,oZ 5 x) * interp;
ellipse(mouseZ, 0/, ./, ./);
ellipse(x, K/, ./, ./);
S
Para a1licar el mismo 1rinci1io a la 1osicin en 6 $ en $ a la %ez< ser, necesario calcular la distancia entre
am)as 1osiciones. En el siguiente e8em1lo el 1eAueGo crculo KsigueL al cursor. Mientras Aue el crculo grande
se 1osiciona en 1antalla 1or medio de un c,lculo de inter1olacin.
!loat x < /;
!loat ; < /;
!loat interp < /#/3; //NEmeros del /#/ al 6#/
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
S
,oid draN() R
bac)'round(/);
!loat obeti,oV < mouseV;
x 4< (obeti,oZ 5 x) * interp;
; 4< (obeti,oV 5 ;) * interp;
!ill(630);
ellipse(mouseZ, mouseV, 2/, 2/);
!ill(233);
ellipse(x, ;, ./, ./);
S
El siguiente e8em1lo introduce la 9uncin abs() 1ara conseguir el %alor a)soluto de un n3mero. Es necesario<
$a Aue los %alores utilizados en al inter1olacin 1ueden ser negati%os o 1ositi%os< de1endiendo de la 1osicin
en la Aue se encuentren con res1ecto al o)8eti%o. Fna estructura BH es utilizada 1ara actualizar la 1osicin<
solo si est, no tiene los mismos %alores Aue el o)8eti%o.
!loat x < /#/;
!loat interp < /#/3; //NEmeros del /#/ al 6#/
,oid setup() R
si(e(6//, 6//);
smooth();
S
,oid draN() R
bac)'round(/);
//Distancia de la posicin al obeti,o
!loat dx < obeti,oZ 5 x;
//$i la distancia est" entre la actual posicin ; el
//destino es ma;or Gue 6#/, actuali(ar posicin
i! (abs(dx) 8 6#/) R
x 4< dx * interp;
S
ellipse(mouseZ, 0/, ./, ./);
ellipse(x, K/, ./, ./);
S
-4elocidad
=e 1uede calcular la %elocidad del cursor 1or com1arar su actual 1osicin con la anterior. Puede conseguirse
9,cilmente utilizando la 9uncin dist() $ los %alores de mouseZ1 mouseV1 pmouseZ< $ pmouseV como
1ar,metros. El siguiente e8em1lo calcula la %elocidad del mouse $ la utiliza como %alor de de tamaGo de una
eli1se.
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
S
,oid draN() R
bac)'round(/);
!loat ,elocidad< dist(mouseZ, mouseV, pmouseZ, pmouseV);
!loat diametro < ,elocidad * 0#/;
ellipse(3/, 3/, diametro, diametro);
S
El anterior e8em1lo muestra una res1uesta instant,nea de la %elocidad del mouse. ;os n3meros Aue 1roducen
son e6tremos $ 1ueden ir desde cero a enormes %alores de un cuadro al otro. ;a tcnica de inter1olacin
1odra utilizarse 1ara aumentar o disminuir gradualmente una 1ro1iedad de un o)8eto< utilizando los %alores
de %elocidad del mouse.
!loat ,elocidad < /#/;
!loat interp < /#/3; // NEmeros del /#/ al 6#/
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
S
,oid draN() R
bac)'round(/);
!loat obeti,o < dist(mouseZ, mouseV, pmouseZ, pmouseV);
,elocidad 4< (obeti,o 5 ,elocidad) * interp;
rect(/, 00, obeti,o, 6K);
rect(/, 3/, ,elocidad, 6K);
S
-3rientacin
;a 9uncin atan2() es usada 1ara calcular el ,ngulo desde un 1unto a la coordenada de origen (/,/).
0eci)e dos 1ar,metros
atan2(;, x)
El 1ar,metro y es la coordenada de $ de donde se encuentra el ,ngulo< mientras Aue el 1ar,metro ( es la
coordenada en 6 de dic:o 1unto. ;os %alores del ,ngulo son regresado en radianes< en un rango de [ a O[.
Es im1ortante destacar Aue el orden de los 1ar,metros 6 e $ est,n in%ertidos en este caso< con res1ecto a las
9unciones Aue :emos %isto.
//-l "n'ulo incrementa a medida Gue se el mouse se mue,e de la esGuina
//superior derecha a la esGuina in!erior i(Guierda
,oid setup() R
si(e(6//, 6//);
!rame>ate(63);
!ill(/);
S
,oid draN() R
!loat an'le < atan2(mouseV, mouseZ);
!loat de' < de'rees(an'le);
println(de');
bac)'round(2/.);
ellipse(mouseZ, mouseV, D, D);
rotate(an'le);
line(/, /, 63/, /);
S
El cdigo se e61lica con las siguientes im,genes
Para calcular el atan2() relati%o a otro 1unto en lugar del (/,/)< de)e restarle dic:a coordenada a los
1ar,metros ; $ x. Para esto< lo ideal es utilizar la 9uncin translate() con atan2() 1ara controlar la
rotacin< 8unto con pushCatrix() $ popCatrix() 1ara controlar la 9igura.
//>otar los tri"n'ulos siempre en el punto
//del cursor
!loat x < 3/;
!loat ;6 < 00;
!loat ;2 < ::;
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
S
,oid draN() R
bac)'round(/);
//Tri"n'ulo $uperior
!loat an'le < atan2(mouseV5;6, mouseZ5x);
pushCatrix();
translate(x, ;6);
rotate(an'le);
trian'le(52/, 5D, 2/, /, 52/, D);
popCatrix();
pushCatrix();
//Tri"n'ulo Bn!erior
!loat an'le2 < atan2(mouseV5(;2), mouseZ5x);
translate(x, ;2);
rotate(an'le2);
trian'le(52/, 5D, 2/, /, 52/, D);
popCatrix();
S

&nidad 2>
4alores de Entrada' 6ie(+o * ,ec7as
second(), minute(), hour(), millis(), da;(), month(), ;ear()
;os seres :umanos 1oseemos una relati%a 1erce1cin del tiem1o< 1ero las m,Auinas mantienen una idea 9i8a
$ regular del tiem1o. En tiem1os 1asados< se utiliza)an relo8es de sol $ de agua 1ara 1oder tener una 9orma
correcta de %isualizar el tiem1o. Jo$ en da las 1ersonas recurren a los relo8es digitales< un relo8 numrico
graduado en doce :oras< con minutos $ segundos.
;a 1osi)ilidad de Aue un 1rograma sea ca1az de leer el actual tiem1o $ 9ec:as< a)re la 1osi)ilidad a un ,rea
interesante. 'arle la 1osi)ilidad a un 1rograma de de1ender del tiem1o< nos otorga 1oder :acer Aue este
cam)ie de color cada da< o un relo8 digital Aue 1roduzca una animacin cada :ora.
-Segundos, 5inutos, Doras
Para em1ezar< Processing es ca1az de leer los datos del relo8 de la com1utadora. ;os segundos actuales son
ledos con la 9uncin second()< la cual regresa un %alor entre . $ /&. ;os minutos actuales son ledos con la
9uncin minute()1 la cual regresa un %alor entre . $ /&. ;a :ora actual es leda 1or la 9uncin hour()1 la
cual le%anta cualAuiera de las 24 :oras< regresa %alores entre . $ 23. En este sistema< la medianoc:e es .< el
medioda es *2< las &.. a.m. es &< $ las /.. 1.m. es *+. =i se e8ecuta el siguiente 1rograma 1odr, %erse la
:ora actual en la consola
int s < second(); //>e'resa ,alores de / a 37
int m < minute(); //>e'resa ,alores de / a 37
int h < hour(); //>e'resa ,alores de / a 20
println(h 4 WFW 4 m 4 WFW 4 s); //Bmprime la hora en la consola
=i se e8ecuta dentro del )loAue draN()< 1odremos %er como el tiem1o se %a actualizando. El siguiente
e8em1lo lee continuamente la :ora actual $ la muestra en la consola
int ultimo$e'undo < /;
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
int s < second();
int m < minute();
int h < hour();
//$olo imprime una ,e(, cuando los se'undos cambian
i! (s Q< ultimo$e'undo) R
println(h 4 WFW 4 m 4 WFW 4 s);
ultimo$e'undo < s;
S
S
-dem,s< se 1uede crear de 9orma mu$ sim1le un relo8 Aue muestre la :ora $ se %a$a actualizando al utilizar la
9uncin text(). ;a 9uncin n!() se utiliza 1ara se1arar a1ro1iadamente el es1acio de la izAuierda $ la
derec:a del n3mero.
AHont !uente;
,oid setup() R
si(e(6//, 6//);
!uente < loadHont(WAro52/#,lNW);
textHont(!uente);
S
,oid draN() R
bac)'round(/);
int s < second();
int m < minute();
int h < hour();
//@a !uncin n!() separa los nEmeros correctamente
$trin' t < n!(h,2) 4 WFW 4 n!(m,2) 4 WFW 4 n!(s,2);
text(t, 6/, 33);
S
Ja$ muc:as 9ormas de e61resar el 1aso del tiem1o< $ no todas de)en estar ligadas a la 9orma de un relo8. En
el siguiente e8em1lo< las lneas sim)olizan las :oras< los minutos $ los segundos. Para :acerlo sim1lemente
se recurre a usar la 9uncin map() $ as con%ertir los %alores de . a /&< a un rango de . a *...
,oid setup() R
si(e(6//, 6//);
stro)e(233);
S
,oid draN() R
bac)'round(/);
!loat s < map(second(), /, :/, /, 6//);
!loat m < map(minute(), /, :/, /, 6//);
!loat h < map(hour(), /, 2., /, 6//);
line(s, /, s, 00);
line(m, 0., m, ::);
line(h, :K, h, 6//);
S
-l tener los %alores normalizados< los mismos 1ueden utilizarse 1ara otra clase de 9actores. En este caso< se
1rogramar, un cl,sico relo8 de mano. El incon%eniente se 1roduce en la 9uncin hour()< $a Aue esta
de%uel%e 3nicamente %alores de 24 :oras< $ reAuerimos %alores de *2 :oras. =in em)argo< 1odremos
conseguir dic:a escala 1or sacar el P *2.
,oid setup() R
si(e(6//, 6//);
stro)e(233);
S
,oid draN() R
bac)'round(/);
!ill(D/);
no$tro)e();
//dn'ulos para sin() ; cos() inician a las 0 en punto;
//la sustraccin de \1@HYAB hace Gue comiencen desde
//arriba
ellipse(3/, 3/, D/, D/);
!loat s < map(second(), /, :/, /, TI?YAB) 5 \1@HYAB;
!loat m < map(minute(), /, :/, /, TI?YAB) 5 \1@HYAB;
!loat h < map(hour() P 62, /, 62, /, TI?YAB) 5 \1@HYAB;
stro)e(233);
line(3/, 3/, cos(s) * 0D 4 3/, sin(s) * 0D 4 3/);
line(3/, 3/, cos(m) * 0/ 4 3/, sin(m) * 0/ 4 3/);
line(3/, 3/, cos(h) * 23 4 3/, sin(h) * 23 4 3/);
S
!omo agregado a la lectura del relo8 del ordenador< Processing inclu$e una 9uncin Aue almacena el tiem1o
desde Aue inici el 1rograma. Este tiem1o es almacenado en miliOsegundos< o sea< milsimas de segundos.
'os mil miliOsegundos son 2 segundos< 2.. miliOsegundos son .<2 segundos. Este n3mero 1uede ser
o)tenido con la 9uncin millis() $ 1uede ser utilizado 1ara calcular el tiem1o transcurrido desde Aue inici
el 1rograma.
//$e usa millis() para iniciar una lnea pasados 0 se'undos
int x < /;
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
i! (millis() 8 0///) R
x44;
S
line(x, /, x, 6//);
S
;a 9uncin millis() regresa un n3mero del ti1o int< 1ero es con%eniente con%ertirlo en un !loat 1ara
1oder utilizarlo directamente como segundos.
int x < /;
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
!loat sec < millis() / 6///#/;
i! (sec 8 0#/) R
x44;
S
line(x, /, x, 6//);
S
-,ec7a
;a in9ormacin de la 9ec:a es leda de manera similar a la del tiem1o. El da actual es ledo con la 9uncin
da;()< la cual de%uel%e un %alor entre * $ 3*. El mes corriente es ledo con la 9uncin month()< la cual
de%uel%e un %alor entre * $ *2< donde * es Enero< " es Junio $ *2 es 'iciem)re. El aGo actual es ledo con la
9uncin ;ear()< el cual regresa un %alor entero de cuatro dgitos< o sea< el aGo actual.
int d < da;(); //>e'resa ,alor de 6 al 06
int m < month(); //>e'resa ,alor de 6 al 62
int ; < ;ear(); //>e'resa el a+o en cuatro d'itos (2//7, 2/6/, etc#)
println(d 4 W W 4 m 4 W W 4 ;);
El siguiente e8em1lo e%al3a si el da actual es el 1rimero del mes. En caso de ser cierto< im1rime en la consola
el mensa8e KAien$enido a un nue$o BesL.
,oid draN() R
int d < da;(); //Malores de 6 a 06
i! (d << 6) R
println(W=ien,enido a un nue,o Ces#W);
S
S
El siguiente e8em1lo se e8ecuta continuamente $ e%al3a si el da actual es el 1rimer da del aGo< o sea< -Go
2ue%o. En caso de Aue sea cierto< im1rime en la consola KHoy es el primer d@a del A8oCL.
,oid draN() R
int d < da;(); //Malores de 6 a 06
int m < month(); //Malores de 6 a 62
i! ((d << 6) UU (m << 6)) R
println(W\o; es el primer da del 1+oQW);
S
S
&nidad 2?
5ovi(iento' :@neas * $urvas
Fna 1ro9unda com1resin del mo%imiento es sumamente 3til a la :ora de comunicar 1ara el )ailarn< el
animador $ el director de cine. Duien 1ractica el arte de los nue%os medios 1uede em1lear el mo%imiento 1ara
1otenciar cualAuiera de sus tra)a8os< desde un sitio ?e) a un %ideoO8uego. El elemento 9undamental ser, el
tiem1o< o< m,s 1recisamente< como los elementos cam)ian en el tiem1o. ;as im,genes est,ticas 1ueden
e61resar la nocin de mo%imiento< un medio )asado en el tiem1o< como un %deo< un film1 $ el so9t?are
1ueden e61resar eso mismo de 9orma directa. ;a de9inicin de mo%imiento a tra%s de cdigo muestra el
1oder $ la 9le6i)ilidad del medio.
-$ontrolando el 5ovi(ientos
Para 1oner una 9igura en mo%imiento< siem1re necesitaremos de al menos una %aria)le Aue cam)ie al menos
una de sus 1ro1iedades en cada cuadro Aue se e8ecuta la 9uncin draN(). En unidades 1re%ias< se :an
1resentado algunas 9ormas de generar mo%imientos. Para Aue la 9igura no de8e un rastro< necesitamos lim1iar
la 1antalla antes de di)u8ar la 9igura actualizada. Para esto< 1ondremos la 9uncin bac)'round() al 1rinci1io
de la estructura draN()< de esta 9orma estaremos lim1iando cada cuadro antes de di)u8ar en el. N 1or 3ltimo<
tener en cuenta la utilizacin dela 9uncin !rame>ate() 1ara controlar la cantidad de cuadros 1or segundo
Aue %a a 1rocesar el 1rograma @a ma$or cantidad< el mo%imiento ser, mas 9luido< 1ero se necesitar, de una
ma$or ca1acidad en el ordenadorC.
!loat ; < 3/#/;
!loat ,el < 6#/;
!loat radio < 63#/;
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
S
,oid draN() R
bac)'round(/);
ellipse(00, ;, radio, radio);
; < ; 4 ,el;
i! (; 8 hei'ht4radio) R
; < 5radio;
S
S
;a din,mica 1ermite tam)in crear una serie de e9ectos %isuales mu$ interesantes. Fno de ellos< $ de sencilla
1rogramacin< es crear un desen9oAue mientras se mue%e la 9igura. Es una de las tantas alternati%as al
utilizar bac)'round() al 1rinci1io del draN(). Ftilizando sim1lemente un rect,ngulo del tamaGo de la
%entana de re1resentacin< 1odremos darle a dic:a 9igura cierta trans1arencia. =i el n3mero de al9a se acerca
a 2//< el rastro desen9ocado ser, cada %ez menor :asta no distinguirse. =i este n3mero se acerca a .< dic:o
desen9oAue ser, ma$or.
Podemos< adem,s< crear una %aria)le direccion Aue controle la 1osicin de la 9igura. 'e esta 9orma<
cuando la 9igura se e6ceda de la %entana de re1resentacin< esta %aria)le 1uede cam)iar a O* $ as in%ertir los
%alores con los Aue se mue%e la 9igura. 'e esta 9orma< si direccion es *< ser, O*< $ si direccion es O*<
ser, *. ;a 9igura resultante se encontrar, siem1re dentro de las dimensiones de la %entana de re1resentacin.
!loat ; < 3/#/;
!loat ,el < 6#/;
!loat radio < 63#/;
int direccion < 6;
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
S
,oid draN() R
!ill(/, 62);
rect(/, /, Nidth, hei'ht);
!ill(233);
ellipse(00, ;, radio, radio);
; 4< ,el * direccion;
i! ((; 8 hei'ht5radio) TT (; 9 radio)) R
S
S
Para tener una 9igura Aue tam)in cam)ie la 1osicin relati%a a los m,rgenes izAuierdo $ derec:o de la
%entana de re1resentacin< reAuiere un segundo gru1o de %aria)les. El siguiente e8em1lo tra)a8a con el
mismo 1rinci1io Aue los anteriores< solo Aue 9i8a un limite en todos los m,rgenes.
!loat x < 3/#/; //*oordenada Z
!loat ; < 3/#/; //*oordenada V
!loat radio < 63#/; //>adio del crculo
!loat ,elZ < 6#/; //Melocidad del mo,imiento en el ee Z
!loat ,elV < /#.; //Melocidad del mo,imiento en el ee V
int direccionZ < 6; //Direccin del mo,imiento en el ee Z
int direccionV < 56; //Direccin del mo,imiento en el ee V
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
S
,oid draN() R
!ill(/, 62);
!ill(233);
ellipse(x, ;, radio, radio);
x 4< ,elZ * direccionZ;
i! ((x 8 Nidth5radio) TT (x 9 radio)) R
direccionZ < 5direccionZ; //*ambia Direccin
S
; 4< ,elV * direccionV;
i! ((; 8 hei'ht5radio) TT (; 9 radio)) R
direccionV < 5direccionV; //*ambia Direccin
S
S
5am)in es 1osi)le cam)iar las 1ro1iedades del 9ondo< color< relleno $ tamaGo< en lugar de solo la 1osicin de
una 9igura. El siguiente e8em1lo modi9ica el tamaGo de unas eli1ses con la misma idea de cam)io de direccin
del e8em1lo anterior.
!loat d < 2/#/;
!loat ,el < 6#/;
int direccion < 6;
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
!ill(233, 2/.);
S
,oid draN() R
bac)'round(/);
ellipse(/, 3/, d, d);
ellipse(6//, 3/, d, d);
ellipse(3/, /, d, d);
ellipse(3/, 6//, d, d);
d 4< ,el * direccion;
i! ((d 8 Nidth) TT (d 9 Nidth/6/)) R
S
S
En contraste con los mo%imientos im1lcitos %istos en los e8em1los anteriores< 1odemos crear mo%imientos
e61lcitos. Esta clase de mo%imientos reAuieren Aue se esta)lezca 1rimero una 1osicin de inicio $ la
distancia del recorrido. -dem,s< necesitaremos esta)lecer el recorrido entre los cuadros. En el cdigo a
continuacin< las %aria)les inicioZ e inicioV1 esta)lecen la 1osicin de 1artida. En contra 1arte< las
%aria)les !inalZ $ !inalV corres1onden a la 1osicin de llegada. ;as %aria)les x e ; corres1onden a la
1osicin actual de la 9igura. ;a %aria)le step re1resenta el 1orcenta8e del cam)io Aue tendr, la 9igura< $ la
%aria)le pct mantiene el %ia8e del 1orcenta8e total de la distancia recorrida. Por lo tanto< step $ pct de)en
siem1re ser entre ... $ *... !uando el 1rograma se e8ecuta< step se incrementa $ as cam)ia la 1osicin de
las %aria)les x e ;< ese %alor es ma$or a *..< el mo%imiento se detiene.
!loat inicioZ < 2/#/; //*oordenada inicial Z
!loat inicioV < 6/#/; //*oordenada inicial V
!loat !inalZ < K/#/; //*oordenada !inal Z
!loat !inalV < D/#/; //*oordenada !inal V
!loat distZ; //Distancia con el -e Z
!loat distV; //Distancia con el -e V
!loat x < /#/; //*oordenada Z actual
!loat ; < /#/; //*oordenada V actual
!loat step < /#/2;//Tama+o de cada mo,imiento (de /#/ a 6#/)
!loat pct < /#/; //Aorcentae recorrido (de /#/ a 6#/)
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
distZ < !inalZ 5 inicioZ;
distV < !inalV 5 inicioV;
S
,oid draN() R
!ill(/, 62);
pct 4< step;
i! (pct 9 6#/) R
x < inicioZ 4 (pct * distZ);
; < inicioV 4 (pct * distV);
S
!ill(233);
ellipse(x, ;, 2/, 2/);
S
;a tcnica de inter1olacin< introducida en unidades 1re%ias< 1uede ser un gran recurso 1ara los mo%imientos
de animacin. El siguiente e8em1lo ada1ta el cdigo anterior $ agregar la tcnica de inter1olacin.
!loat x < 2/#/; //*oordenada Z inicial
!loat ; < 6/#/; //*oordenada V inicial
!loat obeti,oZ < K/#/; //*oordenada Z de Destino
!loat obeti,oV < D/#/; //*oordenada V de Destino
!loat interpolacion < /#/3; //Tama+o de cada mo,imiento
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
S
,oid draN() R
!ill(/, 62);
!loat d < dist(x, ;, obeti,oZ, obeti,oV);
i! (d 8 6#/) R
x 4< (obeti,oZ 5 x) * interpolacion;
; 4< (obeti,oV 5 ;) * interpolacion;
S
!ill(233);
ellipse(x, ;, 2/, 2/);
S
-5ovi(iento a lo largo de las $urvas
En unidades anteriores< se detall 1articularmente el uso de cur%as sim1les con 9ormulas matem,ticas Aue
Processing 1osee en su estructura. En lugar de di)u8ar la cur%a entera en un solo cuadro< es 1osi)le distri)uir
este 1roceso en los 1asos 1ara llegar de un 1unto a otro. El siguiente cdigo es un sim1le agregado a los
e8em1los anteriores< donde el tra$ecto en lugar de :acerse de 9orma recta< se utiliza un tra$ecto de cur%a.
!loat exponente < /#3; //Determina la *ur,a
!loat step < /#/6; //Tama+o de cada mo,imiento
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
S
,oid draN() R
!ill(/, 2);
pct 4< step;
i! (pct 9 6#/) R
; < inicioV 4 (poN(pct, exponente) * distV);
S
!ill(233);
ellipse(x, ;, 2/, 2/);
S
5odos los ti1os de cur%as %istos en las unidades 1re%ias 1ueden utilizarse 1ara escalar 9iguras o modi9icar su
1osicin. 5am)in< una %ez Aue el 1rograma e8ecuta un camino cur%o< 1uede calcular $ generar otro.
int direccion < 6;
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
S
,oid draN() R
!ill(/, 2);
pct 4< step * direccion;
i! ((pct 8 6#/) TT (pct 9 /#/)) R
direccion < direccion * 56;
S
i! (direccion << 6) R
!loat e < poN(pct, exponente);
; < inicioV 4 (e * distV);
S else R
!loat e < poN(6#/5pct, exponente*2);
; < inicioV 4 (e * 5distV) 4 distV;
S
!ill(233);
ellipse(x, ;, 2/, 2/);
S
Na Aue la 9igura realiza un tra$ecto cur%o< su %elocidad %ara. 'e esta 9orma< dic:o tra$ecto 1uede usarse 1ara
controlar la %elocidad %isual de un elemento. ;os resultados Aue de%uel%en las 9unciones matem,ticas< no
de)en usarse necesariamente en las dos dimensiones de la %entana de re1resentacin. =u1ongamos Aue
omitimos la 1osicin en 6< de esta manera utilizaramos la coordenadaO$ como controlador de la %elocidad de
la 9igura< a 1esar de Aue el tra$ecto sea una recta.
El siguiente e8em1lo muestra como utilizar una cur%a como regulador de la %elocidad. ;a eli1se comienza mu$
lento< e inmediatamente comienza a acelerarse. ;a %aria)le e61onente es la encargada de regular la cur%a<
1or lo tanto< la %elocidad est, ligado ntimamente a ella. Por :acer clicH con el mouse se selecciona un nue%o
1unto.
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
S
,oid draN() R
!ill(/, 2);
i! (pct 9 6#/) R
pct < pct 4 step;
!loat rate < poN(pct, exponente);
x < inicioZ 4 (rate * distZ);
; < inicioV 4 (rate * distV);
S
!ill(233);
ellipse(x, ;, 2/, 2/);
S
pct < /#/;
inicioZ < x;
inicioV < ;;
distZ < mouseZ 5 x;
distV < mouseV 5 ;;
S
-5ovi(iento a trav!s de la 6ransfor(acin
;as 9unciones de trans9ormacin 1ueden usarse tam)in en mo%imiento 1or cam)iar los 1ar,metros Aue
reci)en las 9unciones translate()1 rotate() $ scale(). -ntes de utilizar las 9unciones de
trans9ormacin< es im1ortante tener conocimientos 1lenos en ellas< $ sa)er 1rinci1almente Aue estas cam)ian
las 1ro1iedades del )loAue draN(). =i e8ecutamos la 9uncin translate(3, /)< todo lo Aue se inclu$a en
el )loAue draN() comenzar, corrido / 1i6eles en el e8e 6. 2o solo eso< aumentar, de / en / en cada
re1eticin. 'e la misma 9orma< si incluimos la 9uncin en el )loAue setup()< esta no tendr, e9ecto.
,oid setup() R
si(e(6//, 6//);
smooth();
no@oop();
translate(3/, /); //No sur'e e!ecto
S
,oid draN() R
bac)'round(/);
ellipse(/, 3/, :/, :/);
S
!loat ; < 3/#/;
!loat ,el < 6#/;
!loat radio < 63#/;
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
S
,oid draN() R
!ill(/, 62);
!ill(233);
translate(/, ;); //-stablece la coordenada5; del crculo
ellipse(00, /, radio, radio);
; 4< ,el;
; < 5radio;
S
S
!loat ; < 3/#/;
!loat ,el < 6#/;
!loat radio < 63#/;
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
S
,oid draN() R
!ill(/, 62);
!ill(233);
pushCatrix();
translate(/, ;);
//1!ectado por el primer translate()
ellipse(00, /, radio, radio);
translate(/, ;);
// 1!ectado por el primer ; el se'undo translate()
ellipse(::, /, radio, radio);
popCatrix();
//No a!ectado por nin'En translate()
ellipse(77, 3/, radio, radio);
; < ; 4 ,el;
; < 5radio;
S
S
!loat an'ulo < /#/;
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
S
,oid draN() R
!ill(/, 62);
!ill(233);
an'ulo < an'ulo 4 /#/2;
translate(K/, ./);
rotate(an'ulo);
rect(50/, 50/, :/, :/);
S
;as 9unciones translate()1 rotate() $ scale() 1ueden ser utilizadas 1ara generar mo%imientos< 1ero
usarlas todas 8untas resulta intrincado. Para tener un ma$or control de dic:as 1ro1iedades se recomienda una
1ro9unda lectura de las unidades dedicadas a trans9ormaciones %istas anteriormente< $ recurrir al uso de
pushCatrix() $ popCatrix().
&nidad 2A
5ovi(iento' 5ec1nicos * 3rg1nicos
;os 1rogramadores suelen determinar como Auieren Aue sus 1rogramas se mue%an. !osas como esas
suelen transmitir $ comunicar di%ersas cosas< 1or lo tanto no es correcto li)rarlo al azar. =olemos clasi9icar a
las cosas entre lo Aue 1osee una clase de mo%imiento $ lo Aue no lo 1osee. Jacemos distensiones entre lo
animado $ lo inanimado. El mo%imiento en un 1rograma 1uede ser mas %enta8oso a3n< $a Aue 1odra
intentarse :acer una 9iel co1ia a la realidad o ignorar es 1or com1leto. ;os 1rogramas :acen 1osi)le
inconta)les ti1os de mo%imientos di9erentes< 1ero el 9oco est, 1uesto en dos de ellos los mec,nicos $ los
org,nicos.
-5ovi(iento 5ec1nico
;a 9uncin sin() suele usarse con muc:a 9recuencia a la :ora de 1roducir un mo%imiento elegante. Esto se
de)e a su 9acilidad 1ara 1roducir aceleraciones $ desacelariones con un 3nico %alor. ;a onda seno< tomando
los %alores de las dos dimensiones< 1roducir, un e9ecto un tanto e6traGo. =in em)argo< si tomamos
3nicamente los %alores de la coordenadaO$< solo conseguiramos los %alores de incremento $ decrecimiento.
En las siguientes im,genes< la de la izAuierda re1resenta la e%olucin de la onda seno a lo largo de las dos
coordenadas. En cam)io< la de la derec:a< omite las coordenadas del e8e 6< mostrando solo los 1untos Aue
recorre el e8e $.

;os %alores de sin() son utilizados 1ara crear el mo%imiento de una 9igura en el siguiente e8em1lo. ;a
%aria)le an'ulo incrementa constantemente $ 1roduce el cam)io en sin() en un rango de O* a *. ;os
%alores son multi1licados 1or radio 1ara :acer Aue estos sean ma$ores. El resultado es asignado a la
%aria)le ;o!!set< $ esta luego es usada 1ara determinar la 1osicin de la eli1se en la coordenadaO$.
!loat an'ulo < /#/; //dn'ulo 1ctual
!loat ,el < /#6; //Melocidad del Co,imiento
!loat radio < ./#/; //>an'o del Co,imiento
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
S
,oid draN() R
!ill(/, 62);
!ill(233);
an'ulo 4< ,el;
!loat sin,al < sin(an'ulo);
!loat ;o!!set < sin,al * radio;
ellipse(3/, 3/ 4 ;o!!set, D/, D/);
S
-gregando %alores de sin() $ cos() se 1roducir,n mo%imientos muc:o m,s com1le8os. En el siguiente
e8em1lo< un 1eAueGo 1unto se mue%e de 9orma circular usando los %alores de sin() $ cos(). Fn gran 1unto
utiliza los mismos %alores 1ero agrega unos nue%os %alores de sin() $ cos().
!loat an'ulo < /#/; //dn'ulo 1ctual
!loat ,el < /#/3; //Melocidad del Co,imiento
!loat radio < 0/#/; //>an'o del Co,imiento
!loat sx < 2#/;
!loat s; < 2#/;
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
S
,oid draN() R
!ill(/, .);
an'ulo 4< ,el; //1ctuali(a "n'ulo
!loat sin,al < sin(an'ulo);
!loat cos,al < cos(an'ulo);
//-stablece la posicin del crculo peGue+o
!loat x < 3/ 4 (cos,al * radio);
!loat ; < 3/ 4 (sin,al * radio);
!ill(233);
ellipse(x, ;, 2, 2); //Dibua el peGue+o crculo
//-stablece la posicin del crculo 'rande
//bas"ndose en la posicin del peGue+o
!loat x2 < x 4 cos(an'ulo * sx) * radio/2;
!loat ;2 < ; 4 sin(an'ulo * s;) * radio/2;
ellipse(x2, ;2, :, :); //Dibuo el crculo 'rande
S
;a fase de una 9uncin seno es una iteracin a tra%s de sus 1osi)les %alores. El despla3amiento de fase de
una seGal en relacin a otra es sencillamente un retraso en tiem1o e61resado en grados de ,ngulo< en el cual
un crculo com1leto @3". gradosC es igual a un ciclo de la seGal. =i se des1laza el ,ngulo utilizado 1ara
generar una animacin< la animacin resultante se encontrar, des9asada.
;os siguientes dos e8em1los cam)ian la coordenadaO6 $ el di,metro de los crculos 1ara demostrar el
des1lazamiento de 9ase. En el 1rimer e8em1lo< cada crculo tiene el mismo mo%imiento :orizontal< 1ero
des9asado en el tiem1o. En el segundo< cada crculo mantiene la misma 1osicin $ %aran su tamaGo< 1ero el
rango de crecimiento est, des9asado en el tiem1o.
!loat an'ulo < /#/;
!loat ,el < /#6;
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
S
,oid draN() R
bac)'round(/);
an'ulo < an'ulo 4 ,el;
ellipse(3/ 4 (sin(an'ulo 4 AB) * 3), 23, 0/, 0/);
ellipse(3/ 4 (sin(an'ulo 4 \1@HYAB) * 3), 33, 0/, 0/);
ellipse(3/ 4 (sin(an'ulo 4 L&1>T->YAB) * 3), D3, 0/,
0/);
S
!loat an'ulo < /#/; //dn'ulo Gue cambia
!loat ,el < /#/3; //Melocidad de *recimiento
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
!ill(233, 6D/);
S
,oid draN() R
bac)'round(/);
circuloHase(/#/);
circuloHase(L&1>T->YAB);
circuloHase(\1@HYAB);
an'ulo 4< ,el;
S
,oid circuloHase(!loat !ase) R
!loat diametro < :3 4 (sin(an'ulo 4 !ase) * .3);
ellipse(3/, 3/, diametro, diametro);
S
-5ovi(iento 3rg1nico
Entre los e8em1los de mo%imientos org,nicos se inclu$en la cada de una :o8a< la caminata de un insecto< el
%uelo de un a%e< una 1ersona res1irando< un ro Aue 9lu$e o la :umareda Aue su)e. Fno de los recursos con
los Aue cuentan los 1rogramas es la utilizacin de %alores aleatorios.
!loat x < 3/#/; //*oordenada5Z
!loat ; < D/#/; //*oordenada5V
,oid setup() R
si(e(6//, 6//);
random$eed(/); //Huer(a los mismos ,alores aleatorios
bac)'round(/);
stro)e(233);
S
,oid draN() R
x 4< random(52, 2); //1si'na una nue,a coordenada5x
; 4< random(52, 2); //1si'na una nue,a coordenada5;
point(x, ;);
S
;as 9unciones sin() $ cos() 1ueden utilizarse 1ara generar mo%imientos im1redeci)les al em1learse con la
9uncin random(). El siguiente e8em1lo 1resenta una lnea< $ en cada cuadro su direccin cam)ia entre
1eAueGos %alores< de O..3 a ..3.
!loat x < /#/; //*oordenada5Z
!loat ; < 3/#/; //*oordenada5V
!loat an'ulo < /#/; //Direccin del Co,imiento
!loat ,el < /#3; //Melocidad del Co,imiento
,oid setup() R
si(e(6//, 6//);
bac)'round(/);
stro)e(233, 60/);
random$eed(626); //Huer(a los mismos ,alores
S //aleatorios
,oid draN() R
an'ulo 4< random(5/#0, /#0);
x 4< cos(an'ulo) * ,el; //1ctuali(a Z
; 4< sin(an'ulo) * ,el; //1ctuali(a V
translate(x, ;);
rotate(an'ulo);
line(/, 56/, /, 6/);
S
El siguiente e8em1lo es una %ersin animada de un e8em1lo %isto unidades anteriores. -Au la %aria)le
an'ulo 1ara la 9uncin hoa() cam)ia constantemente.
!loat inc < /#/;
,oid setup() R
si(e(6//, 6//);
stro)e(233, 2/.);
smooth();
S
,oid draN() R
bac)'round(/);
inc 4< /#/6;
!loat an'ulo < sin(inc)/6/#/ 4 sin(inc*6#2)/2/#/;
hoa(6D, 7, an'ulo/6#0);
hoa(00, 62, an'ulo);
hoa(.., 6/, an'ulo/6#0);
hoa(:2, 3, an'ulo);
hoa(DD, K, an'ulo*2);
S
,oid hoa(int x, int units, !loat an'ulo) R
pushCatrix();
translate(x, 6//);
!or (int i < units; i 8 /; i55) R
stro)eIei'ht(i);
line(/, /, /, 5D);
translate(/, 5D);
rotate(an'ulo);
S
popCatrix();
S
;a 9uncin noise() es otro de los grandes recursos 1ara 1roducir mo%imientos org,nicos. Na Aue los
n3meros regresados 1or noise() son 9,ciles de controlar< son mu$ 3tiles a la :ora de 1roducir
irregularidades. El siguiente e8em1lo di)u8a dos lneas $ la 1antalla< $ la 1osicin de sus 1untas 9inales est,
determinada 1or la 9uncin noise().
!loat inc6 < /#6;
!loat n6 < /#/;
!loat inc2 < /#/7;
!loat n2 < /#/;
,oid setup() R
si(e(6//, 6//);
stro)e(233);
stro)eIei'ht(2/);
smooth();
S
,oid draN() R
bac)'round(/);
!loat ;6 < (noise(n6) 5 /#3) * 0/#/; //De 563 a 63
!loat ;2 < (noise(n2) 5 /#3) * 0/#/; //De 563 a 63
line(/, 3/, ./, 3/ 4 ;6);
line(6//, 3/, :/, 3/ 4 ;2);
n6 4< inc6;
n2 4< inc2;
S
;a 9uncin noise() tam)in 1uede ser utilizada 1ara generar te6turas din,micas. En el siguiente e8em1lo<
los 1rimeros dos 1ar,metros determinan una te6tura en dos dimensiones< $ el tercer 1ar,metro su incremento
en cada cuadro.
!loat inc < /#/:;
int densidad < .;
!loat (noise < /#/;
,oid setup() R
si(e(6//, 6//);
no$tro)e();
S
,oid draN() R
!loat xnoise < /#/;
!loat ;noise < /#/;
!or (int ; < /; ; 9 hei'ht; ; 4< densidad) R
!or (int x < /; x 9 Nidth; x 4< densidad) R
!loat n < noise(xnoise, ;noise, (noise) *
23:;
!ill(n);
rect(;, x, densidad, densidad);
xnoise 4< inc;
S
xnoise < /;
;noise 4< inc;
S
(noise 4< inc;
S
Ignacio Buioli | Jaime Prez Marn */.
&nidad 2B
#atos' /rra*s
1rra;, à (arra; access), neN, 1rra;#len'th, append(), shorten(), expand(), arra;cop;()
El trmino array se re9iere a una estructura de gru1o o a la im1osicin de un n3mero. En 1rogramacin< un
arra$ es un con8unto de datos almacenados )a8o el mismo nom)re. ;os arra$s 1ueden ser creados 1ara
almacenar un determinado ti1o de datos< $ cada uno de sus elementos 1ueden ser almacenados $ ledos
indi%idualmente.
!inco %alores del ti1o entero @*&*&< *&4.< *&+/< *&+"< *&&.C 1ueden ser almacenados en un arra$ del ti1o
entero @intC. Por e8em1lo< si llam,ramos al arra$ KdatesL< guardaramos los %alores en la siguiente secuencia
;a 1osicin en la Aue se encuentran los datos en un arra$ son numerados desde el n3mero cero. Esto
muc:as %eces 1roduce errores< $a Aue 1or costum)re uno asocia la 1rimera 1osicin con el n3mero uno. El
1rimer elemento se encuentra en la 1osicin cero ].^< el segundo en la 1osicin uno ]*^< $ as.
;os arra$s 1uede utilizarse 1ara 1rogramar de un modo muc:o m,s sencillo. Mientras no sea necesario
utilizarlos< 1ueden em1learse 1ara administrar estructuras. Por e8em1lo< esta)lecemos una serie de 1untos
Aue ser,n almacenados en el arra$< los mismos ser,n utilizados 1ara di)u8ar una estrella.

El anterior e8em1lo demuestra los )ene9icios del em1leo de los arra$s. ;a estrella tiene *. %rtices<
com1uesto de 2 1untos cada uno. =i utiliz,ramos %aria)les reAueriramos de 2. de ellas. En cam)io< con un
arra$ 1or e8e< solo necesitaramos 2.
Ignacio Buioli | Jaime Prez Marn */*
(aria)les =e1aradas Fn arra$ 1or cada 1unto Fn arra$ 1or e8e
int x/ < 3/; intà p/ < R 3/, 6D S; intà x < R 3/, :6, D0, :7, K6,
int ;/ < 6D; intà p6 < R :6, 0K S; 3/, 27, 06, 6K, 07 S;
int x6 < :6; intà p2 < R D0, .0 S; intà ; < R 6D, 0K, .0, :/, D2,
int ;6 < 0K; intà p0 < R :7, :/ S; K0, D2, :/, .0, 0K S;
int x2 < D0; intà p. < R K6, D2 S;
int ;2 < .0; intà p3 < R 3/, K0 S;
int x0 < :7; intà p: < R 27, D2 S;
int ;0 < :/; intà pK < R 06, :/ S;
int x. < K6; intà pD < R 6K, .0 S;
int ;. < D2; intà p7 < R 07, 0K S;
int x3 < 3/;
int ;3 < K0;
int x: < 27;
int ;: < D2;
int xK < 06;
int ;K < :/;
int xD < 6K;
int ;D < .0;
int x7 < 07;
int ;7 < 0K;
El siguiente e8em1lo muestra la utilizacin de un arra$ en un 1rograma. ;os datos Aue almacena el arra$ son
ledos con una estructura H?>. ;a sinta6is ser, discutida en las 1,ginas siguientes.
intà x < R 3/, :6, D0, :7, K6, 3/, 27, 06, 6K, 07 S;
intà ; < R 6D, 0K, .0, :/, D2, K0, D2, :/, .0, 0K S;
be'in$hape();
//@ee un elemento del arra; con cada ciclo del !or()
!or (int i < /; i 9 x#len'th; i44) R
,ertex(xìa, ;ìa);
S
end$hape(*@?$-);
-&sando /rra*s
;os arra$s son declarados mu$ similar a otra clase de datos< 1ero se distinguen 1or la im1lementacin de
corc:etes < ] $ ^. !uando un arra$ es declarado< el ti1o de datos Aue 1uede almacenar de)e ser es1eci9icado
tam)in. Fna %ez Aue dic:o arra$ sea declarado $ su ti1o sea es1eci9icado< este de)e ser creado con la
1ala)raOcla%e neN. Es 1aso adicional se utiliza 1ara a:orrar es1acio en la memoria de la com1utadora. ;uego
de Aue el arra$ es creado< $a est, listo 1ara Aue se le asignen %alores. E6isten< adem,s< di9erentes 9ormas de
declarar< crear $ asignar. En los siguientes e8em1lo< se discuten las di9erentes maneras< siem1re asignando
los %alores *&< 4.< +/< +"< $ &.. Particularmente notar la relacin entre los di9erentes mtodos $ la estructura
setup().
intà data; //Declarar
,oid setup() R
si(e(6//, 6//);
data < neN int`3a; //*rear
data`/a < 67; //1si'nar
data`6a < ./;
data`2a < K3;
data`0a < K:;
data`.a < 7/;
S
Ignacio Buioli | Jaime Prez Marn */2
intà data < neN int`3a; //Declarar, crear
,oid setup() R
si(e(6//, 6//);
data`6a < ./;
data`2a < K3;
data`0a < K:;
data`.a < 7/;
S
intà data < R 67, ./, K3, K:, 7/ S; //Declarar, crear ; asi'nar
,oid setup() R
si(e(6//, 6//);
S
;os anteriores tres e8em1los asumen Aue tra)a8aremos con los )loAues setup() $ draN(). =in em)argo<
eso no es necesario< 1ueden usarse cualAuiera de los 3 mtodos anteriores sin dic:as estructuras.
intà data; //Declarar
data < neN int`3a; //*rear
data`6a < ./;
data`2a < K3;
data`0a < K:;
data`.a < 7/;
intà data < neN int`3a; //Declarar, crear
data`6a < ./;
data`2a < K3;
data`0a < K:;
data`.a < 7/;
intà data < R 67, ./, K3, K:, 7/ S; //Declarar, crear, asi'nar
El 1aso de declarar< crear $ asignar 1ermite a un arra$ ser ledo. Para acceder al elemento de un arra$ es
necesario usar el nom)re de la %aria)le seguido de los corc:etes< $ dentro de estos 3ltimos el n3mero de
1osicin del elemento.
intà data < R 67, ./, K3, K:, 7/ S;
line(data`/a, /, data`/a, 6//);
line(data`6a, /, data`6a, 6//);
line(data`.a, /, data`.a, 6//);
0ecordar Aue el 1rimer elemento se encuentra en la 1osicin .. =i el 1rograma trata de acceder a un %alor
Aue e6cede las dimensiones del arra$< el 1rograma se tendr, $ terminar, 1or de%ol%er un
Array9nde(?ut?fAounds%(ception.
intà data < R 67, ./, K3, K:, 7/ S;
println(data`/a); //Bmprime 67 en la consola
println(data`2a); //Bmprime K3 en la consola
println(data`3a); // ->>?>Q -l Eltimo elemento del arra; est" en la posicin .
;a 1ro1iedad len'th almacena el n3mero de elementos en un arra$. =e 1uede acceder a esta 1ro1iedad con
el nom)re del arra$ seguido de un 1unto $ dic:a 1ro1iedad. El siguiente e8em1lo demuestra como utilizarlo
intà data6 < R 67, ./, K3, K:, 7/ S;
intà data2 < R 67, ./ S;
intà data0 < neN int`62Ka;
println(data6#len'th); //Bmprime 3 en la consola
println(data2#len'th); //Bmprime 2 en la consola
println(data0#len'th); //Bmprime 62K en la consola
Fsualmente se utiliza una estructura H?> 1ara acceder a los elementos del arra$< es1ecialmente si es un
arra$ con muc:os elementos
intà data < R 67, ./, K3, K:, 7/ S;
!or (int i < /; i 9 data#len'th; i44) R
line(dataìa, /, dataìa, 6//);
S
Fna estructura H?> 1uede ser usada 1ara agregar datos a un arra$. Por e8em1lo< 1uede :acerse un calculo
de %alores $ luego ser asignados como elementos de un arra$. El siguiente e8em1lo almacena los %alores
de%ueltos 1or la 9uncin sin() en un arra$.
!loatà sineIa,e < neN !loat`Nidtha;
!or (int i < /; i 9 Nidth; i44) R
//1si'na ,alores al arra; de,ueltos de la !uncin sin()
!loat r < map(i, /, Nidth, /, TI?YAB);
sineIa,eìa < abs(sin(r));
S
!or (int i < /; i 9 sineIa,e#len'th; i44) R
//-stablece el contorno ledo del arra;
stro)e(sineIa,eìa * 233);
line(i, /, i, hei'ht);
S
-lmacenar las coordenadas de muc:os elementos es otra 9orma de :acer un 1rograma m,s 9,cil de leer $
m,s mane8a)le. En el siguiente e8em1lo< el arra$ xà almacena la coordenadaO6< $ el arra$ ,elà almacena
el rango corres1ondiente a la misma. Escri)ir este 1rograma sin la im1lementacin de arra$s reAuerira 24
%aria)les inde1endientes.
int num@ines < 62;
!loatà x < neN !loat`num@inesa;
!loatà ,el < neN !loat`num@inesa;
!loat o!!set < D; //-stablece el espacio entre las lneas
,oid setup() R
si(e(6//, 6//);
smooth();
stro)eIei'ht(6/);
!or (int i < /; i 9 num@ines; i44) R
xìa < i; //-stablece posicin inicial
,elìa < /#6 4 (i / o!!set);
//-stablece la ,elocidad inicial
S
S
,oid draN() R
bac)'round(2/.);
xìa 4< ,elìa; //1ctuali(a posicin
i! (xìa 8 (Nidth 4 o!!set)) R
//$i se ,a por la derecha
xìa < 5o!!set * 2;
//re'resa por la i(Guierda
S
!loat ; < i * o!!set; //-stablece la coordenada5;
line(xìa, ;, xìa4o!!set, ;4o!!set);
//Dibua la lnea
S
S
-/l(acenando datos de 5ouse
Fna im1lementacin 9recuente de los arra$s es el almacenamiento de los datos del mouse. ;as %aria)les
pmouseZ $ pmouseV almacenan la 1osicin anterior a la actual del mouse. =in em)argo< no :a$ una manera
de acceder a esos datos Aue no sea inmediatamente. !on cada cuadro Aue 1asa< mouseZ $ mouseV @$ a s
mismo pmouseZ $ pmouseVC son reem1lazados 1or nue%os %alores< $ los antiguos %alores son descartados.
!rear un arra$ es la me8or manera de no 1erder esos %alores $ utilizarlos 1ara algo. En el siguiente e8em1lo<
los 3ltimos $ mas recientes *.. %alores de mouseV son almacenados $ mostrados en 1antalla como una
lnea< de izAuierda a derec:a.
intà ;;
,oid setup() R
si(e(6//, 6//);
; < neN int`Nidtha;
S
,oid draN() R
bac)'round(2/.);
//Despla(a los ,alores a la derecha
!or (int i < ;#len'th56; i 8 /; i55) R
;ìa < ;ì56a;
S
//1're'a nue,os ,alores al comien(o
;`/a < constrain(mouseV, /, hei'ht56);
//Cuestra cada par de ,alores como una lnea
!or (int i < 6; i 9 ;#len'th; i44) R
line(i, ;ìa, i56, ;ì56a);
S
S
-1licando este mismo cdigo simult,neamente a mouseZ $ mouseV
int num < 3/;
intà x < neN int`numa;
intà ; < neN int`numa;
,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
!ill(233, 6/2);
S
,oid draN() R
bac)'round(/);
//Despla(a los ,alores a la derecha
!or (int i < num56; i 8 /; i55) R
xìa < xì56a;
;ìa < ;ì56a;
Ignacio Buioli | Jaime Prez Marn *//
S
//1're'a nue,os ,alores al inicio del arra;
x`/a < mouseZ;
;`/a < mouseV;
//Dibua los crculos
!or (int i < /; i 9 num; i44) R
ellipse(xìa, ;ìa, i/2#/, i/2#/);
S
S
El siguiente e8em1lo 1roduce los mismos resultados< 1ero utiliza un mtodo muc:o m,s 1timo. En lugar de
ordenar los elementos del arra$ en cada 9otograma< el 1rograma escri)e los nue%os datos en la 1osicin
siguiente del arra$. ;os elementos del arra$ 1ermanecen en la misma 1osicin una %ez Aue est,n escritos<
1ero se leen en un orden di9erente en cada 9otograma. ;a lectura comienza en el lugar de los elementos m,s
antiguos $ contin3a :asta el 9inal del arra$. -l 9inal del arra$< el o1erador D se utiliza 1ara %ol%er de nue%o al
1rinci1io. Esta tcnica es es1ecialmente 3til con matrices mu$ grandes< 1ara e%itar la co1ia innecesaria de
datos Aue 1ueden ralentizar el 1rograma.
int num < 3/;
intà x < neN int`numa;
intà ; < neN int`numa;
int indexAosition < /;

,oid setup() R
si(e(6//, 6//);
no$tro)e();
smooth();
!ill(233, 6/2);
S

,oid draN() R
bac)'round(/);
xìndexAositiona < mouseZ;
;ìndexAositiona < mouseV;
//*iclo entre / ; el nEmero de elementos
indexAosition < (indexAosition 4 6) P num;
!or (int i < /; i 9 num; i44) R
//-stablece la posicin del arra; a ser leda
int pos < (indexAosition 4 i) P num;
!loat radius < (num5i) / 2#/;
ellipse(x`posa, ;`posa, radius, radius);
S
S
-,unciones del /rra*
Processing 1ro%ee de un gru1o de 9unciones 1ara 9acilitar el tra)a8o con arra$s. En estas 1,ginas solo se
e61lican cuatro de ellas< 1ero la in9ormacin com1leta $ detallada est, dis1oni)le en lnea< en
""".processing.org#reference.
;a 9uncin append() e61ande un arra$ en un nue%o elemento< agrega los datos a la nue%a 1osicin $
regresa el nue%o arra$
$trin'à trees < R Wceni(aW, WrobleW S;
append(trees, WmielW); //BN*?>>-*T?Q No cambia el arra;
print(trees); //Bmprime Wceni(a robleW
println();
trees < append(trees, WmielW); //1're'a miel al !inal
Ignacio Buioli | Jaime Prez Marn */"
print(trees); //Bmprime Wceni(a roble mielW
println();
//1're'a corte(a al !inal del arra; ; crea un nue,o arra;
//para almacenar los cambios
$trin'à moretrees < append(trees, WbeechW);
print(moretrees); //Bmprime Wceni(a roble miel corte(aW
;a 9uncin shorten() ac:ica un arra$ en un elemento al remo%er el 3ltimo de ellos $ regresar el arra$
disminuido
$trin'à trees < R Wa,ellanaW, WcocoW, Whi'oWS;
trees < shorten(trees); //>emue,e el Eltimo elemento del 1rra;
print(trees); //Bmprime a,ellana coco
println();
trees < shorten(trees); //>emue,e el Eltimo elemento del 1rra;
print(trees); //Bmprime a,ellana
;a 9uncin expand() incrementa el tamaGo de un arra$. Puede e61andir el arra$ en un tamaGo es1ec9ico< o
incluso do)lar su tamaGo. =i el arra$ necesita incluir una cantidad mu$ grande de nue%os elementos< es
muc:o mas r,1ido $ e9iciente utilizar expand() en lugar de append():
intà x < neN int`6//a; //1rra; Gue almacena coordenadas de x
int count; //1lmacena el nEmero de la posicin del arra;
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
x`counta < mouseZ; //1si'na una nue,a coordenada5x al arra;
count44; //Bncrementa el contador
i! (count << x#len'th) R //$i el arra; est" completo
x < expand(x); //doblar el tama+o del arra;
println(x#len'th); //-scribir el nue,o tama+o en la consola
S
S
;os %alores de los arra$s no 1ueden ser co1iados con el o1erador 1orAue ellos son o)8etos. El mtodo cl,sico
1ara co1iar elementos de un arra$ es utilizando una 9uncin es1ecial 1ara co1iar el arra$ entero $ luego
)uscar el elemento deseado con un ciclo H?>. ;a 9uncin arra;*op;() es la manera mas e9iciente 1ara
co1iar un arra$. ;os datos son co1iados del arra$ utilizado como 1rimer 1ar,metro al arra$ utilizado como
segundo 1ar,metro
$trin'à norte < R W?\W, WBNW, WCBW S;
$trin'à sur < R WX1W, WH@W, WN*W S;
arra;cop;(norte, sur); //*opia del arra; norte al arra; sur
print(sur); //Bmprime W?\ BN CBW
println();
$trin'à este < R WC1W, WNVW, W>BW S;
$trin'à oeste < neN $trin'èast#len'tha; //*rea un nue,o arra;
arra;cop;(este, oeste); //*opia del arra; este al arra; oeste
print(Nest); //Bmprime WC1 NV irW
2ue%as 9unciones 1ueden ser escritas 1ara 1er9eccionar el tra)a8o en arra$< 1ero :a$ Aue ser consciente de
Aue act3an di9erente si utilizan datos int o datos char. !uando un arra$ es usado como 1ar,metro de una
9uncin< la direccin del arra$ es trans9erida dentro de la 9uncin en lugar de los datos actuales. 2o se crea un
nue%o arra$< $ los cam)ios :ec:os en la 9uncin a9ectan solo al arra$ usado como 1ar,metro
Ignacio Buioli | Jaime Prez Marn */+
!loatà data < R 67#/, ./#/, K3#/, K:#/, 7/#/ S;
,oid setup() R
hal,e(data);
println(data`/a); //Bmprime W7#3W
println(data`6a); //Bmprime W2/#/W
println(data`2a); //Bmprime W0K#3W
println(data`0a); //Bmprime W0D#/W
println(data`.a); //Bmprime W.3#/W
S
,oid hal,e(!loatà d) R
!or (int i < /; i 9 d#len'th; i44) R //Aara cada elemento del arra;
dìa < dìa / 2#/; //di,idir el ,alor por 2
S
S
!am)iar el arra$ en una 9uncin sin modi9icar los %alores originales reAuiere algunas lneas m,s de cdigo
!loatà data < R 67#/, ./#/, K3#/, K:#/, 7/#/ S;
!loatà hal!Data;
,oid setup() R
hal!Data < hal,e(data); //-ecuta la !uncin
println(data`/a 4 W, W 4 hal!Data`/a); //Bmprime W67#/, 7#3W
println(data`6a 4 W, W 4 hal!Data`6a); //Bmprime W./#/, 2/#/W
println(data`2a 4 W, W 4 hal!Data`2a); //Bmprime WK3#/, 0K#3W
println(data`0a 4 W, W 4 hal!Data`0a); //Bmprime WK:#/, 0D#/W
println(data`.a 4 W, W 4 hal!Data`.a); //Bmprime W7/#/, .3#/W
S
!loatà hal,e(!loatà d) R
!loatà numbers < neN !loat`d#len'tha; //*rea un nue,o arra;
arra;cop;(d, numbers);
!or (int i < /; i 9 numbers#len'th; i44) R //Aara cada elemento
numbersìa < numbersìa / 2; //di,ide el ,alor por 2
S
return numbers; //>e'resa el nue,o arra;
S
-/rra*s 0idi(ensionales
;os datos 1ueden ser almacenados $ o)tenidos de arra$s con m,s de una dimensin. Fsando la ta)la al
inicio de esta unidad< cam)iaremos el arra$ de una dimensin a dos dimensiones
;os arra$s en 2' son< esencialmente< una lista de arra$s en *'. Estos de)en ser declarados< luego creador $
recin des1us se 1ueden asignar %alores. ;a siguiente sinta6is con%ierte este arra$ a cdigo
intàà points < R R3/,6DS, R:6,0KS, RD0,.0S, R:7,:/S, RK6,D2S,
R3/,K0S, R27,D2S, R06,:/S, R6K,.0S, R07,0KS S;
println(points`.a`/a); //Bmprime K6
println(points`.a`6a); //Bmprime D2
println(points`.a`2a); //->>?>Q -ste elemento est" !uera del arra;
println(points`/a`/a); //Bmprime 3/
println(points`7a`6a); //Bmprime 0K
Este 1rograma muestra como utilizar todo esto en simult,neo
intàà points < R R3/,6DS, R:6,0KS, RD0,.0S, R:7,:/S,
RK6,D2S, R3/,K0S, R27,D2S, R06,:/S,
R6K,.0S, R07,0KS S;
,oid setup() R
si(e(6//, 6//);
!ill(/);
smooth();
S
,oid draN() R
bac)'round(2/.);
translate(mouseZ 5 3/, mouseV O 3/);
be'in$hape();
!or (int i < /; i 9 points#len'th; i44) R
,ertex(pointsìa`/a, pointsìa`6a);
S
end$hape();
S
Es 1osi)le continuar $ :acer arra$s en 3' o 4' 1or so)reOe61lotar este recurso. =in em)argo< no es
recomenda)le $a Aue los arra$s multidimensionales suelen ser sumamente con9usos. En casos en los Aue se
reAuiera usar< se recomienda im1lementar arra$s en *' o 2'< no m,s Aue eso.
Ignacio Buioli | Jaime Prez Marn */&
&nidad 30
I(agen' /ni(acin
;a animacin se 1roduce cuando una serie de im,genes< cada una ligeramente di9erente< se 1resentan en
una sucesin r,1ida. Fn medio di%erso< con un siglo de :istoria< la animacin :a 1rogresado desde los
e61erimentos iniciales de Iinsor Mc!a$ a las inno%aciones comerciales $ realista de las 1rimeras
1roducciones de Ialt 'isne$ =tudio< con 1elculas e61erimentales 1or animadores como ;otte 0einiger $
I:itne$ James a mediados del siglo >>. El alto %olumen de los e9ectos es1eciales de animacin en 1elculas
del ti1o li$e+action< $ la a%alanc:a de 1elculas in9antiles de di)u8os animados< est,n cam)iando el 1a1el de la
animacin en la cultura 1o1ular.
-I(1genes Secuenciales
-ntes de Aue una serie de im,genes sea 1resentada como una secuencia< de)emos cargarlas. ;a %aria)le
del ti1o imagen de)e ser declarada 9uera del )loAue setup() $ draN()< $ luego sus %alores de)en ser
asignados en el setup(). ;as siguientes im,genes 1ertenecen al usuario Eriance de 'e%iant-rt
@???.eriance.de%iantart.comC
N luego el cdigo los di)u8a de manera secuencial en orden numrico
int numHrames < D; //NEmero de cuadros por animar
int !rame < /; //*uadro para mostrar al inicio
ABma'eà ima'es < neN ABma'e`numHramesa; //1rra; de Bm"'enes
,oid setup() R
si(e(6//, 63:);
!rame>ate(6/);
//6/ cuadros por se'undo, en este caso (m"ximo 0/)
ima'es`/a < loadBma'e(Wani5///#'i!W);
ima'es`6a < loadBma'e(Wani5//6#'i!W);
ima'es`.a < loadBma'e(Wani5//.#'i!W);
ima'es`:a < loadBma'e(Wani5//:#'i!W);
ima'es`Ka < loadBma'e(Wani5//K#'i!W);
S
,oid draN() R
!rame44;
i! (!rame << numHrames) R
!rame < /;
S
ima'e(ima'es`!ramea, /, /);
S
El siguiente e8em1lo muestra una alternati%a al cdigo anterior< utilizando una estructura H?> 1ara o1timizar el
1roceso. Esas lneas de cdigo 1ueden cargar entre * $ &&& im,genes 1or cam)iar el %alor de la %aria)le
numHrame. ;a 9uncin n!() es usada 1ara dar 9ormato al nom)re de la imagen a cargar. El o1erador P es
usado 1ara controlar el ciclo
Ignacio Buioli | Jaime Prez Marn *".
ABma'eà ima'es < neN ABma'e`numHramesa; //1rra; de Bm"'enes

,oid setup() R
si(e(6//, 63:);
!rame>ate(6/); //6/ cuadros por se'undo, en este caso (m"ximo 0/)
//1utomati(a la car'a de im"'enes# NEmeros menores a 6//
//necesitan un cero extra#
!or (int i < /; i 9 ima'es#len'th; i44) R
//*onstru;e el nombre de la ima'en a car'ar
$trin' ima'eName < Wani5W 4 n!(i, 0) 4 W#'i!W;
ima'esìa < loadBma'e(ima'eName);
S
S

,oid draN() R
//*alcula el cuadro para mostrar, usa P para 'enerar el ciclo de cuadros
int !rame < !rame*ount P numHrames;
S
;as im,genes 1ueden mostrarse en un orden aleatorio< lo cual agrega cierto inters al 1rograma. ;o
9undamental es reem1lazar el tiem1o 1or inter%alos irregulares< en un orden aleatorio con tiem1o aleatorio.
ABma'eà ima'es < neN ABma'e`numHramesa;

,oid setup() R
si(e(6//, 6//);
S
S
,oid draN() R
int !rame < int(random(/, numHrames)); //*uadro por mostrar
!rame>ate(random(6, :/#/));
S
Ja$ muc:as maneras de controlar la %elocidad con la Aue se e8ecuta una animacin. ;a 9uncin
!rame>ate() es una de las maneras m,s sencillas. El lugar donde se de)e u)icar la 9uncin !rame>ate()
es en el )loAue setup().
=i se desea Aue otros elementos se mue%an de 9orma secuencial 1ero inde1endientemente del mo%imiento
1rinci1al< se de)e esta)lecer un tem1oralizador $ a%anzar al siguiente cuadro solo cuando el %alor del
tem1oralizador aumente como la %aria)le 1rede9inida. En el siguiente e8em1lo< la animacin Aue ocurre en la
mitad su1erior es controlada 1or la 9uncin !rame>ate(). ;a animacin en la mitad in9erior es actualizada
solo dos %eces 1or segundo.
int numHrames < D; //NEmero de cuadros para animar
int topHrame < /; //-l cuadro Gue se muestra arriba
int bottomHrame < /; //-l cuadro Gue se muestra abao
ABma'eà ima'es < neN ABma'e`numHramesa;
int lastTime < /;
,oid setup() R
si(e(6//, 6//);
!rame>ate(0/);
Ignacio Buioli | Jaime Prez Marn *"*
S
S
,oid draN() R
topHrame < (topHrame 4 6) P numHrames;
ima'e(ima'es`topHramea, /, /);
i! ((millis() 5 lastTime) 8 3//) R
bottomHrame < (bottomHrame 4 6) P numHrames;
lastTime < millis();
S
ima'e(ima'es`bottomHramea, /, 3/);
S
-I(1genes en 5ovi(iento
Mo%er una imagen< en lugar de 1resentar una secuencia< es otro en9oAue de la animacin de im,genes. ;as
mismas tcnicas 1ara la creacin de mo%imientos :an sido $a 1resentadas en unidades anteriores. El e8em1lo
siguiente mue%e una imagen de izAuierda a derec:a< %ol%iendo a la izAuierda cuando se est 9uera del )orde
de la 1antalla
ABma'e im';
!loat x;
,oid setup() R
si(e(6//, 6//);
im' < loadBma'e(Wmo,5//6#'i!W);
S
,oid draN() R
bac)'round(233);
x 4< /#3;
i! (x 8 Nidth) R
x < 5Nidth;
S
ima'e(im', x, /);
S
;as 9unciones de trans9ormacin tam)in 1ueden a1licarse a las im,genes. Estas 1ueden ser trasladadas<
rotadas $ escaladas< 1ara 1roducir la ilusin de mo%imiento en el tiem1o. En el siguiente e8em1lo< las imagen
gira alrededor del centro de la %entana de re1resentacin
ABma'e im';
!loat an'ulo;
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
bac)'round(2/.);
an'ulo 4< /#/6;
translate(3/, 3/);
rotate(an'ulo);
ima'e(im', 56//, 56//);
S
;as im,genes tam)in 1ueden ser animadas 1or cam)iar sus 1ro1iedades de di)u8os. En este e8em1lo< la
o1acidad de la imagen oscila 1roduciendo trans1arencia.
Ignacio Buioli | Jaime Prez Marn *"2
ABma'e im';
!loat opacidad < /; //-stablece la opacidad inicial
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
bac)'round(/);
i! (opacit; 9 233) R //*uando sea menos Gue el m"ximo,
opacidad 4< /#3; //Bncrementa la opacidad
S
tint(233, opacidad);
ima'e(im', /, /);
S
&nidad 31
I(agen' P@%eles
'et(), set()
En la 1rimer unidad Aue trata el tema de im,genes< se de9ine a una imagen como una cuadrcula rectangular
de 16eles en la Aue cada elemento es un n3mero Aue es1eci9ica un color. 'e)ido a Aue la 1antalla en s es
una imagen< los 16eles indi%iduales se de9inen tam)in como n3meros. Por lo tanto< los %alores de color de
los 16eles indi%iduales se 1ueden leer $ cam)iar.
-:e*endo P@%eles
!uando un 1rograma de Processing se e8ecuta< lo 1rimero Aue inicia es la %entana de re1resentacin<
esta)lecida con los %alores Aue se inclu$en en si(e(). El 1rograma gana el control de dic:a ,rea $
esta)lece el color de cada 16el.
;a 9uncin 'et() 1uede leer los datos de cualAuier 16el de la 1antalla. Ja$ tres %ersiones de dic:a 9uncin<
una 1ara cada uso
'et()
'et(x, ;)
'et(x, ;, ancho, alto)
=i 'et() es usado sin 1ar,metros< este :ar, una im1resin com1leta de 1antalla< $ la regresar, como una
ABma'e. ;a %ersin con dos 1ar,metros regresa el color de un 16el 1articular< localizado en la 1osicin 6 e $<
res1ecti%amente. Fn ,rea rectangular es regresada si se utilizan los 1ar,metros 1ara ancho $ alto. =i 'et()
se utiliza sin 1ar,metros< la ca1tura Aue de%uel%e de)e ser guardada en una %aria)le ABma'e. ;uego< dic:a
ca1tura 1uede utilizarse como una imagen cualAuiera.
stro)eIei'ht(D);
line(/, /, Nidth, hei'ht);
line(/, hei'ht, Nidth, /);
ABma'e cross < 'et(); //?btiene una captura entera
ima'e(cross, /, 3/);//Dibua la ima'en en una nue,a posicin
smooth();
stro)eIei'ht(D);
no$tro)e();
ellipse(6D, 3/, 6:, 6:);
ABma'e cross < 'et();
//?btiene una captura entera
ima'e(cross, .2, 0/, ./, ./);
//*ambia el tama+o de la captura a ./x./
stro)eIei'ht(D);
ABma'e slice < 'et(/, /, 2/, 6//);//?btiene una captura entera
set(6D, /, slice);
set(3/, /, slice);
;a 9uncin 'et() o)tiene los 16eles actuales mostrados en 1antalla. Eso Auiere decir Aue no solo 1uede ser
una ca1tura de 9ormas del 1rograma< sino tam)in de una imagen Aue est cargada.
ABma'e medusa;
medusa < loadBma'e(Wmedusa#p'W);
ima'e(medusa, /, /);
ABma'e crop < 'et(); //?btiene una captura entera
ima'e(crop, /, 3/); //Dibua la ima'en en la nue,a posicin
!uando es usado con los 1ar,metros x e ;< la 9uncin 'et() regresa un %alor Aue de)e ser asignado a una
%aria)le del ti1o color. Ese %alor 1uede ser utilizado 1ara esta)lecer el color de )orde o de relleno de una
9igura. En el siguiente e8em1lo< el color o)tenido es usado como relleno de un rect,ngulo
ABma'e medusa;
no$tro)e();
color c < 'et(7/, D/);
//?btiene el color del Axel en el (7/, D/)
!ill(c);
rect(2/, 0/, ./, ./);
;os %alores de%ueltos 1or el mouse 1ueden ser usados como 1ar,metros de 'et(). Esto le 1ermite al cursor
seleccionar colores de la %entana de re1resentacin
ABma'e medusa;
,oid setup() R
si(e(6//, 6//);
no$tro)e();
S
,oid draN() R
color c < 'et(mouseZ, mouseV);
!ill(c);
rect(3/, /, 3/, 6//);
S
;a 9uncin 'et() 1uede ser utilizada con un ciclo H?> 1ara :aca 1oder identi9icar %arios colores o un gru1o
de 16eles.
ABma'e medusa;
int ; < /;
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
; < constrain(mouseV, /, 77);
!or (int i < /; i 9 .7; i44) R
color c < 'et(i, ;);
stro)e(c);
Ignacio Buioli | Jaime Prez Marn *"/
line(i43/, /, i43/, 6//);
S
stro)e(233);
line(/, ;, .7, ;);
S
!ada Aima'e tiene su 1ro1ia 9uncin 'et() 1ara conseguir 16eles de la imagen. Esto 1ermite a los 16eles
ser o)tenidos de la imagen< inde1endientemente de los 16eles Aue se muestran en 1antalla. Na Aue ABma'e
es un o)8eto< se 1uede acceder a su 9uncin 'et() con el o1erador del 1unto< como se muestra a
continuacin
ABma'e medusa;
stro)e(233);
stro)eIei'ht(62);
ABma'e medusa*rop < medusa#'et(2/, 2/, :/, :/);
ima'e(medusa*rop, 2/, 2/);
-Escri-iendo P@%eles
;os 16eles en la %entana de 1resentacin de Processing 1ueden ser escritos directamente con la 9uncin
set(). Ja$ dos %ersiones de esta 9uncin< am)as con tres 1ar,metros
set(x, ;, color)
set(x, ;, ima'en)
!uando el tercer 1ar,metros es un color< set() cam)ia el color de un 16el de la %entana de
re1resentacin. !uando el tercer 1ar,metro es una imagen< set() escri)e una imagen en la 1osicin de x e
;.
color ne'ro < color(/);
set(2/, D/, ne'ro);
set(2/, D6, ne'ro);
set(2/, D2, ne'ro);
set(2/, D0, ne'ro);
!or (int i < /; i 9 33; i44) R
!or (int < /; 9 33; 44) R
color c < color((i4) * 6#D);
set(0/4i, 2/4, c);
S
S
;a 9uncin set() 1uede escri)ir una imagen 1ara mostrar en la %entana de re1resentacin. Fsar set() es
muc:o m,s %eloz Aue utilizar ima'e()< $a Aue los 16eles son co1iados directamente. =in em)argo< las
im,genes di)u8adas con set() no 1ueden ser escaladas ni 1intadas< $ no son a9ectadas 1or las 9unciones de
trans9ormacin.
ABma'e medusa;
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
Ignacio Buioli | Jaime Prez Marn *""
int x < constrain(mouseZ, /, 3/);
set(x, /, medusa);
S
!ada %aria)le del ti1o ABma'e tiene su 1ro1ia 9uncin set()< 1ara escri)ir los 16eles directamente a la
imagen. Esto 1ermite a los 16eles ser escritos en una imagen inde1endientemente de los 16eles Aue se
muestran en la %entana de re1resentacin. Na Aue ABma'e es una imagen< la 9uncin set() se e8ecuta con
el nom)re de la imagen $ el o1erador de 1unto.
ABma'e medusa;
bac)'round(/);
color blanco < color(233);
medusa#set(/, 3/, blanco);
medusa#set(6, 3/, blanco);
ima'e(medusa, 2/, /);
Ignacio Buioli | Jaime Prez Marn *"+
&nidad 32
6i+ograf@a' 5ovi(iento
- 1esar del 1otencial 1ara el ti1o de cintica en el cine< la ti1ogra9a animada no comenz :asta la dcada de
*&/.< con el ttulo de la 1elcula del tra)a8o de =aul Bass< Binder Maurice< $ Pa)lo #erro. Estos diseGadores $
sus com1aGeros< lograron e9ectos de calidad mu$ alta con sus secuencias de ttulos cinticos en 1elculas
como North by North"est @*&/&C< Dr. No @*&"2C< $ Aullitt @*&"4C. Entonces< se e61lor el 1oder e%ocador de la
cintica en 9orma de las letras 1ara esta)lecer un estado de ,nimo $ e61resar ni%eles adicionales de
signi9icado en relacin con el lengua8e escrito. En los aGos siguientes el diseGo de ttulos de 1elcula :a
madurado $ :a sido aumentado 1or la ti1ogra9a e61erimental 1ara la tele%isin $ el Internet.
-Pala-ras en 5ovi(iento
Para Aue la ti1ogra9a se mue%a< es necesario Aue el 1rograma se e8ecute continuamente. Por lo tanto< es
necesario utilizar una estructura draN().Fsar la ti1ogra9a con draN() reAuiere tres 1asos. Primero< la
%aria)le AHont de)e ser declarada 9uera de los )loAues setup() $ draN(). ;uego< la 9uente de)e ser
cargada $ esta)lecida en el )loAue setup(). #inalmente< la 9uente 1uede ser usada en el )loAue draN() a
tra%s de la 9uncin text().
El siguiente e8em1lo utiliza una 9uente llamada Xai5i. Para 1ro)ar dic:o e8em1lo es necesario crear tu 1ro1ia
9uente con la :erramienta K0reate .ontL $ luego cam)iar el nom)re del 1ar,metro de loadHont() 1or el
indicado
AHont !ont;
$trin' s < WAeaW;
,oid setup() R
si(e(6//, 6//);
!ont < loadHont(WeaiTi5.D#,lNW);
textHont(!ont);
!ill(/);
S
,oid draN() R
bac)'round(2/.);
text(s, 22, :/);
S
Para 1onerla en mo%imiento< sim1lemente di)u8aremos un cam)io de 1osicin en cada cuadro. ;as 1ala)ras
1ueden mo%erse en un orden en un orden regular si sus %alores son cam)iados en cada cuadro< $ tam)in
1uede mo%erse sin un orden a1arente 1or reci)ir %alores aleatorios.
AHont !ont;
!loat x6 < /;
!loat x2 < 6//;
,oid setup() R
si(e(6//, 6//);
textHont(!ont);
!ill(/);
S
,oid draN() R
bac)'round(2/.);
text(WDerechaW, x6, 3/);
text(WB(GuierdaW, x2, 6//);
x6 4< 6#/;
i! (x6 8 63/) R
x6 < 52//;
S
x2 5< /#D;
i! (x2 9 52//) R
x2 < 63/;
S
S
AHont !ont;
,oid setup() R
si(e(6//, 6//);
textHont(!ont);
no$tro)e();
S
,oid draN() R
!ill(2/., 2.);
!ill(/);
text(Wprocessin'W, random(56//, 6//), random(52/, 62/));
S
;a ti1ogra9a no necesita mo%erse en orden 1ara cam)iar en el tiem1o. Muc:os de los 1ar,metros de
trans9ormaciones< como la o1acidad< 1uede utilizarse en el te6to. Es 1osi)le cam)iando el %alor de una
%aria)le en el draN().
AHont !ont;
int opacidad < /;
int direccion < 6;
,oid setup() R
si(e(6//, 6//);
!ont < loadHont(WeaiTi52D#,lNW);
textHont(!ont);
S
,oid draN() R
bac)'round(2/.);
opacidad 4< 2 * direccion;
i! (( opacidad 9 /) TT ( opacidad 8 233)) R
S
!ill(/, opacidad);
text(W!undidoW, ., :/);
S
-l a1licar las 9unciones de translate()1 rotate() $ scale() tam)in 1ueden 1roducirse mo%imientos
AHont !ont;
$trin' s < WM->TBX?W;
!loat an'ulo < /#/;
,oid setup() R
si(e(6//, 6//);
textHont(!ont, 2.);
!ill(/);
S
,oid draN() R
bac)'round(2/.);
an'ulo 4< /#/2;
pushCatrix();
Ignacio Buioli | Jaime Prez Marn *"&
translate(00, 3/);
scale((cos(an'ulo/.#/) 4 6#2) * 2#/);
rotate(an'ulo);
text(s, /, /);
popCatrix();
S
7tra tcnica de re1resentacin< llamada 1resentacin r,1ida de %isualizacin serial @0=(PC< muestra 1ala)ras
en la %entana de 9orma secuencial $ 1ro%ee distintas 9ormas de 1ensar como leerlo.
AHont !ont;
$trin'à palabras < R WTresW, W'olpesW, W;W, WestasW,
W!ueraW, W WS;
int cualAalabra < /;
,oid setup() R
si(e(6//, 6//);
!ont < loadHont(WeaiTi52D#,lNW);
textHont(!ont);
text1li'n(*-NT->);
!rame>ate(.);
S
,oid draN() R
bac)'round(2/.);
cualAalabra44;
i! (cualAalabra << palabras#len'th) R
cualAalabra < /;
S
text(palabras`cualAalabraa, Nidth/2, 33);
S
-:etras en 5ovi(iento
Indi%idualmente< las letras o9recen ma$or 9le6i)ilidad a la :ora de animar Aue las 1ala)ras. !onstruir 1ala)ras
letra 1or letra< $ darle un mo%imiento indi%idual a cada una de ellas< 1uede con%ertirse en una tarea mu$
ardua. 5ra)a8ar de esta manera reAuiere m,s 1aciencia $ dedicacin Aue 1rogramas de otras caractersticas<
1ero los resultados son altamente satis9actorios.
//-l tama+o de cada letra oscila su tama+o
//de i(Guierda a derecha
AHont !ont;
$trin' s < W1>-1W;
!loat an'ulo < /#/;
,oid setup() R
si(e(6//, 6//);
textHont(!ont);
!ill(/);
S
,oid draN() R
bac)'round(2/.);
an'ulo 4< /#6;
!or (int i < /; i 9 s#len'th(); i44) R
!loat c < sin( an'ulo 4 i/AB);
text$i(e((c 4 6#/) * 02 4 6/);
text(s#char1t(i), i*2:, :/);
S
S
Ignacio Buioli | Jaime Prez Marn *+.
//*ada letra entra desde abao en secuencia
//; se detiene cuando la accin es concluda
AHont !ont;
$trin' palabra < WholaW;
charà letras;
!loatà ;; //*oordenada5V para cada letra
int letra1ctual < /; //@etra actual en mo,imiento
,oid setup() R
si(e(6//, 6//);
!ont < loadHont(WeaiTi52/#,lNW);
textHont(!ont);
letras < palabra#to*har1rra;();
; < neN !loat`letras#len'tha;
!or (int i < /; i 9 letras#len'th; i44) R
;ìa < 60/; //Aosicin !uera de la pantalla
S
!ill(/);
S
,oid draN() R
bac)'round(2/.);
i! (;`letra1ctuala 8 03) R
;`letra1ctuala 5< 0; //Cue,e la letra actual
S //hacia arriba
else R
i! (letra1ctual 9 letras#len'th56) R
letra1ctual44; //*ambia a la si'uiente letra
S
S
//*alcula el ,alor de x para centrar el texto
!loat x < (Nidth 5 textIidth(palabra)) / 2;
text(letrasìa, x, ;ìa);
x 4< textIidth(letrasìa);
S
S
Ignacio Buioli | Jaime Prez Marn *+*
&nidad 33
6i+ograf@a' =es+uesta
Muc:as 1ersonas 1asan :oras al da escri)iendo cartas en las com1utadoras< 1ero esta accin se %e mu$
limitada. PDu caractersticas se 1odra agregar a un editor de te6to 1ara Aue sea m,s sensi)le a la
mecangra9aQ Por e8em1lo< la %elocidad de la escritura 1odra disminuir el tamaGo de las letras< o una larga
1ausa en la escritura 1odra aGadir muc:os es1acios< imitando as una 1ausa de una 1ersona mientras :a)la.
PDu 1asa si el teclado 1uede registrar la di9icultad con Aue una 1ersona escri)e @la 9orma de Auien toca una
nota sua%e del 1iano< cuando se 1ulsa una tecla con sua%idadC $ autom,ticamente 1uede asignar atri)utos
como la cursi$a para las e(presar sua$idad $ negrita +ara e%+resas fuer2aQ Estas analogas se sugieren
cmo conser%adoras del so9t?are actual Aue trata a la ti1ogra9a $ mecanogra9a.
-Pala-ras res+onsivas
- los elementos ti1ogr,9icos se le 1ueden asignar los com1ortamientos Aue de9inen una 1ersonalidad en
relacin con el mouse o el teclado. Fna 1ala)ra 1uede e61resar la agresin mo%indose r,1idamente :acia el
cursor< o uno Aue se ale8a 1oco a 1oco 1uede e61resar timidez.
//@a palabra We,itarW se alea del mouse porGue su
//posicin se establece como la in,ersa del cursor
AHont !;
,oid setup() R
si(e(6//, 6//);
! < loadHont(WeaiTi52/#,lNW);
textHont(!);
text1li'n(*-NT->);
!ill(/);
S
,oid draN() R
bac)'round(2/.);
text(We,itarW, Nidth5mouseZ, hei'ht5mouseV);
S
//@a palabra WrisaW ,ibra cuando el cursor se le pone encima
AHont !;
!loat x < 00; //*oordenada5Z del texto
!loat ; < :/; //*oordenada5V del texto
,oid setup() R
si(e(6//, 6//);
! < loadHont(WeaiTi52/#,lNW);
textHont(!);
no$tro)e();
S
,oid draN() R
!ill(2/., 62/);
!ill(/);
//$i el cursor est" sobre el texto, cambia su posicin
i! ((mouseZ 8< x) UU (mouseZ 9< x433) UU
(mouseV 8< ;52.) UU (mouseV 9< ;)) R
x 4< random(53, 3);
; 4< random(53, 3);
S
text(WrisaW, x, ;);
S
Ignacio Buioli | Jaime Prez Marn *+2
-:etras res+onsivas
=e1arar una 1ala)ra en las letras Aue lo com1onen crea m,s o1ciones 1ara determinar su res1uesta a la del
mouse o el teclado. ;as letras inde1endientes tienen la ca1acidad de res1onder de una manera di9erente $
contri)u$en a la res1uesta total de la 1ala)ra. ;os dos e8em1los siguientes muestran esta tcnica. El mtodo
to*har1rra;() se utiliza 1ara e6traer los caracteres indi%iduales de una %aria)le $trin'. El mtodo
char1t() es una 9orma alternati%a 1ara aislar las letras indi%iduales dentro de un $trin'.
//@a posicin hori(ontal del mouse determina la rotacin
//del "n'ulo# -l "n'ulo aumenta con cada letra, lo Gue
//permite hacer una cur,a tipo'r"!ica#
$trin' palabra < WHlexibilidadW;
AHont !;
charà letras;
,oid setup() R
si(e(6//, 6//);
! < loadHont(WeaiTi56:#,lNW);
textHont(!);
!ill(/);
S
,oid draN() R
bac)'round(2/.);
pushCatrix();
translate(/, 00);
!loat an'ulo < map(mouseZ, /, Nidth, /, AB/D);
rotate(an'ulo);
text(letrasìa, /, /);
//*ompensacin por el ancho de la letra actual
translate(textIidth(letrasìa), /);
S
popCatrix();
S
//*alcula el tama+o de cada letra basada en la
//posicin del cursor# @as letras son mas 'randes
//*uando el cursor est" cerca#
$trin' palabra < W=&@T?W;
charà letras;
!loat total?!!set < /;
AHont !ont;
,oid setup() R
si(e(6//, 6//);
!ont < loadHont(WeaiTi52/#,lNW);
textHont(!ont);
text1li'n(*-NT->);
!ill(/);
S
,oid draN() R
bac)'round(2/.);
translate((Nidth 5 total?!!set) / 2, /);
total?!!set < /;
!loat primer1ncho < (Nidth / letras#len'th) / .#/;
translate(primer1ncho, /);
!loat distancia < abs(total?!!set 5 mouseZ);
distancia < constrain(distancia, 2., :/);
text$i(e(D. 5 distancia);
text(letrasìa, /, hei'ht 5 2);
!loat letras1ncho < textIidth(letrasìa);
i! (i Q< letras#len'th56) R
total?!!set < total?!!set 4 letras1ncho;
translate(letras1ncho, /);
S
S
S
&nidad 38
$olor' $o(+onentes
red(), blue(), 'reen(), alpha(), hue(), saturation(), bri'htness()
;os colores son almacenados en el so9t?are como n3meros. !ada color se de9ine 1or los elementos Aue lo
com1onen. !uando el color es de9inido 1or los %alores 0EB< :a$ tres n3meros Aue almacenan los
com1onentes de ro8o< %erde $ azul< $ un cuarto n3mero o1cional Aue almacena un %alor de trans1arencia.
!uando se tra)a8a con los %alores J=B< los tres n3meros almacenan el tono< saturacin< $ los %alores de )rillo
$ un cuarto indica la trans1arencia. El color %isi)le es una com)inacin de estos com1onentes. El a8uste de
las 1ro1iedades de colores indi%iduales en 9orma aislada de los dem,s es una tcnica 3til 1ara cam)iar
din,micamente un %alor de un solo color o la 1aleta entera de un 1rograma.
-E%tra*endo $olor
En Processing< una %aria)le del ti1o color sim1lemente almacena un %alor indi%idual de un com1onente del
color. Este %alor com)ina los com1onentes ro8o< %erde< azul $ al9a. 5cnicamente< este %alor es un int @enteroC
$ 1uede utilizarse din,micamente como se :a %isto en unidades anteriores. ;a %aria)le color almacena
%alores entre . $ 2// Aue luego 1uede utilizarse como com1onentes de color. ;a siguiente ta)la muestra una
a)straccin de lo dic:o
ro'o $erde a3ul alfa color
;as 9unciones red()< 'reen() $ blue()1 son usadas 1ara leer los com1onentes de color. ;a 9uncin
red() e6trae el com1onente ro8o. ;a 9uncin 'reen() e6trae el com1onente %erde. ;a 9uncin blue()
e6trae el com1onente azul.
color c6 < color(/, 62:, 233); //*rea un nue,o color
!loat r < red(c6); //1si'na /#/ a r
!loat ' < 'reen(c6); //1si'na 62:#/ a '
!loat b < blue(c6); //1si'na 233#/ a b
println(r 4 W, W 4 ' 4 W, W 4 b); //Bmprime W/#/, 62:#/, 233#/ W
color c2 < color(6/2); //*rea un ,alor de 'ris
!loat r2 < red(c2); //1si'na 6/2#/ a r2
!loat '2 < 'reen(c2); //1si'na 6/2#/ a '2
!loat b2 < blue(c2); //1si'na 6/2#/ a b2
println(r2 4 W, W 4 '2 4 W, W 4 b2); //Bmprime W6/2#/, 6/2#/, 6/2#/W
;a 9uncin alpha() e6trae el com1onente al9a de un color. 0ecordar agregar un cuarto %alor a color()< de
lo contrario< al9a ser, siem1re 2// 1or de9ecto.
Ignacio Buioli | Jaime Prez Marn *+/
color c < color(/, 36, 6/2); //*rea un nue,o color
color ' < color(/, 62:, 233, 22/); //*rea un nue,o color
!loat a < alpha(c); //1si'na 233#/ a a
!loat b < alpha('); //1si'na 22/#/ a b
println(a 4 W, W 4 b); //Bmprime W233#/, 22/#/W
;as 9unciones hue()1 saturation() $ bri'htness() 9uncionan como red()1 'reen() $ blue() 1ero
en el modo J=B de color. 0es1ecti%amente< e6traen en el %alor de tono< saturacin $ )rillo. 0ecordar cam)iar
de modo color a modo J=B antes de utilizar dic:as 9unciones. =in em)argo< :a$ %eces Aue se desea o)tener
alguno de esos %alores en el modo 1or de9ecto< $ esto es 1osi)le en Processing.
colorCode(\$=, 0:/, 6//, 6//); //-stablece el modo de color como \$=
color c < color(26/, 6//, ./); //*rea un nue,o color
!loat h < hue(c); //1si'na 26/#/ a h
!loat s < saturation(c); //1si'na 6//#/ a s
!loat b < bri'htness(c); //1si'na ./#/ a b
println(h 4 W, W 4 s 4 W, W 4 b); //Bmprime W26/#/, 6//#/, ./#/W
color c < color(26K, .6, 66K); //*rea un nue,o color
!loat r < red(c); //1si'na 26K#/ a r
!loat h < hue(c); //1si'na 20:#:.KK. a h
println(r 4 W, W 4 h); //Bmprime W26K#/, 20:#:.KK.W
;os %alores de estas 9unciones son escalas )asadas en el modo de color. =i el rango de color es cam)iado
con colorCode()< el %alor regresado ser, escalado con el nue%o rango.
colorCode(>X=, 6#/); //-stablece el modo de color como >X=
color c < color(/#2, /#D, 6#/); //*rea un nue,o color
!loat r < red(c); //1si'na /#2 a r
!loat h < hue(c); //1si'na /#3.6:::K a h
println(r 4 W, W 4 h); //1si'na W/#2, /#3.6:::KW
;os %alores regresados 1or dic:as 9unciones son todos %alores del ti1o !loat @decimalC< 1or lo tanto dar, un
error si se trata de asignar a una %aria)le ti1o int. =iem1re 1ueden utilizarse las 9unciones de con%ersin si
se lo desea.
color c < color(66D, 22, 2.); //*rea un nue,o color
int r6 < red(c); //->>?>Q red() re'resa un ,alor decimal
!loat r2 < red(c); //1si'na 66D#/ a r2
int r0 < int(red(c)); //1si'na 66D a r0
!omo se discuti en las unidades de im,genes< estas 9unciones se utilizan 1ara leer 16eles indi%idualmente
en la 1antalla. En el siguiente e8em1lo< la 9uncin 'et() es utilizada 1ara acceder al color actual de donde se
encuentra la 1osicin del cursor.
//-stablece el color de las lneas cuando el
//*omponente roo esta sobre el cursor
,oid setup() R
si(e(6//, 6//);
smooth();
!ill(2/., /, /);
S
,oid draN() R
bac)'round(/);
no$tro)e();
ellipse(::, .:, D/, D/);
Ignacio Buioli | Jaime Prez Marn *+"
!loat r < red(c); //-xtrae el componente roo
stro)e(2335r); //-stablece el contorno
line(/, mouseV, Nidth, mouseV);
S
//$imula la composicin crom"tica de un pxel en un
//panel plano
ABma'e medusa;
,oid setup() R
si(e(6//, 6//);
stro)e(233);
S
,oid draN() R
bac)'round(medusa);
!loat r < red(c); //-xtrae >oo
!loat ' < 'reen(c); //-xtrae Merde
!loat b < blue(c); //-xtrae 1(ul
!ill(r, /, /);
rect(02, 2/, 62, :/); //*omponente >oo
!ill(/, ', /);
rect(.., 2/, 62, :/); //*omponente Merde
!ill(/, /, b);
rect(3:, 2/, 62, :/); //*omponente 1(ul
S
;as 9unciones red()1 'reen() $ blue() 1ueden ser utilizadas de di9erentes maneras. Por e8em1lo< los
%alores Aue de%uel%en 1ueden utilizarse 1ara controlar el mo%imiento de las 9ormas $ 9iguras. En el siguiente
e8em1lo< se utiliza el %alor de )rillo de una imagen 1ara controlar la %elocidad de 4.. 1untos en 1antalla.
int num < .//;
!loatà x < neN !loat`numa;
!loatà ; < neN !loat`numa;
ABma'e im';
,oid setup() R
si(e(6//, 6//);
im' < loadBma'e(Wmedusa#p'W);
!or (int i < /; i 9 num; i44) R
xìa < random(Nidth);
;ìa < random(hei'ht);
S
stro)e(233);
S
,oid draN() R
bac)'round(/);
!or (int i < /; i 9 num; i44) R
color c < im'#'et(int(xìa), int(;ìa));
!loat b < bri'htness(c) / 233#/;
!loat ,el < poN(b, 2) 4 /#/3;
xìa 4< ,el;
i! (xìa 8 Nidth) R
xìa < /;
;ìa < random(hei'ht);
S
point(xìa, ;ìa);
S
S
Ignacio Buioli | Jaime Prez Marn *++
-Paletas de color #in1(ico
Fno de los conce1tos m,s im1ortantes en el tra)a8o con el color es la relati%idad. !uando un color se coloca
al lado de otro< am)os 1arecen cam)iar. =i el color tiene el mismo as1ecto en una $u6ta1osicin< a menudo
de)en ser di9erentes @de9inidos con di9erentes n3merosC. Esto es im1ortante 1ara considerar cuando se
tra)a8a con el color en el so9t?are< $a Aue los elementos son a menudo el mo%imiento $ el cam)io de colores.
Por e8em1lo< la colocacin de estos cinco colores...
- B ! ' E
...en di9erente orden< cam)ia su a1ariencia
-B!'E !-'BE
En el siguiente e8em1lo< los colores almacenados en una %aria)le oli,a $ 'ris siem1re son los mismos<
mientras Aue los %alores de amarillo $ narana se cam)ian din,micamente en relacin a la 1osicin
mouseV.
color oli,a, 'ris;
,oid setup() R
si(e(6//, 6//);
colorCode(\$=, 0:/, 6//, 6//, 6//);
no$tro)e();
smooth();
oli,a < color(K3, :6, 37);
'ris < color(0/, 6K, .2);
S
,oid draN() R
!loat ; < mouseV / !loat(hei'ht);
bac)'round('ris);
!ill(oli,a);
Guad(K/ 4 ;*:, /, 6//, /, 6//, 6//, 0/ 5 ;*:, 6//);
color amarillo < color(.D 4 ;*2/, 6//, DD 5 ;*2/);
!ill(amarillo);
ellipse(3/, .3 4 ;*6/, :/, :/);
color narana < color(27, 6//, D0 5 ;*6/);
!ill(narana);
ellipse(3., .2 4 ;*6:, 2., 2.);
S
Fna )uena tcnica 1ara crear 1aletas de colores es utilizando im,genes $ e6traer sus colores con la 9uncin
'et(). 'e1endiendo de los o)8eti%os< se 1uede cargar una imagen 9otogr,9ica o una Aue se :a construido
16el 1or 16el. Fna imagen de cualAuier dimensin 1uede ser cargada $ usado como una 1aleta de colores. -
%eces es con%eniente utilizar 1ocos colores.
ABma'e im';
,oid setup() R
si(e(6//, 6//);
smooth();
!rame>ate(/#3);
S
,oid draN() R
bac)'round(/);
!or (int x < /; x 9 im'#Nidth; x44) R
!or (int ; < /; ; 9 im'#hei'ht; ;44) R
!loat xpos6 < random(x*6/);
!loat xpos2 < Nidth 5 random(;*6/);
color c < im'#'et(x, ;);
stro)e(c);
line(xpos6, /, xpos2, hei'ht);
S
S
S
ABma'e im';
,oid setup() R
si(e(6//, 6//);
no$tro)e();
S
,oid draN() R
int ix < int(random(im'#Nidth));
int i; < int(random(im'#hei'ht));
color c < im'#'et(ix, i;);
!ill(c, 6/2);
int x'rid < int(random(52, 3)) * 23;
int ;'rid < int(random(52, 3)) * 23;
rect(x'rid, ;'rid, ./, ./);
S
-l cargar los colores de la imagen en un arra$ se a)ren m,s 1osi)ilidades. Fna %ez Aue los colores se
encuentran en un arra$< 1ueden ser 9,cilmente reorganizados o cam)iados. En el siguiente e8em1lo< los
%alores de color de la imagen se cargan de 9orma secuencial en un arra$ $ luego son reordenados de acuerdo
con su )rillo. Fna 9uncin< Aue llamaremos tipo*olor()1 toma una %ariedad de colores como entrada< las
1one en orden de oscuro a claro< $ luego regresa los colores ordenados. Na Aue cuenta de . a 2//< 1one
todos los colores con el %alor actual del arra$ sin ordenar el nue%o arra$.
ABma'e im';
colorà ima'e*olors;
,oid setup() R
si(e(6//, 6//);
!rame>ate(/#3);
smooth();
noHill();
im' < loadBma'e(Wcolores#p'W);
ima'e*olors < neN colorìm'#Nidth*im'#hei'hta;
!or (int ; < /; ; 9 im'#hei'ht; ;44) R
!or (int x < /; x 9 im'#Nidth; x44) R
ima'e*olors`;*im'#hei'ht 4 xa <
im'#'et(x, ;);
Ignacio Buioli | Jaime Prez Marn *+&
S
S
ima'e*olors < tipo*olor(ima'e*olors);
S
,oid draN() R
bac)'round(233);
!or (int x < 6/; x 9 Nidth; x 4< 6/) R
int r < int(random(ima'e*olors#len'th));
!loat thic) < ((r) / .#/) 4 6#/;
stro)e(ima'e*olors`ra);
stro)eIei'ht(thic));
line(x, hei'ht, x, hei'ht5r4thic));
line(x, /, x, hei'ht5r5thic));
S
S
colorà tipo*olor(colorà colors) R
colorà sorted < neN color`colors#len'tha;
int num < /;
!or (int i < /; i 9< 233; i44) R
!or (int < /; 9 colors#len'th; 44) R
i! (int(bri'htness(colorsà)) << i) R
sorted`numa < colorsà;
num44;
S
S
S
return sorted;
S
&nidad 3<
I(agen' ,iltro, 5e2cla, $o+ia, 51scara
!ilter(), blend(), blend*olor(), cop;(), mas)()
;as im,genes digitales tienen el 1otencial nota)le 1ara ser 9,cilmente reOcon9iguradas $ com)inarse con otras
im,genes. El so9t?are a:ora simula un 1roceso de o1eraciones de consumo Aue antes eran la 1reocu1acin
de un cuarto oscuro con luz $ Aumica. !ada 16el de una imagen digital es un con8unto de n3meros Aue se
1ueden agregar o multi1licar. -lgunos de estos c,lculos se )asan en la aritmtica $ otros utilizan las
matem,ticas m,s com1le8as de 1rocesamiento de seGales< 1ero los resultados %isuales son lo m,s
im1ortantes. ;os 1rogramas de so9t?are tales como el E2F Image Mani1ulation Program @EIMPC $ -do)e
P:otos:o1< :an :ec:o 1osi)le la realizacin de muc:os de los c,lculos m,s comunes $ 3tiles< sin 1ensar en
las matem,ticas detr,s de los e9ectos. Estos 1rogramas 1ermiten a los usuarios realizar 9,cilmente las
o1eraciones tcnicas< tales como la con%ersin de im,genes de colores 0EB a escala de grises< aumentando
el contraste de una imagen< 1roduciendo un )alance de color u otra clase de a8ustes. Fn 9iltro 1uede
desen9ocar una imagen< imitar la solarizacin< o simular los e9ectos de acuarela. ;as acciones de 9iltrado de
9iccin< mezcla< $ la co1ia se 1uede controlar 9,cilmente con el cdigo 1ara 1roducir cam)ios nota)les. Estas
tcnicas 1ueden ser demasiado lenta 1ara su uso en animacin en tiem1o real.
-,iltrando * 5e2clando
Processing 1ro%ee de 9unciones 1ara 9iltrar $ mezclar im,genes mostradas en la %entana de re1resentacin.
Estas o1eran 1or alterar los 16eles de una imagen o utilizar como 1ar,metro dos de estas. ;a 9uncin
!ilter() 1osee dos %ersiones
!ilter(modo)
!ilter(modo, ni,el)
E6isten oc:o o1ciones di9erentes 1ara modo T\>-$\?@D1 X>1V1 BNM->T1 A?$T->Bb-1 =@&>1 ?A1L&-1
->?D-< o DB@1T-. -lgunos de estos modos reAuieren Aue se les esta)lezca un ni$el. El siguiente e8em1lo
a1lica el 9iltro T\>-$\?@D a una imagen< con un ni%el de /#K.
ABma'e im' < loadBma'e(Wmedusa#p'W);
ima'e(im', /, /);
!ilter(T\>-$\?@D, /#K);
;a 9uncin !ilter() a9ecta solo a lo Aue $a :a sido di)u8ado. Por e8em1lo< si un 1rograma di)u8a dos lneas<
$ un desen9oAue es creado luego de Aue una lnea es di)u8ada< a9ectar, 3nicamente a la 1rimera.
smooth();
stro)eIei'ht(3);
noHill();
line(/, 0/, 6//, :/);
!ilter(=@&>, 0);
line(/, 3/, 6//, D/);
-l cam)iar el 1ar,metro de ni,el en cada cuadro se 1uede 1roducir mo%imiento. Para esto< :aremos uso de
un )loAue draN() Aue actualice el ni%el de desen9oAue de un 9iltro.
!loat !u((; < /#/;
,oid setup() R
si(e(6//, 6//);
smooth();
stro)eIei'ht(3);
noHill();
S
,oid draN() R
bac)'round(2/.);
i! (!u((; 9 6:#/) R
!u((; 4< /#/3;
S
line(/, 0/, 6//, :/);
!ilter(=@&>, !u((;);
line(/, 3/, 6//, D/);
S
!ualAuier %aria)le ABma'e tam)in 1osee su 1ro1io mtodo !ilter(). Esto 1ermite tra)a8ar con las
im,genes de 9orma indi%idual. Para esto< utilizamos el o1erador 1unto.
ima'e(im', /, /);
im'#!ilter(BNM->T);
ima'e(im', 3/, /);
;a 9uncin blend() mezcla los 16eles de di9erentes maneras< de1endiendo la clase de 1ar,metros Aue
reci)a. 5iene dos %ersiones di9erentes
blend(x, ;, ancho, alto, dx, d;, dancho, dalto, modo)
blend(im', x, ;, ancho, alto, dx, d;, dancho, dalto, modo)
El 1ar,metro modo 1uede ser =@-ND1 1DD 1 $&=T>1*T1 D1>e-$T1 @BX\T-$T1 DBHH->-N*-1
-Z*@&$B?N1 C&@TBA@V1 $*>--N1 ?M->@1V1 \1>DY@BX\T1 $?HTY@BX\T1 D?DX-< $ =&>N. ;os
1ar,metros x e ; corres1onden a las coordenadas 6 e $ de la u)icacin a co1iar. ;os 1ar,metros ancho $
alto< esta)lecen en tamaGo del ,rea a co1iar. ;os 1ar,metros dx $ d; son la coordenada 6 e $ de destino.
;os 1ar,metros dancho $ dalto< esta)lecen el tamaGo del ,rea de destino. Para mezclar dos im,genes< lo
idea es utilizar la segunda como 1ar,metro de im'.
En el siguiente e8em1lo se muestra la utilizacin de blend() en modo 1DD.
bac)'round(/);
stro)e(630);
stro)eIei'ht(2.);
smooth();
line(.., /, 2., D/);
line(/, 2., D/, ..);
blend(/, /, 6//, 6//, 6:, /, 6//, 6//, 1DD);
5am)in se 1ueden mezclar im,genes im1ortadas a la %entana de re1resentacin 1or utilizar la segunda
%ersin de la 9uncin blend(). El siguiente e8em1lo utiliza como modo a D1>e-$T.
bac)'round(/);
stro)e(233);
stro)eIei'ht(2.);
smooth();
line(.., /, 2., D/);
line(/, 2., D/, ..);
blend(im', /, /, 6//, 6//, /, /, 6//, 6//, D1>e-$T);
;a %aria)le ABma'e tiene su mtodo blend(). 'e esta 9orma< 1odemos mezclar dos im,genes.
ABma'e im'2 < loadBma'e(Wmedusa#p'W);
im'#blend(im'2, 62, 62, K:, K:, 62, 62, K:, K:, 1DD);
ima'e(im', /, /);
;a 9uncin blend*olor() es usada 1ara mezclar los colores indi%idualmente.
blend*olor(c6, c2, modo)
;os 1ar,metros c6 $ c2< son los %alores 1ara crear un nue%o color cuando estos se mezclen 8untos. ;a
o1cin de modo es lo mismo Aue en la 9uncin blend().
color '6 < color(6/2); //Xris medio
color '2 < color(36); //Xris oscuro
color '0 < blend*olor('6, '2, C&@TBA@V); //*rea Ne'ro
no$tro)e();
!ill('6);
rect(3/, /, 3/, 6//); //>ect"n'ulo de la Derecha
!ill('2);
rect(2/, 23, 0/, 3/); //>ect"n'ulo de la B(Guierda
!ill('0);
rect(3/, 23, 2/, 3/); //>ect"n'ulo superpuesto
-$o+iando P@%eles
;a 9uncin cop;() 1osee dos %ersiones< $ cada una de ellas una gran cantidad de 1ar,metros
cop;(x, ;, ancho, alto, dx, d;, dancho, dalto)
cop;(srcBm', x, ;, ancho, alto, dx, d;, dancho, dalto)
;a %ersin de cop;() con oc:o 1ar,metros< co1ia los 16eles de una regin de la %entana de re1resentacin<
$ los 1ega en otra regin. ;a %ersin con nue%e 1ar,metros co1ia toda o una 1orcin de una imagen<
es1eci9icada con srcBm'< $ la 1ega en una regin de la %entana de re1resentacin. =i el recurso $ el destino
son de di9erentes tamaGos< los 16eles son autom,ticamente escalados 1ara alcanzar el anc:o $ el alto de
destino. ;os otros 1ar,metros son los mismos Aue se descri)ieron 1re%iamente en la 9uncin blend(). ;a
9uncin cop;() di9iere de las 9unciones 'et() $ set()< %istas anteriormente< $a Aue esta 1uede o)tener
16eles $ resta)lecerles una 1osicin.
ima'e(im', /, /);
cop;(/, /, 6//, 3/, /, 3/, 6//, 3/);
ABma'e im'6, im'2;
,oid setup() R
si(e(6//, 6//);
im'6 < loadBma'e(WbosGue#p'W);
im'2 < loadBma'e(Wpuerto#p'W);
S
,oid draN() R
bac)'round(233);
ima'e(im'6, /, /);
int m; < constrain(mouseV, /, :K);
cop;(im'2, /, m;, 6//, 00, /, m;, 6//, 00);
S
;a %aria)les ABma'e tam)in 1osee un mtodo cop;(). Puede utilizarse 1ara co1iar 1orciones de la misma
imagen< o de una imagen a otra.
ABma'e im' < loadBma'e(Wtorre#p'W);
im'#cop;(3/, /, 3/, 6//, /, /, 3/, 6//);
ima'e(im', /, /);
-En(ascarando
El mtodo mas)() de la clase ABma'e esta)lece el %alor de trans1arencia de una imagen )as,ndose en otra
imagen. ;a imagen m,scara de)e contener solo %alores en escala de grises< $ de)e ser del mismo tamaGo de
la imagen a enmascarar. =i la imagen no es escala de grises< 1uede con%ertirse con la 9uncin !ilter().
;as ,reas mas claras muestran la imagen< mientras Aue las mas oscuras la cu)ren. El siguiente e8em1lo
utiliza la 9uncin mas)() con las siguientes im,genes
puerto#p' mascara#p'
;a imagen resultante $ el cdigo 1ara 1roducirla
bac)'round(233);
ABma'e im' < loadBma'e(Wpuerto#p'W);
ABma'e mas)Bm' < loadBma'e(Wmascara#p'W);
im'#mas)(mas)Bm');
ima'e(im', /, /);
/+!ndice ,iltros
&nidad 3>
I(agen' Procesa(iento de I(agen
pixelsà, loadAixels(), updateAixels(), createBma'e()
El 1rocesamiento de im,genes es un trmino mu$ am1lio $ general 1ara re9erirse a la mani1ulacin $
modi9icacin de las mismas< o en su de9ecto< 1roducir un resultado esttico o me8orar la comunicacin.
Programas como EIMP o -do)e P:otos:o1 1ro%ee al usuario de :erramientas 1ara mani1ular im,genes<
inclu$endo cam)ios de contraste o desen9oAue.
En Processing< cada imagen es almacenada co(o un arra* de una di(ensin de colores. !uando imagen
es mostrada en 1antalla< cada elemento del arra$ es di)u8ado como un 16el. Por lo tanto< al multi1licar el
anc:o 1or el alto de la imagen se 1uede determinar el n3mero de 16eles em1leados. =i una imagen es de
*.. 16eles de anc:o 1or *.. 16eles de alto< el arra$ contendr, *.... elementos. = una imagen es de 2..
16eles de anc:o 1or 2 16eles de alto< el arra$ tendr, 4.. elementos. ;a 1rimera 1osicin del arra$ es el
1rimer 16el de la esAuina su1erior izAuierda< $ la 3ltima es el 3ltimo 16el de la esAuina in9erior derec:a.
-P@%eles
El arra$ pixelsà almacena el %alor de color de cada 16el. ;a 9uncin loadAixels() de)e ser llamada
antes de pixelsà. ;uego de Aue los 16eles son ledos o modi9icados< ellos de)en actualizarse mediante la
9uncin updateAixels(). !omo be'in$hape() $ end$hape()< loadAixels() $ updateAixels()<
siem1re est,n 8untas.
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
!loat 'ra; < map(second(), /, 37, /, 233);
color c < color('ra;);
int index < !rame*ount P (Nidth*hei'ht);
loadAixels();
pixelsìndexa < c;
updateAixels();
S
;as 9unciones loadAixels() $ updateAixels() aseguran Aue el arra$ pixelsà est listo 1ara ser
modi9icado $ actualizado. Ja$ Aue asegurarse< adem,s< Aue est declarado en torno a cualAuier )loAue< $
solo utilizarlo cuando sea necesario< 1uesto su so)reutilizacin 1uede entor1ecer el 1rograma $ :acerlo lento.
;eer $ escri)ir datos directamente con pixelsà es un mtodo distinto Aue :acerlo con las 9unciones de
'et() $ set(). ;a coordenadaO6 $ la coordenadaO$ 1ueden ser ma1eadas a una 1osicin corres1ondiente
del arra$< 1or multi1licar el %alor de $ 1or el anc:o de la %entana de re1resentacin< $ sumarle a este el %alor
de x. Para calcular< entonces< cualAuier 1osicin de 16eles en el arra$< de)e utilizarse la siguiente ecuacin
(;*Nidth)4x
//-stas tres lneas de cdi'o eGui,alen aF set(23, 3/, color(/))
loadAixels();
pixels`3/*Nidth 4 23a < color(/);
updateAixels();
Para con%ertir los %alores en la direccin o1uesta< de)e di%idirse la 1osicin de los 16eles en el arra$ 1or el
anc:o de la %entana de re1resentacin< 1ara o)tener la coordenadaO$< $ o)tener el mdulo de la 1osicin $ el
anc:o de la %entana de re1resentacin< 1ara o)tener la coordenadaO6.
//-stas tres lneas de cdi'o eGui,alen aF pixels`3/K3a < color(/)
int ; < 3/K3 / Nidth;
int x < 3/K3 P Nidth;
set(x, ;, color(/));
En 1rogramas Aue reAuieren mani1ular una gran cantidad de 16eles< la im1lementacin de pixelsà es
muc:o m,s r,1ida Aue la de 'et() $ set(). ;os siguientes e8em1los :an sido mostrados al e61licarse
'et() $ set() en unidades anteriores. 2o o)stante< aAu se im1lementan con pixelsà 1ara demostrar la
%elocidad con la Aue o1era el 1rograma.
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
//*ontrae para no exceder el lmite del arra;
int mx < constrain(mouseZ, /, 77);
int m; < constrain(mouseV, /, 77);
loadAixels();
pixels`m;*Nidth 4 mxa < color(/);
updateAixels();
S
ABma'e arch;
,oid setup() R
si(e(6//, 6//);
no$tro)e();
arch < loadBma'e(Warch#p'W);
S
,oid draN() R
bac)'round(arch);
//*ontrae para no exceder el lmite del arra;
loadAixels();
color c < pixels`m;*Nidth 4 mxa;
!ill(c);
rect(2/, 2/, :/, :/);
S
!ada imagen tiene su 1ro1io arra$ pi(elsEF< al cual se 1uede acceder con el o1erador 1unto. Esto :ace 1osi)le
mostrar una imagen mientras se modi9ican los 16eles en otra imagen.
ABma'e arch;
,oid setup() R
si(e(6//, 6//);
arch < loadBma'e(Wpuerto#p'W);
S
,oid draN() R
bac)'round(2/.);
arch#loadAixels();
arch#pixels`m;*Nidth 4 mxa < color(/);
arch#updateAixels();
ima'e(arch, 3/, /);
S
-l im1lementar el arra$ pixelsà1 en lugar de la 9uncin ima'e() 1ara mostrar una imagen en 1antalla<
este arra$ 1ro%ee de m,s control de la mencionada imagen. =im1les o1eraciones matem,ticas o 1eAueGos
c,lculos< sumado a un ciclo H?>< re%ela el %erdadero 1otencial de pixelsà como arra$.
ABma'e arch < loadBma'e(Wpuerto#p'W);
int count < arch#Nidth * arch#hei'ht;
arch#loadAixels();
loadAixels();
!or (int i < /; i 9 count; i 4< 2) R
pixelsìa < arch#pixelsìa;
S
updateAixels();
arch#loadAixels();
loadAixels();
!or (int i < /; i 9 count; i 4< 0) R
pixelsìa < arch#pixelsìa;
S
updateAixels();
arch#loadAixels();
loadAixels();
!or (int i < /; i 9 count; i44) R
pixelsìa < arch#pixels`count 5 i 5 6a;
S
updateAixels();
arch#loadAixels();
loadAixels();
!or (int i < /; i 9 count; i44) R
pixelsìa < arch#pixelsì/2a;
S
updateAixels();
-$o(+onentes del P@%el
;as 9unciones red()< 'reen() $ blue() son utilizadas 1ara leer %alores indi%iduales de los 16eles. Estos
%alores 1ueden ser modi9icados $ de%ueltos al arra$ pxelsà. En el siguiente e8em1lo< se muestra como
in%ertir los %alores de color de una imagen.
bac)'round(arch);
loadAixels();
!or (int i < /; i 9 Nidth*hei'ht; i44) R
color p < pixelsìa; //*onse'uir pxeles
!loat r < 233 5 red(p); //Codi!icar ,alor roo
!loat ' < 233 5 'reen(p); //Codi!icar ,alor de ,erde
!loat b < 233 5 blue(p); //Codi!icar ,alor de a(ul
pixelsìa < color(r, ', b); //1si'nar ,alor modi!icado
S
updateAixels();
;os %alores del teclado $ el mouse 1ueden ser utilizados en la manera en la Aue el arra$ pixelsà modi9ica
mientras el 1rograma se est, e8ecutando. En el siguiente e8em1lo< una imagen es con%ertida a escala de
grises al incrementar sus com1onentes. Estos %alores son incrementados con mouseZ< :aciendo la imagen
mas luminosa.
ABma'e arch;
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
bac)'round(arch);
loadAixels();
!or (int i < /; i 9 Nidth*hei'ht; i44) R
color p < pixelsìa; //@eer color de la pantalla
!loat r < red(p); //Codi!icar ,alor de roo
!loat ' < 'reen(p); //Codi!icar ,alor de ,erde
!loat b < blue(p); //Codi!icar ,alor de a(ul
!loat bN < (r 4 ' 4 b) / 0#/;
bN < constrain(bN 4 mouseZ, /, 233);
pixelsìa < color(bN); //1si'nar ,alor modi!icado
S
updateAixels();
S
Estas 9unciones de modi9icacin indi%idual son mu$ 3tiles< 1ero tam)in mu$ lentas. !uando se reAuiere Aue
se modi9iAue de 9orma indi%idual cientos o miles de %eces mientras se e8ecuta el 1rograma< se recomienda
utilizar una tcnica conocida como bit+shifting.
-$onvolucin
7tra 9orma de modi9icar las im,genes es cam)iar el %alor de cada 16el en relacin a sus 16eles %ecinos. Fna
matri6 de n3meros< llamada Hernel de con%olucin< es a1licada a cada 16el de la 1antalla. -1licando el Hernel
a cada 16el es llamado 1roceso de con%olucin. Este ti1o de 1roceso matem,tico es tan e9iciente Aue o1era
en 1rogramas de 1roduccin gr,9ica mu$ 1otentes como el -do)e P:otos:o1.
!omo un e8em1lo< tomaremos un 16el de una imagen a la Aue le a1licaremos el Hernel. El 16el o1era como
centro de los 16eles Aue se encuentran a su alrededor. !ada 16el es multi1licado 1or el Hernel $< luego estos
%alores se suman entre s. El resultado es un 16el con un nue%o %alor de color< 1roducto de a1licar el Hernel
;a 1rimer e61resin creada al a1licar el Hernel es la siguiente
(233 * /#666) 4 (22: * /#666) 4 (630 * /#666) 4
(22: * /#666) 4 (630 * /#666) 4 ( / * /#666) 4
(630 * /#666) 4 ( / * /#666) 4 ( / * /#666)
=im1li9icado como
2D#0/3 4 23#/D: 4 6:#7D0 4
23#/D: 4 6:#7D0 4 /#/// 4
6:#7D0 4 /#/// 4 /#///
Esto da como resultado *2&<42". Pasado a entero es *2&< $ luego es con%ertido a %alor de grises 1ara el
16el. Para realizar una con%olucin en la imagen com1leta< es necesario a1licar el Hernel en cada uno de los
16eles. Es sa)ido Aue un 1ro)lema im1ortante son los 16eles de las aristas o los )ordes< donde algunos de
los 16eles Aue los rodean esca1an de la %entana de re1resentacin. En estos casos< el 1rograma
sim1lemente los ignora $ a1lica el Hernel al resto de los %alores.
;os 1atrones Aue se utilizan en los Hernel crean di%ersos 9iltros 1ara a1licar a la imagen. =i todos los %alores
del Hernel son 1ositi%os< crea lo Aue suele denominarse un 9iltro 1asaO)a8os. Fn 9iltro 1asaO)a8os< remue%e
,reas donde :a$ una e6trema di9erencia en los %alores ad$acentes de los 16eles. -l a1licarlo en una imagen
com1leta< crea una es1ecie de desen9oAue. Ftilizar< en el Hernel< una mezcla de %alores 1ositi%os $ negati%os
crea un 9iltro 1asaOaltos. Fn 9iltro 1asaOaltos< remue%e ,reas donde :a$ mu$ 1oca di9erencia en los %alores
ad$acentes de los 16eles. Esto 1roduce una clase de en9oAue.
El siguiente e8em1lo< demuestra como usar una matri6 Hernel de 3 6 3< 1ara trans9ormar una imagen. =i se
modi9ican los %alores del arra$ )ernelàà< se o)tendr,n distintos resultados. ;a 9uncin createBma'e()
crea un 16el %aco. 'ic:a 9uncin reAuiere tres 1ar,metros< 1ara asignar el anc:o< el alto $ el 9ormato de la
imagen. El 9ormato 1uede ser >X= @color com1letoC o 1>X= @color com1leto con al9aC. 2o es necesario utilizar
loadAixels() inmediatamente des1us de utilizar createBma'e().
!loatàà )ernel < R R 56, /, 6 S,
R 52, /, 2 S,
R 56, /, 6 S S;
si(e(6//, 6//);
ABma'e im' < loadBma'e(Wpuerto#p'W); //*ar'a de la ima'en ori'inal
im'#loadAixels();
//*rea una ima'en opaca con el mismo tama+o Gue la ori'inal
ABma'e ed'eBm' < createBma'e(im'#Nidth, im'#hei'ht, >X=);
//=ucle para recorrer cada pxel
!or (int ; < 6; ; 9 im'#hei'ht56; ;44) R//B'nora los bordes de arriba ; de abao
!or (int x < 6; x 9 im'#Nidth56; x44) R //B'nora los bordes
!loat sum < /; //eernel suma cada pxel
!or (int ); < 56; ); 9< 6; );44) R
!or (int )x < 56; )x 9< 6; )x44) R
//*alcula el pxel ad;acente para este punto del )ernel
int pos < (; 4 );)*Nidth 4 (x 4 )x);
//@as Bma'enes en escala de 'rises, >X=, son ind%nticas
!loat ,al < red(im'#pixels`posa);
//Cultiplica los pxeles ad;acentes, basado en el )ernel
sum 4< )ernel`);46a`)x46a * ,al;
S
S
//Aara cada pxel en la ima'en, establecer la escala de 'rises
//basada en la suma del )ernel
ed'eBm'#pixels`;*im'#Nidth 4 xa < color(sum);
S
S
//-stablece Gue ha; cambios en ed'eBm'#pixelsà
Ignacio Buioli | Jaime Prez Marn *&.
ed'eBm'#updateAixels();
ima'e(ed'eBm', /, /); //Dibua la nue,a ima'en
-I(agen co(o #atos
Esta unidad :a introducido a las im,genes digitales como secuencias de n3meros en una dimensin Aue
de9inen colores. ;os datos numricos< sin em)argo< 1ueden utilizarse 1ara muc:as otras cosas Aue solo
mostrar colores. ;os siguientes e8em1los muestran di%ersas 9ormas de utilizar los datos de pixelsà.
//*on,ierte cada ,alor de pxel en di"metros de un crculo
ABma'e arch;
int index;
,oid setup() R
si(e(6//, 6//);
smooth();
!ill(/);
arch#loadAixels();
S
,oid draN() R
bac)'round(2/.);
color c < arch#pixelsìndexa; //?btiene pxel
!loat r < red(c) / 0#/; //?btiene ,alor roo
ellipse(Nidth/2, hei'ht/2, r, r);
index44;
i! (index << Nidth*hei'ht) R
index < /; //>etorna al primer pxel
S
S
//*on,ierte los ,alores de roo en la lon'itud de las lneas
ABma'e arch;
,oid setup() R
si(e(6//, 6//);
arch#loadAixels();
S
,oid draN() R
bac)'round(2/.);
!or (int i < /; i 9 arch#hei'ht; i44) R
//?btiene el pxel
color c < arch#pixels`m;*Nidth 4 ia;
//?btiene ,alor de roo
!loat r < red(c);
line(i, /, i, hei'ht/2 4 r/:);
S
S
Ignacio Buioli | Jaime Prez Marn *&*
//*on,ierte los ,alor de a(ul de una ima'en
//en coordenadas de una serie de lneas
ABma'e arch;
,oid setup() R
si(e(6//, 6//);
smooth();
arch#loadAixels();
S
,oid draN() R
bac)'round(2/.);
int mx < constrain(mouseZ, /, arch#Nidth56);
int o!!set < mx * arch#Nidth;
be'in$hape(@BN-$);
!or (int i < /; i 9 arch#Nidth; i 4< 2) R
!loat r6 < blue(arch#pixelsò!!set 4 ia);
!loat r2 < blue(arch#pixelsò!!set 4 i 4 6a);
!loat ,x < map(r6, /, 233, /, hei'ht);
!loat ,; < map(r2, /, 233, /, hei'ht);
,ertex(,x, ,;);
S
end$hape();
S
Ignacio Buioli | Jaime Prez Marn *&2
/+!ndice $onvolucin
&nidad 3?
#atos de Salida' I(1genes
sa,e(), sa,eHrame()
;a 1antalla de una com1utadora muestra una imagen en la 1antalla muc:as %eces 1or segundo. ;a ma$ora
de los sistemas o1erati%os 1ermiten o)tener una ca1tura de la 1antalla mientras se est, e8ecutando el
sistema. =i se utiliza una Macintos:< de)e o1rimirse !omandoO=:i9tO3. En caso de usarse Iindo?s< de)e
o1rimirse el )otn Im1resin de Pantalla @Im1r Pant Pet =isC. Esta imagen es guardada en 1orta1a1eles< 1or
lo tanto en cualAuier editor de im,genes 1uede usarse la 9uncin Pegar @!ontrol_(C 1ara %er la
corres1ondiente ca1tura. E6isten< adem,s< so9t?are Aue 9acilitan el almacenamiento de estas im1resiones.
Incluso< lo interesante< es Aue 1ermiten almacenarlas en 9orma de secuencia< cuadroOaOcuadro.
'e)e considerarse Aue 3. cuadros 1or segundo< tan solo 3. segundos de secuencia necesitan almacenar
&.. cuadros. =i se utiliza en la ?e)< 1odra :acerse mu$ lenta la descarga de la animacin secuencial. ;as
o1ciones m,s comunes suelen ser tcnicas de degrado de calidad de la imagen< 1ara una m,s r,1ida
%isualizacin en la ?e).
-Cuardando I(1genes
;a 9uncin sa,e() es em1leada 1ara guardar una imagen del 1rograma. 0eAuiere tan solo un 1ar,metro< un
$trin' Aue se con%ierte en el nom)re de la imagen.
sa,e(nombredearchi,o)
;as im,genes 1ueden ser almacenadas en una gran %ariedad de 9ormatos< de1endiendo de la e6tensin
utilizada en el 1ar,metro. Por e8em1lo< si el 1ar,metro nombredearchi,o es mi1rchi,o#ti!< ser, una
imagen de 9ormato 5I##R en cam)io< si es mi1rchi,o#t'a< ser, una imagen de 9ormato 5-0E-. =i ninguna
e6tensin es incluida< se almacenar, como 9ormato 5I## 1or de9ecto< $ el #ti! ser, aGadido al nom)re. Ja$
Aue asegurarse de 1oner el nom)re entre comillas 1ara di9erenciar al 1ar,metro como un $trin'. ;a imagen
ser, guardada en la actual car1eta del sHetc:.
line(Nidth, /, /, hei'ht);
//Xuarda un archi,o TBHH llamado x#ti! en la actual carpeta del s)etch
sa,e(Wx#ti!W);
=olo los elementos di)u8ados antes de la declaracin de sa,e() son guardados como una imagen. En el
siguiente e8em1lo< solo la 1rimer lnea es guardada en linea#ti!.
//Xuarda un archi,o TBHH llamado Wlinea#ti!W en la actual carpeta del s)etch
sa,e(Wlinea#ti!W);
line(Nidth, /, /, hei'ht);
=i la 9uncin sa,e() a1arece dentro de un )loAue draN()< la imagen ser, almacenada cada %ez Aue el
)ucle se e8ecute. Esto Auiere decir Aue se estar, guardando constantemente la imagen mostrada en 1antalla.
Esto< como es sa)ido< no solo no es correcto sino Aue adem,s entor1ece el 9uncionamiento del 1rograma. 'e
entre las soluciones m,s sim1les Aue se 1ueden em1lear< se encuentra utilizar la 9uncin sa,e() en un
e%ento. ;o m,s com3n es en un e%ento de mouseAressed() o )e;Aressed().
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
bac)'round(2/.);
line(/, /, mouseZ, hei'ht);
line(Nidth, /, /, mouseV);
S
sa,e(Wlinea#ti!W);
S
-Cuardando I(1genes Secuenciales
;a 9uncin sa,eHrame() almacena una secuencia numerada de im,genes.
sa,eHrame()
sa,eHrame(Wnombredearchi,o5]]]]#extW)
=i sa,eHrame() se utiliza sin 1ar,metro< las im,genes son guardadas como screen5////#ti!1
screen5///6#ti!1 screen5///2#ti!< etc. El com1onente nombredearchi,o5 1uede ser cam)iado
1or cualAuier nom)re se desee< $ la e6tensin ext 1uede ser cam)iada 1or cualAuier e6tensin de imagen.
;os ]]]] es la 1orcin Aue es1eci9ica los dgitos con los Aue se guardan las im,genes. =i se utiliza ]]]]<
ese %alor es reem1lazado 1or el %alor Aue en ese momento tiene !rame*ount. Por e8em1lo< el cuadro
n3mero *2+ es llamado nombredearchi,o5/62K#ti!< $ el *+23 es nombredearchi,o56K20#ti!. =i
se agrega un ] e6tra< so1ortar, *.... o m,s.
//Xuarda los primeros 3/ cuadros
!loat x < 00;
!loat numHrames < 3/;
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
S
,oid draN() R
bac)'round(/);
x 4< random(52, 2);
ellipse(x, 3/, ./, ./);
i! (!rame*ount 9< numHrames) R
sa,eHrame(Wcirculos5]]]]#ti!W);
S
S
Fsando sa,eHrame() dentro de una estructura BH se le otorga mas control al 1rograma. Por e8em1lo< si se
desea guardar 2.. cuadros luego de o1rimir el )otn del mouse.
//Xuarda 2. cuadros, de x56///#ti! a x56/20#ti!
,oid draN() R
bac)'round(2/.);
i! ((!rame*ount 8 777) UU (!rame*ount 9 6/2.)) R
sa,eHrame(Wx5]]]]#ti!W);
S
S
//Xuarda un cuadro cada 3 cuadros (e#, x5///3#ti!, x5//6/#ti!, x5//63#ti!)
,oid draN() R
Ignacio Buioli | Jaime Prez Marn *&/
bac)'round(2/.);
i! ((!rame*ount P 3) << /) R
sa,eHrame(Wx5]]]]#ti!W);
S
S
Ignacio Buioli | Jaime Prez Marn *&"
&nidad 3A
#atos de Salida' E%+ortar /rc7ivos
n!(), sa,e$trin's(),
ArintIriter, createIriter(),
ArintIriter#!lush(), ArintIriter#close(), exit()
;os arc:i%os digitales en los ordenadores no son tangi)les< como sus :omnimos de 1a1el< $ no se acumulan
en los ga)inetes durante aGos acumulando 1ol%o. Fn arc:i%o digital es una secuencia de )$tes en una
u)icacin en el disco del ordenador. - 1esar de la di%ersidad de los contenidos almacenados en arc:i%os
digitales< el material de cada uno es el mismo O una secuencia de *s $ .s. !asi todas las tareas realizadas
con com1utadoras im1lica tra)a8ar con los arc:i%os. Por e8em1lo< antes de Aue un documento de te6to se
escri)e< el editor de te6to de)e leer el arc:i%o $ un nue%o arc:i%o de)e ser creado 1ara almacenar el
contenido. !uando la in9ormacin se guarda< se le da un nom)re 1ara la 9utura recu1eracin del mismo.
5odos los arc:i%os del so9t?are tienen un 9ormato< un con%enio de orden de los datos< 1ara Aue las
a1licaciones de so9t?are se1an cmo inter1retarlos cuando los leen de la memoria. -lgunos 9ormatos
comunes inclu$en 5>5 1ara arc:i%os de te6to sin 9ormato< MP3 1ara almacenar sonido $ E>E 1ara los
1rogramas e8ecuta)les en Iindo?s. #ormatos comunes 1ara los datos de las im,genes son JPEE $ EI# $
9ormatos comunes 1ara los documentos de te6to son '7! $ 05#. ;a 9ormato >M; se :a 1o1ularizado en los
3ltimos aGos como un 9ormato de datos de uso general Aue 1uede ser e6tendido 1ara sostener los ti1os
es1ec9icos de datos en un 9ormato 9,cil de leer arc:i%o.
-,or(ateando #atos
E6isten caracteres 1articulares Aue no 1oseen una %isualizacin directa. ;os mas comunes son el es1acio
tabular $ la nue$a l@nea. Estos caracteres 1ueden re1resentarse con ft $ fn< res1ecti%amente.
//Bmprime Wespacio tabularW
println(WespaciofttabularW);
//Bmprime cada palabra lue'o de fn en una nue,a lnea
//linea6
//linea2
//linea0
println(Wlinea6fnlinea2fnlinea0W);
;os datos< tam)in< 1ueden ser 9ormateados con 9unciones como n!(). Ja$ dos %ersiones de dic:a 9uncin
n!(intMalor, di'itos)
n!(!loatMalor, i(Guierdo, derecho)
El intMalor es un %alor ti1o int a ser 9ormateado< $ los d'itos es la cantidad total de dgitos Aue de)e
1roducir el 9ormato. Por otro lado< en la segunda %ersin< el !loatMalor es el %alor ti1o !loat a ser
9ormateado. El 1ar,metro i(Guierdo esta)lece la cantidad de dgitos a la izAuierda del decimal< mientras
Aue el derecho esta)lece la cantidad total de dgitos a la derec:a.
println(n!(2//, 6/)); //Bmprime W///////2//W
println(n!(./, 3)); //BmprimeW///./W
println(n!(7/, 0)); //Bmprime W/7/W
println(n!(2//#7., 6/, .)); //Bmprime W///////2//#7.//W
println(n!(./#2, 3, 0)); //Bmprime W///./#2//W
println(n!(7#/62, /, 3)); //Bmprime W7#/62//W
-E%+ortando /rc7ivos
Euardar arc:i%os es una 9orma mu$ 3til de 1oder mostrar datos de determinado ti1o una %ez Aue el 1rograma
Ignacio Buioli | Jaime Prez Marn *&+
se detu%o. ;a 9uncin sa,e$trin's() escri)e un arra$ de $trin's a un arc:i%o. El arc:i%o es almacenado
en la car1eta del sHetc:. =e 1uede acceder a esta sim1lemente utilizando la :erramienta K=:o? =Hetc:
#olderL en el men3 K=Hetc:L. En adicin< la 9uncin exit() se utiliza 1ara detener el 1rograma.
intà x < neN int`/a;
intà ; < neN int`/a;
,oid setup() R
si(e(6//, 6//);
S
,oid draN() R
bac)'round(2/.);
stro)e(/);
noHill();
be'in$hape();
,ertex(xìa, ;ìa);
S
end$hape();
//Cuestra el si'uiente se'mento de lnea a+adido
i! (x#len'th 8< 6) R
stro)e(233);
line(mouseZ, mouseV, x`x#len'th56a, ;`x#len'th56a);
S
S
,oid mouseAressed() R //*lic) para a're'ar un se'mento de lnea
x < append(x, mouseZ);
; < append(;, mouseV);
S
,oid )e;Aressed() R //Aresiona una tecla para almacenar los datos
$trin'à lineas < neN $trin'`x#len'tha;
linesìa < xìa 4 WftW 4 ;ìa;
S
sa,e$trin's(Wlineas#txtW, lineas);
exit(); //Detiene el pro'rama
S
;a clase ArintIriter 1ro%ee de otra 9orma de e61ortar arc:i%os. En lugar de escri)ir el arc:i%o
com1letamente una %ez< como en sa,e$trin's()< el mtodo createIriter() a)re un arc:i%o 1ara
escri)irlo $ 1ermite su escritura mientras se e8ecuta el 1rograma. Para 1oder conseguir Aue el arc:i%o se
guarde correctamente< es necesario %alerse del mtodo !lush()< 1ara escri)ir cualAuier clase de dato al
arc:i%o. El mtodo close() es igualmente necesario 1ara 9inalizar la escritura de manera correcta.
ArintIriter output;
,oid setup() R
si(e(6//, 6//);
//*rea un nue,o archi,o en el directorio del s)etch
output < createIriter(Wposiciones#txtW);
!rame>ate(62);
S
,oid draN() R
i! (mouseAressed) R
// Irite the coordinate to a !ile Nith a
// WftW (T1= car"cter) entre cada entrada
output#println(mouseZ 4 WftW 4 mouseV);
S
S
,oid )e;Aressed() R //Aresiona una tecla para 'uardar los datos
output#!lush(); //-scribe los datos
output#close(); //Hinali(a el archi,o
S
El siguiente e8em1lo es una %ariacin del anterior< 1ero utiliza las teclas Enter $ Barra de Es1acio 1ara
controlar la escritura de datos $ cuando el arc:i%o es cerrado
AHont !ont;
$trin' letras < WW;
ArintIriter output;
,oid setup() R
si(e(6//, 6//);
!ill(/);
!ont < loadHont(W-ure)a52.#,lNW);
textHont(!ont);
//*rea un nue,o archi,o en el directorio del s)etch
output < createIriter(Wpalabras#txtW);
S
,oid draN() R
bac)'round(2/.);
text(letras, 3, 3/);
S
,oid )e;Aressed() R
i! ()e; << ^ ^) R //=arra de -spacio presionada
output#println(letras); //-scribe datos en palabras#txt
letras < WW; //@impia el $trin'e letras
S else R
letras < letras 4 )e;;
S
i! ()e; << -NT->) R
output#!lush(); //-scribe los datos
output#close(); //Hinali(a el archi,o
S
S
Ignacio Buioli | Jaime Prez Marn *&&
&nidad 3B
Estructuras' 3-jetos
class, ?bect
;as %aria)les $ las 9unciones son los )loAues constructores de la 1rogramacin. #recuentemente< muc:as
9unciones son utilizadas 8untas 1ara relacionar %aria)les. ;a 1rogramacin orientada a o)8etos< la cual es
1osi)le con Processing< utiliza o)8etos $ clases como )loAues constructores. Fna clase de9ine un gru1o de
mtodos @9uncionesC $ de cam1os @%aria)lesC. Fn o)8eto es sim1lemente una instancia de la clase. ;os
cam1os de un o)8eto son< generalmente< accesi)les solo %a sus 1ro1ios mtodos< lo cual 1ermite ocultar su
com1le8idad del 1rograma general. =imilar a lo Aue ocurre al mane8ar< un conductor no %e los 1rocesos de
ingeniera Aue ocurren en el motor< 1ero si 1uede %er la %elocidad a la Aue %a en el %elocmetro. El mismo ti1o
de a)straccin es utilizada en la 1rogramacin orientada a o)8etos @P77C.
-Progra(acin 3rientada a 3-jetos
Fn 1rograma modular se com1one de mdulos de cdigo< encargados de una tarea es1ec9ica. ;as %aria)les
son la 9orma m,s ),sica en 1ensar en reutilizar elementos en un 1rograma. Permiten Aue un %alor 1ueda
a1arecer la cantidad de %eces Aue sea necesario $ Aue sea cam)iado. ;as 9unciones a)straen una tarea
es1ec9ica $ 1ermiten a los )loAues de cdigo se reutilizados. Eeneralmente< uno est, conectado con lo Aue
la 9uncin :ace< $ no como ella 9unciona. ;a 1rogramacin orientada a o)8etos e6tiende la modularidad de
utilizar %aria)les $ escri)ir 9unciones 1or relacionarlas entre ellas< al ser agru1adas 8untas.
Es 1osi)le :acer una analoga entre los o)8etos del so9t?are $ los artefactos reales. Para o)tener una %isin
del mundo como 1eAueGos 1rogramas orientados a o)8etos< se 1resenta la siguiente lista
;o(-re Can(ana
$a(+os color, peso
5!todos crecer(), caer(), pudrir()
;o(-re Cariposa
$a(+os especie, 'enero
5!todos a'itar1las(), aterri(ar()
;o(-re >adio
$a(+os !recuencia, ,olumen
5!todos encender(), tono(), establecerMolumen()
;o(-re 1uto
$a(+os marca, modelo, color, a+o
5!todos acelerar(), !renar(), 'irar()
-l e6tender el e8em1lo de la Can(ana< se re%elan 1osi)ilidades mas interesantes de la 1rogramacin
orientada a o)8etos. Para :acer un 1rograma Aue simule la %ida de una manzana< el mtodo crecer()
1osi)lemente reci)a %alores de entrada de tem1eratura $ :umedad. El mtodo crecer() 1uede incrementar
el cam1o peso del o)8eto< )as,ndose en esos %alores de entrada. El mtodo caer() se encontrara
re%isando constantemente el cam1o peso< $ cuando este 1ase cierto lmite< la manzana caer, a la tierra. El
mtodo pudrir() comenzar, a 9uncionar una %ez Aue la manzana llegue al suelo. Este mtodo 1odra :acer
decrecer el cam1o peso $ cam)iar el color de la manzana.
!omo Aueda dic:o en la introduccin< los o)8etos son creados con las clases $ las clases son un con8unto de
mtodos $ cam1os. ;os o)8etos de una clase de)en tener un nom)re 1ro1io< al igual Aue una %aria)le. Por
e8em1lo< dos o)8etos llamados !ui $ 'olden 1ertenecen a la clase Can(ana.
Ignacio Buioli | Jaime Prez Marn 2..
;o(-re !ui
$a(+os colorF red
pesoF :#2
;o(-re 'olden
$a(+os colorF ;elloN
pesoF D#.
'os 1o1ulares estilos de re1resentacin de clases son las ta)las $ un diagrama circular ins1irado en la
)iologa de una clula. !ada estilo de re1resentacin muestra el nom)re de la clase< los cam1os $ los
mtodos. Es mu$ 3til de9inir las caractersticas de cada clase en alguno de estos diagramas antes de
comenzar con el cdigo en s.
Ban3ana fu'i golden
color
peso
red
G.5
yello"
H.I
crecer!
caer!
pudrir!
crecer!
caer!
pudrir!
crecer!
caer!
pudrir!
clase Manzana o)8eto 9u8i o)8eto golden
El diagrama circular adAuiere m,s )ien un conce1to de encapsulaci*n< la idea de Aue los cam1os de un
o)8eto no de)eran ser accedidos desde a9uera. ;os mtodos de un o)8eto act3an como un buffer entre el
cdigo 9uera de la clase $ los datos contenidos.
clase Manzana o)8eto 9u8i o)8eto golden
;os cam1os $ mtodos de un o)8etos son accesi)les a tra%s del o1erador punto< un per@odo. Para o)tener el
calor de color del o)8eto !ui< la sinta6is corres1ondiente ser, !ui#color. Para e8ecutar el mtodo
crecer() dentro de o)8eto 'olden< :a)r, Aue escri)ir 'olden#crecer().
-&sando $lases * 3-jetos
'e9inir una clase es crear tu 1ro1io ti1o de datos. Pero no como los ti1os de datos 1rimiti%os tales como int<
!loat o boolean< sino m,s )ien como los ti1o $trin'< ABma'e $ AHont< 1or dic:a razn siem1re se
escri)en con letra ca1ital @1rimera letra en ma$3sculasC. !uando se crea una clase< lo 1rimero es 1ensar
cuidadosamente el cdigo Aue lle%ar, dentro< $ no 1rogramar a la ligera. ;o com3n es :acer 1rimero una lista
de %aria)les reAueridas @las cuales 1asaran a llamarse cam1osC< $ determinar Aue ti1o de datos ser,n.
En el 1rimero de los e8em1los Aue se %er,n a continuacin< un circulo es 1osicionado en la 1antalla< 1ero el
cdigo es escrito de una 9orma distinta a como se %ena %iendo @es escrito en un ,m)ito de 1aradigma
orientado a o)8etosC. Es necesario dos cam1os Aue almacenen la 1osicin del crculo< $ un tercer cam1o Aue
Ignacio Buioli | Jaime Prez Marn 2.*
controle su di,metro.
!loat x !oordenadaO6 del crculo
!loat ; !oordenadaO$ del crculo
!loat diametro 'i,metro del crculo
El nom)re de la clase de)e ser cuidadosamente considerado. Este 1uede ser un nom)re sim)lico de lo Aue
se est di)u8ando en 1antalla< o un nom)re de las con%enciones de %aria)les. =in em)argo< siem1re< de)en
ser escritos con la letra ca1ital. Esto a$uda al 1rograma a se1arar clases como $trin' o ABma'e de los
ti1os 1rimiti%os como int o boolean. El nom)re de la clase 1ara el siguiente e8em1lo ser, Aunto< 1uesto
Aue *irculo no :u)iese sido 1ertinente al caso @$a Aue se esta di)u8ando un 1untoC.
En 1rinci1io< se dis1ondr, del 1rograma escrito como 1rogramacin estructurada< $a Aue siem1re es
recomenda)le escri)irlo as $ luego con%ertirlo en un o)8eto
!loat x < 00;
!loat ; < 3/;
!loat diametro < 0/;
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
S
,oid draN() R
bac)'round(/);
ellipse(x, ;, diametro, diametro);
S
Para :acer a este cdigo m,s 3til $ genrico< es necesario Aue la eli1se tenga su 1ro1ia clase. 'e esta 9orma<
antes del )loAue setup()1 la 1rimer lnea de cdigo crea al o)8eto pt de la clase Aunto. El o)8eto pt es
construido dentro del setup(). ;uego< usando el o1erador 1unto< se le asignan los %alores a la eli1se dentro
del draN().
Aunto pt; //Declara el obeto

,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
pt < neN Aunto(); //*onstru;e el obeto
pt#x < 00; //1si'na 00 al campo x
pt#; < 3/; //1si'na 3/ al campo ;
pt#diametro < 0/; //1si'na 0/ al campo diametro
S

,oid draN() R
bac)'round(/);
ellipse(pt#x, pt#;, pt#diametro, pt#diametro);
S

class Aunto R
!loat x, ;; //*oordenada x e ;
!loat diametro; //Di"metro del crculo
S
Ignacio Buioli | Jaime Prez Marn 2.2
-:ora $a est, lista la clase Aunto. -3n as< toda%a no est, siendo im1lementada de manera 3til. En el
siguiente e8em1lo< se le agregar, un mtodo a la clase Aunto @es aAu donde la 1rogramacin orientada a
o)8etos comienza a tomar %enta8aC. El mtodo mostrar() es aGadido a la clase Aunto. Para aGadir
mtodos< necesario seguir la siguiente sinta6is
,oid displa;() 'i)u8a el crculo 1ara mostrar en la %entana
En la 3ltima lnea del cdigo de la clase< se coloca el mtodo mostrar()< el cual 9unciona como el o1erador
1unto anteriormente %isto. 'entro del mtodo< se coloca la 9uncin Aue di)u8a el crculo. Es e%idente notar Aue
a:ora los 1ar,metros se escri)en sin el o1erador 1unto< esto es 1orAue la 9uncin ellipse() se encuentra
dentro de la clase Aunto< 1or lo Aue no es necesario :acer una concatenacin.

,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
pt < neN Aunto(); //*onstru;e el obeto
pt#x < 00;
pt#; < 3/;
pt#diametro < 0/;
S

,oid draN() R
bac)'round(/);
pt#mostrar();
S

class AuntoR
!loat x, ;, diametro;
,oid mostrar() R
S
S
El siguiente e8em1lo introduce un 1aso en la 1rogramacin de o)8etos llamado constructor. Fn constructor es
un )loAue de cdigo Aue es acti%ado cuando el o)8eto es creado. El constructor siem1re lle%a el mismo
nom)re Aue la clase< $ es generalmente utilizado 1ara asignar %alores a los cam1os del o)8eto @si no e6iste el
constructor< el %alor de los cam1os ser, ceroC. El constructor es otro ti1o de mtodo< solamente Aue no es
1recedido 1or el ,oid< 1uesto Aue no de)e de%ol%er ninguna clase de dato. !uando el o)8eto pt es creado<
los 1ar,metros 33< /. $ 3. son asignados a las %aria)les xpos< ;pos $ dia< res1ecti%amente con el
constructor. !on dic:o )loAue< los %alores son asignados a los cam1os del o)8eto< x< ; $ diametro. Para
Aue los cam1os sean accesi)les con cada mtodo del o)8eto< ellos de)en ser declarados 9uera del
constructor.
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
pt < neN Aunto(00, 3/, 0/); //*onstru;e el obeto
S
,oid draN() R
bac)'round(/);
pt#mostrar();
S

class Aunto R
!loat x, ;, diametro;
Aunto(!loat xpos, !loat ;pos, !loat dia) R
x < xpos; //1si'na 00 a x
; < ;pos; //1si'na 3/ a ;
diametro < dia; //1si'na 0/ a diametro
S
,oid mostrar() R
S
S

-s mismo< la clase Aunto 1uede ser e6tendida 1or agregar m,s mtodos Aue me8oren su utilizacin en la
escena. El siguiente e8em1lo e6tiende la 9uncionalidad de la clase 1or aGadir mo%imiento constante de arri)a a
a)a8o. Para esto es necesario determinar dos nue%os cam1os. Fn cam1o Aue regule la %elocidad $ otro la
direccin del o)8eto. ;os llamaremos ,el $ dir< res1ecti%amente< 1ara Aue sean cortos $ 9igurati%os. 'e esta
9orma< ,el ser, de ti1o !loat 1ara tener un ma$or rango de %elocidad< $ dir un int $a Aue solo
necesitamos dos %alores.
!loat ,el 'istancia Aue se mue%e cada cuadro
int dir 'ireccin del mo%imiento @* es a)a8o< O* es arri)aC
Para crear el mo%imiento deseado< se necesita actualizar la 1osicin del o)8eto en cada cuadro. ;a direccin
tam)in tiene Aue cam)iar al llegar a los )ordes de la %entana de re1resentacin. -dem,s< :a$ Aue
considerar el ti1o de %alor a regresar. !omo en este caso no se necesita regresar ning3n %alor< se ante1one la
1ala)ra cla%e ,oid.
,oid mo,er() -ctualiza la 1osicin del crculo
El cdigo dentro de los mtodos mo,er() $ mostrar() 1odra incluirse en tan solo un mtodo. Pero< 1or
cuestiones de claridad< en estos e8em1los se 1re9iere se1ararlos.
class Aunto R
!loat x, ;; //*oordenada5x, coordenada5;
!loat diametro; //Di"metro del crculo
!loat ,el; //Distancia Gue se mue,e cada cuadro
int dir < 6; //Direccin del mo,imiento (6 es abao, 56 es arriba)

//*onstructor
Aunto(!loat xpos, !loat ;pos, !loat dia, !loat sp) R
x < xpos;
; < ;pos;
diametro < dia;
,el < sp;
S

,oid mo,er() R
; 4< (,el * dir);
i! ((; 8 (hei'ht 5 diametro/2)) TT (; 9 diametro/2)) R
dir *< 56;
S
S

,oid mostrar() R
S
S
Para guardar es1acio $ mantenerse en9ocado en el 1rograma en s< los e8em1los Aue se muestran en el
1resente manual no %uel%en a mostrar el cdigo de la clase Aunto< $ sim1lemente 1one un comentario como
//Bnsertar clase Aunto. !uando usted %ea un comentario como ese< co1ie $ 1egue el cdigo de la
clase corres1ondiente en lugar del comentario. El siguiente e8em1lo muestra el resultado de utilizar una clase
con un o)8eto en mo%imiento
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
pt < neN Aunto(00, 3/, 0/, 6#3); //*onstru;e el obeto
S
,oid draN() R
!ill(/, 63);
!ill(233);
pt#mo,er();
pt#mostrar();
S
//Bnsertar clase Aunto
!omo con las 9unciones< una clase )ien escrita 1one el 9oco en el resultado $ no en los detalles de e8ecucin.
;os o)8etos de)en construirse con el 1ro1sito de ser reutilizados. ;uego de Aue un com1le8o 1rograma es
escrito $ codi9icado como un o)8eto< 1uede ser utilizado 1osteriormente como :erramienta 1ara construir un
nue%o 1rograma. Por e8em1lo< las 9unciones $ las clases Aue %ienen incluidas en Processing< son utilizadas
en cualAuier 1rograma de autor como sim1les :erramientas.
!omo con los ti1os de %aria)les< los o)8etos adicionales son aGadidos al 1rograma 1or declarar m,s nom)res.
En el siguiente e8em1lo se utilizan tres o)8etos< nom)rados pt61 pt21 pt0< $ cada uno tiene sus 1ro1ios
mtodos.
Aunto pt6, pt2, pt0; //Declara el obeto
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
pt6 < neN Aunto(2/, 3/, ./, /#3); //*onstru;e pt6
pt2 < neN Aunto(3/, 3/, 6/, 2#/); //*onstru;e pt2
pt0 < neN Aunto(D/, 3/, 0/, 6#3); //*onstru;e pt0
S
,oid draN() R
!ill(/, 63);
!ill(233);
pt6#mo,er();
pt2#mo,er();
pt0#mo,er();
pt6#mostrar();
pt2#mostrar ();
pt0#mostrar ();
S
Ignacio Buioli | Jaime Prez Marn 2./
0esulta mu$ com1le8o resumir los conce1tos ),sicos $ la correcta sinta6is de la 1rogramacin orientada a
o)8etos en tan solo un e8em1lo. Por lo tanto< se aGade una nue%a clase llamada Hue$o< 1ara com1ararla con
la clase Punto. ;a clase Hue$o se crea con la necesidad de 1oder mostrar una 9igura con 9orma de :ue%o<
Aue se tam)alea de izAuierda a derec:a. ;a construccin inicia con la declaracin de los cam1os $ los
mtodos necesarios 1ara la creacin de la clase
!loat x !oordenadaO6 desde la mitad del :ue%o
!loat ; !oordenadaO$ desde a)a8o del :ue%o
!loat ladeo `ngulo de com1ensacin de izAuierda a derec:a
!loat an'ulo =e utiliza 1ara de9inir el ladeo
!loat escala -lto del :ue%o
,oid tambalear() Mue%e el :ue%o de un lado al otro
,oid mostrar() 'i)u8a el :ue%o
;uego de Aue los reAuerimientos de la clase sean esta)lecidos< se distri)u$en de la misma 9orma Aue en la
clase Aunto. ;a clase \ue,o inicia mu$ sencillamente< con las coordenadas x e ;< $ el mtodo mostrar().
;a clase es aGadida a los )loAues setup() $ draN() 1ara com1ro)ar Aue 9unciona. ;a 9uncin scale() es
aGadida a mostrar() 1ara decrecer el tamaGo del o)8eto.
!uando se com1rue)e Aue la 1rimer 1arte del 1rograma est, 9uncionando a la 1er9eccin< el mtodo
rotate() $ el cam1o ladeo son aGadidos 1ara cam)iar el ,ngulo del o)8eto. #inalmente< el cdigo es
escrito 1ara Aue el o)8eto se mue%a. El cam1o an'ulo se utiliza 1ara calcular la inclinacin. 'e esta 9orma< el
mtodo tambalear() es aGadido 1ara incrementar el ,ngulo $ calcular< de este modo< el ladeo mismo. ;a
9uncin cos() se agrega 1ara acelerar o 9renar el tam)aleo de lado a lado. ;uego de muc:as 1rue)as< la
clase \ue,o 9inal se muestra de la siguiente manera
class \ue,o R
!loat ladeo; //dn'ulo de compensacin de i(Guierda a derecha
!loat an'ulo; //$e utili(a para de!inir el ladeo
!loat escala; //1lto del hue,o

\ue,o(int xpos, int ;pos, !loat l, !loat e) R //*onstructor
x < xpos;
; < ;pos;
ladeo < l;
escala < e / 6//#/;
S

,oid tambalear() R
ladeo < cos(an'ulo) / D;
an'ulo 4< /#6;
S
,oid mostrar() R
no$tro)e();
!ill(233);
pushCatrix();
translate(x, ;);
rotate(ladeo);
scale(escala);
be'in$hape();
,ertex(/, 56//);
be(ierMertex(23, 56//, ./, 5:3, ./, 5./);
be(ierMertex(./, 563, 23, /, /, /);
be(ierMertex(523, /, 5./, 563, 5./, 5./);
Ignacio Buioli | Jaime Prez Marn 2."
be(ierMertex(5./, 5:3, 523, 56//, /, 56//);
end$hape();
popCatrix();
S
S
;a clase \ue,o se inclu$e en el 1rograma de la misma 9orma Aue la clase Aunto. Fn o)8eto de ti1o \ue,o<
llamado humpt;< es creado 9uera del setup() $ del draN(). 'entro del setup()< el o)8eto humpt; es
construido. 'entro del draN()< las 9unciones tambalear() $ mostrar() son e8ecutadas< causando la
actualizacin del o)8eto.
\ue,o humpt;; //Declara el obeto
,oid setup() R
si(e(6//, 6//);
smooth();
//Malores de entradaF coordenada5x, coordenada5;, ladeo
//; alto
humpt; < neN \ue,o(3/, 6//, AB/02, D/);
S
,oid draN() R
bac)'round(/);
humpt;#tambalear();
humpt;#mostrar();
S
//Bnsertar clase \ue,o
-/rra* de 3-jetos
5ra)a8ar con arra$ de o)8etos es similar a tra)a8ar con arra$ de otro ti1o de datos. !omo todos los arra$< un
arra$ de o)8etos se distingue 1or lle%ar corc:etes à. !omo cada elemento del arra$ es un o)8eto< cada
elemento del arra$ de)e ser declarado antes de ser accedido. ;os 1asos ),sicos 1ara tra)a8ar con un arra$
de o)8etos son los siguientes
4+ Declarar el array
5+ 0rear el array
6+ 0rear cada ob'eto en el array
Estos 1asos son trasladados en el siguiente cdigo
int numAuntos < :;
//Declarar ; crear el 1rra;
Auntoà puntos < neN Aunto`numAuntosa;
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
!or (int i < /; i 9 puntos#len'th; i44) R
!loat x < 6/ 4 i*6:;
!loat rate < /#3 4 i*/#/3;
//*rea cada obeto
puntosìa < neN Aunto(x, 3/, 6:, rate);
S
S
,oid draN() R
!ill(/, 62);
!ill(233);
Ignacio Buioli | Jaime Prez Marn 2.+
!or (int i < /; i 9 puntos#len'th; i44) R
puntosìa#mo,er(); //Cue,e cada obeto
puntosìa#mostrar(); //Cuestra cada obeto
S
S
;a clase 1nillo se 1resenta como otro e8em1lo de arra$ de o)8etos. Esta clase de9ine un crculo Aue
a1arece cuando se :ace clicH con el mouse< $ crece :asta un anc:o de 4.. 16eles< luego de esto de8a de
mostrarse. !uando esta clase es aGadida< un nue%o anillo a1arece cada %ez Aue el )otn del mouse es
o1rimido. Estos son los cam1os $ los mtodos 1ara :acer esta clase 1osi)le
!loat x !oordenadaO6 del anillo
!loat ; !oordenadaO$ del anillo
!loat diametro 'i,metro del anillo
boolean on Muestra o no el anillo
,oid crecer() Incrementa el di,metro si la %aria)le on es un true
,oid mostrar() 'i)u8a el anillo
;a clase 1nillo se 1rograma como una sim1le clase. Esta clase no tiene constructor 1uesto Aue sus %alores
no se esta)lecen :asta Aue se e8ecuta el mtodo inicio() es llamado desde el 1rograma.
class 1nilloR
!loat diametro; //Di"metro del anillo
boolean on < !alse; //Cuestra o no el anillo
,oid inicio(!loat xpos, !loat ;pos) R
x < xpos;
; < ;pos;
on < true;
diametro < 6;
S

,oid crecer() R
i! (on << true) R
diametro 4< /#3;
i! (diametro 8 .//) R
on < !alse;
S
S
S
,oid mostrar() R
i! (on << true) R
noHill();
stro)eIei'ht(.);
stro)e(633, 630);
S
S
S
En este 1rograma< el arra$ anillosà es creado 1ara sostener cincuenta o)8etos de clase 1nillo. El
es1acio en memoria del arra$ anillosà $ de los o)8etos de clase 1nillo de)e ser siem1re almacenado
en el )loAue setup(). !uando el )otn del mouse es o1rimido 1or 1rimera %ez< las %aria)les de 1osicin del
o)8eto 1nillo se esta)lecen como la actual 1osicin del cursor.
;a %aria)le de control anillo1ctual< es incrementada de a uno 1or %ez< as la 1r6ima %ez los )loAues
draN()< crecer() $ mostrar() ser,n e8ecutados 1or el 1rimer elemento de 1nillo. !ada %ez Aue el
)otn del mouse es 1resionado< un nue%o anillo se muestra en 1antalla. !uando el lmite de elementos es
alcanzado< el 1rograma salta al inicio de los mismos $ asignas las 1rimeras 1osiciones.
1nilloà anillos; //Declara el arra;
int num1nillos < 3/;
int anillo1ctual < /;
,oid setup() R
si(e(6//, 6//);
smooth();
anillos < neN 1nillo`num1nillosa; //*rea el arra;
!or (int i < /; i 9 num1nillos; i44) R
anillosìa < neN 1nillo(); //*rea cada obeto
S
S
,oid draN() R
bac)'round(/);
!or (int i < /; i 9 num1nillos; i44) R
anillosìa#crecer();
anillosìa#mostrar();
S
S
//*lic) para crear un nue,o anillo
anillosànillo1ctuala#inicio(mouseZ, mouseV);
anillo1ctual44;
i! (anillo1ctual 8< num1nillos) R
anillo1ctual < /;
S
S
//Bnsertar clase 1nillo
'e igual manera Aue los cdigos de 1rogramacin modular< estos 1ueden usarse de muc:as maneras $
com)inarse de in9initas 9ormas< de1endiendo las necesidades de cada 1ro$ecto. Esta es una de las cosas
m,s e6citantes de 1rogramar con o)8etos.
-5.lti+les /rc7ivos
;os 1rogramas escritos :asta el momento se escri)an como un solo gran con8unto de cdigo. Na Aue esta
clase de 1rogramas 1ueden con%ertirse en largos 1aAuetes de cdigo< un sim1le arc:i%o se con%ierte en un
gran 1ro)lema. !uando un 1rograma se con%ierte en una con%ergencia de cientos o miles de lneas< es
con%eniente Aue e6ista una 1osi)ilidad de se1arar sus 1artes en mdulos. Processing 1ermite mane8ar gran
cantidad de arc:i%os< $ cada sHetc: 1uede estar com1uesto 1or gran cantidad de sHetc:s< Aue son mostrados
en 9orma de 1estaGas.
Ignacio Buioli | Jaime Prez Marn 2.&
Ignacio Buioli | Jaime Prez Marn 2*.
En la esAuina su1erior derec:a< se encuentra un )otn con el icono de una 9lec:a Aue a1unta< 8ustamente<
:acia la derec:a. =e trata del un su)Omen3 destinado a el mane8o de 1estaGas en Processing. -l o1rimir dic:o
)otn< se des1legar, una lengMeta con unas 1ocas o1ciones. ;a o1cin Ne" ,ab @2ue%a PestaGaC nos
1ermite< 8ustamente< crear una nue%a 1estaGa 1ara 1oder tra)a8ar con cdigo modular. -l o1rimir la misma< se
nos dar, la o1cin de 1onerle un nom)re. =uele ser recomenda)le Aue el nom)re tenga un sentido al
contenido del cdigo $ no sea un sim1le acto azaroso. 'e esta 9orma< si el cdigo contiene la clase Punto< es
con%eniente Aue la 1estaGa se llame KPuntoL. - continuacin se le da al )otn ?J< $ acto seguido tendremos
la nue%a 1estaGa lista 1ara comenzar a aGadirle el cdigo Aue necesitemos. ;a 1estaGa se guardar, como un
sHetc: a 1arte dentro de la car1eta de 1roduccin.
-dem,s< el men3 de las 1estaGas 1ermite otras o1eraciones mu$ 3tiles. ;a 1osi)ilidad de 0enom)rar una
1estaGa con la o1cin <enameR o de Eliminarla con la o1cin Delete. -gregado a esto< 1ara cuando se tiene
una gran cantidad de 1estaGas< se encuentra la o1cin Pre$ious ,ab @PestaGa -nteriorC $ Ne(t ,ab @PestaGa
=iguienteC< las cuales nos 1ueden ser mu$ 3tilesR o directamente nos a1arece una lista con el nom)re de las
1estaGas Aue estamos tra)a8ando< )asta con solo o1rimir en la deseada.
Ignacio Buioli | Jaime Prez Marn 2**
&nidad 80
#i-ujos' ,or(as $in!ticas
;as tcnicas de animacin e61erimental de di)u8o< 1intura< $ calado en cine< son todos 1redecesores de
so9t?are )asados en di)u8os cinticos. ;a inmediatez $ la 9rescura de los cortos 9lmicos< tales como el Hen
Hop de 2orman Mc;aren @*&42C< .ree <adicals de ;en ;$e @*&/+C< $ ,he Garden of %arthly Delights de =tan
BraH:age @*&4*C se de)e a las e6traordinarias cualidades del gesto 9sico< Aue el so9t?are< muc:o des1us<
:izo m,s accesi)le.
;as :erramientas de so9t?are 1ara animacin am1lan< a3n m,s< las tcnicas de cine< 1ermitiendo al artista
editar $ animar los elementos de 9orma continua des1us de Aue :an sido ela)orado. En *&&*< =cott =ni))e
=Hetc: dio mo%imiento con so9t?are a las tcnicas e61loradas 1or Mc;aren< ;$e< $ BraH:age. ;a a1licacin
traduce el mo%imiento de la mano< al de los elementos %isuales en la 1antalla. !ada gesto crea una 9orma Aue
se mue%e en un )ucle de un segundo. ;as animaciones resultantes 1ueden ser ca1as 1ara crear una o)ra de
reminiscencias com1le8idad es1acial $ tem1oral< del estilo de 7sHar #isc:inger. =ni))e< am1liando este
conce1to con el tel9ono de mo%imiento @*&&/C< 1ermiti a la gente tra)a8ar simult,neamente en un es1acio
de di)u8o com1artido a tra%s de Internet.
-Derra(ientas /ctivas
Muc:as :erramientas creadas con so9t?are 1ueden cam)iar su 9orma mientras se encuentran en 1roceso de
di)u8o. Por com1arar los %alores de mouseZ $ mouseV con sus %alores 1re%ios< 1odemos determinar la
direccin $ la %elocidad con la Aue se :acen los trazados. En el siguiente e8em1lo< la di9erencia entre la actual
$ la anterior 1osicin del cursor< determina el tamaGo de una eli1se Aue es di)u8ada en 1antalla.
,oid setup() R
si(e(6//, 6//);
smooth();
S
,oid draN() R
!loat s < dist(mouseZ, mouseV, pmouseZ, pmouseV) 4 6;
no$tro)e();
!ill(/, 6/2);
ellipse(mouseZ, mouseV, s, s);
stro)e(233);
S
;os instrumentos de di)u8os con so9t?are 1ueden< adem,s< seguir un ritmo o ser ar)itrario 1or reglas
inde1endientes del di)u8o manual. Esta es una 9orma de controlar el di)u8o< m,s all, de las caractersticas
inde1endientes de cada uno. En los e8em1los Aue siguen< el di)u8o solo o)edece el 1unto de origen $ de
cierre dado 1or autor< lo Aue ocurre en medio es incontrola)le 1or este 3ltimo.
int an'le < /;
,oid setup() R
si(e(6//, 6//);
smooth();
no$tro)e();
!ill(/, 6/2);
S
,oid draN() R
//Dibua solo cuando el mouse es presionado
an'le 4< 6/;
!loat ,al < cos(radians(an'le)) * :#/;
Ignacio Buioli | Jaime Prez Marn 2*2
!or (int a < /; a 9 0:/; a 4< K3) R
!loat xo!! < cos(radians(a)) * ,al;
!loat ;o!! < sin(radians(a)) * ,al;
!ill(/);
ellipse(mouseZ 4 xo!!, mouseV 4 ;o!!, ,al/2,
,al/2);
S
!ill(233);
ellipse(mouseZ, mouseV, 2, 2);
S
S
-spada dia'onal;
,oid setup() R
si(e(6//, 6//);
dia'onal < neN -spada(0/, D/);
S
,oid draN() R
dia'onal#crecer();
S
,oid mouseCo,ed() R
dia'onal#seed(mouseZ, mouseV);
S
class -spada R
!loat x, ;;
-spada(int xpos, int ;pos) R
x < xpos;
; < ;pos;
S
,oid seed(int xpos, int ;pos) R
x < xpos;
; < ;pos;
S
,oid crecer() R
x 4< /#3;
; 5< 6#/;
point(x, ;);
S
S
-#i-ujos /ctivos
;os elementos de di)u8o indi%iduales< con su corres1ondiente cuidado< 1ueden 1roducir di)u8os con o sin
%alores de entrada 1roducidos 1or un usuario. Estos di)u8os acti%os 1odran traducirse como un gato o un
ma1ac:e Aue cae en un )ote de 1intura< $ de8a sus :uellas 1or todas 1artes< sin Aue nosotros 1odamos
controlarlo. !reado 1or una serie de acciones 1redeterminadas< el di)u8o acti%o 1uede ser 1arcialmente o
totalmente autnomo.
!loat x6, ;6, x2, ;2;
,oid setup() R
si(e(6//, 6//);
smooth();
x6 < Nidth / .#/;
;6 < x6;
x2 < Nidth 5 x6;
;2 < x2;
S
,oid draN() R
bac)'round(2/.);
x6 4< random(5/#3, /#3);
;6 4< random(5/#3, /#3);
x2 4< random(5/#3, /#3);
;2 4< random(5/#3, /#3);
line(x6, ;6, x2, ;2);
S
=i %arias de estas lneas se di)u8an a la %ez< el di)u8o se degrada con el tiem1o< $a Aue cada lnea sigue a
%agar de su 1osicin original. En el siguiente e8em1lo< el cdigo anterior 9ue modi9icado 1ara crear la clase
Cue,e@inea. Duinientos de estos o)8etos Cue,e@inea llenan la %entana de re1resentacin. !uando las
lneas se di)u8an en 1rimera instancia< %i)ran< 1ero mantienen su 9orma. !on el tiem1o< la imagen se degrada
en un caos< $a Aue cada lnea %aga tra%s de la su1er9icie de la %entana.
int num@ineas < 3//;
Cue,e@ineaà lines < neN Cue,e@inea`num@ineasa;
int linea1ctual < /;
,oid setup() R
si(e(6//, 6//);
smooth();
!rame>ate(0/);
!or (int i < /; i 9 num@ineas; i44) R
linesìa < neN Cue,e@inea();
S
S
,oid draN() R
bac)'round(2/.);
!or (int i < /; i 9 linea1ctual; i44) R
linesìa#mostrar();
S
S
,oid mouseDra''ed() R
lines`linea1ctuala#setAosicion(mouseZ, mouseV,
pmouseZ, pmouseV);
i! (linea1ctual 9 num@ineas 5 6) R
linea1ctual44;
S
S
class Cue,e@inea R
!loat x6, ;6, x2, ;2;
,oid setAosicion(int x, int ;, int px, int p;) R
x6 < x;
;6 < ;;
x2 < px;
;2 < p;;
S
,oid mostrar() R
x6 4< random(5/#6, /#6);
;6 4< random(5/#6, /#6);
x2 4< random(5/#6, /#6);
;2 4< random(5/#6, /#6);
line(x6, ;6, x2, ;2);
S
S
El siguiente e8em1lo enseGa una sim1le :erramienta de animacin Aue muestra un ciclo continuo de *2
im,genes. !ada imagen es mostrada 1or *.. milisegundos 1ara crear la animacin. Mientras cada imagen es
creada< es 1osi)le di)u8ar en la misma 1or 1resionar $ mo%er el mouse.
int cuadro1ctual < /;
ABma'eà cuadros < neN ABma'e`62a;
int tiempoHinal < /;
,oid setup() R
si(e(6//, 6//);
stro)eIei'ht(.);
smooth();
bac)'round(2/.);
!or (int i < /; i 9 cuadros#len'th; i44) R
cuadrosìa < 'et(); //*rea un cuadro en blanco
S
S
,oid draN() R
int tiempo1ctual < millis();
i! (tiempo1ctual 8 tiempoHinal46//) R
si'uiente*uadro();
tiempoHinal < tiempo1ctual;
S
line(pmouseZ, pmouseV, mouseZ, mouseV);
S
S
,oid si'uiente*uadro() R
//?btiene la ,entana de representacin
cuadros`cuadro1ctuala < 'et();
//Bncrementa al si'uiente cuadro
cuadro1ctual44;
i! ( cuadro1ctual 8< cuadros#len'th) R
cuadro1ctual < /;
S
ima'e(cuadros`cuadro1ctuala, /, /);
S
Ignacio Buioli | Jaime Prez Marn 2*/
&nidad 81
E%tensin' 5odos
!omo 1arte de una im1lementacin m,s ele%ada del so9t?are< se comienzan a incluir los Modos ]a 1artir de
Processing *./^. Esta 9uncionalidad alterna las 9ormas de 1rogramar o de mostrar el resultado de los
1rogramas e8ecut,ndose. 'esde la inter9az< se 1ro%ee de un sim1le )otn en la esAuina su1erior derec:a
-l o1rimirlo se nos des1legar, una 1eAueGa lengMeta con o1ciones 1ara alternar entre los distintos modos
@1ueden llegar a e6istir m,s modos en las nue%as %ersiones Aue en las antiguas< siem1re es con%eniente
consultar la re9erenciaC. Por de9ecto< el )otn $< 1or lo tanto< el modo< se encuentra en KKa$aL @llamado
K&tandardL en %ersiones 1re%ias a la 2..C.
5am)in e6iste la 1osi)ilidad de aGadir modos< de la misma 9orma Aue uno aGade li)reras @li)rar$C o
:erramientas @toolC. Para esto solo :a$ Aue o1rimir en el )otn $< a continuacin< la o1cin K-dd Mode...L. El
1rograma se encargar, de )uscar los modos dis1oni)les 1ara su sencilla descarga. Esta 3ltima o1cin solo
es 1osi)le a 1artir de la %ersin 2...
-Fava
=e trata del modo de tra)a8o Aue se encuentra 1or de9ecto en nuestro 1rograma. -l iniciar el so9t?are 1or
1rimera %ez< $ si este no tu%o ning3n incon%eniente< de)era encontrarse en el modo K=tandardL. 'ic:o modo<
tra)a8a con el motor de Ja%a 1ara la 1reO%isualizacin $ la e61ortacin del sHetc:. Esto Auiere decir Aue
e61ortar, el sHetc: en un Ja%a -11let. Est, 1ensado 1ara la creacin de a1licaciones de escritorio.
=iem1re se recomienda Aue se tra)a8e en este modo< m,s all, de Aue luego Auiera 1asarse a otro. Esto se
de)e a la 9acilidad $ la 1recisin @1uesto Processing es 1rinci1almente 1ensado 1ara Ja%aC. ;uego de esto<
ser, cuestin de 1asar de modo $ ada1tar lo Aue no 9uncione de manera 1tima. En este modo no se 1ueden
e61ortar los -11lets 1ara ?e)< solo 1ara a1licaciones de escritorio. En %ersiones anteriores a la 2..< el modo
Ja%a era conocido como Standard.
-/ndroid
El modo de tra)a8o K-ndroidL consiste en< como )ien indica su nom)re< crear a1licaciones $ 1rogramas 1ara
dis1ositi%os -ndroid @=istema 71erati%o 1ara m%iles distri)uido 1or EoogleC. 2o o)stante< 1ara tra)a8ar en
-ndroid es condicin Aue se encuentre instalado en el ordenador el ='X de -ndroid. Este se encuentra
dis1oni)le de manera gratuita en :tt1BBde%elo1er.android.comBsdH $ admite sistemas ;inu6< Macintos: $
Iindo?s. =in em)argo< la 9orma de tra)a8o no es e6actamente la misma< 1or lo Aue 1odra :a)er
incon%enientes o incom1ati)ilidades en las a1licaciones. Fn e8em1lo com3n es Aue algunas galera no
9uncionen correctamente o sim1lemente se desesta)ilicen. 'ado algunos cam)ios realizados 1or Eoogle< las
%ersiones *./.6 de Processing 1remiten em1lear el modo -ndroid. =e recomienda descargar %ersiones a 1artir
de la 2.. si se desea desarrollar 1ara estos sistemas.
Es un modo 1ensado ),sicamente 1ara 1rogramadores en sistemas m%iles. =e de)e consultar< adem,s< la
%ersin de Processing en relacin al ='X $ en relacin a la 3ltima %ersin de -ndroid @es 1osi)le Aue
Processing no so1orte las m,s modernas< sin em)argo< estas no se distri)u$en al 13)lico en generalC. -nte
cualAuier incon%eniente< consultar la re9erencia en el sitio ?e) :tt1BB?iHi.1rocessing.orgB?B-ndroid.
-Favascri+t
!on la creacin de la li)rera 1ara Ja%ascri1t llamada Processing.8s< nace la 1osi)ilidad de traducir los sHetc:s
en o)8eto de !an%as @tag de J5M;/ Aue 1ermite di)u8ar con Ja%ascri1tC. - 1artir de la %ersin 2..< se inclu$e
Ignacio Buioli | Jaime Prez Marn 2*"
el modo Ja%ascri1t< el cual 1ermite 1rogramar en el entorno de Processing $ 1ro)ar el cdigo directamente en
el na%egador 1redeterminado @el cual de)e so1ortar !an%as< se recomienda la 3ltima %ersin de Mozilla
#ire9o6C. -dem,s de esto< al e61ortar el sHetc:< se crear, el -11let en su %ersin ?e) @Ja%ascri1tC< listo 1ara
usar en cualAuier sitio J5M;.
'e)e tenerse en cuenta Aue e6iste la 1osi)ilidad de Aue algunas 9unciones no se encuentren del todo
so1ortadas en el modo Ja%ascri1t< o 9uncionen de una manera distinta. -nte cualAuier incon%eniente<
consultar la re9erencia en el sitio ?e) :tt1BB1rocessing8s.orgBre9erenceB.
- 1esar de Aue las sinta6is de am)os entornos deri%an del lengua8e de !B!__< el tra)a8o 1or detr,s no es
1recisamente el mismo. Por lo tanto< :a$ Aue tener cierto cuidado a la :ora de 1rogramar< $a Aue algunas
estructuras 1ueden no com1ortarse como uno lo es1era. Mas all, de eso< e6isten ciertos comandos
es1eciales dedicados ntimamente al tra)a8o en el modo Ja%ascri1t. El comando gps< 1ermite la insercin de
directi%os Aue solo leer, el modo Ja%asctri1t @la li)rera Processing.8sC. Por ende< de)e ser incluido en un
comentario $ arri)a de todo del sHetc:.
/* gps directi,o<W,alorW; */
!a)e destacar Aue :a$ Aue tener cierto cuidado con la 9orma en la Aue se escri)en los directi%os. 2o es igual
el tratamiento de una lnea sim1le o multiOlnea
/* gps directi,oY6<W,alorW; directi,oY2<W,alorW; ### */
/* gps directi,oY6<W,alorW;
directi,oY2<W,alorW;
###
*/
=i )ien los directi%os no son muc:os< son 3tiles 1ara controlar el 9lu8o del sHetc: $ 1re1ararlo 1ara la ?e). Fna
de las utilidades Aue 1osee es la 1recarga de ciertos elementos< 1or e8em1lo< las im,genes. El directi%o
preload es utilizado 1ara cargar las im,genes mientras se carga el sHetc:. ;a im,genes de)en encontrarse
en la car1eta KdataL $ ser cargadas a tra%s de la 9uncin loadBma'e() o reGuestBma'e()
/* gps preload<WmiBma'en#p'W; */

,oid setup()R
si(e(2//,2//);
no@oop();
S
,oid draN()R
bac)'round(233);
ABma'e im < loadBma'e(WmiBma'en#p'W);
ima'e(im, 3/,3/, 6//,6//);
S
7tra utilidad es la 1recarga de las 9uentes de te6to< Aue 3ltimamente co)ran un im1ulso im1ortante en los
sitios ?e). Para esto se utiliza el directi%o !ont< el cual se utiliza con la 9uncin createHont(). ;a carga es
realizada a tra%s de la regla g!ont5!ace de !==.
/* gps !ont<W1rial#tt!W; */

,oid setup()R
si(e(2//,2//);
no@oop();
textHont(createHont(W1rialW,02));
S
,oid draN()R
Ignacio Buioli | Jaime Prez Marn 2*+
bac)'round(233);
$trin' t < WA#sW;
!loat tN < textIidth(t);
!ill(/);
text(t, (Nidth5tN)/2, (hei'ht402)/2);
S
Na Aue los sHetc: realizados en el modo Ja%ascri1t est,n destinados a la ?e)< se encuentran
1ermanentemente e8ecut,ndose. Muc:as %eces< en sHetc: com1le8os< esto 1uede ocu1ar muc:a ca1acidad
del ordenador @es1ecialmente en ordenadores m,s antiguosC. Por lo tanto< se encuentra dis1oni)le el directi%o
pause?n=lur. El mismo 1uede reci)ir solo dos %alores< true o !alse. =i el %alor es true< cuando el
usuario no tenga la %entana donde se encuentra el sHetc: 1uesta Ken 9ocoL< el mismo ser, K1ausadoL. =i es
!alse< este continuar, e8ecut,ndose @esta o1cin es 1or de9ectoC
/* gps pause?n=lur<WtrueW; */
Por otra 1arte< tam)in e6iste un directi%o Aue controla los e%entos del teclado. El directi%o
'lobalee;-,ents 1ermite controlar si las teclas ser,n :a)ilitadas 1ara el sHetc: constantemente< incluso
mientras na%ega 1or el mismo sitio< o si se 1re9iere solo :a)ilitarla 1ara cuando el usuario est, en 9oco.
0eci)e solo dos %alores< true o !alse. =i el %alor es true< los e%entos del teclado ser,n :a)ilitados 1or
mas Aue no se est en 9oco en el sHetc:. En cam)io< si es !alse< ser, des:a)ilitado @esta o1cin es 1or
de9ectoC
/* gps 'lobalee;-,ents<WtrueW; */
'e1endiendo de la con9iguracin 1or de9ecto del na%egador< los elementos de !an%as 1ueden o no tener
a1licada la condicin de sua%izado en los )ordes. Para eso se utiliza el directo crisp. Este directi%o 1ermite
o)ligar a Aue esto si se cum1la en la re1resentacin de line()< el trian'le()< $ el rect() 1rimiti%as de
di)u8o. Esto 1ermite lneas sua%es $ lim1ias. Por otro lado< es mu$ 1osi)le Aue su em1leo necesite un
incremento del tra)a8o del !PF. 0eci)e solo dos %alores< true o !alse
/* gps crisp<WtrueW; */
;os directi%os son 3tiles $ est,n en constante e61ansin. Para e%itar con9usiones $ %er algunos e8em1los de
su 9uncionamiento< consultar la re9erencia :tt1BB1rocessing8s.orgBre9erenceB.
-E%+eri(ental
El modo E61erimental nace con la 9usin de dos 1ro$ectos realizados 1or !ase$ 0eas $ Ben #r$. !onsiste en
una es1ecializacin del so9t?are orientado a 1rogramadores con una demanda m,s 1recisa en la 1roduccin
de 1rogramas. Entre otras cuestiones< 1osee una consola de errores< un de)ugger $ di%ersas :erramientas
Aue lo acom1aGan @como un ins1ector de %aria)lesC.
Este modo a3n se encuentra en 1roceso de 1rue)as $ 1uede ser mu$ inesta)le.
Ignacio Buioli | Jaime Prez Marn 2*&
&nidad 82
E%tensin' ,iguras 3#
si(e(), A2D, A0D, J1M12D, ?A-NX@,
rotateZ(), rotateV(), rotateb(), li'hts(), camera(), texture(), box(), sphere(),
be'in>aN(), end>aN()
El so9t?are Processing admite la 1osi)ilidad de crear a1licaciones $ 1rogramas Aue :agan su render en tres
dimensiones. 2o o)stante< no se recomienda Aue los 1rogramadores a)orden esta tem,tica de entrada< $
traten de generar soluciones en dos dimensiones. Por cuestiones Aue conlle%an a la creacin de un manual
sim1le< no a)ordaremos en la e61licacin de gr,9icos 3' @$a Aue la e6tensin sera de otro li)roC. -3n as<
%emos con%eniente e61licar la )ase 1ara sem)rar en el lector una semilla de curiosidad.
-,or(a 3#
;as 9ormas 3' son 1osicionadas en una %entana de re1resentacin con 3 coordenadas. En construcciones
2'< estas coordenadas son la coordenadaO6 $ la coordenadaO$< en 3' se suma la coordenadaOz. Processing
usa< como coordenada de origen< el (/, /, /) en la esAuina su1erior izAuierda< $ mientras las
coordenadas 6 e $ aumentan< la coordenadaOz %a decreciendo.
;as 9iguras son di)u8adas agregando la tercer coordenadaOz al sistema de coordenadas. En estos casos< las
9unciones point()1 line() $ ,ertex() 9uncionan e6actamente igual en un entorno 3' Aue uno 2'< solo
:a$ Aue agregar una tercer coordenada. =in em)argo< mientras las 9unciones translate() $ scale()
9uncionan de la misma manera< la 9uncin rotate() su9re un cam)io. =e utiliza una 9uncin de rotacin 1ara
cada coordenada. Entonces< conseguimos las 9unciones rotateZ()1 rotateV() $ rotateb(). !ada uno
rota alrededor del e8e con el cual es nom)rado. 5am)in< las 9unciones pushCatrix() $ popCatrix()
9uncionan de la misma 9orma Aue en un entorno 2'.
=a)iendo esto< :a$ Aue entender un 1unto cla%e en el tra)a8o 3'. -ntes de comenzar a incluir sinta6is con
una tercer coordenada< es necesario decirle a Processing Aue motor render necesita utilizar @en este caso<
uno 3'C. Processing 1osee< en 1rinci1io< cuatro di9erentes motores de render
J1M12D Motor 1or de9ecto de Processing 1ara render en 2'.
A2D Motor 1ara render 2' muc:o m,s r,1ido Aue J-(-2'< 1ero de menos calidad.
A0D Motor 1ara render 3'.
?A-NX@ Motor 1ara render 3' con aceleracin de Jard?are< )asado en 71enE;.
En %ersiones anteriores a la 2..< los modos A2D $ A0D 9unciona)an inde1endientes. =in em)argo< a 1artir de
la 2..< estos modos 9uncionan con la ingeniera de 71enE;. Esto 1roduce Aue sean mas e9icientes< 1ero
tam)in Aue consuman un 1oco m,s de recursos.
Por lo tanto< e6isten dos motores de render 1ara 3' el A0D $ el ?A-NX@. Para esta)lecerlos como el motor
de nuestra a1licacin< sim1lemente :a$ Aue incluir dic:a constante como un tercer 1ar,metro de la 9uncin
si(e(). Por e8em1lo
si(e(://, ://, A0D);
=uele recomendarse tra)a8ar con A0D $a Aue es el motor m,s com1ati)le con el so9t?are $ no reAuiere de
li)reras e6ternas. 2o o)stante< 1ara tra)a8os de ma$or com1le8idad $ ela)oracin< a %eces se o1ta 1or utilizar
el motor ?A-NX@. En %ersiones anteriores a la 2..< reAuiere Aue se inclu$a en el sHetc: la li)rera Aue 1ermite
el 9uncionamiento de motor 71enE;. ;a siguiente lnea de cdigo de)e ir arri)a de todo en le 1rograma
import processin'#open'l#*;
Para %ersiones 1osteriores a la 2..< la li)rera :a sido eliminada $ el motor 71enE; 9ue incluido en el n3cleo
del so9t?are. Por lo tanto< no es necesario im1ortar la li)rera.
;uego 1uede :acerse el llamado corres1ondiente a la 9uncin si(e()
si(e(://, ://, ?A-NX@);
- 1artir de esta declaracin< es 1osi)le di)u8ar en 3'. Incluso es 1osi)le tener un resultado de salida de un
com1onente 3' a tra%s de las 9unciones be'in>aN() $ end>aN(). ;os com1onentes de salida 1ara 3'
reAuieren un 9ormato es1ec9ico @$a Aue luego 1ueden usarse en 1rogramas de modelado 3'C. #ormatos
como '># $ 7BJ de)en ser reconocidos a tra%s de una li)rera dedicada. @m,s in9ormacin en
:tt1BB1rocessing.orgBre9erenceBli)rariesB C
-$1(ara
5odos los modelos se com1onen< ),sicamente< de una 9igura en una escena $ una c,mara Aue lo o)ser%a.
Processing< 1or lo tanto< o9rece un ma1eo e61lcito de una c,mara analgica< a tra%s de 71enE;. En
internet e6iste un gran n3mero de documentacin acerca de 71enE;< distri)uido de manera gratuita. ;a
c,mara en Processing 1uede ser de9inida 1or unos 1ocos 1ar,metros en cuestin la distancia 9ocal< $ la
le8ana $ la cercana de los 1lanos. ;a c,mara contiene el KPlano de ImagenL< una ca1tura K)idimensionalL< de
lo Aue se o)ser%a.
El render reAuiere tres trans9ormaciones. ;a 1rimera de ellas es llamada trans9ormacin de $ista. Esta
trans9ormacin 1osiciona $ orienta a la c,mara en el mundo. -l esta)lecerse una trans9ormacin de %ista
@e61resada como una matri6 de 4 6 4C< de manera im1lcita de9ine Aue el K1unto 9ocalL es el origen. En
Processing< una 9orma sencilla de esta)lecer la trans9ormacin %ista es con la 9uncin camera(). Por encima
de la trans9ormacin de %ista se encuentra la trans9ormacin de modelo. Fsualmente< estas son multi1licadas
una con la otra $< de ese modo< consideradas como la trans9ormacin del modelo+$ista. ;a 1osicin de la
trans9ormacin de modelo en la escena es relati%o a la c,mara. #inalmente< se 1lantea la trans9ormacin de
proyecci*n< la cual se )asa en las caractersticas internas de la c,mara.
-5ateriales * :u2
;uego de Aue las 9ormas est,n generadas $ trans9ormadas< es mu$ com3n Aue estas se con%iertan en una
imagen est,tica o en una animacin. En tra)a8o de un render 3' es< 1rinci1almente< el modelado matem,tico<
$ la e9iciente com1utacin en la interaccin entre luz $ su1er9icie. El modelo de <ay+tracing @5razado con
ra$osC $ tras tcnicas a%anzadas son las mas ),sicas %ariantes en el render. <ay+tracing modela a 1artir de
ra$os de luz< emergentes de una 9uente lumnica Aue re)ota so)re las su1er9icies de los o)8etos< :asta Aue
gol1ea a la escena com1leta. -l ser un c,lculo matem,tico< muc:as %eces tiene 1ro)lemas en re1roducir
9enmenos naturales< como el Ksangrado del colorL< cuando un color se re9le8a so)re otra su1er9icie. =uele
solucionarse con tcnicas como el modelo de \iluminacin glo)al\< Aue se a1lica< no slo 1or la luz Aue %iene
directamente de las 9uentes de luz 1rede9inidas< sino tam)in la luz re9le8ada de las su1er9icies regulares en
una escena.
E6isten tres mtodos Aue de render Aue no reAuieren c,lculos de luz "ireframe @alam)reC< hidden+line @linea
ocultaC $ flat+shaded @1lano som)readoC
El ?ire9rame es el mtodo mas sim1le 1ara crear un render. Este sim1lemente muestra las lneas de los
contornos de los 1olgonos en su color ),sico. Esta arc:i%ado en Processing 1or di)u8ar con una 9uncin
stro)e() @contornoC $ sin un !ill() @rellenoC. El siguiente en com1le8idad es :iddenOline. En este modelo
solo los contornos son di)u8ados< 1ero se ocultan aAuellos Aue son enmascarados 1or su1er9icies. Processing
no tiene una 9orma de generar esto directamente< no o)stante< se o)tiene el mismo resultado usando una
9uncin stro)e() $ una !ill() cu$o color sea el mismo Aue el del 9ondo. El 3ltimo modelo< 9latOs:aded< se
genera de 9orma similar< solo Aue la 9uncin !ill() 1osee un color distinto Aue el del 9ondo.
;a simulacin de luces $ su1er9icies< de manera correcta< 1roducen un resultado m,s realista. ;a 1rimer
9uncin lumnica Aue nos a1orta Processing es la 9uncin ambient@i'ht(). =e trata de una simulacin de
luz am)iente. Esta 9uncin interact3a con el am)iente de color del 1rograma< el cual se esta)lece con la
9uncin ambient(). 'ic:a 9uncin tra)a8a 1or conseguir los 1ar,metros de !ill() $ stro)e().
;a 9uncin li'ht$pecular() esta)lece el color es1ecular 1ara las luces. ;a calidad es1ecular del color
interact3a con la calidad es1ecular del material a tra%s de la 9uncin specular(). ;a 9uncin specular()
esta)lece el color de los materiales< los cuales esta)lecen el color de las luces. 5am)in se 1resentan
9unciones de luces de ma$or com1le8idad. Entre ellas< point@i'ht()< la cual crea una luz 1untual<
directional@i'ht()< la cual crea una luz direccional< $ spot@i'ht() Aue crea una es1ecie de luz
Kc:is1eanteL< como una gota. 0eci)en distintos 1ar,metros 1orAue cada luz es 3nica. 5odas las luces de)en
ser reseteadas al 9inal del )loAue draN()< 1uesto Aue necesitan ser reOcalculadas.
;a te6tura de los materiales son un elemento im1ortante en el realismo de la escena 3'. Processing 1ermite
Aue las im,genes sean ma1eadas a las caras de los o)8etos. ;a te6tura se de9orma del mismo modo Aue el
o)8eto se de9orma. Para conseguir un ma1eo< es necesario Aue la cara o)tenga las coordenadas 2' de la
te6tura.
;as te6turas son ma1eadas a las 9ormas geomtricas con una %ersin de la 9uncin ,ertex() con dos
1ar,metros adicionales< conocido como u $ ,. Estos 1ar,metros son las coordenadaO6 $ la coordenadaO$ de
la te6tura a ser ma1eada. -dem,s< es necesario esta)lecer la te6tura a utilizar con la 9uncin texture().
!omo la imagen esta cargada en el )loAue setup()< no es reOcalculada en cada ciclo del )loAue draN().
-Eje(+los
E8em1lo * 'i)u8ando en 3' @5rans9ormacinC
//>otar un rect"n'ulo alrededor de su ee x ; su ee ;
,oid setup() R
si(e(.//, .//, A0D);
!ill(2/.);
S
,oid draN() R
bac)'round(/);
translate(Nidth/2, hei'ht/2, 5Nidth);
rotateV(map(mouseZ, /, Nidth, 5AB, AB));
rotateZ(map(mouseV, /, hei'ht, 5AB, AB));
no$tro)e();
rect(52//, 52//, .//, .//);
stro)e(233);
line(/, /, 52//, /, /, 2//);
S
E8em1lo 2 'i)u8ando en 3' @;uces $ #ormas 3'C
//Dibuar una es!era arriba de una caa ; mo,er las coordenadas con el mouse
//Aresionar el botn del mouse para encenderlos con una lu(
,oid setup() R
si(e(.//, .//, A0D);
S
,oid draN() R
bac)'round(/);
i! (mouseAressed << true) R //$i el mouse se oprime
li'hts(); //encender la lu(
S
no$tro)e();
pushCatrix();
translate(mouseZ, mouseV, 53//);
rotateV(AB/:); //>otar alrededor del ee ;
box(.//, 6//, .//); //Dibuar caa
pushCatrix();
popCatrix();
translate(/, 52//, /); //Aosicin de la es!era
sphere(63/); //Dibuar la es!era sobre la caa
popCatrix();
S
E8em1lo 3 !onstru$endo #ormas 3'
//Dibuar un cilindro centrado en el ee V, Gue ,a;a desde ;</ a ;<hei'ht#
//-l radio de arriba puede ser di!erente de el radio de abao
//; el nEmero de lados dibuados es ,ariable
,oid setup() R
si(e(.//, .//, A0D);
S
,oid draN() R
bac)'round(/);
li'hts();
rotateV(map(mouseZ, /, Nidth, /, AB));
rotateb(map(mouseV, /, hei'ht, /, 5AB));
no$tro)e();
!ill(233, 233, 233);
translate(/, 5./, /);
dibuar*ilindro(6/, 6D/, 2//, 6:); //Dibua una me(cla entre
//cilindro ; cono
//dibuar*ilindro(K/, K/, 62/, :.); //Dibua un *ilindro
//dibuar*ilindro(/, 6D/, 2//, .); //Dibua una pir"mide
S
,oid dibuar*ilindro(!loat top>adius, !loat bottom>adius, !loat tall, int sides)
R
!loat an'le < /;
!loat an'leBncrement < TI?YAB / sides;
!or (int i < /; i 9 sides 4 6; 44i) R
,ertex(top>adius*cos(an'le), /, top>adius*sin(an'le));
,ertex(bottom>adius*cos(an'le), tall, bottom>adius*sin(an'le));
an'le 4< an'leBncrement;
S
end$hape();
//$i no es un cono, dibuar el circulo arriba
i! (top>adius Q< /) R
an'le < /;
//Aunto *entral
,ertex(/, /, /);
!or (int i < /; i 9 sides 4 6; i44) R
,ertex(top>adius * cos(an'le), /, top>adius *
sin(an'le));
S
end$hape();
S
//$i no es un cono, dibuar el circulo abao
i! (bottom>adius Q< /) R
an'le < /;
// *enter point
,ertex(/, tall, /);
!or (int i < /; i 9 sides46; i44) R
,ertex(bottom>adius * cos(an'le), tall, bottom>adius *
sin(an'le));
S
end$hape();
S
S
E8em1lo 4 E61ortar en '>#
//-xportar a un archi,o DZH cuando la tecla > es presionada
import processin'#dx!#*; //$olo en ,ersiones anteriores a la 2#/
boolean record < !alse;
,oid setup() R
si(e(.//, .//, A0D);
no$tro)e();
sphereDetail(62);
S
,oid draN() R
i! (record << true) R
be'in>aN(DZH, Woutput#dx!W); //Bniciar al accin de 'uardar
S
li'hts();
bac)'round(/);
translate(Nidth/0, hei'ht/0, 52//);
rotateb(map(mouseV, /, hei'ht, /, AB));
rotateV(map(mouseZ, /, Nidth, /, \1@HYAB));
!or (int ; < 52; ; 9 2; ;44) R
!or (int x < 52; x 9 2; x44) R
!or (int ( < 52; ( 9 2; (44) R
pushCatrix();
translate(62/*x, 62/*;, 562/*();
sphere(0/);
popCatrix();
S
S
S
i! (record << true) R
end>aN();
record < !alse; //Detener la accin de 'uardar
S
S
,oid )e;Aressed() R
i! ()e; << ^>^ TT )e; << ^r^) R //Aresionar > para 'uardar el archi,o
record < true;
S
S
E8em1lo / Im1ortar un arc:i%o 7BJ
//Bmportar ; mostrar un archi,o ?=J
import saito#obloader#*;
?=JCodel model;
,oid setup() R
si(e(.//, .//, A0D);
model < neN ?=JCodel(this);
model#load(Wchair#obW); //@os modelos deben estar en la carpeta data
model#draNCode(A?@VX?N);
no$tro)e();
S
,oid draN() R
bac)'round(/);
li'hts();
pushCatrix();
translate(Nidth/2, hei'ht, 5Nidth);
rotateZ(AB/.);
scale(:#/);
model#draN();
popCatrix();
S
E8em1lo " !ontrol de la !,mara
//@a c"mara se mue,e en relacin al mouse obser,ando el mismo punto
,oid setup() R
si(e(.//, .//, A0D);
!ill(2/.);
S
,oid draN() R
li'hts();
bac)'round(/);
//*ambia la altura de la c"mara con mouseV
camera(0/#/, mouseV, 22/#/, //ooZ, ooV, oob
/#/, /#/, /#/, //centroZ, centroV, centrob
/#/, 6#/, /#/); //arribaZ, arribaV, arribab
no$tro)e();
box(7/);
stro)e(233);
line(56//, /, /, 6//, /, /);
line(/, 56//, /, /, 6//, /);
line(/, /, 56//, /, /, 6//);
S
E8em1lo + Material
//Mara la re!lexin especular del material
//con la posicin en Z del mouse
,oid setup() R
si(e(.//, .//, A0D);
no$tro)e();
colorCode(>X=, 6);
!ill(/#.);
S
,oid draN() R
bac)'round(/);
//-stablece el color de la lu( especular
li'ht$pecular(6, 6, 6);
directional@i'ht(/#D, /#D, /#D, /, /, 56);
!loat s < mouseZ / !loat(Nidth);
specular(s, s, s);
sphere(6//);
S
E8em1lo 4 Iluminacin
//Dibuar un cubo con 0 di!erentes tipos de lu(
,oid setup() R
si(e(.//, .//, A0D);
no$tro)e();
S
,oid draN() R
bac)'round(/);
//@u( puntual narana a la derecha
point@i'ht(63/, 6//, /, //*olor
2//, 563/, /); //Aosicin
//@u( direccional a(ul a la i(Guierda
directional@i'ht(/, 6/2, 233, //*olor
6, /, /); //@a direccin en los ees x, ;, (
//@u( chispeante amarilla al !rente
spot@i'ht(233, 233, 6/7, //*olor
/, ./, 2//, //Aosicin
/, 5/#3, 5/#3, //Direccin
AB/2, 2); //dn'ulo
rotateV(map(mouseZ, /, Nidth, /, AB));
rotateZ(map(mouseV, /, hei'ht, /, AB));
box(2//);
S
E8em1lo & Ma1eo de la 5e6tura
//*ar'ar una ima'en ; mapearla en un cilindro ; en un paralelo'ramo
int tube>es < 02;
!loatà tubeZ < neN !loat`tube>esa;
!loatà tubeV < neN !loat`tube>esa;
ABma'e im';
,oid setup() R
si(e(.//, .//, A0D);
im' < loadBma'e(Wberlin56#p'W);
!loat an'le < 2K/#/ / tube>es;
!or (int i < /; i 9 tube>es; i44) R
tubeZìa < cos(radians(i * an'le));
tubeVìa < sin(radians(i * an'le));
S
no$tro)e();
S
,oid draN() R
bac)'round(/);
rotateZ(map(mouseV, /, hei'ht, 5AB, AB));
texture(im');
!or (int i < /; i 9 tube>es; i44) R
!loat x < tubeZìa * 6//;
!loat ( < tubeVìa * 6//;
!loat u < im'#Nidth / tube>es * i;
,ertex(x, 56//, (, u, /);
,ertex(x, 6//, (, u, im'#hei'ht);
S
end$hape();
be'in$hape(L&1D$);
texture(im');
,ertex(/, 56//, /, /, /);
,ertex(6//,56//, /, 6//, /);
,ertex(6//, 6//, /, 6//, 6//);
,ertex(/, 6//, /, /, 6//);
end$hape();
S
&nidad 83
E%tensin' G5:
ZC@, loadZC@(),'et*hild*ount(), 'et*hild(), 'et*hildren(), 'et*ontent()
'etBnt(), 'etHloat(), 'et$trin'(), 'etName()
El lengua8e de >M; es un lengua8e de maAuetado< desarrollado 1or la I3! 1ara el intercam)io de
in9ormacin. =i )ien es mu$ utilizado en internet< no solo se utiliza en ese am)iente. =e encuentra 1resente en
los 0== de los )logs $ otros sitios. Por su 9le6i)ilidad en la creacin de etiAuetas @tagsC< es mu$ sencillo
le%antar su contenido $ seleccionar Aue Auiere le%antarse. Por e8em1lo< se 1uede seleccionar la lectura solo
del ttulo de un documento< o del contenido general.
-3-jeto G5:
- 1artir de la %ersin 2..< el o)8eto ZC@ 1asa a 9ormar 1arte de los o)8etos 1reesta)lecidos de Processing. ;a
clase ZC@ se declara como cualAuier o)8eto. Para asignar un documento< se utiliza la 9uncin loadZC@().
Esta con%iene Aue se encuentre en el )loAue setup().
ZC@ xml;
xml < loadZC@(sitio#xml);
;os documentos >M; de)en encontrarse en la car1eta data. 2o o)stante< es 1osi)le le%antar documentos
>M; directamente desde la ?e).
-,unciones de G5:
Para tener mas control so)re el o)8eto >M;< el so9t?are Processing o9rece una gran %ariedad de 9unciones.
En estos casos< las 9unciones m,s cl,sicas son las Aue sir%en 1ara tener control so)re los hi'os de un
documento. =uelen utilizarse las siguientes 9unciones
'et*hild*ount() 0egresa el n3mero de :i8os de un documento
'et*hild() 0egresa solo un :i8o
'et*hildren() 0egresa todos los :i8os de un documento como un -rra$
'et*ontent() 0egresa el contenido de un elemento
En orden de a1licar esto< a continuacin se 1resenta un e8em1lo donde se crea un sim1le lector de 0==. El
lector le%anta una F0; donde se encuentra un >M;< 1or lo tanto no es necesario tener el documento en la
car1eta data. ;uego< sim1lemente im1rime los 3ltimos ttulos de las noticias en la consola @el sHetc: se
mostrar, %acoC
//*ar'ar ZC@
$trin' url < WhttpF//processin'#or'/updates#xmlW;
ZC@ rss < loadZC@(url);
//*onse'uir el ttulo de cada elemento
ZC@à titleZC@-lements < rss#'et*hildren(Wchannel/item/titleW);
!or (int i < /; i 9 titleZC@-lements#len'th; i44) R
$trin' title < titleZC@-lementsìa#'et*ontent();
println(i 4 WF W 4 title);
S
E6isten< adem,s< otras 9unciones un 1oco m,s dedicadas. Estas sir%en 1ara de%ol%er di%ersos %alores de los
atri)utos del documento
'etBnt() 0egresa un atri)uto entero de un elemento
'etHloat() 0egresa un atri)uto decimal de un elemento
'et$trin'() 0egresa un atri)uto =tring de un elemento
'etName() 0egresa el nom)re de un elemento
-3tras 4ersiones
7curre una con9usin al momento de declarar el o)8eto >M;. En %ersiones anteriores a la 2..< Processing
utiliza)a un elemento >M; Aue deri%a)a de una li)rera. En %ersiones anteriores a la *./.*< la li)rera de)a
incluirse. Es recomenda)le actualizarse a la 3ltima %ersin< es1ecialmente 1or la gran cantidad de %enta8as
Aue o9rece utilizar el o)8eto >M; $ no el elemento. Para el e8em1lo anterior del lector de 0==< en %ersiones
anteriores a la 2.. de)era 9uncionar as
//C%todo para anterior a 2#/
//*ar'ar ZC@
$trin' url < WhttpF//processin'#or'/updates#xmlW;
ZC@-lement rss < neN ZC@-lement(this, url);

//*onse'uir el ttulo de cada elemento
ZC@-lementà titleZC@-lements < rss#'et*hildren(Wchannel/item/titleW);
!or (int i < /; i 9 titleZC@-lements#len'th; i44) R
$trin' title < titleZC@-lementsìa#'et*ontent();
println(i 4 WF W 4 title);
S
/+artados' #ocu(entacin
-/+artado 1' Derra(ientas
El so9t?are de Processing 1ermite la im1lementacin de Jerramientas @5oolsC 1ara 9acilitar el tra)a8o al
usuario. -lgunas de estas %ienen instaladas en el 1ro1io 1rograma< $ 1uede accederse a ellas desde el men3
,ools. Por de9ecto< se inclu$en
+Auto .ormat Auto+.ormato!: Intenta 9ormatear el cdigo 1ara :acer un layout @diseGoC m,s legi)le $ :umano.
=e aGaden o eliminan es1acios $ saltos de lneas 1ara :acer un cdigo mas Klim1ioL. Para acceder
r,1idamente 1uede utilizarse su ata8o en Iindo?s 0ontrol L ,.
+Archi$e &kecth Archi$ar &kecth!: -rc:i%a una co1ia del sHetc: en un documento .3ip. ;a co1ia se almacena
en el mismo directorio Aue el sHetc:.
+0olor &elector &elector de 0olor!: =im1le inter9az 1ara seleccionar colores en 0EB< J=B o :e6adecimal.
+0reate .ont 0rear .uente!: !on%ierte las 9uentes de te6to en el arc:i%o de 9uentes Aue utiliza Processing
1ara tra)a8ar $ lo aGade al directorio del sHetc:. =e a)re un cuadro de di,logo Aue le dan o1ciones 1ara
con9igurar el ti1o de letra< su tamaGo< si se trata de antiOaliasing< $ si todos los caracteres de)en ser
generados.
+.i( %ncoding M <eload Arreglar 0odificaci*n y <ecargar!: ;os sHetc:s Aue contienen caracteres Aue no son
cdigo -=!II $ 9ueron guardados en Processing .*4. o %ersiones anteriores< 1osi)lemente se %ean mu$
e6traGos cuando son a)iertos. !aracteres como diresis< o 8a1oneses. -l ser a)iertos en una nue%a %ersin<
la :erramienta los mostrar, como en las %ersiones antiguas< $ al momento de guardar el sHetc: nue%amente<
lo codi9icar, con la nue%a codi9icacin F5#O4.
-dem,s< e6isten :erramientas creadas 1or usuarios Aue contri)u$en al 1rograma. Estas 1ueden descargarse
de 9orma li)re $ gratuita desde el sitio de :erramientas de Processing @:tt1BB1rocessing.orgBre9erenceBtoolsBC.
;as :erramientas de contri)ucin de)en ser descargardas 1or se1arado $ colocadas dentro de la car1eta
\5ools\ del 1rograma Processing @1ara encontrar la u)icacin de Processing en el ordenador< a)ra la %entana
de Pre9erencias de la a1licacin de Processing $ )usAue \=Hetc:)ooH location\ en la 1arte su1eriorC. =e de)e
co1iar la car1eta de la :erramienta descargada dentro de la car1eta K5oolsL. Es 1osi)le Aue se necesite crear
la car1eta K5oolsL si es la 1rimer :erramienta Aue se instala.
En las %ersiones 1osteriores a la 2..< e6iste una o1cin dentro del men3 K5oolsL< la o1cin K-dd 5ools...L
@-Gadir JerramientasC. - 1artir de esta o1cin< Processing )usca nue%as :erramientas aun no instaladas $ las
1resenta en un entorno amiga)le 1ara su instalacin. ;uego de esto solo :a$ Aue seleccionar la :erramienta
deseada $ a1retar el )otn KInstallL.

-/+artado 2' :i-rer@as
Para 1roducciones Aue reAuieren muc:o desarrollo< a %eces es necesario im1lementar ;i)reras @;i)rariesC
Aue 1otencien nuestros 1rogramas. 2o se trata de muc:o mas Aue una gran cantidad de cdigo. Para insertar
alguna li)rera de las Aue %ienen 1or de9ecto< se de)e dirigir al men3 K&ketch/ $ luego a K9mport Library.../.
-Au mismo a1arecer,n las li)reras dis1oni)les Aue %ienen instaladas 1or de9ecto en Processing
+Video: Inter9az de la li)rera E=(ideo 1ara utilizar una c,mara< re1roduccin de 1elculas $ creacin<
tam)in< de las mismas. ;os usuarios de linu6 de)er,n instalar el gstreamer 1ara utilizar esta li)rera. En
%ersiones anteriores a la 2..< la inter9az era del DuicHtime de -11le.
+Arduino: Permite control directo de una 1laca -rduino a tra%s de Processing.
+Net"ork: En%a $ reci)e datos %a Internet a tra%s de la creacin de sim1les !lientes $ =er%idores.
+Binim: Ftiliza la Ja%a=ound -PI 1ara 1ro%eer una 9,cil uso como li)rera de sonido. Fn sim1le -PI Aue
1ro%ee un gran mane8o $ 9le6i)ilidad al usuario Aue desea im1lementar sonido.
+Netscape.Ka$ascript: Mtodos de comunicacin entre Ja%ascri1t $ Ja%a -11lets e61ortados de Processing.
+&erial: =o1orte 1ara el en%o de data entre Processing $ un :ard?are e6terno< %a comunicacin serializada
@0=O232C.
+PD. %(port: Eenera arc:i%os P'#
+DN. %(port: ;neas $ tri,ngulos en los modos de render AD0 o ?A-NX@< 1ueden ser e61ortados como un
arc:i%o '>#.
!on las actualizaciones< e6isten li)reras Aue :an sido trasladadas a la )ase de datos $ reem1lazadas 1or
9unciones o automatizaciones. Estas son
+0andy &VG 9mport: Esta )i)lioteca se :a trasladado a la )ase de cdigo de Processing en la %ersin *4&.
Para la carga de gr,9icos =(E< se recomienda utilizar las 9unciones Ashape()< load$hape() $ shape().
+NBL 9mport: Esta )i)lioteca se :a trasladado a la )ase de cdigo de Processing en la %ersin *4&. Para
cargar datos >M;< se recomienda utilizar la clase NBL $ la 9uncin loadZC@(). En %ersiones anteriores a la
2..< se de)er, utilizar el elemento ZC@-lement.
+?penGL: =o1orte 1ara e61ortar sHetc: con aceleracin en gr,9icos a tra%s de 71enE;. Ftiliza la li)rera
J7E;. - 1artir de la %ersin 2.. :a de8ado de e6istir como li)rera 1ara encontrarse en el n3cleo del so9t?are.
Por lo tanto< solo es necesario llamar a la li)rera en %ersiones anteriores a la 2...
!a)e destacar Aue cada li)rera tiene una documentacin corres1ondiente con la cual se entiende su
im1lementacin $ correcta sinta6is. ;a misma se encuentra en la re9erencia del sitio
@:tt1BB1rocessing.orgBre9erenceBli)rariesBC. En dic:o sitio< adem,s< 1odremos encontrar uno de los 1untos
9uertes de Processing< las li)reras creadas 1or usuarios contri)uidores. Ja$ a dis1osicin m,s de *..
li)reras< todas con un atracti%o di9erente. ;as li)reras de contri)ucin de)en ser descargadas 1or se1arado $
colocadas dentro de la car1eta K;i)rariesL de tu 1rograma de Processing @1ara encontrar la u)icacin de
Processing en el ordenador< a)ra la %entana de Pre9erencias de la a1licacin de Processing $ )usAue
\=Hetc:)ooH location\ en la 1arte su1eriorC. =i todo es correcto< la li)rera de)era a1arecer en el men3
K=Hetc:L< KIm1ort ;i)rar$...L.
En las %ersiones 1osteriores a la 2..< e6iste una o1cin dentro del men3 K=Hetc:L< KIm1ort ;i)rar$...L< la o1cin
K-dd ;i)rar$...L @-Gadir ;i)reraC. - 1artir de esta o1cin< Processing )usca nue%as li)reras aun no instaladas
$ las 1resenta en un entorno amiga)le 1ara su instalacin. ;uego de esto solo :a$ Aue seleccionar la li)rera
deseada $ a1retar el )otn KInstallL.
-/+artado 3' Processing9js
-l incluirse la tag !an%as como un estandar de J5M;/ @9can,as89/can,as8C los 1rogramadores ?e) son
ca1aces de Kdi)u8arL en internet con Ja%ascri1t. ;o cierto es Aue no se tard demasiado en notar Aue las
sinta6is de !an%as es mu$ similar a la de Processing. Jo:n 0esig @luego es desarrollado 1or #lorian JenettC
crea una li)rera Aue KtraduceL un sHetc: @.1deC de Processing al Ja%ascri1t necesario 1ara Aue 9uncione en
!an%as. 'e esta 9orma< insertar un o)8eto !an%as en la ?e) es muc:o mas 1r,ctico $ e9iciente Aue un Ja%a
-11let.
Para comenzar a im1lementarlo< solo :a$ Aue dirigirse a :tt1BB1rocessing8s.org $ descargar la ultima %ersin
de la li)rera< la cual tiene so1orte 1ara todos los na%egadores ?e) modernos. ;uego de esto< solo es
necesario tener un loGuesea#html $ un loGuesea#pde @Aue ser, el 1ro1io sHetc:C. 'e manera sim1le< en
el 9head8 de tu loGuesea#html< se linHea la li)rera de la siguiente manera
9script src<Wprocessin'#sW89/script8
=iem1re uno asegur,ndose Aue el src sea el directorio correcto. Posteriormente< en el ObodyP< se crea una
etiAueta de !an%as de la siguiente manera
9can,as data5processin'5sources<WloGuesea#pdeW89/can,as8
Fna %ez colocado esto< el sHetc: de Processing de)era estar 9uncionando sin ning3n 1ro)lema como un
o)8eto de !an%as. Es 1osi)le Aue algunas 9unciones de Processing no 9uncionen correctamente o
directamente no 9uncionen al 1asarlas a !an%as @se est, constantemente tra)a8ando en elloC. -nte cualAuier
duda< lo ideal es consultar la re9erencia de Processing.8s http://processingjs.org/reference/.
-/+artado 8' Hiring
Iiring es un entorno de 1rogramacin de cdigo li)re 1ara microcontroladores. Permite la escritura de
1rogramas multi1lata9orma 1ara controlar di%ersos dis1ositi%os conectados a una am1lia gama de ta)leros de
microcontrolador $ as crear todo ti1o de cdigos creati%os< o)8etos interacti%os< es1acios o e61eriencias
9sicas. El entorno est, cuidadosamente creado 1ensando en diseGadores $ artistas< $ as 9omentar una
comunidad donde los 1rinci1iantes< a tra%s de e61ertos de todo el mundo< com1artan las ideas<
conocimientos $ su e61eriencia colecti%a. M,s in9ormacin en :tt1BB?iring.org.coB
-/+artado <' /rduino
-rduino es una 1lata9orma de cdigo a)ierto )asada en 1rototi1os de electrnica 9le6i)le $ 9,cil de usar
mediante :ard?are $ so9t?are. Est, 1ensado 1ara los artistas< diseGadores< a9icionados $ cualAuier 1ersona
interesada en la creacin de o)8etos o entornos interacti%os. El microcontrolador de la 1laca se 1rograma
utilizando el lengua8e de 1rogramacin de -rduino @)asado en IiringC $ el entorno de desarrollo -rduino
@)asado en ProcessingC. M,s in9ormacin en :tt1BBarduino.ccB
-/+artado >' ,rit2ing
#ritzing es una iniciati%a de cdigo a)ierto 1ara a1o$ar a diseGadores< artistas< in%estigadores $ a9icionados a
tra)a8ar de manera creati%a con la electrnica interacti%a. Basado en Processing $ -rduino. =e trata del
desarrollo de una :erramienta Aue 1ermite a los usuarios documentar sus 1rototi1os< com1artirlos con los
dem,s< enseGar la electrnica en un saln de clases< $ crear un diseGo 1ara la 9a)ricacin de P!B
1ro9esional. M,s in9ormacin en :tt1BB9ritzing.orgB
-/+artado ?' Das $anvas
-lgunos 1ro$ectos Aue deri%an al comenzar a im1lementarse li)reras como Processing.8s< 1retenden utilizar
Processing en la ?e) a tra%s de !an%as. =ea el caso del sitio Jas !an%as< uno de los m,s 1otentes. -l
ingresar al sitio :tt1BB:ascan%as.com se nos 1resenta una inter9az sencilla Aue nos 1ermite escri)ir cdigo de
Processing directamente en el na%egador de nuestro ordenador< $ autom,ticamente dic:o cdigo es
le%antado con PJP $ %isualizado en 9orma de !an%as.
=olo con tener una cuenta en Jas !an%as @a tra%s de 71enI'C se 1uede :acer un sHetc:< o)tener una F0;
del mismo< com1artirlo dentro de dic:o sitio< $ conseguir el recurso listo 1ara incluir como o)8eto de !an%as
en cualAuier ?e).

Processing Un Lenguaje Al Alcance de Todos

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Processing Un Lenguaje Al Alcance de Todos

Cargado por

Copyright:

Formatos disponibles

Processing,

un lenguaje al alcance de todos

También podría gustarte