Processing Un Lenguaje Al Alcance de Todos

Processing,
un lenguaje al alcance de todos
Edicin 2014
versin 03
Ignacio Buioli | Jaime Prez Marn
ndice
ndice......................................................................................................................................................................3 Introduccin............................................................................................................................................................5 Estructuras: Elementos del digo........................................................................................................................! "ormas: oordinadas # Primiti$as.......................................................................................................................%& 'atos: (aria)les...................................................................................................................................................%* Matem+ticas: "unciones ,ritmticas....................................................................................................................-% ontrol: 'ecisiones..............................................................................................................................................-. ontrol: /e0eticin...............................................................................................................................................3"ormas: (rtices..................................................................................................................................................3! Matem+ticas: ur$as............................................................................................................................................11 olor: olor 0or 23meros....................................................................................................................................14 Imagen: (isualizacin # 5inta...............................................................................................................................5! 'atos: 5e6to...........................................................................................................................................................& 'atos: on$ersin # 7)8etos.................................................................................................................................5i0ogra9a: (isualizacin........................................................................................................................................ Matem+ticas: 5rigonometra.................................................................................................................................!& Matem+ticas: ,leatoriedad...................................................................................................................................!* 5rans9ormaciones: Matrices # 5raslaciones.........................................................................................................*5rans9ormaciones: /otacin # Escala..................................................................................................................*5 Estructuras: ontinuidad......................................................................................................................................4& Estructuras: "unciones.........................................................................................................................................4. "ormas: Par+metros # /ecursin......................................................................................................................%&. (alores de Entrada: Mouse.................................................................................................................................%%% 'i)u8o: "ormas Est+ticas....................................................................................................................................%%* (alores de Entrada: 5eclado..............................................................................................................................%-% (alores de Entrada: E$entos..............................................................................................................................%-1 (alores de Entrada: Mouse II.............................................................................................................................%-4 (alores de Entrada: 5iem0o # "ec:as...............................................................................................................%35 Mo$imiento: ;neas # ur$as.............................................................................................................................%34 Mo$imiento: Mec+nicos # 7rg+nicos.................................................................................................................%1! 'atos: ,rra#s......................................................................................................................................................%5Imagen: ,nimacin.............................................................................................................................................%.% Imagen: P6eles..................................................................................................................................................%.5 5i0ogra9a: Mo$imiento.......................................................................................................................................%.4 5i0ogra9a: /es0uesta........................................................................................................................................%!3 olor: om0onentes..........................................................................................................................................%!. Imagen: "iltro< Mezcla< o0ia< M+scara............................................................................................................%*Imagen: Procesamiento de Imagen...................................................................................................................%*! 'atos de =alida: Im+genes................................................................................................................................%45 'atos de =alida: E60ortar ,rc:i$os....................................................................................................................%4* Estructuras: 7)8etos...........................................................................................................................................-&% 'i)u8os: "ormas inticas.................................................................................................................................-%3 E6tensin: Modos...............................................................................................................................................-%! E6tensin: "iguras 3'........................................................................................................................................--& E6tensin: >M;..................................................................................................................................................--4 ,0artados: E8ercicios..........................................................................................................................................-3% ,0artados: 'ocumentacin................................................................................................................................-3!
El 0resente li)ro< de ti0o manual actualiza)le< corres0onde al a0rendiza8e del so9t?are de Processing -.%.%. El :ec:o de 0oseer una $ersin anterior o 0osterior no entor0ece ni im0ide el a0rendiza8e con el 0resente manual. =in em)argo< se recomienda actualizarse a la 3ltima $ersin esta)le. @ante cualAuier duda< consultar en: :tt0:BB0rocessing.orgBdo?nloadBC. Dueda entendido Aue Processing es creado< en 0rinci0io< 0or ase# /eas # Ben "r#< # se trata de un so9t?are de cdigo a)ierto distri)uido )a8o una licencia E2F E;P @ General Public LicenseC.
Introduccin
'ado el a$ance de los medios de 0roduccin multimedial< nace un 0otente so9t?are dedicado a la 0roduccin de im+genes< animaciones e interacti$os. El so9t?are denominado Processing. El 0ro#ecto da inicio en el -&&%< realizado 0or ase# /eas # Ben "r#< a 0artir de terminologas realizadas en el MI5 ;a)< dirigido 0or Jo:n Maeda< e in9luenciado 0or el 0ro#ecto Design by Numbers. Es as Aue Processing se con$ierte en un 0oderoso entorno de 0roduccin )asado en Ja$a. 2os 0areci im0ortante la creacin de un li)ro ti0o manual de introduccin a Processing Aue se encuentre dis0oni)le en es0aGol< 0uesto Aue la ma#ora de los manuales del mercado se encuentran 3nicamente en ingls # no :a# ninguna $ersin al castellano. 2o es de 0oca monta la cantidad de :is0ano:a)lantes Aue e6isten en el mundo< es0ecialmente interesados en a0render lengua8es de 0rogramacin orientados a entornos Ja$a. Por tal moti$o< este manual comenz< en 0rinci0io< 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< 0or lo tanto decidimos tomarlos de )ase 0ara crear nuestro 0ro0io manual Aue a#ude a aAuellos @Aue 0or di$ersos moti$os no sa)en leer en inglsC interesados en la 0roduccin multimedial Aue el so9t?are o9rece. En este li)ro< se o9rece< adem+s< a0ndices corres0ondientes a cada sector # e8em0los Aue muestran el 9uncionamiento de las estructuras # de los 0rogramas. =e recomienda Aue< una $ez conseguido el 0rograma< los e8em0los sean $istos desde a: # no solo desde la imagen Aue lo acom0aGa. omo se menciona anteriormente< este li)ro< 0rinci0almente< comienza como una traduccin del li)ro Processing: A programming Handbook for Visual Designer and Artist de ase# /eas # Ben "r#. 2o o)stante< se inclu#en conce0tos # material no 0resente en dic:o li)ro @as como tam)in se Auitan cosas del mismo Aue no nos :an 0arecido 0ertinentesC.
Software
- !u" es Processing# Es un so9t?are de cdigo a)ierto< # cualAuier 0ersona 0uede contri)uir en su me8ora. 'es0ro$isto de inter9aces innecesarias< se $ale de un lengua8e de 0rogramacin @de igual nom)reC )asado en Ja$a 0ara realizar com0osiciones de gran inters. omo so9t?are< consiste )+sicamente en un sim0le editor de te6to 0ara escri)ir cdigo< un +rea de mensa8e< una consola de te6to< un sistema de 0estaGas 0ara mane8ar arc:i$os< una )arra de :erramientas con )otones de accionar com3n # una )arra de men3. uando el 0rograma se e8ecuta< se a)re una $entana de re0resentacin. ;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 co0iarB0egar # )uscarBreem0lazar te6to. ;a consola muestra errores 0roducidos al e8ecutar el 0rograma. 5am)in< 0uede mostrar te6to a tra$s de las 9unciones print ! # println !. -$escarga El so9t?are de Processing 0uede descargarse del sitio ?e) :omnimo del 0rograma. 'esde un na$egador ?e)< ingresar a """.processing.org # )uscar la seccin de descarga @do"nloadC. ,dmite sistemas o0erati$os
de ;inu6< Macintos: # Iindo?s. En el sitio se encuentran las instrucciones mismas 0ara la descarga. -%onte&to
Barra de Men3: "ile: #Archi$o#. omandos 0ara mane8ar # e60ortar arc:i$os. Edit: #%ditar#. ontroles 0ara editar te6to. @ o0iar< 0egar< cortar< encontrar< reem0lezar< etc.C. =Hetc:: #&ketch#. ontrol 0ara e8ecutarB9renar el 0rograma # 0ara aGadir li)reras. 5ools: #Herramientas#. Jerramientas de asistencia 0ara Processing. Jel0: #Ayuda#. /e9erencias a arc:i$os # al lengua8e. Barra de Jerramientas: /un: #%'ecutar#. om0ila el cdigo< a)re una $entana de re0resentacin # muestra el 0rograma. =to0: #Parar#. 5ermina de correr el 0rograma. 2e?: #Nue$o#. rea un nue$o =Hetc:. 70en: #Abrir#. Pro$ee de o0ciones 0ara a)rir un sHetc: del li)ro de sHetc:< a)rir un e8em0lo< 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 o0cion K=a$e asL. E60ort: #%(portar#. E60orta el actual sHetc: como un a00let de Ja$a unido a una arc:i$o J5M;.
'
(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 0rograma im0lica recurrir a la escritura # a0render un lengua8e. =imilar a cuando a0rendemos un nue$o lengua8e oral o escrito< necesitamos a0render una sinta6is # una lgica. Escri)ir en un lengua8e :umano es mu# com0licado. Posee am)igMedad en las 0ala)ras< # muc:a 9le6i)ilidad 0ara la construccin de 0+rra9os. En ese sentido< el lengua8e de m+Auina es m+s sencillo< 0ero 0osee una di9icultad clara: la lgica de la 0rogramacin. Fsualmente< un ser :umano 0uede 0ercatarse de un error de sinta6is # darlo 0or alto< rest+ndole 0arcial o com0leta im0ortancia. =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 0or los ordenadores< 0ero son *u, i*-ortantes 0ara los :umanos. Processing 0ermite agregar notas en cualAuier sector del cdigo. Pueden ser de solo una lnea o de muc:as lneas. Na Aue los 0rogramas usan signos mu# arcaicos # de di9cil identi9icacin< muc:as $eces es com0licado 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 0or el 0ro0io 0rogramador como 0or otros. El siguiente 0rograma e60lica< 0or 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 e emplo / /, 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 0ermiten di)u8ar 9ormas< colores< realizar c+lculos matem+ticos< entre otras $ariadas acciones. Por lo general se escri/en en *in0sculas , seguidas -or -ar"ntesis . ,lgunas 9unciones ace0tan par)metros< los cuales se escri)en entre los 0arntesis. =i ace0ta m+s de uno< son se0arados 0or una coma @,C. , continuacin un 0rograma 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 , 1cciones =i us+ramos una analoga< la e60resin de un so9t?are es como una 9rase. ;as e60resiones< 0or lo general<
$an acom0aGadas de alg3n o0erador como 4< 5< * o /< #a sea a la izAuierda o a la derec:a del $alor. Fna e60resin en 0rogramacin 0uede ser )+sica< como un solo n3mero< o una com0le8a cadena de elementos. 'e esta manera< una e60resin siem0re tiene un $alor determinado.
E60resin
3 6/#3*2 ((042)*56/)46
(alor
3 26#/ 5.7
Ja# e60resiones Aue tam)in 0ueden usarse en com0aracin de un $alor con otro. ;os o0eradores de 8 #mayor a# # 9 #menor a# de$uel$en solo dos $alores: true @$erdadero! # !alse @falso!.
E60resin
: 8 0 3. 9 3/
(alor
true !alse
Fn con8unto de e60resiones 0ueden 9ormar una acci*n< lo Aue en 0rogramacin eAui$ale a una oraci*n. =e com0leta cuando se 0resenta el terminador de la accin. En Processing< el terminador de accin es el 0untoO #Ocoma @;C. ,l igual Aue :a# di$ersos ti0os de oraciones< :a# di$ersos ti0os de acciones. Fna accin 0uede de9inir una $aria)le< e8ecutar una $aria)le< asignar una $aria)le< e8ecutar una 9uncin< o construir un o)8eto. , continuacin unos e8em0los:
si(e(2//, 2//); int x; x < 6/2 bac)'round(x); //e ecuta la !uncin si(e ; determina los ,alores 2// ; 2// //declara una nue,a ,ariable //asi'na un ,alor a la ,ariable //e ecuta la !uncin bac)'round
=i se eliminara el 0untoO#Ocoma< el 0rograma dara un error. -Sensi/ilidad En nuestra lengua< :a# casos en los Aue las 0ala)ras comienzan en ma#3sculas # casos en los Aue no. Es a lo Aue se llama letra capital. Por e8em0lo< nom)res de lugares como Buenos ,ires o ,ndaluca< o nom)res 0ro0ios como Pa)lo o EnriAue< todos ellos comienzan con la letra ca0ital @0rimer letra en ma#3sculasC. Ja# di$ersos lengua8es de 0rogramacin Aue son 0ermisi$os con esto # suelen de8arlo 0asar. En el caso de Processing< se 0roduce una diferenciacin entre ma#3sculas # min3sculas< siendo Aue la correcta 9orma de escritura es en *in0sculas. Escri)ir si(e() como $i(e() 0roducira un error.
si(e(2//, 2//); =ac)'round(6/2); //->>?> 5 @a = en bac)'round est" como letra capital#
-Es-acios en 4lanco E6iste una gran $ariedad de lengua8es de 0rogramacin Aue son estrictos en cuanto a los es0acios en )lanco Aue se de8an entre cada estructura. =in em)argo< Processing se 0resta 0ara esto # le resta im0ortancia. 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 0rograma es e8ecutado< la com0utadora realiza acciones a tal $elocidad Aue es im0osi)le 0erci)irlas 0ara el o8o :umano. Por lo tanto< es im0ortante mirar la consola< no solo 0ara errores< sino tam)in 0ara entender Aue ocurre detr5s del 0rograma. ;a consola en Processing< se encuentra como un es0acio en negro de)a8o del editor de te6to. omo es mu# im0ortante entender Aue ocurre dentro del 0rograma< e6isten las 9unciones print() # println(). Estas 9unciones no en$an 0+ginas a im0rimir< ni muestran nada en la $entana de re0resentacin. =im0lemente muestran te6to en la consola. ;a consola 0uede ser usada 0ara mostrar una $aria)le< con9irmar un e$ento o c:eAuear datos e6ternos Aue est+n ingresando. ,l igual Aue los comentarios< print() # println() 0ueden :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 0uede ser di9cil 0orAue todos sus as0ectos de su u)icacin de)en ser es0eci9icados con un n3mero. uando uno est+ acostum)rado a di)u8ar con un l+0iz o 9ormas mo$indose en una 0antalla con el ratn< 0uede tomar muc:o tiem0o em0ezar a 0ensar en la relacin de la red con una 0antalla de coordenadas estrictas. ;a di9erencia 9undamental entre $er una com0osicin so)re 0a0el o en su mente # su traduccin en notacin de cdigo es mu# am0lia< 0ero mu# sencilla de entender. -%oordenadas ,ntes de :acer un di)u8o< es im0ortante Aue 0ensemos acerca del tamaGo # las caractersticas de la su0er9icie so)re la Aue $amos a di)u8ar. =i $amos a :acer un di)u8o en 0a0el< 0odemos elegir multitud de utensilios # ti0os de 0a0el. Para un es)ozo r+0ido< 0a0el de 0eridico # car)oncillo es lo m+s a0ro0iado. Para un di)u8o m+s re9inado< 0uede ser 0re9eri)le 0a0el sua$e :ec:o a mano # l+0ices. ontrariamente< cuando est+s di)u8ando en un ordenador< las o0ciones 0rinci0ales dis0oni)les son el tamaGo de la $entana # el color del 9ondo. ;a 0antalla de un ordenador es una rejilla de 0eAueGos elementos luminosos llamados 06eles. ;as 0antallas $ienen en muc:os tamaGos # resoluciones. E6isten tres ti0os di9erentes de 0antallas 0ara nuestro estudio< # todas ellas tienen un n3mero di9erente de 06eles. ;os 0ort+tiles tienen %.!.1.&&& 06eles @%.*& de anc:o 0or %&5& de altoC< las 0antallas 0lanas tienen %.3%&.!-& 06eles @%-*& de anc:o 0or %&-1 de altoC # los $ie8os monitores tienen !*..13- 06eles @%&-1 de anc:o 0or !.* de altoC. Millones de 06eles 0ueden sonar como una cantidad mu# $asta< 0ero 0roducen una 0o)re calidad $isual com0arado a un medio 9sico< como el 0a0el. ;as 0antallas modernas tienen una resolucin de a0ro6imadamente cien 0untos 0or 0ulgada< mientras Aue las im0resoras modernas 0ro$een m+s de mil 0untos 0or 0ulgada. Por otra 0arte< las im+genes en 0a0el son 9i8as< mientras Aue las 0antallas tienen la $enta8a de ser ca0aces de cam)iar su imagen muc:as $eces 0or segundo. ;os 0rogramas en Processing 0ueden controlar todos o un su/conjunto de 06eles de la 0antalla. uando 0ulsa el )otn /un< una $entana de re0resentacin se a)re # te 0ermite leer # escri)ir dentro de los 06eles. Es 0osi)le crear im+genes m+s grandes Aue la 0antalla< 0ero en la ma#ora de los casos< :aremos una $entana de re0resentacin igual o menor a la 0antalla. El tamaGo de la $entana de re0resentacin est+ controlada 0or la 9uncin si(e():
si(e(ancho, alto)
;a 9uncin si(e() tiene dos 0ar+metros: el 0rimero esta)lece el anc:o de la $entana # el segundo su alto.
//Dibu a la ,entana de representacin de 02/ de ancho ; 2./ de alto (pxeles)# si(e(02/,2./);
Fna 0osicin de la 0antalla est+ com0rendida 0or 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 i7+uierda de la $entana de re0resentacin # 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 0osiciones en la re8illa:
Fna 0osicin se escri)e con el valor del eje & seguido del valor del eje ,< se0arados 0or una coma. ;a notacin 0ara el origen es (/,/)< la coordenada (3/,3/) tiene 5& de coordenada 6 # 5& de coordenada #< # la coordenada (2/,:/) tiene -& de coordenada 6 # .& de coordenada #. =i el tamaGo de la $entana de re0resentacin es de %&& 06eles de anc:o # %&& 06eles de alto< el 06el de la esAuina su0erior izAuierda es (/,/)< el 06el de la esAuina su0erior derec:a es (77,/)< el 06el de la esAuina in9erior izAuierda es (/,77)< # el 06el de la esAuina in9erior derec:a es (77,77). Esto se $e m+s claro si usamos la 9uncin point(). -.iguras -ri*itivas Fn 0unto es el elemento $isual m+s sim0le # se di)u8a con la 9uncin point():
point(x,;)
Esta 9uncin tiene dos 0ar+metros: el 0rimero es la coordenada 6 # el segundo es la coordenada #. , menos Aue se es0eci9iAue otra cosa< un 0unto es del tamaGo de un slo 06el.
point(2/, point(0/, point(./, point(3/, point(:/, 2/); 0/); ./); 3/); :/);
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 0osi)le di)u8ar cualAuier lnea mediante una serie de 0untos< 0ero son m+s sim0les de di)u8ar con la 9uncin line(). Esta 9uncin tiene cuatro 0ar+metros< dos 0or cada e6tremo:
line(x6, ;6, x2, ;2)
;os 0rimeros dos 0ar+metros esta)lecen la 0osicin donde la lnea em0ieza # los dos 3ltimos esta)lecen la 0osicin donde la lnea termina.
line(23, 7/, D/, :/); line(3/, 62, .2, 7/); line(.3, 0/, 6D, 0:);
10
line(63, 2/, 3, D/); line(7/, :3, 3, D/);
;a 9uncin trian'le() di)u8a un tri+ngulo. 5iene seis 0ar+metros< dos 0or cada 0unto:
trian'le(x6, ;6, x2, ;2, x0, ;0)
El 0rimer 0ar de9ine el 0rimer 0unto< el segundo 0ar el segundo 0unto # el 3ltimo 0ar el tercer 0unto. ualAuier tri+ngulo 0uede ser di)u8ado conectando tres lneas< 0ero la 9uncin trian'le() :ace 0osi)le di)u8ar una 9igura con relleno. 5ri+ngulos de todas 9ormas # tamaGos 0ueden ser creados cam)iando los $alores de los 0ar+metros.
trian'le(33, trian'le(33, trian'le(56, trian'le(6:, 7, 66/, 6//, D3, 6//); 7, D3, 6//, K3, 6//); .:, 6:, 0., 5K, 6//); 0., 5K, 6//, ./, 6//);
;a 9uncin Guad() di)u8a un cuadril+tero< un 0olgono de cuatro lados. Esta 9uncin tiene oc:o 0ar+metros< dos 0or cada 0unto.
Guad(x6, ;6, x2, ;2, x0, ;0, x., ;.)
(ariando los $alores de los 0ar+metros se 0uede construir rect+ngulos< cuadrados< 0aralelogramos # cuadril+teros irregulares.
Guad(2/, 2/, 2/, K/, :/, 7/, :/, ./); Guad(2/, 2/, K/, 52/, 66/, /, :/, ./);
'i)u8ar rect+ngulos # eli0ses 9uncionan de una manera di9erente a las 9iguras $istas anteriormente. En lugar de de9inir cada 0unto< los cuatro 0ar+metros esta)lecen la 0osicin # las dimensiones de la 9igura. ;a 9uncin rect() di)u8a un rect+ngulo:
rect(x, ;, ancho, alto) rect(x, ;, ancho, alto, radio) rect(x, ;, ancho, alto, si, sa, id, ii) //1 partir de la ,ersin 2#/ //1 partir de la ,ersin 2#/
;os dos 0rimeros 0ar+metros esta)lecen la localizacin de la esAuina su0erior izAuierda< el tercero esta)lece el anc:o< # el cuarto el alto. Fse el mismo $alor de ancho # alto 0ara di)u8ar un cuadrado. ;a $ersin con el 0ar+metro radio 0ermite agregar )orde redondeados al rect+ngulo. El 0ar+metro radio corres0onde al radio de redondeo. ;a $ersin con otros cuatro 0ar+metros 0ermite agregar un radio distinto de redondeo a
11
cada esAuina. =iendo si @=u0erior IzAuierdoC< sa @=u0erior '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 eli0se en la $entana de re0resentacin:

ellipse(x, ;, ancho, alto)
;os dos 0rimeros 0ar+metros esta)lecen la localizacin del centro de la eli0se< el tercero esta)lece la anc:o< # el cuarto la altura. Fse el mismo $alor de ancho # de alto 0ara di)u8ar un crculo.
ellipse(03, /, 62/, 62/); ellipse(0D, :2, :, :); ellipse(./, 6//, K/, K/);
;a 9uncin be(ier() 0uede di)u8ar lneas Aue no son rectas. Fna cur$a Bzier est+ de9inida 0or una serie de 0untos de control # 0untos de ancla8e. Fna cur$a es di)u8ada entre dos 0untos de ancla8e< # los 0untos de control de9inen su 9orma:
be(ier(x6, ;6, cx6, c;6, cx2, c;2, x2, ;2)
Esta 9uncin reAuiere oc:o 0ar+metros 0ara de9inir cuatro 0untos. ;a cur$a se di)u8a entre el 0rimer 0unto # el cuarto< # los 0untos de control est+n de9inidos 0or el segundo # tercer 0unto. En los 0rogramas Aue se utilizan cur$as Bzier< tales como ,do)e Illustrator o InHsca0e< los 0untos de control son re0resentados 0or 0eAueGos nodos Aue so)resalen de los )ordes de la cur$a.
be(ier(02, 2/, D/, 3, D/, K3, 0/, K3); //Dibu amos 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/); //Dibu amos los puntos de control# line(D3, 2/, ./, 6/); ellipse(./, 6/, ., .); line(:/, 7/, 63, D/); ellipse(:/, 7/, ., .);
-9rden de di/ujo
El orden en Aue di)u8amos las 9iguras en el cdigo< de9ine Au 9iguras a0arecer+n so)re otras en la $entana de re0resentacin. =i di)u8amos un rect+ngulo en la 0rimera lnea de un 0rograma # una eli0se en la segunda lnea< el rect+ngulo a0arecer+ de)a8o de la eli0se cuando e8ecutemos el 0rograma. /e$irtiendo el orden< el
12
rect+ngulo se coloca arri)a.

rect(63, 63, 3/, 3/); ellipse(:/, :/, 33, 33); //1ba o //1rriba
ellipse(:/, :/, 33, 33); rect(63, 63, 3/, 3/);
//1ba o //1rriba
-:alores de grises ;os e8em0los $istos anteriormente :an usado el 9ondo 0or 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 re0resentacin con un n3mero entre & # -55. Este rango 0uede ser incmodo si no est+s 9amiliarizado con 0rogramas de di)u8o en el ordenador. El $alor -55 es )lanco # el $alor & es negro< con un rango de $alores de grises en medio. =i no se de9ine un $alor 0ara el 9ondo< se usa el $alor 0or de9ecto -&1 @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 0or de9ecto 233 @)lancoC. =i no se de9ine un $alor de contorno< se usa el $alor 0or de9ecto / @negroC.
rect(6/, 6/, !ill(2/.); stro)e(6/2); rect(2/, 2/, !ill(630); stro)e(630); rect(0/, 0/, !ill(6/2); stro)e(2/.); rect(./, ./, 3/, 3/); 3/, 3/); 3/, 3/); 3/, 3/);
uando se :a de9inido un $alor de relleno o contorno< se a0lica a todas las 9iguras di)u8adas des0us. Para cam)iar el $alor de relleno o contorno< usamos la 9uncin !ill() o stro)e() de nue$o. Fn 0ar+metro o0cional adicional 0ara !ill() o stro)e() regula la trans0arencia. 'e9iniendo el 0ar+metro a 233 :ace Aue la 9igura sea totalmente o0aca< # a / totalmente trans0arente:
bac)'round(/); !ill(233, 22/); rect(63, 63, 3/, 3/); rect(03, 03, 3/, 3/);
El relleno # el contorno de una 9igura se 0uede 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 0antalla.
Ignacio Buioli | Jaime Prez Marn 13
-1tri/utos de di/ujo ,dem+s de cam)iar los $alores de relleno # contorno de las 9iguras< tam)in es 0osi)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 des0us. =i usamos 0rimero 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 0or las 9unciones stro)eIei'ht()< stro)e*ap() # stro)eJoin(). ;a 9uncin stro)eIei'ht() tiene un 0ar+metro numrico Aue de9ine el grosor de todas las lneas di)u8adas des0us de usar esta 9uncin. ;a 9uncin stro)e*ap() reAuiere un 0ar+metro Aue 0uede ser >?&ND< $L&1>- o A>?J-*T. >?&ND redondea los 0untos 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 0ar+metro Aue 0uede ser =-M-@< CBTT-> o >?&ND. Estos 0ar+metros determinan la 9orma del contorno de la 9igura. =-M-@ corta en diagonal las esAuinas cuadradas< CBTT-> cuadra las esAuinas @es el $alor 0or de9ectoC # >?&ND redondea las esAuinas.
smooth(); stro)eIei'ht(62); stro)e*ap(>?&ND); line(2/, 0/, D/, 0/); stro)e*ap($L&1>-); line(2/, 3/, D/, 3/); stro)e*ap(A>?J-*T); line(2/, K/, D/, K/); smooth(); stro)eIei'ht(62); stro)eJoin(=-M-@); rect(62, 00, 63, 00); stro)eJoin(CBT->); rect(.2, 00, 63, 00); stro)eJoin(>?&ND); rect(K2, 00, 63, 00);
//@nea superior //@nea central //@nea in!erior
//Hi'ura i(Guierda //Hi'ura central //Hi'ura derecha
-;odos de di/ujo Por de9ecto< los 0ar+metros 0ara 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 0ar+metros 0ara di)u8ar eli0ses. ;a 9uncin ellipseCode() reAuiere un 0ar+metro Aue 0uede ser *-NT->< >1DB&$< *?>N-> o *?>N->$. El modo 0or de9ecto es *-NT->. El modo >1DB&$ tam)in usa el 0rimer # segundo 0ar+metro de ellipse() 0ara esta)lecer el centro< 0ero el tercer 0ar+metro de)er ser la mitad del anc:o< # el cuarto 0ar+metro de)e ser la mitad del alto. El modo *?>N-> :ace Aue ellipse() 9uncione de manera 0arecida a rect(). ausa Aue el 0rimer # segundo 0ar+metro se trasladen a la esAuina su0erior izAuierda del rect+ngulo Aue circunscri)e la eli0se # usa el tercer # cuarto 0ar+metro 0ara de9inir la anc:ura # la altura. El modo *?>N->$ tiene un e9ecto similar a *?>N->< 0ero causa Aue el tercer # cuarto 0ar+metro de ellipse() se de9inan en la esAuina in9erior derec:a del rect+ngulo.
14
smooth(); no$tro)e(); ellipseCode(>1DB&$); !ill(62:); ellipse(00, 00, :/, :/); !ill(233); ellipseCode(*?>N->); ellipse(00, 00, :/, :/); !ill(/); ellipseCode(*?>N->$); ellipse(00, 00, :/, :/);
//-lipse 'ris //-lipse blanca //-lipse ne'ra
on un estilo similar< la 9uncin rectCode() a9ecta a cmo se di)u8an los rect+ngulos. /eAuiere un 0ar+metro Aue 0uede ser *?>N->< *?>N->$ o *-NT->. El modo 0or de9ecto es *?>N->< # *?>N->$ causa Aue el tercer # cuarto 0ar+metro de rect() se de9inan en la esAuina contraria a la 0rimera. El modo *-NT-> causa Aue el 0rimer # segundo 0ar+metro de rect() de9inan el centro del rect+ngulo # usa el tercer # cuarto 0ar+metro 0ara el anc:o # el alto.
no$tro)e(); rectCode(*?>N->); !ill(62:); rect(./, ./, :/, :/); rectCode(*-NT->); !ill(233); rect(./, ./, :/, :/); rectCode(*?>N->$); !ill(/); rect(./, ./, :/, :/);
//>ect"n'ulo 'ris //>ect"n'ulo blanco //>ect"n'ulo ne'ro
1'
1-"ndice de Pri*itivas
12
(nidad 3
$atos) :aria/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 e8em0lo< cuando decimos Aue una 0ersona llamada Juan Prez< en su registro de conducir 9igura una M @0or gnero masculinoC sa)emos Aue ese $alor M esta asociado a la 0ersona Juan Prez. En los sistemas in9orm+ticos< los datos son guardados como n3meros # caracteres. Por e8em0lo< los ordenadores est+n constantemente reci)iendo datos del mouse # el teclado. uando se crea un 0rograma< 0ueden guardarse datos de< 0or e8em0lo< una 9orma< un color< o el cam)io constante de la 0osicin del mouse. -<i-os de datos Processing 0uede al*acenar , *odificar muc:os ti0os de datos< como n3meros< letras< 0ala)ras< im+genes< colores< 9uentes # $alores )ooleanos @ true # !alseC. El :ec:o de guardar datos im0lica un ma#or o menor uso de la memoria del ordenador donde estemos tra)a8ando. 2o es lo mismo guardar la 0ala)ra K,ndalucaL Aue guardar sim0lemente la K,L. ada dato es re0resentado como una serie de )its @& # %C. Por e8em0lo< &%&&&&%&& 0uede ser inter0retado como una letra. omo seres :umanos< no :ar+ 9alta a0render el lengua8e )inario 0ara 0rogramar< Processing se 0resta 0ara Aue el tra)a8o nos sea muc:o m+s sencillo. =in em)argo< &%&&&&&% 0uede ser inter0retado como al letra K,L o como el n3mero .5. Por lo tanto< es im0ortante de9inir Aue ti0o de dato estamos tra)a8ando. El 0rimer ti0o 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 com0letos< como 5< O%-&< * # 4*5. Processing re0resenta $aria)les de ti0o entero con int. En cam)io< los n3mero decimales< tam)in llamados de punto+flotante< crean 9racciones de los n3meros enteros como %-.*< O%-&.!5< *.333 # 4*5.*.!.513. Processing re0resenta los datos ti0o decimales con !loat. ;a $aria)le m+s sim0le en Processing es de ti0o boolean. =olo admite dos $alores true o !alse #$erdadero o falso#. =uele utilizarse cuando es necesario Aue el 0rograma tome una decisin ignorando el resto de las 0osi)ilidades. , continuacin< una ta)la con los ti0os de $aria)le # el tamaGo Aue ocu0a cada una:
2om)re
boolean b;te char int !loat color
5amaGo
6 bit D bits 6: bits 02 bits 02 bits 02 bits
/ango de (alores
true / !alse 562D a 62K / a :3303 526.K.D0:.D a 26.K.D0:.K 0#./2D20.K-40D a 5 0#./2D20.K-40D 6:KKK26: colores
-:aria/les Fna $aria)le es un contenedor 0ara guardar datos. ;as $aria)les 0ermiten Aue cada datos sea reutilizado *uc=as veces en un 0rograma. ada $aria)le tiene dos 0artes un nombre # un $alor. =i una $aria)le almacena el $alor -% # es llamada edad< el nom)re edad 0uede a0arecer muc:as $eces en el 0rograma. uando el 0rograma se e8ecute< la 0ala)ra edad cam)iar+ 0or el $alor de -%. En adicin a este nom)re # $alor< :a# Aue declarar Aue ti0o de datos so0orta esa $aria)le. Fna $aria)le de)e ser< siem0re< declarada antes de ser usada. Fna declaracin de $aria)le consta del ti0o de datos Aue ace0tar+ esa $aria)le< seguida de un nom)re creado 0or nosotros. En el siguiente e8em0lo se declaran $arios ti0os de $aria)les # se les asigna un $alor:
int x; //Declaracin de ,ariable x del tipo entero
13
!loat ;; boolean b; x < 3/; ; < 62#:; b < true;
//Declaracin de ,ariable ; del tipo !lotante //Declaracin de ,ariable b del tipo booleana //1si'nar el ,alor 3/ a la ,ariable x //1si'nar el ,alor 62#: a la ,ariable ; //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 ti0o 0ueden ser declaradas en la misma lnea # luego asignarse un $alor 0or se0arado a cada una:
!loat x, ;, b; x < 53#3:; ; < 62#:; b < K:#KD7;
uando una $aria)le es declarada< es im0ortante $er Aue clase de dato se le $a a asignar 0ara elegir correctamente el ti0o de dato. 2i el nom)re< ni el ti0o de dato 0uede ser cam)iado una $ez declarado. =i es 0osi)le reasignar otro $alor:
int x < :7; x < K/; int x < K6; //Declara ,ariable x ; le asi'na el ,alor de :7 //*ambiar el ,alor de x por K/ //->>?> O @a ,ariable x ;a existe
El sm)olo de igual @<C se utiliza 0ara 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 im0ortante 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 ti0o de datos Aue estemos mane8ando. 2o es 0osi)le asignar un ti0o de datos a una $aria)le Aue solo ace0te otra clase. Por e8em0lo< no 0odemos asignar $alores decimales a una $aria)le ti0o entero:
int x < 62#D7; !loat ! < 62#D7; int ; < !; //->>?> O @a ,ariable es tipo entero ; se le est" asi'nando un //,alor decimal //->>?> O @a ,ariable es tipo entero ; se le est" asi'nando un //,alor decimal
;as $aria)les 0ueden tener nom)res Aue descri)an su contenido. Eso sim0li9ica muc:o la tarea a la :ora de 0rogramar. ,dem+s< esto 0odra a#udar a reducir la cantidad de comentarios. ,3n as< Aueda en el 0rogramador elegir Aue clase de nom)res utilizar. Por e8em0lo< 0ara $aria)les de tem0eratura< se 0odran utilizar los siguientes nom)res:
t temp temperatura
16
temp*uarto temperatura*uarto
;a 0rimer letra tiene Aue ser un car+cter en min3sculas< las siguientes 0ueden ser 0r+cticamente cualAuier cosa. ,3n as< no se admiten acentos en ninguna 0arte del cdigo. -:aria/les de Progra*a Processing< como lengua8e< :a construido $aria)les mu# 3tiles Aue #a $ienen 0reO0rogramadas< 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 re0resentacin est+n almacenadas como $aria)les denominadas Nidth #ancho# # hei'ht #alto#< res0ecti$amente. =i el 0rograma no inclu#e si(e()< 0or de9ecto Nidth # hei'ht adAuieren el $alor de %&&.
println(Nidth 4 , 4 hei'ht); si(e(0//, 2//); println(Nidth 4 , 4 hei'ht); //Bmprime 6//, 6// en la consola //Bmprime 0//, 2// en la consola
"recuentemente son usadas cuando se reAuiere mantener la escritura del 0rograma en di9erentes escalas # Aue estas sean 0ro0orcionales.
si(e(6//, 6//); ellipse(Nidth * /#3, hei'ht * /#3, Nidth * /#::, hei'ht * /#::); line(Nidth * /#3, /, Nidth * /#3, hei'ht);
18
(nidad 4
;ate*5ticas) .unciones 1rit*"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 am0lios conocimientos en matem+ticas 0uede ser im0ortante a la :ora de 0rogramar. =in em)argo< no es necesario ser un )asto conocedor de la misma 0ara dis9rutar de la 0rogramacin. Ja# muc:as 9ormas # estilos 0ara 0rogramar< # cada Auien elige indi$idualmente a Aue as0ectos otorgarles un ma#o grado de minuciosidad # a cuales descuidarlos un 0oco. Es mu# com3n Aue aAuellos Aue tu$ieron una cantidad ele$ada de matem+ticas en la escuela @0or e8em0lo< 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 0resta a la matem+tica desde un as0ecto m+s tranAuilo. =i )ien 0ueden realizarse com0le8as o0eraciones< tam)in 0ueden lograrse resultados similares con una matem+tica m+s intuiti$a. En esta clase de manuales< se e60lican 9unciones aritmticas sencillas 0ara lograr grandes resultados< 0uesto 9unciones de ma#or com0le8idad caen 9uera de los o)8eti$os de este li)ro. -1rit*"tica En 0rogramacin< las 0ro0iedades $isuales de una imagen son asignadas 0or n0*eros. Esto Auiere decir Aue 0odemos controlarlas de 9orma aritmtica. El siguiente es un claro e8em0lo de eso:
int 'risMal < 630; !ill('risMal); rect(6/, 6/, 33, 33); 'risMal < 'risMal 4 6/2; !ill('risMal); rect(03, 0/, 33, 33);
//Dibu a un rect"n'ulo 'ris //1si'na 233 a 'risMal //Dibu a un rect"n'ulo blanco
Ftilizando los o0eradores de suma< resta< multi0licacin # di$isin< 0odemos controlar< 0or e8em0lo< la 0osicin de los elementos. El signo 4 se utiliza 0ara la suma< el signo O 0ara la resta< el signo * 0ara la multi0licacin # el signo / 0ara la di$isin.
int a < 0/; line(a, /, a, hei'ht); a < a 4 ./; //1si'na K/ a la ,ariable a stro)eIei'ht(.); line(a, /, a, hei'ht); int a < 0/; int b < ./; line(a, /, a, hei'ht); 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
20
int a < D; int b < 6/; line(a, /, a, hei'ht); line(b, /, b, hei'ht); stro)eIei'ht(.); line(a * b, /, a * b, hei'ht); int a < D; int b < 6/; line(a, /, a, hei'ht); line(b, /, b, hei'ht); stro)eIei'ht(.); line(a / b, /, a / b, hei'ht); int ; < line(/, ; < ; 4 line(/, ; < ; 4 line(/, ; < ; 4 line(/, 2/; ;, Nidth, :; ;, Nidth, :; ;, Nidth, :; ;, Nidth,
;); ;); ;); ;); //1si'na 2: a la ,ariable ; //1si'na 02 a la ,ariable ; //1si'na 0D a la ,ariable ;
;os signos 4< 5< *< / # < 0osi)lemente sean mu# 9amiliares< 0ero el signo P es muc:o m+s e6tico. El o0erador P es el de mdulo. 'etermina cuando un n3mero es di$idido 0or otro< o sea< da como resultado el resto del mismo. El n3mero a la derec:a es di$idido 0or el Aue 0ongamos a la izAuierda. 'e$ol$er+ como resultado el resto de la o0eracin.
E60resin
7 P 0 7 P 2 03 P .
/esultado
/ 6 0
E60licacin El 3 solo entra tres $eces en el 4< no so)ra nada. El - solo entra cuatro $eces en el 4< so)ra %. El 1 entra oc:o $eces en el 35< so)ra 3.
=in muc:os 0ro)lemas< 0uede e60licarse m+s claramente con un cuento. uatro 0ersonas est+n :am)rientas # $an a comer 0anes a un restaurante. =i :a# solo 35 0anes< entonces esas 1 0ersonas solo 0odr+n comer * 0anes cada uno< # so)rar+n 3 0anes. Eso Aue so)ra es el resultado del mdulo. Ja# muc:os usos 0ara el mdulo< como 0or e8em0lo sa)er cuando un n3mero es 0ar o im0ar. =in em)argo< en Processing es mu# com3n utilizarlo 0ara mantener a los n3meros en rango. Por e8em0lo< si una $aria)le sigue increment+ndose @%< -< 3< 1< 5< .< !< *...C< el mdulo 0uede con$ertirla en una secuencia. Fn incremento continuo 0uede con$ertirse en un ciclo entre & # 3 0or a0licar P 1:
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 e8em0los a lo largo de las e60licaciones usar+n el mdulo de esta 9orma. ,l tra)a8ar con o0eraciones matem+ticas # $aria)les< es im0ortante tener en claro Aue ti0o de datos estamos mane8ando. ;a com)inacin de dos enteros @ intC nos dar+ como resultado otro entero. ;a com)inacin de dos decimales @!loatC siem0re nos dar+ como resultado un decimal. Pero la com)inacin de un entero @ intC con un decimal @!loatC siem0re nos dar+ un n3mero decimal< a 0esar de la o0eracin diera un resultado e6acto. Es im0ortante ser cuidadoso al momento de com)inar ti0os de datos 0ara e$itar errores:
21
int i < .; !loat ! < 0#/; int a < i / !; !loat b < i / !;
//->>?> O Bmposible asi'nar un nEmero decimal a una //,ariable tipo entero //1si'na 6#000000. a la ,ariable b del tipo !lotante
Es tam)in im0ortante 0restar atencin a algunos conce0tos matem+ticos< como 0or e8em0lo el conce0to de lmite< donde un n3mero di$idido 0or cero tiende a infinito. En esos casos el 0rograma 0roducir+ un error:
int a < /; int b < 62 / a; //->>?> O -xcepcin Catem"ticaF producida por el cero#
-Prioridad en el 9-erador> 1gru-acin ;a 0rioridad del ordenador determina Aue o0eraciones se realizan antes +ue otras. Esto es de gran im0ortancia #a Aue 0uede ser determinante 0ara nuestro resultado. Por e8em0lo< la e60resin 0 4 . * 3< nos dar+ como resultado 20< 0uesto Aue tiene 0rioridad la multi0licacin. Primero< . * 3 resultar+ en 2/ # a continuacin se le sumar+ 0< dando 0or resultado 20. ;a 0rioridad 0uede ser cam)iada agregando 0arntesis. =i tu$iramos la e60resin (0 4 .) * 3< entonces la 0rioridad estara en la suma< dando como resultado 9inal 35.
x < 0 4 . * 3; ; < (0 4 .) * 3 //1si'na 20 a la ,ariable //1si'na 03 a la ,ariable
;a siguiente ta)la< a modo e60licati$o< muestra Aue elementos tiene 0rioridad so)re otros. =iendo< 0ues< Aue los Aue se encuentran mas arri)a< tiene mas 0rioridad Aue los Aue est+n de)a8o:
Multi0licati$os ,diti$os ,signacin * 4 < / 5 P
-1tajos uando 0rogramamos< recurrimos muc:o a estructuras cclicas. Muc:as $eces es necesario utilizar ata8os de escritura 0ara reducir el tamaGo del cdigo # Aue sea mas legi)le. El o0erador de incremento es 44< mientras Aue el de decremento es 55. ,m)os son usados como ata8os de suma # resta.
int x < 6; x44; println(x); int ; < 6; ;55; println(;); //-Gui,ale a x < x 4 6; //Bmprime 2 //-Gui,ale a ; < ; 5 6; //Bmprime /
=i dese+ramos Aue se actualic el $alor antes de la e60resin< solo cam)iaremos de lugar el o0erador de incrementoBdecremento:
int x < 6; println(44x); println(x); //Bmprime 2 //Bmprime 2
,l asignar el o0erador de suma con el o0erador de asignacin @ 4<C o)tendremos el o0erador de suma
asignada. En el caso de com)inar el de resta con el de asignacin @ 5<C o)tendremos el o0erador de resta asignada:
int x < 6; println(x); x 4< 3; println(x); int ; < 6; println(;); ; 5< 3; println(;); //Bmprime 6 //-Gui,ale a x < x 4 3; //Bmprime : //Bmprime 6 //-Gui,ale a ; < ; 5 3; //Bmprime 5.
,l asignar el o0erador de multi0licacin con el o0erador de asignacin @ *<C o)tendremos el o0erador de multi0licacin asignada. En el caso de com)inar el de di$isin con el de asignacin @ /<C o)tendremos el o0erador de di$isin asignada:
int x < .; println(x); x *< 2; println(x); int x < .; println(x); x /< 2; println(x); //Bmprime 6 //-Gui,ale a x < x * 2; //Bmprime D //Bmprime 6 //-Gui,ale a x < x / 2; //Bmprime 2
El o0erador de negacin @5C es utilizado cuando deseamos cam)iar el signo @0ositi$oBnegati$oC de alg3n n3mero:
int x < 3; x < 5x; println(x); //-Gui,ale a x < x * 56 //Bmprime 53
-?i*itando @0*eros ;as 9unciones ceil()< !loor()< round()< min() # max() son utilizadas 0ara 0er9eccionar las o0eraciones matem+ticas. ;a 9uncin ceil()< redondea un n3mero decimal con$irtindolo en un entero. ;o con$ierte en el $alor igual o ma#or. /edondea :acia arri)a.
int int int int x ; N ( < < < < ceil(2#/); ceil(2#6); ceil(2#3); ceil(2#7); //1si'na //1si'na //1si'na //1si'na 2 0 0 0 a a a a x ; N (
;a 9uncin !loor()< redondea un n3mero decimal con$irtindolo en un entero. ;o con$ierte en el $alor igual o menor. /edondea :acia a)a8o.
int int int int x ; N ( < < < < !loor(2#/); !loor(2#6); !loor(2#3); !loor(2#7); //1si'na //1si'na //1si'na //1si'na 2 2 2 2 a a a a x ; N (
;a 9uncin round()< redondea un n3mero decimal con$irtindolo en un entero. ;o con$ierte en un entero ma#or o menor< de0endiendo el decimal. =i el decimal es menor a .5< entonces redondea :acia a)a8o. =i el decimal es ma#or o igual a .5< redondea :acia arri)a.
23
int int int int
x ; N (
< < < <
round(2#/); round(2#6); round(2#3); round(2#7);
//1si'na //1si'na //1si'na //1si'na
2 2 0 0
a a a a
x ; N (
,dem+s< las 9unciones ceil()< !loor() # round() 9uncionan con $aria)les ti0o decimales. , 0esar de no ser mu# 3til< 0uede 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 0ara determinar el n3mero ma#o o menor de una secuencia. ,m)as 9unciones 0ueden admitir dos o tres 0ar+metros.
int u < min(3, 7); !loat t < min(62#:, K#D7) int , < min(., DD, :3); int ; < max(3, 7); !loat x < max(62#:, K#D7) int N < max(., DD, :3); //1si'na 3 a u //1si'na K#D7 a t //1si'na . a , //1si'na 7 a ; //1si'na 62#: a x //1si'na DD a N
24
(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 0rograma corre< lo :ace en el orden en Aue u)icamos la lneas. Primero la 0rimer lnea< luego la segunda< luego la tercera< # as. El 0rograma 9inaliza cuando lee la 3ltima lnea. Muc:as $eces< # 0ara agregar inters< es necesario Aue esta lectura se Auie)re. , ese orden suele llam+rselo flu'o. E6isten< entonces< estructuras de control 0ara rom0e el 9lu8o del 0rograma. -E&-resiones Aelacionales PDu es la $erdadQ Esta gran cuestin 9ilos9ica es mu# sencilla de res0onder en la 0rogramacin. =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 consista realmente de una K$erdadL. =in em)argo< si en la lgica del 0rograma eso es una $erdad< entonces el 0rograma de$ol$er+ un $alor true< de lo contrario de$ol$er+ un $alor !alse. 5an sencillo como 0ensarlo en una nocin de % # &.
E60resin
0 0 3 3 9 8 9 8 3 3 0 0
E$aluacin
true !alse !alse true
ualAuiera de estas e60resiones 0uede leerse en es0aGol. PEl n3mero tres es menor al n3mero cincoQ =i la res0uesta es KsiL e60resa el $alor true @$erdaderoC. ,l com0ararse dos $alores con una e60resin relacional< solo 0ueden dar dos resultados 0osi)les: true o !alse. , continuacin< una ta)la con los $alores relacionales # su signi9icado:
70erador
8 9 8< 9< << Q<
=igni9icado
Ca;or Gue Cenor Gue Ca;or o i'ual a Cenor o i'ual a B'ual a Distinto de
;as siguientes lneas de cdigo muestran el resultado de com0rar dos $alores con una e60resin relacional:
println(0 8 println(3 8 println(3 8 println(0 9 println(3 9 println(3 9 println(0 8< println(3 8< println(3 8< println(0 9< println(3 9< println(3 9< 3); 0); 3); 3); 0); 3); 3); 0); 3); 3); 0); 3); //Bmprime !alse //Bmprime true //imprime !alse //Bmprime true //Bmprime !alse //imprime !alse //Bmprime !alse //Bmprime true //imprime true //Bmprime true //Bmprime !alse //imprime true
2'
El o0erador de igualdad @<<C determina si los dos $alores Aue se e$al3an son eAui$alentes. 'e$uel$e true si la igualdad se cum0le. En cam)io< el o0erador de di9erenciacin @ Q<C e$al3a si dos $alores no son eAui$alentes. 'e$uel$e true si la desigualdad se cum0le.
println(0 << println(3 << println(3 << println(0 Q< println(3 Q< println(3 Q< 3); 0); 3); 3); 0); 3); //Bmprime !alse //Bmprime !alse //imprime true //Bmprime true //Bmprime true //imprime !alse
-Estructuras %ondicionales ;as estructuras condicionales le 0ermiten a un 0rograma sa)er Aue lnea de cdigo e8ecutar # cuales no. ;as lneas de cdigo solo ser+n K$isi)lesL 0ara el 0rograma si se cum0le una condicin. Permiten al 0rograma di9erenciar acciones de0endiendo el $alor de $aria)les. Por e8em0lo< el 0rograma di)u8a una lnea o una eli0se de0endiendo el $alor de una $aria)le. ;as estructura BH es usada en Processing 0ara tomar esas decisiones:
i!(condicin)R acciones; S
;a condicin de)e ser una e60resin Aue se resuel$e con true o !alse. =i la condicin es true< el cdigo Aue este desde la a0ertura del corc:ete @ R C :asta el cierre del mismo @ S C< se e8ecuta. En caso de ser !alse< el 0rograma directamente no KleeL las acciones. ;os siguientes tres e8em0los 0retenden 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 e ecutar" 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:); //dibu a una elipse S i!(x 9 6//)R //si es menor Gue 6// rect(03, 03, 0/, 0/); //dibu a un rect"n'ulo S line(2/, 2/, D/, D/); //@as condiciones son x 8 6// ; x 9 6// //*omo el ,alor de x es 3/ //se e ecutar" el se'undo bloGue BH //; se eliminar" lo Gue ocurre en el primero int x < 3/; i! (x 8 6//)R //si es ma;or Gue 6// ellipse(3/, 3/, 0:, 0:); //dibu a una elipse S i!(x 9 6//)R //si es menor Gue 6// rect(03, 03, 0/, 0/); //dibu a un rect"n'ulo S line(2/, 2/, D/, D/);
22
//@as condiciones son x 8 6// ; x 9 6// //*omo el ,alor de x es 6// //no se e ecutar" lo Gue ocurre en nin'una estructura BH int x < 6//; i! (x 8 6//)R //si es ma;or Gue 6// ellipse(3/, 3/, 0:, 0:); //dibu a una elipse S i!(x 9 6//)R //si es menor Gue 6// rect(03, 03, 0/, 0/); //dibu a un rect"n'ulo S line(2/, 2/, D/, D/);
En el caso es0ec9ico 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< 0ermitiendo agregar acciones cuando la condicin de$uel$e un resultado !alse.
int x < 7/; //*omo x ,ale 7/, dibu ar" un rect"n'ulo i! (x 8 6//)R //si es ma;or Gue 6// ellipse(3/, 3/, 0:, 0:); //dibu a una elipse S else R //sino, rect(03, 03, 0/, 0/); //dibu a un rect"n'ulo S line(2/, 2/, D/, D/); //siempre dibu a una lnea int x < 27/; //*omo x ,ale 27/, dibu ar" una elipse i! (x 8 6//)R //si es ma;or Gue 6// ellipse(3/, 3/, 0:, 0:); //dibu a una elipse S else R //sino, rect(03, 03, 0/, 0/); //dibu a un rect"n'ulo S line(2/, 2/, D/, D/); //siempre dibu a una lnea
;as condicionales 0ueden ser KencadenadasL una dentro de otra 0ara tener com0leto control de las lneas de cdigo. En el siguiente e8em0lo 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 dibu ar 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.); //dibu a un rect"n'ulo Selse i! (x 8 0//)R //$ino, si es ma;or a 0// ellipse(3/, 3/, 0:, 0:); //dibu a una ellipse S else R //$ino, line(3/, /, 3/, 6//); //dibu a una lnea S
23
-9-eradores ?gicos ;os o0eradores lgicos se utilizan al com)inar dos o mas e60resiones relacionales # 0ara in$ertir los $alores lgicos. ;os sm)olos de los o0eradores lgicos corres0onden a los conce0tos de N< 7 # 27.
70erador
UU TT Q
=igni9icado
V ? N?
;a siguiente ta)la muestra todas las o0eraciones 0osi)les # los resultados:

E60resin
true UU true true UU !alse !alse UU !alse true TT true true TT !alse !alse TT !alse Qtrue Q!alse
E$aluacin
true !alse !alse true true !alse !alse true
El o0erador lgico 7 @TTC< :ace Aue el $alor sea un true solo si una 0arte de la e60resin 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/ dibu a una line(2/, 3/, D/, 3/); //lnea# *omo ambas condiciones //se cumples, se S //dibu a la lnea i!((a 8 63) TT (b 9 0/))R //$i a es ma;or a 63 o b es menor //a 0/, dibu ar una ellipse(3/, 3/, 0:, 0:);//elipse# $olo una de las //condiciones se cumplen, se S //dibu a la elipse
;os 0rocesos de lgica se desco*-onen en -asos. ;os 0arntesis son utilizados 0ara delimitar las com0onentes # as si*-lificar el tra)a8o. En las siguientes lneas se muestra un )re$e 0aso a 0aso de como de)e inter0retarse:
Aaso Aaso Aaso Aaso 6 2 0 . (a 8 3) TT (b 9 0/) (6/ 8 3) TT (2/ 9 0/) true TT true true
El o0erador lgico N @UUC< :ace Aue el $alor sea true solo si am)as e60resiones son true.
int a < 6/; int b < 2/; i!((a 8 3 ) UU (b 9 0/))R line(2/, 3/, D/, 3/);
//$i a es ma;or a 3 ; b es menos //a 0/ dibu ar una //lnea# *omo ambas condiciones
26
S i!((a 8 63) UU (b 9 0/))R
//se cumples, se //dibu a la lnea //$i a es ma;or a 63 ; b es menor //a 0/ dibu ar una ellipse(3/, 3/, 0:, 0:);//elipse# $olo una de las //condiciones se cumplen, //N? se dibu a la elipse
El o0erador lgico 27 @QC es una marca. =im0lemente invierte el $alor lgico. Por e8em0lo< si se trata de un $alor true< al escri)ir Qtrue< estaramos con$irtiendo su $alor en !alse. =olo es 0osi)le a0licarlo a una $aria)le del ti0o boolean.
boolean b < true; println(b); b < Qb; println(b); println(Qb); println(3 8 0); println(Q(3 8 0)); int x < 2/; println(Qx); //Bmprime true //Bmprime //Bmprime //Bmprime //Bmprime !alse true true !alse
//->>?> O $olo puede aplicarse a ,ariables boolean
28
1-"ndice de Estructura I., E?SE , E?SE-I.
30
(nidad 2
%ontrol) Ae-eticin
!or
;a )re$e :istoria Aue 0oseen los ordenadores nos remonta a su antigua 9uncin Aue era realizar c+lculos $elozmente. ,ctualmente< las com0utadoras emergen como m+Auinas Aue 0ueden realizar ecuaciones matem+ticas mu# com0le8as a una incre)le $elocidad. ;os antiguos ordenadores eran distri)uidos como m+Auinas Aue 0oda realizar 0recisas # r+0idas ecuaciones re0etiti$as. -Iteracin ;as estructuras re0etiti$as son encargas de 0roducir iteraciones. Es decir< a tra$s de 0ocas lneas de cdigo se 0uede re-etir< 0r+cticamente< in9initas $eces una misma lnea de cdigo. Esto a#uda a un me8or rendimiento del 0rograma< 0ero es0ecialmente a un me8or rendimiento del 0rogramador< Aue con sim0les estructuras 0uede reducir nota)lemente el tiem0o #< 0or ende< errores. =e utiliza una estructura denominada estructura H?>< la cual es encargada de re0etir un ciclo las $eces Aue Aueramos. En el siguiente e8em0lo se muestra el original cdigo< com0uesto de unas %1 lneas< # la $ersin con el ciclo H?> com0uesto tan solo de 1:
si(e(2//, 2//); line(2/, 2/, 2/, 6D/); line(0/, 2/, 0/, 6D/); line(./, 2/, ./, 6D/); 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/);
digo 7riginal
digo utilizando un "7/
si(e(2//, 2//); !or (int i < 2/; i 9 63/; i 4< 6/) R line(i, 2/, i, 6D/); S
;a estructura H?> 0er9ecciona las re0eticiones< 0udiendo sim0li9icarse su cdigo )+sico en esta sim0le # 9uncional estructura:
!or(iniciador, condicin, actuali(acin)R acciones; S
;os 0arntesis asociados a esta estructura corres0onden a tres acciones internas: iniciador< condicin # actuali(acin. ;as acciones dentro del )loAue del cdigo se e8ecutan constantemente< siem0re # 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 0asos en un H?> son los siguientes:
%O El iniciador comienza a e8ecutarse -O ;a condicin e$al3a si es true o !alse 3O =i la condicin es true< contin3a en el 0aso 1< si es !alse< 0asa al 0aso . 1O E8ecuta las acciones en el )loAue 5O E8ecuta la actualizacin # 0asa al 0aso Ignacio Buioli | Jaime Prez Marn 31
.O =ale de la estructura # contin3a e8ecutando el resto del 0rograma
;os siguientes e8em0los muestran di$ersas 9ormas de uso de la estructura H?> en un 0rograma:
// -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" e ecut"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 1nidada ;a estructura H?> 0roduce re0eticiones en una dimensin. ,nidando iteraciones 0odemos crear e9ectos sumamente interesantes. Por e8em0lo< teniendo tan solo dos coordenadas de 0untos< si los anidamos en una estructura H?>< 0odemos cam)iar una sim0le 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
32
!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 0ara crear 9ondos< te6turas # los conocidos patterns. ;os n3meros 0roducidos 0or las $aria)les de control de re0eticiones 0ueden a0licarse a la 0osicin< al color< al tamaGo< a la trans0arencia 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 im0ortante el es0acio entre las estructura 0ara 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 0rograma se :ace largo una clara lectura es ideal en esta clase de estructuras. En este li)ro utilizamos la siguiente con$encin de es0acios 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
33
line(2/, 2/, D/, D/); S else R line(2/, D/, D/, 2/); S
Es esencial utilizar un 9ormato lim0io 0ara 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 siem0re 0uede utilizarse la :erramienta -Auto .ormat/ 0ara lim0iar el cdigo cuando se lo necesite.
34
1-"ndice de Estructura .9A
3'
(nidad 3
.or*as) :"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 0otente. 2o o)stante< un 0rogramador 0uede $alerse de sim0les ecuaciones Aue le 0ermiten crear 9iguras mas com0le8as. Na no estamos :a)lando de 9iguras 0rimiti$as< Aue solo reci)en coordenadas en 6 # en #< sino de 9iguras de ma#or com0le8idad construidas a )ase de $rtices.
Estas 9iguras son realmente sim0les en com0aracin a las 0osi)ilidades Aue o9rece. En los $ideoO8uegos actuales< se utilizan a0ro6imadamente una media de 1'000 $rtices< lo Aue con$ierte a esta :erramienta como una 9uncin im0rescindi)le en 0rogramacin. -:"rtice Para crear una 9igura :ec:a con $rtices< utilizaremos< en 0rinci0io< la 9uncin be'in$hape()< des0us de9iniremos cada 0unto @$rticeC con la 9uncin ,ertex()1 #< 9inalmente< com0letaremos la 9igura con end$hape(). ;as 9unciones de be'in$hape() # end$hape() siem0re de)en usarse en 0ares. ;os 0arntesis de la 9uncin ,ertex() ace0tan dos 0ar+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 0ara controlar la $isualizacin de la 9igura. Para cerrar la 9igura< 0uede 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 e8em0lo es e6actamente igual Aue el e8em0lo anterior< solo Aue se :an in$ertido el tercer $rtice 0or el cuarto:
32
noHill(); be'in$hape(); ,ertex(0/, 2/); ,ertex(D3, 2/); ,ertex(0/, K3); ,ertex(D3, K3); end$hape();
,Gadiendo mas $rtices # 9ormatos se 0uede 0otenciar de manera incre)le la 0otencia $isual. 5am)in< como se $io antes< se 0uede utilizar la estructura H?> 0ara 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 com0le8a 0uede ser com0uesta 0or miles de $rtices< 0ero :a# Aue tener en cuenta Aue muc:os $rtices 0odran :acer m+s lento al 0rograma. -Puntos , ?Bneas ;a 9uncin be'in$hape() 0uede ace0tar di$ersos 0ar+metros Aue sir$en 0ara de9inir datos en los $rtices. ;os mismos $rtices 0ueden ser usados 0ara crear 9iguras sin relleno o lneas continuas. ;as constantes A?BNT$ # @BN-$ son usadas 0ara de9inir la con9iguracin de 0untos # lneas dentro de una 9igura.
33
//Dibu a un punto en cada ,%rtice be'in$hape(A?BNT$); ,ertex(0/, 2/); ,ertex(D3, 2/); ,ertex(D3, K3); ,ertex(0/, K3); end$hape(); //Dibu a 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 0odemos con9igurar 0untos # 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 es0acial de la 9igura # el orden en Aue 0onemos 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);
36
,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 0ara crear 9iguras a )ase de lneas< 0ero si Aueremos crear una cur$a< necesitamos $alernos de las 9unciones cur,eMertex() # be(ierMertex(). Estas 9unciones 0ueden usarse entre be'in$hape() # end$hape()< siem0re # cuando be'in$hape() no tenga ning3n 0ar+metro. ;a 9uncin cur,eMertex() es usada 0ara conectar dos 0untos con una cur$a. =e le en$an dos 0ar+metros:
cur,eMertex(x, ;)
El 0rimero # el 3ltimo cur,eMertex()< 8unto con be'in$hape() # end$hape()< act3an como 0untos de control. ;a cur$atura de cada segmento es calculada 0or los cur,eMertex() Aue :a# en medio de los 0untos de control:
smooth(); noHill(); be'in$hape(); cur,eMertex(2/, cur,eMertex(2/, cur,eMertex(0/, cur,eMertex(./, cur,eMertex(D/, end$hape();
D/); ./); 0/); D/); D/);
//*6 //M6 //M2 //M0 //*2
En cam)io< cada be(ierMertex() de9ine la 0osicin de dos 0untos de control # de un 0unto de ancla8e.
be(ierMertex(cx6, c;6, cx2, c;2, x, ;)
El 0rimer be(ierMertex() se u)ica 8unto con el be'in$hape(). ,nteriormente al be(ierMertex()< de)emos 0oner un ,ertex()< Aue de9inir+ el 0rimer 0unto ancla. ;a cur$a se 9orma entre 0unto ,ertex() # las coordenadas x e ; Aue se le en$an a be(ierMertex(). ;os 0rimeros cuatro 0ar+metros restantes de be(ierMertex() corres0onden al control de la cur$atura de la 9igura.
noHill(); be'in$hape(); ,ertex(02, 2/); be(ierMertex(D/, 3, end$hape();
D/, K3,
0/, K3);
//M6 //*6, *2, M2
38
Para cur$as mas com0le8as< es necesario agregar una ma#or cantidad de be(ierMertext()< # 0ar+metros de 9ormato:
smooth(); noHill(); be'in$hape(); ,ertex(63, 0/); be(ierMertex(2/, 53, K/, 3, ./, 03); be(ierMertex(3, K/, .3, 6/3, K/, K/); end$hape(); smooth(); no$tro)e(); be'in$hape(); ,ertex(7/, 07); be(ierMertex(7/, 07, 3., 6K, 2:, D0); be(ierMertex(2:, D0, 7/, 6/K, 7/, 07); end$hape(); smooth(); noHill(); be'in$hape(); ,ertex(63, ./); be(ierMertex(3, /, D/, /, 3/, 33); ,ertex(0/, .3); ,ertex(23, K3); be(ierMertex(3/, K/, K3, 7/, D/, K/); end$hape();
//M6 //*6, *2, M2 //*0, *., M0
//M6 //*6, *2, M2 //*0, *., M0
//M6 //*6, *2, M2 //M0 //M. //*0, *., M3
El tra)a8o con cur$as del ti0o Bzier suele ser mu# com0licado< tan solo 0ara di)u8ar unas 0ocas cur$as. 'e0endiendo la di9icultad de lo Aue se 0retenda di)u8ar< a $eces es 0re9eri)le o0tar 0or la o0cin Aue sea m+s sencilla. =in em)argo< :a# contri)uciones de usuarios mu# 3tiles Aue 0odran ser de gran a#uda. Entre una de ellas se encuentra la Bzier 5ool @Aue 0uede descargarse desde http:##processing.org#reference#tools# C la cual nos da un sim0le entorno de tra)a8o $isual< donde 0odemos di)u8ar cur$as Bzier como si 9uese un 0rograma de gr+9icos $ectoriales @como ,do)e Illustrator o InHsca0eC. ,l 9inalizar nuestro di)u8o< 0odemos co0iarlo # 0egarlo en nuestro entorno de tra)a8o en 9orma de cdigo. ;o con$ierte en una :erramienta de suma utilidad cuando se 0retende tra)a8ar con cur$as del ti0o Bzier.
40
1-"ndice de :"rtices
41
1-"ndice de %urvas
42
(nidad 6
;ate*5ticas) %urvas
sG(), sGrt(), poN(), norm(), lerp(), map()
;as ecuaciones de matem+tica )+sica 0ueden ser usadas 0ara di/ujar la -osicin , varios atri/utos de una 9orma. Esas ecuaciones :an sido discutidas 0re$iamente. Estas ecuaciones se utilizan 0ara acelerar o desacelerar las 9ormas en mo$imiento # su recorrido a )ase de cur$as. -E&-onentes , AaBces ;a 9uncin sG() se utiliza 0ara calcular el cuadrado de un n3mero. 7 sea< ese mismo n3mero multi0licado 0or s mismo. omo )ien se sa)e< aunAue el n3mero sea negati$o< de$ol$er+ un resultado 0ositi$o. ,ce0ta solo un $alor como 0ar+metro:
sG(,alor)
El $alor 0uede ser cualAuier n3mero. uando sG() es usado< el $alor 0uede ser asignado a una $aria)le:
!loat a < sG(6); !loat b < sG(53); !loat c < sG(7); //1si'na 6 a la ,ariable aF -Gui,ale a 6 * 6 //1si'na 23 a la ,ariable bF -Gui,ale a 53 * 53 //1si'na D6 a la ,ariable cF -Gui,ale a 7 * 7
;a 9uncin sGrt() se utiliza 0ara calcular la raiz cuadrada de un n3mero. 7 sea< el numero Aue multi0licado 0or s mismo da determinado $alor. =olo 0ermite $alores 0ositi$os. =i el n3mero ingresado es negati$o< Processing de$ol$er+ un NaN @2ot a 2um)erC. Esto se de)e a Aue< matem+ticamente< no es 0osi)le o)tener la raz cuadrada de un n3mero negati$o. ,ce0ta solo un $alor como 0ar+metro:
sGrt(,alor)
El $alor 0uede ser cualAuier n3mero. uando sGrt() es usado< el $alor 0uede ser asignado a una $aria)le:
!loat a < sGrt(:3:6); !loat b < sGrt(:23); !loat c < sGrt(6); //1si'na D6 a la ,arible a //1si'na 23 a la ,ariable b //1si'na 6 a la ,ariable c
;a 9uncin poN() es usada 0ara calcular un n3mero ele$ado 0or el e60onente Aue uno desee. ,ce0ta dos 0ar+metros:
poN(nEmero, exponente)
El n2mero es aAuel n3mero a multi0licar. El e(ponente es la cantidad de $eces Aue se $a a multi0licar.

!loat !loat !loat !loat a b c d < < < < poN(6, 0); poN(0, .); poN(0, 52); poN(50, 0); //1si'na //1si'na //1si'na //1si'na 6#/ a la ,ariable aF -Gui,ale a 6*6*6 D6#/ a la ,ariable bF -Gui,ale a 0*0*0*0 /#66 a la ,ariable cF -Gui,ale a 6 / 0*0 52K#/ a la ,ariable dF -Gui,ale a 50*50*50
ualAuier n3mero @e6ce0to &C Aue es ele$ado a la & da como resultado %. =i se ele$a 0or % da como resultado el mismo n3mero:
!loat a < poN(D, /); !loat b < poN(0, 6); !loat c < poN(., 6); //1si'na 6 //1si'na 0 //1si'na .
43
-@or*ali7acin , ;a-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 multi0licados entre s< nunca dar+ un resultado menor a &.& ni ma#or a %.&. Esto 0ermite multi0licar un n3mero 0or otro o 0or 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 ti0o !loat si lo reAuerimos. Para normalizar un n3mero< de)eremos di$idirlo 0or el m+6imo $alor del rango:
(alor Inicial
/#/ 6/2#/ 233#/ /#/ / 233#/ 6/2#/ / 233#/ 233#/ / 233#/
+lculo
(alor 2ormalizado
/#/ /#. 6#/
Podemos< 0ues< sim0li9icar la tarea con la 9uncin norm(). Esta ace0ta tres 0ar+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 com0onen el rango a utilizar. =i el resultado est+ 9uera de rango resultar+ en n3mero menor Aue & o ma#or Aue %.
!loat x < norm(/#/, /#/, 233#/); !loat ; < norm(6/2#/, /#/, 233#/); !loat ( < norm(233#/, /#/, 233#/); //1si'na /#/ a x //1si'na /#. a ; //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 e8em0lo< si normalizamos un n3mero su $alor se encontrar+ entre &.& # %.&< al multi0licar ese n3mero 0or 5&&.& o)tendremos un $alor normalizado entre un rango de &.& # 5&&.&. Para normalizar n3meros Aue est+n entre &.& # %.&< a un rango de -&&.& # -5&.&< es necesario multi0licar 0rimero 0or 5& # luego sumarle -&&.
/ango Inicial
/#/ a 6#/ /#/ a 6#/ /#/ a 6#/
/ango 'eseado
/#/ a 233#/ 56#/ a 6#/ 52/#/ a :/#/
x * 233#/ (x * 2#/) 5 6#/ (x * D/#/) O 2/#/
+lculo
;a 9uncin lerp() es usada 0ara sim0li9icar esos c+lculos. 5iene tres 0ar+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+0idas # sencillas 0ara el usuario.
!loat x < lerp(52/#/, :/#/, /#/); !loat ; < lerp(52/#/, :/#/, /#3); !loat ( < lerp(52/#/, :/#/, 6#/); //1si'na 52/#/ a x //1si'na 2/#/ a ; //1si'na :/#/ a (
Por otro lado< la 9uncin map() 0ermite con$ertir directamente un n3mero Aue est+ en un rango< a otro rango. Esta 9uncin utiliza tres 0ar+metros:
map(,alor, menor6, ma;or6, menor2, ma;or2)
44
El $alor es el n3mero a reOma0ear. =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#/); !loat ; < map(/#/, /#/, 233#/, 56#/, 6#/); !loat ( < map(233#/, /#/, 233#/, 56#/, 6#/); // 1si'na 5/#D. a x // 1si'na 56#/ a ; // 1si'na 6#/ a (
-%urvas Si*-les ;as 9unciones e60onenciales son 3tiles 0ara crear cur$as mu# sim0les # r+0idamente. ,l normalizar $alores de la 9uncin poN()< 0odemos o)tener r+0idamente cur$as ascendentes # descendentes< con n3meros Aue no e6ceden el $alor de %. ;a ecuacin tendra la siguiente 9orma:
; < xn
'onde el $alor de ( sera un $alor normalizado entre &.& # %.&< # el $alor de n un n3mero entero. El siguiente es un sim0le e8em0lo de como se u)ican estos $alores en una grilla de e8es cartesianos:
Z /#/ /#2 /#. /#: /#D 6#/ V /#/ /#//6: /#/23: /#627: /#./7: 6#/
, continuacin se muestran una serie de e8em0los de la ca0acidad de las ecuaciones e60onenciales< 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 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 //Dibu a crculos de puntos alrededor de la cur,a ; < x[. noHill(); smooth(); !or (int x < /; x 9 6//; x 4< 3) R !loat n < norm(x, /#/, 6//#/); //>an'o de /#/ a 6#/ !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
4'
//Dibu a 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
42
1-"ndice de %urvas ;ate*5ticas
43
(nidad 8
%olor) %olor -or @0*eros

color, color(), colorCode()
5ra)a8ar con colores a tra$s de una 0antalla es di9erente a :acerlo en 0a0el o lienzo. Mientras Aue se a0liAuen las mismas reglas< el conocimiento de los 0igmentos 0ara 0intar @ro8o cadmio< azul 0rusiano< ocre tostadoC # 0ara im0rimir @cian< amarillo< magentaC no necesitan ser traducidos 0ara crear colores digitales. Por e8em0lo< unir todos los colores en un monitor de ordenador tiene como resultado el color )lanco< mientras Aue unir todos los colores con 0intura tiene como resultado el color negro @o un marrn e6traGoC. Fn monitor de ordenador mezcla los colores con luz. ;a 0antalla es una su0er9icie negra # se aGade luz coloreada. Esto se conoce como colores aditi$os< en contraste con el modelo de color sustracti$o 0ara tinta en 0a0el # lienzo. Esta imagen e60one la di9erencia entre los dos modelos:
*olor aditi,o
*olor sustracti,o
;a 9orma m+s com3n de es0eci9icar un color en el ordenador es mediante $alores /EB. Fn $alor /EB a8usta la cantidad de luz ro8a< $erde # azul en un 06el de la 0antalla. =i miras de cerca la 0antalla de tu tele$isor o el monitor de tu ordenador< $er+s Aue cada 06el se com0one de tres elementos inde0endientes de luz ro8a< $erde # azulR 0ero de)ido a Aue nuestros o8os slo 0ueden $er una cantidad limitada de detalle< los tres colores se mezclan 0ara 9ormar uno solo. ;a intensidad de cada elemento de color est+ es0eci9icada con $alores entre & # -55< donde & es el mnimo # -55 el m+6imo. O1juste de color En Processing< los colores est+n de9inidos 0or los 0ar+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 0ar+metro $alue4 de9ine el com0onente de color ro8o< $alor5 el com0onente $erde # $alue6 el azul. El 0ar+metro o0cional al9a 0ara !ill() o stro)e() de9ine la o0acidad. El $alor -55 del 0ar+metro alfa indica Aue el color es totalmente o0aco< # el $alor & indica Aue es totalmente trans0arente @no ser+ $isi)leC.
bac)'round(6K., 226, :/);
46
=elector de color Podemos seleccionar el color con el cursor sim0lemente 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); rect(2/, 2/, 0/, :/); !ill(627, 60/, DK, 2/.); rect(3/, 2/, 0/, :/);
//Cenos opacidad //C"s opacidad
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); line(0/, 2/, 3/, D/); stro)e(2.2, 2/., .K, 2/.); line(3/, 2/, K/, D/); bac)'round(3:, 7/, 7.); smooth(); int x < /; stro)eIei'ht(62);
//Cenos opacidad //C"s opacidad
48
!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 o0acidad se 0uede usar 0ara crear nue$os colores mediante su0er0osicin de 9ormas. ;os colores originados de0enden del orden en Aue se di)u8en las 9ormas.
bac)'round(/); no$tro)e(); smooth(); !ill(2.2, 2/., .K, 6:/); ellipse(.K, 0:, :., :.); !ill(6K., 226, :/, 6:/); ellipse(7/, .K, :., :.); !ill(66:, 670, 2/:, 6:/); ellipse(3K, K7, :., :.); bac)'round(233); no$tro)e(); smooth(); !ill(2.2, 2/., .K, 6:/); ellipse(.K, 0:, :., :.); !ill(6K., 226, :/, 6:/); ellipse(7/, .K, :., :.); !ill(66:, 670, 2/:, 6:/); ellipse(3K, K7, :., :.);
//1marillo //Merde //1(ul
//1marillo //Merde //1(ul
-$ato de color El ti0o dato de color se usa 0ara almacenar colores en un 0rograma< # la 9uncin color() se usa 0ara asignar una $aria)le de color. ;a 9uncin color() 0uede crear $alores de gris< $alores de gris con o0acidad< $alores de color # $alores de color con o0acidad. ;as $aria)les del ti0o dato de color 0uede almacenar todas estas con9iguraciones:
color('ris) color('ris, al!a) color(,alor6, ,alor2, ,alor0) color(,alor6, ,alor2, ,alor0, al!a)
;os 0ar+metros de la 9uncin color() de9ine un color. El 0ar+metro gris usado slo o con alfa< de9ine un rango de tonos de )lanco a negro. El 0ar+metro alfa de9ine la o0acidad con $alores de entre & @trans0arenteC a -55 @o0acoC. ;os 0ar+metros $alor4< $alor5 # $alor6 de9inen $alores 0ara los distintos com0onentes. ;as $aria)les del ti0o de dato de color se de9inen # se asignan de la misma 9orma Aue los ti0os de dato int # !loat discutidos en la unidad 'atos: (aria)les.
color color color color c6 c2 c0 c. < < < < color(36); //*rea color(36, 2/.); //*rea color(36, 6/2, 630); //*rea color(36, 6/2, 630, 36); //*rea 'ris# 'ris con opacidad# a(ul# a(ul con opacidad#
'es0us de Aue una $aria)le color se :a#a de9inido< se 0uede usar como 0ar+metro 0ara las 9unciones bac)'round()< !ill() # stro)e().
'0
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//);
AC4, DS4 Processing usa el 9ormato de color /EB como 0redeterminado 0ara tra)a8ar< 0ero se 0uede usar en su lugar la es0eci9icacin J=B 0ara de9inir colores en 9uncin del matiz< saturacin # )rillo. El matiz de un color es lo Aue normalmente 0iensa la gente del nom)re del color: amarillo< ro8o< azul< naran8a< $erde< $ioleta. Fn matiz 0uro es un color sin diluir mu# intenso. ;a saturacin es el grado de 0ureza en un color. (a desde el matiz sin diluir :asta el matiz com0letamente 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 0ara un 0rograma:
colorCode(modo) colorCode(modo, ran'o) colorCode(modo, ran'o6, ran'o2, ran'o0)
;os 0ar+metros de colorCode() cam)ian la 9orma en Aue Processing inter0reta el dato de color. El 0ar+metro modo 0uede ser tanto /EB como J=B. El rango de 0ar+metros 0ermite a Processing usar $alores di9erentes al 0redeterminado @& a -55C. En los gr+9icos de ordenador se usa 9recuentemente un rango de $alores entre &.& # %.&. 5anto si un 0ar+metro de un slo rango esta)lece el rango 0ara todos los colores< como si los 0ar+metros rango4< rango5 # rango6 esta)lecen el rango de cada uno S tanto ro8o< $erde< azul como matiz< saturacin< )rillo< de0endiendo del $alor del 0ar+metro modo.
//-stablece el ran'o para los ,alores ro o, ,erde ; a(ul de /#/ a 6#/ colorCode(>X=, 6#/);
Fn a8uste 3til 0ara el 9ormato J=B es esta)lecer los 0ar+metros de rango4< rango5 # rango6 res0ecti$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 0orcenta8es. Este a8uste coincide con los $alores usados en muc:os selectores de color #< 0or tanto< :ace m+s sencilla la transicin de dato de color entre otros 0rogramas # 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 e8em0los 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
'1
//*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 0ara color()< !ill() # stro)e(). El 9ormato J=B tiene una enorme $enta8a so)re el 9ormato /EB cuando tra)a8amos con cdigos< 0orAue es m+s intuiti$o. am)iando los $alores de los com0onentes ro8o< $erde # azul< a menudo o)tenemos resultados ines0erados< mientras Aue estimando los resultados de los cam)ios del matiz< saturacin # )rillo seguimos un camino m+s lgico. ;os siguientes e8em0los muestran la transicin del $erde al azul. El 0rimer e8em0lo :ace la transicin usando el 9ormato /EB. /eAuiere calcular los tres $alores de color< # la saturacin del color cam)ia ines0eradamente en el centro. El segundo e8em0lo :ace la transicin usando el 9ormato J=B. =lo es necesario alterar un n3mero< # el matiz cam)ia sua$emente e inde0endientemente de las otras 0ro0iedades 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 0ara de9inir el color. Este mtodo es 0o0ular entre diseGadores Aue tra)a8an en la Ie) 0orAue est+ndares como J#0er5e6t MarHu0 ;anguage @J5M;C # ascading =t#le =:eets @ ==C usan esta notacin. ;a notacin Je6 0ara el color codi9ica cada n3mero desde el & al -55 en un $alor de dos dgitos usando los n3meros de & a 4 # las letras de , a ". 'e esta 9orma< tres $alores /EB desde & a -55 se 0ueden escri)ir como un solo $alor :e6 de seis dgitos. Fnas 0ocas con$ersiones de e8em0lo demuestran esta notacin:
/EB
233, 233, 233 /, /, /
Je6
]HHHHHH ]//////
'2
6/2, 630, 2/. 673, 2.., 37 66:, 2/:, 2/:
]::77** ]*0H.0= ]K.*-*-
;a con$ersin de los $alores /EB a notacin :e6 no es intuiti$a. , menudo< el $alor se toma del selector de color. Por e8em0lo< 0uedes co0iar # 0egar 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 0ara distinguirlo dentro del cdigo.
// *di'o del tercer e emplo reescrito usando nEmeros hex bac)'round(]D6D23K); no$tro)e(); !ill(]1-DD0*); rect(6K, 6K, ::, ::);
-:alores de grises ;os e8em0los $istos anteriormente :an usado el 9ondo 0or 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 re0resentacin con un n3mero entre & # -55. Este rango 0uede ser incmodo si no est+s 9amiliarizado con 0rogramas de di)u8o en el ordenador. El $alor -55 es )lanco # el $alor & es negro< con un rango de $alores de grises en medio. =i no se de9ine un $alor 0ara el 9ondo< se usa el $alor 0or de9ecto -&1 @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 0or de9ecto -55 @)lancoC. =i no se de9ine un $alor de contorno< se usa el $alor 0or de9ecto & @negroC.
rect(6/, 6/, !ill(2/.); stro)e(6/2); rect(2/, 2/, !ill(630); stro)e(630); rect(0/, 0/, !ill(6/2); stro)e(2/.); rect(./, ./, 3/, 3/); 3/, 3/); 3/, 3/); 3/, 3/);
uando se :a de9inido un $alor de relleno o contorno< se a0lica a todas las 9iguras di)u8adas des0us. Para cam)iar el $alor de relleno o contorno< usamos la 9uncin !ill() o stro)e() de nue$o. Fn 0ar+metro o0cional adicional 0ara !ill() o stro)e() regula la trans0arencia. 'e9iniendo el 0ar+metro a -55 :ace Aue la 9igura sea totalmente o0aca< # a & totalmente trans0arente:
bac)'round(/); !ill(233, 22/); rect(63, 63, 3/, 3/); rect(03, 03, 3/, 3/);
El relleno # el contorno de una 9igura se 0uede 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 0antalla. -1tri/utos de di/ujo ,dem+s de cam)iar los $alores de relleno # contorno de las 9iguras< tam)in es 0osi)le cam)iar atri)utos de
'3
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 des0us. =i usamos 0rimero 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 0or las 9unciones stro)eIei'ht()< stro)e*ap() # stro)eJoin(). ;a 9uncin stro)eIei'ht() tiene un 0ar+metro numrico Aue de9ine el grosor de todas las lneas di)u8adas des0us de usar esta 9uncin. ;a 9uncin stro)e*ap() reAuiere un 0ar+metro Aue 0uede ser >?&ND< $L&1>- o A>?J-*T. >?&ND redondea los 0untos 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 0ar+metro Aue 0uede ser =-M-@< CBTT-> o >?&ND. Estos 0ar+metros determinan la 9orma del contorno de la 9igura. =-M-@ corta en diagonal las esAuinas cuadradas< CBTT-> cuadra las esAuinas @es el $alor 0or de9ectoC # >?&ND redondea las esAuinas.
smooth(); stro)eIei'ht(62); stro)e*ap(>?&ND); line(2/, 0/, D/, 0/); stro)e*ap($L&1>-); line(2/, 3/, D/, 3/); stro)e*ap(A>?J-*T); line(2/, K/, D/, K/); smooth(); stro)eIei'ht(62); stro)eJoin(=-M-@); rect(62, 00, 63, 00); stro)eJoin(CBT->); rect(.2, 00, 63, 00); stro)eJoin(>?&ND); rect(K2, 00, 63, 00);
//@nea superior //@nea central //@nea in!erior
//Hi'ura i(Guierda //Hi'ura central //Hi'ura derecha
;odos de di/ujo Por de9ecto< los 0ar+metros 0ara 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 0ar+metros 0ara di)u8ar eli0ses. ;a 9uncin ellipseCode() reAuiere un 0ar+metro Aue 0uede ser *-NT->< >1DB&$< *?>N-> o *?>N->$. El modo 0or de9ecto es *-NT->. El modo >1DB&$ tam)in usa el 0rimer # segundo 0ar+metro de ellipse() 0ara esta)lecer el centro< 0ero el tercer 0ar+metro de)er ser la mitad del anc:o< # el cuarto 0ar+metro de)e ser la mitad del alto. El modo *?>N-> :ace Aue ellipse() 9uncione de manera 0arecida a rect(). ausa Aue el 0rimer # segundo 0ar+metro se trasladen a la esAuina su0erior izAuierda del rect+ngulo Aue circunscri)e la eli0se # usa el tercer # cuarto 0ar+metro 0ara de9inir la anc:ura # la altura. El modo *?>N->$ tiene un e9ecto similar a *?>N->< 0ero causa Aue el tercer # cuarto 0ar+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, :/, :/); !ill(233);
//-lipse 'ris
'4
ellipseCode(*?>N->); ellipse(00, 00, :/, :/); !ill(/); ellipseCode(*?>N->$); ellipse(00, 00, :/, :/);
//-lipse blanca //-lipse ne'ra
on un estilo similar< la 9uncin rectCode() a9ecta a cmo se di)u8an los rect+ngulos. /eAuiere un 0ar+metro Aue 0uede ser *?>N->< *?>N->$ o *-NT->. El modo 0or de9ecto es *?>N->< # *?>N->$ causa Aue el tercer # cuarto 0ar+metro de rect() se de9inan en la esAuina contraria a la 0rimera. El modo *-NT-> causa Aue el 0rimer # segundo 0ar+metro de rect() de9inan el centro del rect+ngulo # usa el tercer # cuarto 0ar+metro 0ara la anc:ura # la altura.
no$tro)e(); rectCode(*?>N->); !ill(62:); rect(./, ./, :/, :/); rectCode(*-NT->); !ill(233); rect(./, ./, :/, :/); rectCode(*?>N->$); !ill(/); rect(./, ./, :/, :/);
//>ect"n'ulo 'ris //>ect"n'ulo blanco //>ect"n'ulo ne'ro
''
(nidad 10
I*agen) :isuali7acin , <inta

ABma'e, loadBma'e(), ima'e() tint(), noTint()
;as 9otogra9as digitales son mu# di9erentes si las com0aramos con las 9otogra9as analgicas ca0turadas en 9ilm. ,l igual Aue las 0antallas de ordenador< las im+genes digitales son re8illas rectangulares de color. ;as dimensiones de las im+genes digitales se miden en unidades de 06eles. =i una imagen es de 3-& 06eles de anc:o # -1& 06eles de alto< tiene !..*&& 06eles totales. =i una imagen es de %-*& 06eles de anc:o # %&-1 06eles de alto< el n3mero total de 06eles es de %3%&!-& @%<3 mega06elesC. ,dem+s< cada imagen digital tiene una 0ro9undidad de color. ;a 0ro9undidad de color se re9iere al n3mero de )its utilizado 0ara almacenar cada 06el. =i la 0ro9undidad de color de una imagen es %< cada 06el 0uede ser uno de dos $alores< 0or e8em0lo< negro o )lanco. =i la 0ro9undidad de color es de 1< cada 06el 0uede ser uno de %. $alores. =i la 0ro9undidad de color de una imagen es de *< cada 06el 0uede ser uno de -5. $alores. En cuanto a la imagen< se muestra con di9erente calidad crom+tica. Esto a9ecta a la a0ariencia:
%O)it @- coloresC
-O)it @1 coloresC
1O)it @%. coloresC *O)it @-5. coloresC
Jo# en da< la ma#ora de las com0utadoras tra)a8an con una 0ro9undidad de -1 )its< lo Aue Auiere decir uno de %.!!!-%. colores. =e lo llama com3nmente como millones de colores. ;as im+genes digitales se co*-onen de n0*eros Aue re0resentan 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 com0le8as 0ara com0rimir los datos # reducir el tamaGo resultante del arc:i$o 9inal. Fn 0rograma Aue carga un arc:i$o de imagen de)e conocer el 9ormato de la misma 0ara Aue 0ueda traducir los datos de arc:i$o en la imagen es0erada. E6isten di9erentes ti0os de 9ormatos de im+genes digitales Aue sir$en 0ara necesidades es0ec9icas. Processing 0ueden 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 0uede con$ertir con 0rogramas como EIMP o ,do)e P:otos:o0. "ormato EI" JPEE P2E E6tensin .gi9 .80g .0ng Pro9undidad de color %O)it a *O)it -1O)it %O)it a -1O)it 5rans0arencia %O)it 2o Posee *O)it
-:isuali7acin Processing 0uede cargar im+genes< mostrarlas en 0antalla< cam)iar su 0osicin< tamaGo< color< tinta # trans0arencia. El ti0o de dato Aue se utiliza 0ara almacenar im+genes es conocido 0or el nom)re de ABma'e. ,l igual Aue los n3meros enteros son almacenados en $aria)les del ti0o int< # los $alores true # !alse en $aria)les del ti0o boolean< las im+genes son almacenadas en o)8etos ti0o 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 @0or e8em0lo< kant.'pg< "oah.gif< hola.pngC. ;as im+genes a cargar de)en encontrarse en la car0eta data< dentro de la car0eta del sketch. E6iste una 9orma mu# sencilla de aGadir una imagen a esa car0eta sin cometer ning3n error. En la
Ignacio Buioli | Jaime Prez Marn '2
)arra de men3< dentro de la o0cin K=Hect:L< se encuentra el comando K,dd "ileL. =e 0odr+ entonces na$egar 0or su ordenador # )uscar el arc:i$o deseado. Fna $ez Aue se encuentra< se le da clicH a K70enL 0ara aGadir el arc:i$o a la car0eta data de su sHect:. on la imagen dentro de la car0eta< :a)indose declarado un nue$o ABma'e #< 0osteriormente< cargado en ese ABma'e un arc:i$o de imagen< este 0uede ser mostrado en 0antalla con la 9uncin ima'e():
ima'e(nombre, x, ;) ima'e(nombre, x, ;, ancho, alto)
;os 0ar+metros de ima'e() determinan la 0osicin # el tamaGo de la imagen @similar a otras 9unciones $istas 0re$iamenteC. El nombre es tan solo el nom)re del o)8eto ABma'e donde se encuentra almacenada nuestra imagen. =i no se utilizan los 0ar+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 im' < loadBma'e(Warch# p'W); ima'e(im', 2/, 2/, :/, :/);
-%olor de la I*agen , <rans-arencia ;as im+genes 0ueden 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+ 0intada 0or ella. =i en alg3n momento se desea Aue no se 0inte< se 0uede utilizar la 9uncin noTint().
ABma'e im'; im' < loadBma'e(Warch# p'W); tint(6/2); //Ainta de 'ris ima'e(im', /, /); noTint(); //Desacti,a tint() ima'e(im', 3/, /); ABma'e im'; im' < loadBma'e(Warch# p'W); tint(/, 630, 2/.); //Ainta de a(ul ima'e(im', /, /); noTint(); //Desacti,a tint() ima'e(im', 3/, /);
'3
color amarillo < color(22/, 26., .6); color ,erde < color(66/, 6:., 02); color tan < color(6D/, 6KK, 602); ABma'e im'; im' < loadBma'e(Warch# p'W); tint(amarillo); ima'e(im', /, /); tint(,erde); ima'e(im', 00, /); tint(tan); ima'e(im', ::, /);
;os 0ar+metros de tint() est+n ligados a lo esta)lecido 0or colorCode(). Ja# Aue tener cuidado de no cam)iar el modo de color o el rango del mismo< #a Aue eso a9ectar+ los 0ar+metros de tint(). Para generar trans0arencia sim0lemente utilizaremos la misma 9uncin tint() 0ero con un $alor de )lanco @-55 en un modo /EBC.
ABma'e im'; im' < loadBma'e(Warch# p'W); 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'; im' < loadBma'e(Warch# p'W); bac)'round(233); tint(233, 36); //Dibu a 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 0ueden almacenar la trans0arencia de la imagen. Mientras Aue las EI" solo 0ueden con$ertir un color @#a Aue solo 0osee %O)it de trans0arenciaC. En cam)io< las im+genes P2E tienen una 0ro9undidad de trans0arencia de *O)it< 0or lo tanto admiten -5. colores de trans0arencia.
//*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/, /);
'6
(nidad 11
$atos) <e&to
Elementos que se introducen en esta Unidad:
char, $trin'
'esde la a0aricin del ordenador se 0lantearon lengua8es de 0rogramacin 0ara sus acciones. , 0artir de ese momento< :u)o muc:a in$estigacin en la entrada # la salida de te6to. 'e esta 9orma se e60andi el cam0o de la 0rogramacin a lo Aue 9ueron los 0rimeros intentos 0or I, @Inteligencia ,rti9icialC. Fna serie de 0rogramas en los Aue uno escri)a lo Aue desea)a # el mismo 0rograma< a duras 0enas< res0onda algo mas o menos acorde. Esta clase de 0rogramas :a e$olucionado< m+s all+ de Aue e6isten toda$a 0ro)lemas con esta clase de ideas. M+s adelante< se e60eriment con 0rogramas @0re9erentemente en la ?e)C de traduccin de idiomas< con resultados e6traordinarios 0or 0arte 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 ti0o de dato mas com3n creado # modi9icado 0or el 0rograma. El te6to creado 0or eOmails< 0u)licaciones # sitios ?e) es un $asto recurso de in9ormacin Aue 0uede ser almacenada # 0resentada en 9orma de datos. -%aracteres ;os datos del ti0o char 0ueden almacenar ti0ogra9as como ,< e< 5 # U. El nom)re char es el diminuti$o 0ara character cu#o signi9icado es car+cter< # este ti0o de datos se distingue 0or se escritos entre comillas @V VC. ;as $aria)les ti0o char son declaradas como $aria)les ti0o int o ti0o !loat.
char a < ^n^; char b < n; char c < WnW; char d < ^not^; //1si'na ^n^ a la ,ariable a //->>?> 5 $in comillas, n es una ,ariable //->>?> 5 @as comillas dobles (W W) de!inen a n como un //$trin', no un char //->>?> O @as ,ariables tipo char pueden almacenar //solo un car"cter
El siguiente e8em0lo crea una nue$a $aria)le ti0o char< asigna $alores # los im0rime en la consola:
char letra < ^1^; println(letra); letra < ^=^; println(letra); //Declara una ,ariable letra ; asi'na el ,alor de ^1^ //Bmprime 1 en la consola //1si'na ^=^ a la ,ariable letra //Bmprime = en la consola
Muc:os $alores char tienen un $alor n3mero Aue les corres0onde 0or el cdigo de la ta)la ,= II. Por e8em0lo< , es .5< B es ..< es .!< # as. Puede 0ro)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 0osi)le articular 9unciones matem+ticas con $alores al9a)ticos. En el siguiente e8em0lo se utiliza un ciclo H?> 0ara im0rimir el al9a)eto de la , a la W< 0or 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
'8
-Pala/ras , 9raciones ,l utilizar un o)8eto de ti0o $trin' 0ueden almacenarse 0ala)ras # oraciones com0letas. Para distinguir los datos $trin' del resto del 0rograma se utilizan comillas do)les @ WWC. ;as do)les comillas di9erencian ^^s^^ como $trin' de ^s^ como car+cter. ;os datos ti0os $trin' son di9erentes a los del ti0o int1 !loat o char< #a Aue se trata de un ob'eto1 o sea un ti0o de dato Aue 0uede almacenar muc:os elementos # 9unciones. 'e igual manera< ABma'e # AHont tam)in son o)8etos. ;os o)8etos ti0o $trin' se declaran # se asignan como cualAuiera:
$trin' $trin' $trin' strin' a b c d < < < < W1nnimoW; ^-^; W-W; W-W; //1si'na W1nnimoW a la ,ariable a //->>?> O @as comillas ^ ^ deben ser dobles# //1si'na W-W a c //->>?> 5 $trin' debe comen(ar con ma;Esculas
;os siguientes e8em0los muestran algunos usos )+sicos de los o)8etos ti0o $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
20
(nidad 12
$atos) %onversin , 9/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< es0eci9icamos el ti0o de datos con el Aue $a a tra)a8ar. =i la $aria)le almacena n3meros< su utilizar+ una $aria)le ti0o int o ti0o !loat. =i la $aria)le almacena te6to< se usar+ el ti0o $trin' o< si se tratara de solo un car+cter< del ti0o char. ,s< $aria)les Aue almacenan $alores true o !alse son del ti0o boolean< 0ara almacenar una imagen digital ser+ un o)8eto del ti0o ABma'e # 0ara almacenar una ti0ogra9a del ti0o AHont. ;uego de ser declarada< se le asigna un $alor del ti0o de la $aria)le. =in em)argo< muc:as $eces es necesario con$ertir una $aria)le de determinado ti0o en otro ti0o. ;os ti0os de datos int1 !loat1 char # boolean son llamadas $aria)les 0rimiti$as< #a Aue almacenan un si*-le elemento. En cam)io< $trin'1 ABma'e # AHont son di9erentes< las $aria)les Aue se crean son en realidad o/jetos. ;os o)8etos son usualmente com0uestos 0or muc:as $aria)les 0rimiti$as # otros o)8etos< # 0ueden 0oseer 9unciones dentro de ellos mismos. ;os o)8etos se distinguen 0or comenzar siem0re la 0rimer letra en ma#3sculas. -%onversin de $atos ,lgunos ti0os de datos 0ueden con$ertirse en otro ti0o autom+ticamente con solo se reasignados a una $aria)le de otro ti0o. Por e8em0lo< una $aria)le del ti0o int 0uede con$ertirse autom+ticamente en una del ti0o !loat< 0ero una del ti0o !loat no 0uede con$ertirse autom+ticamente en una del ti0o int.
!loat ! int i < ! < i; i < !; < 62#:; 62K; //*on,ierte 62K en 62K#/ //->>?> 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 ti0osQ Para esto e6isten una gran cantidad de 9unciones de con$ersin de un ti0o de dato a otro. =in em)argo< :a# Aue aclarar Aue< como los datos almacenan di9erentes cantidad de )it< es mu# 0ro)a)le Aue en algunos 0ases se 0ierda una gran cantidad de in9ormacin @mu# 3til 0ara a:orrar memoria del 0rogramaC. ;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 corres0ondiente 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); int n < 62; b < boolean(n); $trin' s < W!alseW; b < boolean(s); //1si'na !alse a b //1si'na true a b //1si'na !alse a b
;a 9uncin b;te() con$ierte cualAuier $alor en una re0resentacin de )#te. ;a 0ro9undidad numrica es tan solo de O%-! a %-*. =in em)argo< si el n3mero esta 9uera del rango< la 9uncin lo con$ierte en una re0resentacin en )#te.
21
!loat ! < :3#/; b;te b < b;te(!); char c < ^-^; b < b;te(c); ! < 60/#/; b < b;te(!);
//1si'na :3 a b //1si'na :7 a b //1si'na 562: a b
;a 9uncin char() con$ierte cualAuier $alor numrico en un car+cter. El numero corres0onde a una re0resentacin de la ta)la ,= II.
int i < :3; b;te ; < K2#/; char c < char(i); c < char(;);
//1si'na ^1^ a c //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 int !loat !loat < 2; < 0; !6 < i/ ; //1si'na /#/ a !6 !2 < i/!loat( ); //1si'na /#::::::K a !2
;a 9uncin int() con$ierte cualAuier clase de datos en un n3mero entero. Es mu# utilizado 0ara redondear un resultado !loat # as este no ocu0e 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(!); char c < ^-^; i < int(c); //1si'na :3 a i //1si'na :7 a i
;a 9uncin str() con$ierte cualAuier clase de datos en una re0resentacin $trin'.

int i < 0; $trin' s < str(i); !loat ! < 562#:; s < str(!); boolean b < true; s < str(b); //1si'na W0W a s //1si'na W562#:W a s //1si'na WtrueW a s
;a 9uncin n!() @Aue se $er+ m+s adelanteC 0ro$ee de mas control cuando con$ertimos un int o un !loat a un $trin'. -9/jetos ;as $aria)les ti0o $trin'< ABma'e # AHont son del ti0o o)8eto. ;as $aria)les dentro de un o)8eto se denominan campos # las 9unciones se denominan m7todos. =e 0uede acceder a los cam0os # a los mtodos con el o0erador punto @.C. El o0erador 0unto 9unciona como 0uente entre el nom)re del o)8eto # el elemento dentro del mismo. ABma'e1 AHont # $trin' son o)8etos< # 0or tanto 0oseen elementos. ;os o)8eto ti0o ABma'e 0oseen dos 9unciones Aue almacenan el anc:o # el alto de la imagen cargada. =e llaman< de manera a0ro0iada< Nidth @anc:oC # hei'ht @altoC. Para acceder a ellas< se escri)e el nom)re del o)8eto seguido 0or el o0erador 0unto # el nom)re de la 9uncin.
22
ABma'e im' < loadBma'e(WbuenosYaires# p'W); pixeles int N < im'#Nidth; int h < im'#hei'ht; println(N); println(h);
//*ar'a una Bma'en de 02/ x 2./ //1si'na 02/ to N //1si'na 2./ to h //Bmprime W02/W //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' 0osee tam)in una gran cantidad de elementos Aue lo com0onen. Fno de ellos es el mtodo len'th()1 el cual regresa de $alor la cantidad de caracteres Aue lo com0onen:
$trin' s6 < WTocar AianoW; $trin' s2 < WTW; println(s6#len'th()); println(s2#len'th());
//Bmprime W66W //Bmprime W6W
;os mtodos startsIith() # endsIith() e$al3an cuando un $trin' em0ieza o termina< siem0re # cuando se utilice el 0ar+metros adecuados:
$trin' s6 < W=uenos 1iresW; println(s6#startsIith(W=W)); println(s6#startsIith(W1iresW)); println(s6#endsIith(W1iresW)); //Bmprime WtrueW //Bmprime W!alseW //Bmprime WtrueW
El mtodo char1t() es usado 0ara leer un solo car+cter de un &tring. /eci)e como 0ar+metro un n3mero Aue indica la u)icacin del mismo:
$trin' s < WMerdeW; println(s#char1t(/)); println(s#char1t(2)); println(s#char1t(.)); //Bmprime WMW //Bmprime WrW //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); println(c`6a);
//Bmprime W1W //Bmprime W(W
El mtodo substrin'() es usado 0ara leer a 0orcin del $trin'. , di9erencia de char1t() Aue solo lee un car+cter< substrin'() 0uede leer un $trin' de caracteres. =e utiliza de 0ar+metro un n3mero Aue indica la 0osicin de un car+cter # de$uel$e un $trin' desde esa 0osicin 0ara delante. =i se utilizan dos 0ar+metros determina una 0orcin es0ec9ica.
$trin' s < WXialloW; println(s#substrin'(2)); println(s#substrin'(.)); println(s#substrin'(6, .)); println(s#substrin'(/, s#len'th()56)); //Bmprime //Bmprime //Bmprime //Bmprime WalloW WloW WialW WXiallW
El mtodo to@oNer*ase() 0uede usarse 0ara de$ol$er una co0ia del $trin' com0letamente en min3sculas. 'e la misma 9orma< to&pper*ase() :ace lo mismo 0ero de$uel$e el te6to en ma#3sculas.
23
$trin' s < WNe'roW; println(s#to@oNer*ase()); println(s#to&pper*ase());
//Bmprime Wne'roW //Bmprime WN-X>?W
omo un $trin' es un o)8eto< no es 0osi)le com0arar resultados con el o0erador relacional de igualdad @<<C. =in em)argo< el mtodo eGuals() del o)8eto $trin' sir$e 0recisamente 0ara eso. om0ara el contenido de dos $aria)les $trin'.
$trin' s6 < W=lancoW; $trin' s2 < W=lancoW; $trin' s0 < WNe'roW; println(s6#eGuals(s2)); println(s6#eGuals(s0));
//Bmprime WtrueW //Bmprime W!alseW
24
(nidad 13
<i-ografBa) :isuali7acin
AHont, loadHont(), textHont(), text() text$i(e(), text@eadin'(), text1li'n(), textIidth()
;as letras en una 0antalla son creadas 0or esta)lecer el color de los 06eles en una determinada u)icacin. Por lo tanto< la calidad de la ti0ogra9a se $e limitada 0or la resolucin de la 0antalla. omo las 0antallas tienen una resolucin )a8a en com0aracin con el 0a0el< se :an desarrollado tcnicas 0ara me8orar la a0ariencia del te6to en la misma. ;as 9uentes de las 0rimeras com0utadoras de ,00le Macintos: esta)an com0uestas 0or 0eAueGas im+genes de ma0a de )its< creadas es0ec9icamente en tamaGos como de %&< %-< # -1 0untos. Ftilizando esta tecnologa< una $ariacin de cada 9uente 9ue diseGada 0ara cada tamaGo de un ti0o de letra en 0articular. Por e8em0lo< el car+cter de un ti0o de letra en el =an "rancisco< utiliza una imagen di9erente 0ara mostrar el car+cter en un tamaGo de %- # %*. Por otra 0arte< cuando la im0resora ;aserIriter se introdu8o en %4*5< la tecnologa Postscri0t de9ini 9uentes con una descri0cin matem+tica del esAuema de cada car+cter. Este ti0o 0ermiti< en la 0antalla< una escala de tamaGos grandes. ,00le # Microso9t desarrollaron< m+s tarde< el 5rue5#0e< otro 9ormato de 9uente. /ecientemente< estas tecnologas se 9usionaron en el 9ormato 70en5#0e. Mientras tanto< el mtodo 0ara sua$izar te6to de 0antalla en )lancoO#Onegro se introdu8o. Estas tcnicas del ti0o anti+aliasing utilizan 06eles grises en el )orde de los caracteres 0ara com0ensar la )a8a resolucin de 0antalla. -%argando .uentes , $i/ujando <e&to ,ntes Aue las letras sean mostradas en la $entana de Processing< es necesario cargar la 9uente # 0ara 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 o0cin K reate "ontL @ rear "uenteC. Fn $entana se a)rir+ # le mostrar+ las 9uentes Aue tiene actualmente instaladas en su eAui0o # Aue 0ueden ser con$ertidas al 9ormato es0ec9ico. =eleccione la 9uente deseada de la lista #< a continuacin< :aga clicH en K7XL. ;a 9uente se co0iar+ # con$ertir+ al 9ormato (;I. ;uego< autom+ticamente< ser+ mo$ida a la car0eta K'ataL de su =Hetc: @de 9orma similar a como se carga una imagenC. omo en las 0rimeras com0utadoras de ,00le Macintos:< el 9ormato (;I 0ermite cargar el al9a)eto de una 9uente como una serie de sim0les im+genes. En la $entana del K reate "ontL tam)in se encuentra una o0cin Aue 0ermite seleccionar el tamaGo al e60ortar 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 %-< e60ortarla en tamaGo 4. ser+ totalmente innecesario. 'es0us Aue la 9uente es creada< antes de Aue el 0rograma la 0ueda utilizar es necesario cargarla en el mismo. Processing 0osee un ti0o de dato llamado AHont< en el Aue de)en cargarse las 9uentes. =e crea un nue$o o)8eto ti0o AHont # se utiliza la 9uncin loadHont() 0ara cargarla. ;a 9uncin de textHont() se utiliza 0ara 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 0ar+metro datos 0uede ser un $trin'1 char1 int o !loat. El 0ar+metro stringdatos es un 0ar+metro Aue solo ace0ta datos ti0o $trin'. ;os 0ar+metros ( e y cam)ian la 0osicin :orizontal # $ertical del te6to @como en cualAuier 9igura o imagenC. E6isten 0ar+metros o0cionales ancho # alto< los cuales modi9ican el tamaGo del te6to. ;a 9uncin !ill() controla el color del te6to # la trans0arencia< as como tam)in a9ecta a 9iguras como ellipse() o rect(). El te6to no es a9ectado 0or stro)e(). ;os siguientes e8em0los utilizan una 9uente llamada ,ressence< 0ara Aue 0ueda $er su te6to aseg3rese de cargar su 0ro0ia 9uente # llamarla correctamente @con la e6tensin $l?C en la 9uncin loadHont().
2'
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; !ont < loadHont(W1ressence562#,lNW); textHont(!ont); !ill(/); $trin' s < WArocessin' est" escribiendo TextoW; text(s, 6/, 2/, D/, 3/); AHont !ont; !ont < loadHont(W1ressence502#,lNW); 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 ba a ?pacidad text(W6W, /, D/); text(W2W, 63, D/); text(W0W, 0/, D/); text(W.W, .3, D/); text(W3W, :/, D/);
5am)in 0ueden utilizarse dos 9uentes distintas en el mismo 0rograma< 0ero de)er+n crearse dos $aria)les ti0o 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/);
-1tri/utos de <e&to Processing inclu#e 9unciones 0ara controlar la 9orma en la Aue el te6to se muestra @0or e8em0lo< alterando su tamaGo o alineacinC. Processing< adem+s< 0uede calcular el anc:o de alg3n car+cter o gru0o de caracteres #
0onerlo 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 %- de tamaGo< # luego la agrandamos a 4.< se $er+ desen9ocada. ;a 9uncin correcta 0ara cam)iar el tamaGo de la 9uente es la de text$i(e().
text$i(e(tama+o)
El 0ar+metro tama8o de9ine la dimensin Aue ocu0ar+n las letras en unidades de 06eles.
//>educcin del tama+o de la letra AHont !ont; !ont < loadHont(W1ressence502#,lNW); 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; !ont < loadHont(W1ressence562#,lNW); 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'() 0ermite alterar el es0acio entre lineas:

text@eadin'(dist)
;a 0ro0iedad dist de9ine la distancia del es0acio en unidad de 0i6eles.

AHont !ont; !ont < loadHont(W1ressence562#,lNW); 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 0uede 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 0uede ser *-NT-> @centroC< >BX\T @derec:aC # @-HT
23
@izAuierdaC< # se re9iere sim0lemente a la alineacin Aue tendr+ el te6to mostrado en 0antalla.

AHont !ont; !ont < loadHont(W1ressence562#,lNW); 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 0i6el de un car+cter o te6to. El calculo se realiza de0endiendo de las 0ro0iedades de textHont() # text$i(e(). Na Aue cada car+cter 0osee un anc:o di9erente entre s< es im0osi)le sa)er la medida e6acta de una cadena de caracteres. Para esos casos donde necesitamos una medida es0ec9ica< o conocer el tamaGo de nuestra cadena< se utiliza esta 9uncin.
AHont !ont; !ont < loadHont(W1ressence502#,lNW); 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);
26
(nidad 14
;ate*5ticas) <rigono*etrBa
AB, L&1>T->YAB, \1@HYAB, TI?YAB, radians(), de'rees() sin(), cos(), arc()
;a trigonometra 0ermite de9inir relaciones entre lados # +ngulos de los tri+ngulos. ;a 9unciones trigonomtricas de seno # coseno nos 0ermiten generar n3meros re0etiti$os 0ara di)u8ar ondas< arcos< crculos # es0irales. -Engulos , 9ndas ;os grados son una 9orma com3n de medir +ngulos. Fn +ngulo recto es de 4&Y< a mitad de camino< alrededor de un crculo< es %*&Z< # el crculo com0leto 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 e60resa en relacin con el $alor de [ de matem+tica< escrito en caracteres latinos como \0i\. En trminos de unidades radianes< el +ngulo recto es [B-< a mitad de camino alrededor de un crculo es sim0lemente [ < # el 0unto de 0artida es -[.
El $alor numrico de [ es una constante Aue es in9initamente larga # sin ning3n 0atrn de re0eticin. Es la razn de la circun9erencia de un crculo en relacin a su di+metro. ,l escri)ir el cdigo en Processing< se 0uede utilizar la constante matem+tica AB 0ara re0resentar a este n3mero. 7tros $alores de uso de [ se e60resa con las constantes L&1>T->YAB1 \1@HYAB # TI?YAB. =i se e8ecuta la siguiente lnea de cdigo< se 0odr+ $er el $alor de [ con sus * 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<%1. 'e esta manera< los +ngulos 0uede 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 println(r2); //Bmprime !loat d6 < de'rees(AB); !loat d2 < de'rees(TI?YAB); println(d6); //Bmprime println(d2); //Bmprime
W6#3K/K7:.W W0#6.6372KW W6D/#/W W0:/#/W
=i uno tiene 0re9erencia 0or el tra)a8o en +ngulos< se $uel$e mu# 0r+ctico el utilizar la 9uncin de con$ersin
28
0ara estar m+s cmodo a la :ora de 0rogramar. Por otro lado< las 9unciones sin() # cos() determinan el $alor de seno # coseno< res0ecti$amente< de un +ngulo determinado. ,m)as 9unciones ace0tan tan solo % 0ar+metro:
sin(an'ulo) cos(an'ulo)
El 0ar+metro angulo es siem0re un $alor en radianes es0ec9ico. El $alor Aue de$uel$e es del ti0o 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 re0ite. 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 4&Y< donde el seno aumenta< 0asando 0or el $alor %*&Y @en cual el seno $uel$e a ser &C :asta el -!&Y @donde el seno llega a su 0unto mas altoC. Por 3ltimo< cuando el $alor llega a 3.&Y< el seno $uel$e a ser &< # el ciclo $uel$e a re0etirse. ;os $alores del seno 0ueden ser $isto en su totalidad sim0lemente 0or 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 com0osicin. Por e8em0lo< al multi0licarlos 0or 5&< o)tendremos un rango de entre O5&.& # 5&.&:
!or (!loat an'le < /; an'le 9 TI?YAB; an'le 4< AB/2.#/) R println(sin(an'le) * 3/#/); S
Para con$ertir $alores de seno en n3meros 0ositi$os< :a# Aue sumar el $alor %.& 0ara Aue el rango 0ase a ser de &.& a -.&. ;uego< al di$idir esos $alores 0or -.& o)tendremos un rango entre &.& # %.&. ;a 9uncin de map() tam)in 0uede utilizarse 0ara sim0li9icar el tra)a8o. En el siguiente e8em0lo se 0onen los $alores de seno en un rango entre & # %&&&:
30
!or (!loat an'le < /; an'le 9 TI?YAB; an'le 4< AB/2.#/) R !loat neNMalue < map(sin(an'le), 56, 6, /, 6///); println(neNMalue); S
=i utiliz+ramos estos $alores seno en una coordenadaO#< 0ara di)u8ar una serie de 0untos< 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 reem0lazar algunos n3meros con $aria)les< 0ermiten 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 0ala)ras< son los mismos $alores Aue en seno< con la di9erencia Aue :a# una com0ensacin de 4&Y.
31
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 !loat ; < o!!set 4 (sin(an'le) * scaleMal); !ill(233); rect(x, ;, 2, .); ; < o!!set 4 (cos(an'le) * scaleMal); !ill(/); rect(x, ;, 2, .); an'le 4< an'leBnc; S
;os siguientes e8em0los 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();
32
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 !loat ; < o!!set 4 (sin(an'le) * scaleMal); 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
-%Brculos, 1rcos , Es-irales ;os crculos 0ueden ser di)u8ados directamente desde ondas seno # coseno. En el siguiente e8em0lo< el +ngulo aumenta de a %-Y :asta com0letar los 3.&Y Aue tiene un crculo. En cada 0aso< la 9uncin cos() se utiliza 0ara determinar la 0osicin en 6< # la 9uncin sin@C se utiliza 0ara la 0osicin en #. Na Aue am)as 9unciones de$uel$en tan solo $alores entre O%.& # %.&< el resultado es multi0licado 0or la $aria)le radio1 la cual $ale 3*. Por 3ltimo< al agregar 5& a cada $alor< el crculo se mantendr+ en la 0osicin @5&<5&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);
33
!loat ; < 3/ 4 (sin(an'le) * radio); ellipse(x, ;, :, :); S
=i el +ngulo al incrementar no 9inaliza en los 3.&Y< entonces 0uede 9ormarse un sim0le arco:
no$tro)e(); smooth(); int radius < 0D; !or (int de' < /; de' 9 22/; de' 4< 62) R !loat an'le < radians(de'); !loat x < 3/ 4 (cos(an'le) * radius); !loat ; < 3/ 4 (sin(an'le) * radius); ellipse(x, ;, :, :); S
Para sim0li9icar el tra)a8o con arcos< Processing inclu#e la 9uncin arc().

arc(x, ;, ancho, alto, iniciar, parar)
;os arcos son di)u8ados a 0artir de una eli0se in$isi)le< cu#os 0ar+metros est+n determinados 0or (1 y1 ancho # alto. ;os 0ar+metros iniciar # parar necesitan de unidades en radianes 0ara generar la cur$atura del arco. ;os siguientes e8em0los muestran un sencillo uso de los mismos:
stro)eIei'ht(2); arc(3/, 33, 3/, 3/, arc(3/, 33, :/, :/, arc(3/, 33, K/, K/, noHill(); arc(3/, 33, D/, D/, smooth(); noHill(); random$eed(/); stro)eIei'ht(6/); stro)e(/, 63/); !or (int i < /; i !loat be'in !loat end < arc(:K, 0K, S /, \1@HYAB); \1@HYAB, AB); AB, TI?YAB 5 \1@HYAB); TI?YAB 5 \1@HYAB, TI?YAB);
9 6:/; i 4< 6/) R < radians(i); be'in 4 \1@HYAB; i, i, be'in, end);
=i se desea crear es0irales< sim0lemente se multi0lica el seno # coseno 0or 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 an'le < radians(de'); !loat x < K3 4 (cos(an'le) * radius); !loat ; < .2 4 (sin(an'le) * radius); ellipse(x, ;, :, :); radius < radius 4 /#0.; S
34
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 an'le < radians(de'); !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
3'
1-"ndice de Engulos ;ate*5ticos
32
(nidad 1'
;ate*5ticas) 1leatoriedad
random(), random$eed(), noise(), noise$eed()
;o aleatorio tiene una 9undamental im0ortancia en nuestra :istoria< es0ecialmente en el arte moderno. on acciones como arrastrar o)8etos< rom0erlos< # dem+s< los artistas generar una 0ieza con cierto ni$el de $alor aleatorio. Por e8em0lo< una tcnica mu# usada de este estilo es llenar 0eAueGas )olsas con 0intura # u)icarlas en un lienzo. Posteriormente< se lanzan dardos Aue rom0en estas )olsas # de8an caer la 0intura de una 9orma com0letamente ines0erada< # con resultados de te6turas mu# interesantes. Es as< como se 0resenta un contraste mu# ele$ado entre una estructura rgida # el com0leto caos. -:alores Ines-erados ;a 9uncin random() 0ermite de$ol$er un $alor com0letamente aleatorio e ines0erado de un rango es0eci9icado 0or 0ar+metros:
random(alto) random(ba o, alto)
;a 9uncin regresa un $alor aleatorio decimal @ !loatC desde el & :asta el 0ar+metro alto. 7tra 9orma de ingresar 0ar+metros a la 9uncin es a tra$s de dos 0ar+metros en lugar de uno solo. El $alor ba'o ser+ el 0rimer $alor del rango< # el $alor alto ser+ el 3ltimo. Eso signi9ica Aue si ingresamos el $alor 3 0rimero< # luego el $alor 5< nos de$ol$er+ un $alor aleatorio decimal entre< 0or su0uesto< 3 # 5. ,dem+s< ace0ta 0er9ectamente $alores negati$os. El $alor siem0re ser+ del ti0o !loat. =i se deseara o)tener un $alor aleatorio 0ero entero @ intC< de)eremos recurrir a la 9uncin int() 0ara con$ertirlo.
!loat ! < random(3#2); int i < random(3#2); int < int(random(3#2)); //1si'na a ! un ,alor decimal entre / ; 3#2 //->>?>Q No se puede asi'nar un ,alor aleatorio a //una ,ariable int //1si'na a un ,alor entero entre / to 3
Na Aue< como Aueda dic:o< los $alores Aue de$uel$e $alores im0redeci)les< cada $ez Aue el 0rograma se e8ecuta o)tendremos di9erentes resultados. Este n3mero 0uede ser utilizado 0ara controlar alg3n as0ecto del 0rograma.
smooth(); stro)eIei'ht(6/); stro)e(/, 60/); line(/, random(6//), line(/, random(6//), line(/, random(6//), line(/, random(6//), line(/, random(6//),
6//, 6//, 6//, 6//, 6//,
random(6//)); random(6//)); random(6//)); random(6//)); random(6//));
=i utilizamos la $ersin de random() Aue ace0ta dos 0ar+metros< tendremos mas control so)re algunas 0ro0iedades.
smooth(); stro)eIei'ht(2/); stro)e(/, 20/); !loat r < random(3, .3); stro)e(r * 3#:, 20/);
33
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 e8em0lo< 0odemos utilizar un ciclo H?> 0ara crear te6turas mu# interesantes # sacar ma#or 0ro$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 0rograma. Por lo tanto< 0odemos im0lementarlos 8unto con alguna e60resin relacional< 0or e8em0lo un I". En el siguiente e8em0lo< se e$al3a si el $alor es ma#or o menor Aue 5&< # di)u8a una 9igura di9erente de0endiendo 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 0odemos utilizarlo 0ara 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< 0ero Aueremos 9orzar a Aue siem0re sea el mismo. Para eso se utiliza la 9uncin random$eed(). Esta es la manera en la Aue 0roduciremos dic:os n3meros:
random$eed(,alor)
El 0ar+metro $alor tiene Aue ser del ti0o entero @intC. Ftilizar el mismo n3mero 0roducir+ siem0re el mismo orden de $alores. Es decir< mantendremos un $alor aleatorio< 0ero 9orzaremos a Aue siem0re 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
36
!loat r < random(6/); stro)eIei'ht(r); !loat o!!set < r * 3; line(i52/, 6//, i4o!!set, /); S
-@oise ;a 9uncin noise() nos 0ermite tener un am0lio control en los $alores aleatorios Aue creamos. Princi0almente< se utiliza 0ara crear mo$imientos org+nicos. Ja# tres $ersiones de la 9uncin< ace0ta un 0ar+metro< dos 0ar+metros e incluso tres 0ar+metros:
noise(x) noise(x, ;) noise(x, ;, ()
;a $ersin de un solo 0ar+metro 0ermite crear una sim0le secuencia de n3meros aleatorios. Por ende< m+s cantidad de 0ar+metros 0ermiten crear mas dimensiones de aleatoriedad. 'os 0ar+metros 0ueden ser usados 0ara crear te6turas en dos dimensiones< mientras Aue tres 0ar+metros 0ueden utilizarse 0ara crear 9iguras en tres dimensiones o mo$imientos de animacin $ariados. Inde0endientemente del $alor ingresado< siem0re se de$uel$e un $alor entre &.& # %.&. =i se desea otra clase de $alor< se 0uede recurrir a alguna de las o0eraciones aritmticas #a $istas. ;os n3meros generados 0or esta 9uncin< 0ueden ser utilizados 0ara 0roducir le$es cam)ios dentro de un mismo rango. Por e8em0lo< mo$imientos mu# cortos 0ero aleatorios de la misma 9igura @Aue sumados a $alores seno #Bo coseno 0roducir+n una $ariedad de mo$imientos org+nicosC. Por lo general< los me8ores $alores 0ara tra)a8ar son los Aue $an de entre &.&&5 # &.3< 0ero de0ende de Aue es lo Aue se Auiera conseguir. ,dem+s< 0osee en adicin la 9uncin noise$eed() la cual tra)a8a e6actamente igual Aue random$eed(). En el siguiente e8em0lo se incor0orar< tam)in< una $aria)le inc< la cual se utiliza 0ara 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/);
38
, < , 4 inc;
=i se utiliza el segundo 0ar+metro< se nos da la 0osi)ilidad de crear te6turas en dos dimensiones. En el siguiente e8em0lo< se utiliza 8unto con $ariaciones de la $aria)le inc # un ciclo H?> 0ueden utilizarse 0ara 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 ti0o noise son ilimitadas # de muc:a $ariedad. Fn e9ecto interesante es com)inarlo con un $alor de seno 0ara 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
60
(nidad 12
<ransfor*aciones) ;atrices , <raslaciones

translate(), pushCatrix(), popCatrix()
El sistema de coordenadas introducido en la unidad de "ormas utiliza la esAuina su0erior izAuierda 0ara $isualizar en la $entana de re0resentacin< con un origen en un sistema de coordenadas > e N. 'ic:o sistema 0uede ser modi9icado con trans9ormaciones. ;as coordenadas 0ueden< entonces< ser trasladadas< rotadas # escaladas< de esta 9orma las 9iguras $ariar+n su 0osicin< rotacin # tamaGo. -<raslacin ;a 9uncin translate() mue$e el origen de la esAuina su0erior izAuierda @la cual 0or de9ecto se encuentra en el &< &C a otra localizacin. ,ce0ta dos 0ar+metros. El 0rimero 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 0retenda di)u8ar des0us. =i %& es el 0ar+metro de (< # 3& es el 0ar+metro de y< un 0unto di)u8ado en la 0osicin @&< 5C se mostrar+ en la 0osicin @%&< 35C.
//-l mismo rect"n'ulo es dibu ado, pero solo el se'undo es //a!ectado por la !uncin translate, ;a Gue este es dibu ado //lue'o de su declaracin rect(/, 3, K/, 0/); translate(6/, 0/); //Cue,e 6/ pixeles a la derecha ; 0/ rect(/, 3, K/, 0/); //aba o //$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 0osicin de )ase ser+ (2/, :/).
rect(/, 3, K/, 0/); translate(6/, 0/);//Cue,e 6/ pixeles a la derecha ; 0/ aba o rect(/, 3, K/, 0/) translate(6/, 0/);//>epite traslacin, por lo tanto rect(/, 3, K/, 0/);//mue,e 2/ pixeles a la derecha ; :/ aba o
-%ontrolando <ransfor*aciones ;a trans9ormacin 0or matri6 es un con8unto de n3meros Aue de9ine como< en trminos geomtricos< la 9igura o 9orma es di)u8ada en 0antalla. 5rans9ormaciones # 9unciones como translate()< alteran los n3meros en esta matri6< 0ro$ocando Aue se di)u8e di9erente. En el e8em0lo anterior< :a)lamos de como estas trans9ormaciones 0osean la caracterstica de acumularse entre s. Es as Aue la 9uncin pushCatrix() nos sir$e 0ara guardar el estado de todas las trans9ormaciones en ese momento< as el 0rograma 0uede de$ol$erlo m+s tarde. Para regresar al estado anterior< se llama a la 9uncin popCatrix().
61
(amos a 0ensar< entonces< a una matri6 como una :o8a de 0a0el Aue lle$a escrito en su su0er9icie una lista con las trans9ormaciones Aue deseamos @trasladar< rotar< escalarC. uando una 9uncin translate() se e8ecuta< esta se agrega al 0a0el. Para guardar la actual matri6< 0ara utilizarla luego< agregamos una nue$a :o8a de 0a0el 0or encima de la 0ila # co0iamos la in9ormacin. ualAuier cam)io Aue generemos en la :o8a de arri)a< 0reser$ar+< sin em)argo< los n3meros originales Aue est+n de)a8o. Para $ol$er al sistema anterior de coordenadas< sim0lemente retiramos la :o8a Aue Aued encima @en la cual realizamos los cam)iosC.
=ir$e 0ensarlo< 0ara Auienes mane8an 0rogramas al estilo del ,do)e P:otos:o0 o EIMP< como Aue la matri6 es tan solo una ca0a. , dic:a ca0a 0odemos darle caractersticas di$ersas @trasladar< rotar< escalarC. Es esencial como se ingresan dic:as coordenadas en una matri6< 0ero se trata tan solo de una terminologa mas tcnica # mec+nica. ;a 9uncin pushCatrix() se utiliza 0ara aGadir una nue$a coordenada al gru0o< mientras Aue popCatrix() se utiliza 0ara remo$er dic:o gru0o. Por ende< la 9uncin pushCatrix() no 0uede ser utilizada sin popCatrix() # $ice$ersa. Para esto< com0araremos los siguientes e8em0los. ,m)os di)u8an dos rect+ngulos< 0ero con di9erentes resultados. En el segundo e8em0lo uno de los rect+ngulos se encuentra en una matri6 asociada a la 9uncin translate().
translate(00, /); rect(/, 2/, ::, 0/); rect(/, 3/, ::, 0/); //Cue,e 00 pixeles a la derecha
pushCatrix(); translate(00, /); //Cue,e 00 pixeles a la derecha rect(/, 2/, ::, 0/); popCatrix(); //>emue,e el mo,imiento //@a si'uiente !orma no es a!ectada por translate(), ;a Gue la //trans!ormacin est" escrita entre pushCatrix(); popCatrix() rect(/, 3/, ::, 0/);
,l utilizar una ma#or cantidad de matrices< uno 0uede tener m+s control de todo lo Aue 0asa en el 0rograma. En el siguiente e8em0lo< el 0rimer rect+ngulo es a9ectado 0or la 0rimer traslacin< el segundo 0or la 0rimera # 0or la segunda< el tercero solo 0or la 0rimera< #a Aue la segunda traslacin est+ asociada a una matri6 es0eci9ica.
pushCatrix(); translate(2/, /); rect(/, 6/, K/, 2/); pushCatrix(); translate(0/, /); rect(/, 0/, K/, 2/); popCatrix();
//Dibu a en (2/, 0/) //Dibu a en (3/, 0/)
62
rect(/, 3/, K/, 2/); popCatrix(); rect(/, K/, K/, 2/);
//Dibu a en (2/, 3/) //Dibu a en (/, K/)
;as trans9ormaciones restantes son incluidas en la siguiente unidad @Fnidad %!C.
63
(nidad 13
<ransfor*aciones) Aotacin , Escala

Elementos que se introducen en esta Unidad: rotate !1 scale !
;as 9unciones de trans9ormacin son 0oderosas maneras 0ara cam)iar la geometra de un sector es0ec9ico del 0rograma. Na sea 0or el uso de tan solo una< o 0or la com)inacin de $arias< se reAuiere entender como tra)a8a cada una 0or se0arado. El orden en Aue las trans9ormaciones son escritas< a9ecta de 9orma mu# notoria el com0ortamiento del 0rograma. -Aotando , Escalando ;a 9uncin rotate() 0ermite rotar las coordenadas de un sistema< de modo tal Aue las 9iguras # 9ormas sean di)u8adas con cierto +ngulo. /eci)e tan solo un 0ar+metro< el cual modi9ica la rotacin de acuerdo a un +ngulo:
rotate(an'ulo)
El 0ar+metro angulo asume Aue el $alor se encuentra en radianes. ;as 9iguras son siem0re rotadas en relacin a la 0osicin de origen @&< &C. omo en todas las trans9ormaciones< el e9ecto de rotacin tam)in es acumulati$o. =i :a# una rotacin de [B1 radianes # otra de [B1 radianes< entonces la 9igura Aue se di)u8e se rotar+ en [B- 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 e8em0los de8an en claro Aue la rotacin a )ase de la 0osicin de origen tiene sus limitaciones. Mas adelante se e60licar+ como com)inar trans9ormaciones. Por otro lado< la 9uncin scale() 0ermite controlar las coordenadas del sistemas 0ara magni9icarlas # di)u8ar 9iguras de ma#or escala. Esta so0orta uno o dos 0ar+metros:
scale(tama+o) scale(xtama+o, ;tama+o)
;a $ersin de un solo 0ar+metro 0ermite escalar la 9igura en todas sus dimensiones< mientras Aue la de dos 0ar+metros a)arca la escala en el e8e 6 # en el e8e # de manera indi$idual. ;os 0ar+metros a ingresar se e60resan como $alores decimales con una relacin de 0orcenta8es. Por e8em0lo< -.& :ace alusin a -&&U< %.5 a %5&U< # &.5 a 5&U.
64
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 e8em0los anteriores se $e Aue el contorno de la 9igura es a9ectado 0or la escala. Para solucionar este incon$eniente 0uede 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 <ransfor*aciones uando una 9igura es a9ectada 0or transtale()< rotate() o scale()< siem0re todo es en relacin a la coordenada de origen. Por e8em0lo< al rotar un rect+ngulo en la coordenada @5&< -&C< la rotacin se :ar+ so)re ese mismo e8e:
Para :acer Aue la 9igura rote so)re su 0ro0ia esAuina< se de)e cam)iar la coordenada a la 0osicin @&< &C. Para esto< utilizaremos la 9uncin translate(). uando la 9igura rote< lo :ar+ so)re su esAuina su0erior izAuierda.
6'
Ja# dos maneras de 0ensar las trans9ormaciones. Fn mtodo es utilizar las 9unciones 0ara trans9ormar< # luego corregir el 0ro)lema de 0osicin con las coordenadas 0ro0ias de la 9igura. El otro mtodo consiste en utilizar las 0ro0ias 9unciones de trans9ormacin 0ara corregir lo no deseado. Ftilizando este mtodo :a# Aue tener cuidado en el orden Aue se u)ica cada 9uncin. En el siguiente e8em0lo se muestra el mismo cdigo dos $eces 0ero con las 9unciones in$ertidas:
translate(Nidth/2, hei'ht/2); rotate(AB/D); rect(523, 523, 3/, 3/);
rotate(AB/D); translate(Nidth/2, hei'ht/2); rect(523, 523, 3/, 3/);
;os siguientes e8em0los demuestran el 0otencial de com)inar 9unciones de trans9ormacin< 0ero tam)in Aueda en claro Aue estas acciones reAuieren un ma#or 0laneamiento.
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/);
62
noHill(); translate(3/, 0/); rect(56/, 3, 2/, 6/); scale(2#3); rect(56/, 3, 2/, 6/);
;a 0ro0iedad acumulati$a de las 9unciones de trans9ormacin 0uede ser mu# 3til 0ara 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 0osicin de origen 0or de9ecto se encuentra en el (/, /)< esAuina su0erior izAuierda< # :ace re9erencia a una 0osicin de los 0i6eles. ;as 9unciones de trans9ormacin 0ueden alterar este sistema de coordenadas< en )ase a alg3n e9ecto Aue deseamos 0roducir.
//Cue,e el ori'en del (/,/) al centro si(e(6//, 6//); translate(Nidth/2, hei'ht/2); line(5Nidth/2, /, Nidth/2, /); //Dibu a e e Z line(/, 5hei'ht/2, /, hei'ht/2); //Dibu a e e V smooth(); no$tro)e(); !ill(233, 2/.); ellipse(/, /, .3, .3); //Dibu a 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()< 0uede 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, /); //Dibu a e e Z
63
line(/, 56, /, 6); //Dibu a e e Z smooth(); no$tro)e(); !ill(233, 2/.); ellipse(/, /, /#7, /#7); //Dibu a en el ori'en ellipse(56#/, 6#/, /#7, /#7); ellipse(6#/, 56#/, /#7, /#7);
,dem+s< 0uede usarse 0ara 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=cri0t.
//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); //Dibu a e e Z line(/, 6, /, hei'ht ); //Dibu a e e V smooth(); no$tro)e(); !ill(233, 2/.); ellipse(/, /, .3, .3); //Dibu a en el ori'en ellipse(Nidth/2, hei'ht/2, .3, .3); ellipse(Nidth, hei'ht, .3, .3);
66
(nidad 16
Estructuras) %ontinuidad
draN(), !rame>ate(), !rame*ount, setup(), no@oop()
5odos los 0rogramas< mostrados en las unidades anteriores< e8ecutan el cdigo #< 0osteriormente< lo detienen. ;os 0rogramas con animaciones o Aue modi9ican su contenido en $i$o< reAuieren estar e8ecut+ndose continuamente. 'ic:os 0rogramas< se e8ecutan de manera continua # 0ermiten< 0or lo tanto< animaciones o )ien conseguir datos a tra$s de dis0ositi$os de entrada. -Evaluacin %ontinua Fn 0rograma Aue estar+ e8ecut+ndose continuamente reAuiere de la 9uncin draN(). El cdigo dentro de un )loAue draN() es e8ecutado en un continuo loo0 @re0eticinC :asta Aue se detenga de e8ecutar el 0rograma o se cierre la $entana de re0resentacin. Fn 0rograma 0uede tener solo un )loAue draN(). ada $ez Aue el cdigo dentro del )loAue draN() es terminado de leer< lo muestra en la $entana de re0resentacin # $uel$e a leer desde la 0rimer lnea @siem0re dentro del )loAue draN()C. Por de9ecto< las im+genes son di)u8adas a .& cuadros 0or segundo @90sC. ;a 9uncin !rame>ate() nos 0ermite cam)iar la cantidad de esos cuadros. El 0rograma se e8ecutar+ a la $elocidad Aue se le d al !rame>ate()< a3n as< muc:os 0rogramadores am)iciosos suelen e6ceder la cantidad de cuadros 0or segundos en relacin al 0oder de su ordenador. =e recomienda no e6ceder los .& cuadros Aue #a $ienen 0or de9ecto. ;a $aria)le !rame*ount siem0re contiene el n3mero de cuadros Aue se est5 ejecutando desde Aue el 0rograma 9ue iniciado. Fn 0rograma Aue 0osee un )loAue draN() siem0re $ariar+ el n3mero de cuadros @%< -< 3< 1< 5< ....C :asta Aue el 0rograma sea detenido< la com0utadora agote su ca0acidad de 0rocesamiento o se 0ierda la 9uente de tensin Aue la alimenta.
//Bmprime cada nEmero de cuadro en la consola ,oid draN() R println(!rame*ount); S //$e e ecuta a . cuadros por se'undo, imprime cada cuadro en la consola ,oid draN() R !rame>ate(.); println(!rame*ount); S
on cam)iar alg3n 0ar+metro dentro de la estructura draN()< 0roduciremos un sim0le e9ecto de mo$imiento. Por e8em0lo< a tra$s de una $aria)le< cam)iar la 0osicin 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 reem0lazadas con los $alores actuales # $uel$e a correr las acciones en este orden:
68
!loat ; < /#/ !rame>ate(0/) 555555555555555555555555555555555555555555555555 -ntra al draN() line(/, /#/, 6//, /#/) ; < /#3 !rame>ate(0/) 555555555555555555555555555555555555555555555555 -ntra al draN() por se'unda ,e( line(/, /#3, 6//, /#3) ; < 6#/ !rame>ate(0/) 555555555555555555555555555555555555555555555555 -ntra al draN() por tercera ,e( line(/, 6#/, 6//, 6#/) ; < 6#3 -tc###
;a $aria)le de control mostrada anteriormente @llamada ;C 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 0uede com0ro)ar anteriormente< el 9ondo del 0rograma no se actualiza autom+ticamente con cada $uelta del )loAue draN(). Esto 0roduce un e9ecto de )arrido. =in em)argo< PAu 0asa si lo Aue Aueremos es solo una lnea mo$indose< en lugar de una es0ecie de )arridoQ. /ecurriremos a declararlo como una de las -ri*eras lBneas dentro del draN() # con un color en es0ec9ico. ;a solucin se 0iensa como si se estu$iese di)u8ando cada cuadro a mano. =i Aueremos Aue la 0osicin antigua de una 9igura desa0arezca< $ol$emos a 0intar el 9ondo< este 0intar+ la 9igura #< 0osteriormente< se di)u8ar+ la 9igura en la 0osicin actualizada.
!loat ; < /#/; ,oid draN() R !rame>ate(0/); bac)'round(2/.); ; < ; 4 /#3; line(/, ;, 6//, ;); S
;a $aria)le Aue controla la 0osicin de la lnea 0uede ser usada 0ara otros 0ro0sitos. Por e8em0lo< alterar el color del 9ondo:
!loat ; < /#/; ,oid draN() R !rame>ate(0/); bac)'round(; * 2#3); ; < ; 4 /#3; line(/, ;, 6//, ;); S
Pasado unos 0ocos segundos del 0rograma< la lnea desa0arece 0or de)a8o. on una sim0le estructura BH solucionamos ese 0ro)lema:
!loat ; < /#/; ,oid draN() R
80
!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 0rogramas din+micos< solo reAuieren ser e8ecutadas una $ez. El )loAue setup() 0ermite Aue cualAuier 9uncin Aue se escri)a dentro de el se e8ecute solo una $ez. Mu# 3til 0ara 9unciones como si(e() o loadBma'e()< Aue suelen ser e8ecutadas 3nicamente la 0rimera $ez. El )loAue setup() se escri)e siem0re antes Aue el )loAue draN() #< al igual Aue con el )loAue draN()< 0uede :a)er solo un )loAue setup() 0or 0rograma. uando un 0rograma es e8ecutado< 0rimero 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 e8em0lo< 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().
!loat ; < /#/; ,oid setup() R si(e(6//, 6//); smooth(); !ill(/); S ,oid draN() R bac)'round(2/.); ellipse(3/, ;, K/, K/);
81
; 4< /#3; i! (; 8 63/) R ; < 53/#/; S S
uando este cdigo es e8ecutado< las $aria)les son reem0lazadas con los $alores actuales # $uel$e a correr las acciones en este orden:
!loat ; < /#/ si(e(6//, 6//) 55555555555555555555555555555555555555555555555 smooth() !ill(/) bac)'round(2/.) 55555555555555555555555555555555555555555555555 ellipse(3/, /#/, K/, K/) ; < /#3 bac)'round(2/.) 55555555555555555555555555555555555555555555555 ellipse(3/, /#3, K/, K/) ; < 6#/ bac)'round(2/.) 55555555555555555555555555555555555555555555555 ellipse(3/, 6#/, K/, K/) ; < 6#3 -tc####
-ntra al setup()
-ntra al draN()
-ntra al draN() por se'unda ,e(
-ntra al draN() por tercera ,e(
uando el $alor de y es ma#or a %5&< el cdigo en la estructura I" con$ierte el $alor a O5&. ;a $aria)le Aue cam)ia con cada re0eticin 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 re0eticin del mismo< 0or lo tanto su $alor nunca cam)iara. Por otro lado< 9uera de los )loAues setup() # draN() solo 0ueden declararse # asignarse $aria)les. =i se declarara una 9uncin< causar+ un error. =i un 0rograma solo di)u8ar+ un cuadro< este 0uede declararse en el setup(). ;a 3nica di9erencia entre setup() # draN() es Aue el setup() se e8ecuta solo una ve7.
,oid setup() R si(e(6//, 6//); smooth(); !ill(/); ellipse(3/, 3/, ::, ::); S
Ftilizando la 9uncin no@oop()< 0odemos :acer Aue el draN() de8e de re0etir # sim0lemente di)u8e un cuadro. El siguiente e8em0lo es similar al anterior< con la di9erencia Aue la eli0se es di)u8ada en el draN():
,oid setup() R si(e(6//, 6//); smooth(); !ill(/); no@oop(); S ,oid draN() R ellipse(3/, 3/, ::, ::); S
82
-E&tensin de la :aria/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 0ara conocer la e6tensin Aue 0osee una $aria)le es mu# sim0le: su la $aria)le est+ dentro de una estructura< esa $aria)le es local # 0uede usarse solamente dentro de esa estructuraR si la $aria)le est+ en el 0rograma< 9uera de cualAuier estructura< esa $aria)le es glo)al # 0uede usarse en cualAuier estructura. ;as $aria)les declaradas en el setup() 0ueden usarse solo en el setup(). ;as $aria)les declaradas en el draN() 0ueden usarse solo en el draN().
int d < 36; ,oid setup() R si(e(6//, 6//); int ,al < d * 2; !ill(,al); S ,oid draN() R int ; < :/; line(/, ;, d, ;); ; 5< 23; line(/, ;, d, ;); S //@a ,ariable d es 'lobal, puede ser usada donde sea //@a ,ariable local ,al, puede ser usada solo en el //setup() //@a ,ariable local ;, puede ser usada solo en el draN()
uando una $aria)le es creada dentro de un )loAue< al salir del )loAue< esa $aria)le es destruida. Esto signi9ica Aue no 0uede 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 im0lementacin de $aria)les locales # glo)ales 0ermite Aue se 0ueda 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 0uede 0roducir con9usin en Auien 0rograma.
int d < .3; ,oid setup() R si(e(6//, 6//); int d < 7/; rect(/, /, 00, d); S ,oid draN() R rect(00, /, 00, d); S //1si'na .3 a la ,ariable d //1si'na 7/ a la ,ariable local d //&sa la ,ariable local d con //,alor 7/ //&sa d con ,alor de .3
83
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.
84
(nidad 18
Estructuras) .unciones
,oid, return
Fna 9uncin contiene en s misma un modulo de modi9icacin de 0rograma. =e :an utilizado :asta a:ora 9unciones Aue $ienen incluidas en Processing< tales como si(e()< line()< stro)e()< # translate()< 0ara escri)ir los 0rogramas. =in em)argo< es 0osi)le escri)ir nuestras 0ro0ias 9unciones. ;as 9unciones :acen Aue el cdigo redundante sea mas conciso al mostrarlo en 9orma de )loAue< 0or e6traer elementos comunes. ,l mantener 9orma de )loAue< 0ermite Aue el mismo cdigo se utilice una in9inidad de $eces sin necesidad de re0etir las lneas. ,dem+s< mantiene una estructura mas sencilla de leer en caso de tener alg3n error. ;as 9unciones de Processing 0or lo general ace0tan una determinada cantidad de 0ar+metros. Por e8em0lo< line() ace0ta cuatro 0ar+metros< los cuales de9inen la 0osicin de dos 0untos. ,l cam)iar los n3meros< se cam)ia la 0osicin de la linea. 5am)in el com0ortamiento de la 9uncin 0uede de0ender de la cantidad de 0ar+metros Aue le sean en$iados. Por e8em0lo< la 9uncin !ill() al reci)ir un 0ar+metro 0intar+ en escala de grises< con dos 0ar+metros ser+n grises con trans0arencia # con tres 0ar+metros /EB. Fna 9uncin 0uede ser imaginada como una ca8a con una serie de mecanismos dentro Aue 0ermiten actuar so)re una serie de datos. Por lo general :a# datos de entrada # cdigo dentro de la ca8a< los cuales 0roducen datos de salida:
Por e8em0lo< una 9uncin 0uede utilizarse 0ara sumar %& a un n3mero o multi0licar dos:
El e8em0lo anterior es sumamente sim0le< 0ero el conce0to 0uede e6tenderse a cuestiones Aue no sean necesariamente tan o)$ias:
8'
-1/straccin En trminos de 0rograma< la 0ala)ra a)straccin tiene un signi9ica distinto a el sim0le :ec:o de como uno 0uede 0intar o di)u8ar. =e re9iere a la accin de esconder detalles< en9oc+ndose 3nicamente en los resultados. ;a inter9az de un autom$il 0ermite Aue el trans0orte se mue$a 0or el accionar de los 0edales # el $olante< ignorando los 0rocesos Aumicos internos de los 0istones # la com)ustin. ;a idea de a)straccin 0uede 0ensarse tam)in desde el cuer0o :umano. Por e8em0lo< 0odemos controlar nuestra res0iracin< 0ero 0or lo general este 0roceso es in$oluntario. Imaginemos 0or un momento Aue tu$iramos total control de cada accionar de nuestro cuer0o. =i control+ramos nuestra res0iracin< los latidos del corazn< las reacciones Aumicas Aue se 0roducen en nuestro cuer0o # la retroalimentacin de las neuronas< nos sera com0letamente im0osi)le :acer algo tan sim0le como leer un li)ro o escri)ir un cdigo 0ara un 0rograma. 2uestro cere)ro a)strae estos as0ectos 0ara Aue 0odamos concentrarnos en otros as0ectos de la $ida. 'e esta 9orma< la a)straccin es 9undamental a la :ora de escri)ir un 0rograma. En Processing contamos con a)stracciones< 9unciones como line()< ellipse() # !ill()< ocultan los 0rocesos Aue realizan 0ara Aue 0odemos concentrarnos en su 0ro0ia im0lementacin. =i nos interesa di)u8ar una lnea< 0osi)lemente nos interese su 0osicin< tamaGo< color # grosor< # no el tener una gran cantidad de cdigo Aue e8ecute dic:o sistema. -%reando .unciones de (suario ,ntes de e60licar en detalle como crear una 9uncin de usuario< e60licaremos el 0orAue alguien Auerra crear su 0ro0ia 9uncin. El siguiente 0rograma e60lica como acortar un sistema< 0ara Aue sea m+s modular< a tra$s de una sim0le 9uncin. Esto :ace Aue el cdigo sea m+s sencillo de leer< modi9icar< e60andir. ,lgo mu# com3n es di)u8ar una 9igura en 0antalla re0etidas $eces. Poseemos el cdigo Aue 0ermite crear la 9orma Aue se muestra a continuacin< # reAuerimos 0oder generar la te6tura Aue se $e a la derec:a:
;o 0rimero Aue :aremos ser+ di)u8ar sim0lemente la 9igura en 0antalla< solo 0ara 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/, :/, :/); !ill(/); ellipse(3/46/, 3/, 0/, 0/); !ill(233); ellipse(3/46:, .3, :, :); S
//*rculo =lanco //*rculo Ne'ro //*rculo =lanco ; AeGue+o
El 0rograma anterior muestra una 9orma mu# lim0ia # clara de di)u8ar una sim0le 9igura. Pero si dese+ramos
82
Aue 9uesen dos< nos $eremos o)ligados a multi0licar el n3mero de lneas de cdigo. =i el cdigo tiene . lneas< tendremos %-. Para diseGar nuestra te6tura< necesitaremos . 9iguras< 0or lo tanto son 3. lneas de cdigo. Imaginemos un caso con 3& 9iguras< dentro del )loAue draN() se 0resentaran %*& lneas de sim0le 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< 0odemos utilizar una 9uncin 0ara sim0li9icar la tarea. =im0lemente agregaremos los datos de entrada de la 0osicin en 6 # en #.
,oid setup() R si(e(6//, 6//); no$tro)e(); smooth(); no@oop(); S ,oid draN() R o o(:3, ..); o o(2/, 3/); S ,oid o o(int x, int ;) R !ill(233); ellipse(x, ;, :/, :/); !ill(/); ellipse(x46/, ;, 0/, 0/); !ill(233); ellipse(x46:, ;53, :, :); S
;a 9uncin es de * lneas de cdigo< 0ero tan solo lo escri)iremos una $ez. on esta estrategia< es 0osi)le di)u8ar 3& o8os con 3* 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 0rograma es interrum0ido 0or la 9uncin. Fna $ez terminada la e8ecucin del cdigo dentro de la 9uncin< se dis0one a leer lo Aue sigue en el )loAue draN():
83
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 o o ellipse(:3, .., :/, :/) !ill(/) ellipse(K3, .., 0/, 0/) !ill(233) ellipse(D6, 07, :, :) !ill(233) 555555555555555555 Muel,e al draN(), se des,a a la !uncin o o 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< 0odemos crear tantas 9iguras como Aueramos. 'e esta 9orma de8aremos de 0reocu0arnos 0or como la 9igura es di)u8ada< # nos concentraremos en en$iar correctamente la 0osicin a tra$s de los dos 0ar+metros:
,oid setup() R si(e(6//, 6//); no$tro)e(); smooth(); no@oop(); S ,oid draN() R o o(:3, ..); o o(2/, 3/); o o(:3, K.); o o(2/, D/); o o(:3, 6/.); o o(2/, 66/); S ,oid o o(int x, int ;) R !ill(233); ellipse(x, ;, :/, :/); !ill(/); ellipse(x46/, ;, 0/, 0/); !ill(233); ellipse(x46:, ;53, :, :); S
;o im0ortante 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,0licara un 9iltro de imagenQ Fna $ez Aue se 0iensa en Aue se Auiere :acer< :a# Aue 0ensar en los 0ar+metros Aue reci)ir+. 'e este modo se construir+ una 9uncin en 0ocos 0asos. En el siguiente e8em0lo< el mismo e60lora algunos detalles de la 9uncin antes de escri)irla. 'es0us< se constru#e la 9uncin< donde se agrega un 0ar+metro cada $ez Aue se com0rue)a el cdigo:
,oid setup() R si(e(6//, 6//); smooth(); no@oop();
86
S ,oid draN() R //Dibu ar una 'ruesa Z color 'ris claro stro)e(6:/); stro)eIei'ht(2/); line(/, 3, :/, :3); line(:/, 3, /, :3); //Dibu a una normal Z color ne'ro stro)e(/); stro)eIei'ht(6/); line(0/, 2/, 7/, D/); line(7/, 2/, 0/, D/); //Dibu a 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 0ueda di)u8ar las tres >< 0rimero crearemos el cdigo 0ara Aue solo di)u8e una. ;lamaremos a la 9uncin dibu arZ() 0ara Aue sea m+s claro. 'entro< escri)iremos el cdigo 0ara 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 0ar+metros< di)u8ar+ la > tal cual est+ en el cdigo:
,oid setup() R si(e(6//, 6//); smooth(); no@oop(); S ,oid draN() R dibu arZ(); S ,oid dibu arZ() R //Dibu ar 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 0ar+metro. En el siguiente e8em0lo< la $aria)le gris a sido aGadida 0ara 0oder reci)ir un 0ar+metro Aue act3e como $aria)le de control de la escala de grises de la >. Este 0ar+metro $aria)le< de)e incluir el ti0o # un nom)re.
,oid setup() R si(e(6//, 6//); smooth(); no@oop(); S ,oid draN() R dibu arZ(/); //$e en,a como par"metro el ,alor / S ,oid dibu arZ(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
88
Esto est+ )ien 0ara un e8em0lo sencillo< 0ero una 9uncin 0uede no necesariamente ace0tar solo un 0ar+metro. Podemos crear una cantidad ilimitada de estos. ada 0ar+metro de)e tener un lugar entre los 0arntesis< 0osterior al llamado de la 9uncin. 'e)e es0eci9icarse el ti0o de dato # el nom)re de cada uno de ellos. En el siguiente e8em0lo< se agrega el 0ar+metro grosor:
,oid setup() R si(e(6//, 6//); smooth(); no@oop(); S ,oid draN() R dibu arZ(/, 0/); //Aasa los ,alores / ; 0/ a dibu arZ() S ,oid dibu arZ(int 'ris, int 'rosor) R stro)e('ris); stro)eIei'ht('rosor); line(/, 3, :/, :3); line(:/, 3, /, :3); S
En el siguiente e8em0lo< se e6tiende sus 0ro0iedades con tres 0ar+metros m+s adicionales a los anteriores:
,oid setup() R si(e(6//, 6//); smooth(); no@oop(); S ,oid draN() R dibu arZ(/, 0/, ./, 0/, 0:); S ,oid dibu arZ(int 'ris, int 'rosor, int x, int ;, int lar'o) R stro)e('ris); stro)eIei'ht('rosor); line(x, ;, x4lar'o, ;4lar'o); line(x4lar'o, ;, x, ;4lar'o); S
Ja# Aue ser cuidadosos a la :ora de 0rogramar 9unciones< :aciendo 0aso 0or 0aso< sin 0erder el o)8eti$o original. En este caso< 0odemos 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 dibu arZ(6:/, 2/, /, 3, :/); dibu arZ(/, 6/, 0/, 2/, :/); dibu arZ(233, 2, 2/, 0D, :/); S ,oid dibu arZ(int 'ris, int 'rosor, int x, int ;, int lar'o) R stro)e('ris); stro)eIei'ht('rosor); line(x, ;, x4lar'o, ;4lar'o); line(x4lar'o, ;, x, ;4lar'o); S
100
,:ora Aue tenemos 0rogramada nuestra 9uncin dibu arZ()1 es 0osi)le crear cosas mu# interesantes Aue seran 0oco 0r+cticas sin la im0lementacin de una de ellas. Por e8em0lo< con un llamado de la 9uncin dentro de una estructura H?>< 0odemos iterar con 0eAueGas $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 dibu arZ(2//5 i*6/, (2/5i)*2, i, i/2, K/); S S ,oid dibu arZ(int 'ris, int 'rosor, int x, int ;, int lar'o) R stro)e('ris); stro)eIei'ht('rosor); line(x, ;, x4lar'o, ;4lar'o); line(x4lar'o, ;, x, ;4lar'o); S
,oid setup() R si(e(6//, 6//); smooth(); no@oop(); S ,oid draN() R !or (int i < /; i 9 K/; i44) R //Dibu a K/ Hi'uras dibu arZ(int(random(233)), int(random(0/)), int(random(Nidth)), int(random(hei'ht)), 6//); S S ,oid dibu arZ(int 'ris, int 'rosor, int x, int ;, int lar'o) R stro)e('ris); stro)eIei'ht('rosor); line(x, ;, x4lar'o, ;4lar'o); line(x4lar'o, ;, x, ;4lar'o); S
Para el siguiente e8em0lo usaremos una 9uncin Aue nom)raremos ho a() # otra Aue llamaremos parra(). on esto se 0retende demostrar como una 9uncin 0uede correr dentro de otra. Para em0ezar de9iniremos Aue 0ar+metros reAuerimos:
!loat x !loat ; !loat ancho int dir *oordenada Z *oordenada V 1ncho de la !i'ura en pixeles Direccin, siendo 6 (i(Guierda) o 56 (derecha)
El 0rograma 0ara di)u8ar la 9igura es mu# sencillo:

,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); no@oop(); S ,oid draN() R
101
ho a(2:, D0, :/, 6); S ,oid ho a(int x, int ;, int ancho, int dir) R pushCatrix(); translate(x, ;); //Cue,e la posicin scale(ancho); //-scala el tama+o be'in$hape(); //Dibu a 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()< 0osee 0ar+metros 0ara cam)iar la 0osicin< el n3mero de :o8as # el tamaGo de las mismas:
int x int num\o as !loat ho as1ncho *oordenada Z NEmero total de ho as en la parra 1ncho de las ho as en pixeles
on esta 9uncin se di)u8a una lnea $ertical # luego determina el es0acio 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\o as, int ho as1ncho) R stro)e(233); line(x, /, x, hei'ht); no$tro)e(); int 'ap < hei'ht / num\o as; int direccion < 6; !or (int i < /; i 9 num\o as; i44) R int r < int(random('ap)); ho a(x, 'ap*i 4 r, ho as1ncho, direccion); direccion < 5direccion; S S //*opiar ; pe'ar la !uncin ho a() aGu
-So/recarga de .unciones ;as 9unciones 0ueden tener el mismo nom)re< siem0re # cuando tengan distinta cantidad de 0ar+metros. ,l crear 9unciones con el mismo nom)re< se lo denomina sobrecarga de funciones. Esto es lo Aue 0ermite Aue Processing tenga 9unciones mas de una $ersin de 9unciones como !ill()1 ima'e() # text()1 cada una ace0ta di9erentes 0ar+metros. Por e8em0lo< !ill() 0uede tener uno< dos< tres o :asta cuatro 0ar+metros. ada $ersin de !ill() con9igura el color de relleno de una 9igura< #a sea en escala de grises< grises con trans0arencia< /EB o /EB con trans0arencia< res0ecti$amente. Fn 0rograma 0uede< tam)in< tener dos 9unciones con el mismo nom)re # el mismo n3mero de 0ar+metros< 0ero sus 0ar+metros son de ti0os de datos di9erentes. Por e8em0lo< :a# tres $ersiones di9erentes de !ill() Aue ace0tan un solo 0ar+metro. ;a 0rimer $ersin utiliza un 0ar+metro ti0o int< 0ara escala de grises. ;a segunda $ersin utiliza uno del ti0o float< tam)in 0ara escala de grises. N la tercer $ersin ace0ta un
102
0ar+metro del ti0o color< 0ara con9igurar directamente desde un color. En el lengua8e de Processing< sera mu# 9rustrante con9igurar un nom)re distinto solo 0ara o)tener el mismo resultado. El siguiente e8em0lo utiliza tres $ersiones distintas de dibu arZ()< 0ero con el mismo nom)re.
,oid setup() R si(e(6//, 6//); smooth(); no@oop(); S ,oid draN() R dibu arZ(233); //- ecuta la primer !uncin dibu arZ() dibu arZ(3#3); //- ecuta la se'unda !uncin dibu arZ() dibu arZ(/, 2, .., .D, 0:); //- ecuta la tercer !uncin S //dibu arZ() //Dibu a una Z con un ,alor de 'ris ,oid dibu arZ(int 'ris) R stro)e('ris); stro)eIei'ht(2/); line(/, 3, :/, :3); line(:/, 3, /, :3); S //Dibu a una Z ne'ra con determinado ,alor de 'rosor ,oid dibu arZ(!loat 'rosor) R stro)e(/); stro)eIei'ht('rosor); line(/, 3, :/, :3); line(:/, 3, /, :3); S //Dibu a una Z con determinado ,alro de 'ris, 'rosor //posicin ; tama+o ,oid dibu arZ(int 'ris, int 'rosor, int x, int ;, int s) R stro)e('ris); stro)eIei'ht('rosor); line(x, ;, x4s, ;4s); line(x4s, ;, x, ;4s); S
-%alculando , Aegresando :alores En los e8em0los anteriores< la salida 0roducida 0or una 9uncin di)u8a una 9igura o una 9orma en la 0antalla. 2o o)stante< :a# $eces Aue 0re9erimos Aue la 0ro0ia salida Aue se 0roduce sea un ti0o de dato. , esto se lo llama regresar un $alor. 5odas las 9unciones 0uede regresar un $alor< como un int o un !loat. =i la 9uncin no regresa ning3n $alor en 0articular< se utiliza la 9uncin es0ecial llamada ,oid @cu#o signi9icado es $ac:o< es decir< la 9uncin regresa un $alor $acoC. El ti0o de dato Aue regresa la 9uncin se declara a la izAuierda del nom)re de la misma. ;a 0ala)ra return es usada 0ara salir de la 9uncin # regresar a la 0osicin de la cual 9ue llamada. =i una 9uncin regresar+ un $alor< se utiliza return 0ara indicar Aue $alor se de)e de$ol$er. ;a accin de utilizar return es usualmente usada en la 3ltima lnea de la 9uncin< 0uesto 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 e8em0lo< random() de$uel$e un $alor ti0o !loat< # la 9uncin color() de$uel$e un $alor ti0o color. =i la 9uncin $a a de$ol$er un $alor< de)e llamarse dentro de una $aria)le:
!loat d < random(/, 6//); ellipse(3/, 3/, d, d);
,dem+s< de)emos ser cuidadosos con el ti0o de dato Aue estamos utilizando 0ara guardar el $alor:
int d < random(/, 6//); ellipse(3/, 3/, d, d);
//->>?>Q random() re'resa un ,alor tipo !loat
=i consultamos la re9erencia de cada 9uncin< 0odemos tener una idea de Aue clase de dato mane8a cada 9uncin en 0articular. El 0ro)lema ocurre cuando utilizamos 9unciones de usuario. Para escri)ir nuestras 0ro0ias 9unciones< sim0lemente reem0lazaremos el ti0o de datos ,oid 0or el ti0o de datos Aue 0retendemos de$ol$er. 2o :a# Aue ol$idar incluir la 0ala)raOcla$e return dentro< de 0re9erencia en la 3ltima lnea. El siguiente e8em0lo muestra una manera mu# sim0le de escri)ir una 9uncin Aue de$uel$e datos:
,oid setup() R si(e(6//, 6//); !loat ! < a,era'e(62#/, :#/); 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#/); println(c); S !loat !ahrenheit1*elsius(!loat t) R !loat ! < (t502#/) * (3#//7#/); return !; S
//1si'na 7#/ a !
//1si'na 202#KKKK7 a c
104
(nidad 20
.or*as) Par5*etros , Aecursin

;os 0rogramas 0ro$een de :erramientas mnimas 0ara la e60loracin # la )3sAueda de sistemas con com0ortamientos 0articulares. Fna de estas o0ciones es recurrir al uso de 9unciones. uando una 9igura es di)u8ada a 0artir de los 0ar+metros Aue reci)e< se dice Aue esa 9orma esta parametri3ada. ,dem+s< una 9uncin 0uede 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*etri7adas ;a 9uncin ho a() @$ista anteriormenteC es un claro e8em0lo de una 9orma 0arametrizada. 'e0endiendo los 0ar+metros Aue reci)a< 0roduce un 9orma di9erente. ;a 9orma est+ condicionada a sus 0ar+metros:
;as cartas ,rs Magna creadas 0or 5atsu#a =aito< muestra un e8em0lo 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 0ara crear resultados ines0erados:
Fn sim0le 0rograma Aue 0uede em0learse 0ara generar dic:os resultados 0odra ser el siguiente:
10'
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 0ermite crear< sin em)argo< un n3mero 9inito de com)inaciones. 7tra 9orma de crear 9ormas 0arametrizadas es 0or incluir $alores de entrada a tra$s de alg3n dis0ositi$o. Este es uno de los m+s grandes a$ances de crear $isual con cdigo. Fna sim0le 9uncin arco()< creada usando be(ierMertex()< 0uede generar cam)ios continuos modulares 0or cam)iar un sim0le 0ar+metro. El 0ar+metro 0ara la 9uncin arco() es un n3mero decimal @9loatC< as Aue 0ueden generarse $ariaciones sumamente 0eAueGas.
!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 0arametrizado< como la 9uncin arco !< el $alor de un 0ar+metro 0uede a9ectar a mas de una $aria)le. Esto es llamado coupling @0are8asC. =i cam)iamos un 0oco el cdigo dentro de la 9uncin arco !< el $alor de entrada cur$atura 0uede 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 e8em0lo mu# sencillo. El mismo 0ar+metro 0uede utilizarse 0ara cam)iar as0ectos como la $isualizacin< la rotacin o la escala. El siguiente 0rograma es 0rue)a de ello:
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
-Aecursin Fn e8em0lo 0r+ctico de algo recurrente es situarse entre dos es0e8os # $er el Kin9initoL. En trminos del 0rograma< la recursin se 0roduce cuando una 9uncin 0uede 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 0rograma genera el mismo resultado de dos maneras distintas. Fna es 0or un ciclo H?> # la otra 0or 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 dibu ar@ineas(3, 63); S ,oid dibu ar@ineas(int x, int num) R line(x, 2/, x, D/); i! (num 8 /) R dibu ar@ineas(x43, num56); S S
El e8em0lo de recursin consume muc:os m+s recursos # 0uede em0eorar el rendimiento de nuestro 0rograma. Para c+lculos mu# sim0les< una estructura .;< es una gran solucin. 2o o)stante< la recursin a)re un a)anico de 0osi)ilidades )astante interesantes. ;os siguientes e8em0los utilizan una 9uncin llamada dibu arT()< 0ara as mostrar los di9erentes e9ectos de la recursin:
103
int x < 3/; //*oordenada Z del centro int ; < 6//; //*oordenada V de aba o int a < 03; //Citad del ancho ,oid setup() R si(e(6//, 6//); no@oop(); S ,oid draN() R dibu arT(x, ;, a); S ,oid dibu arT(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 dibu arT() 0uede :acerse una recursin si se llama a los elementos del )loAue nue$amente. =im0lemente se necesitar+ agregar una $aria)le num Aue 0ermita 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 aba o 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 dibu arT(x, ;, a, n); S ,oid dibu arT(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 ; dibu ar en //pantalla# i! (num 8 /) R dibu arT(x5apex, ;5apex, apex/2, num56); dibu arT(x4apex, ;5apex, apex/2, num56); S S
;a estructura )inaria en 9orma de +r)ol< 0uede ser $isualizada de di$ersas maneras. El siguiente 0rograma 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 dibu ar*irculo(x, r, n); S ,oid dibu ar*irculo(int x, int radius,
int
num)
106
!loat tt < 62: * num/.#/; !ill(tt); ellipse(x, 3/, radius*2, radius*2); i! (num 8 6) R num < num 5 6; dibu ar*irculo(x 5 radius/2, radius/2, num); dibu ar*irculo(x 4 radius/2, radius/2, num); S S
Fna 0eAueGa modi9icacin a las $aria)les 0roducen di9erentes resultados en la $isualizacin. =i a cada crculo se le agregara una $alor aleatorio 0ara marcar la 0osicin< el resultado sera una imagen con una mezcla eAuili)rada entre orden # desorden. En el siguiente e8em0lo< 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 com0osicin $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 dibu ar*irculo(x, ;, r, n); S ,oid dibu ar*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; dibu ar*irculo(nue,ox, nue,o;, radius/2, num); S S S
108
(nidad 21
:alores de Entrada) ;ouse

mouseZ, mouseV, pmouseZ, pmouseV, mouseAressed, mouse=utton cursor(), no*ursor()
;a 0antalla del ordenador es tan solo un 0uente entre nuestro cuer0o 9sico # una cantidad a)ismal de circuitos elctricos Aue :a)itan dentro de una com0utadora. ontrolamos los elementos de la 0antalla a tra$s de K0rtesisL 9sicas< tales como 0antallas t+ctiles< tracH)alls o 8o#sticHs. =in em)argo< el m+s com3n de todos estos dis0ositi$os 0osi)lemente sea el mouse @ratnC. El mouse de los ordenadores data de 9inales de %4.&< cuando 'ouglas Engel)art lo 0resent como un dis0ositi$o del o2O;ine =#stem @2;=C< uno de los 0rimeros sistemas de ordenadores con $isualizacin de $ideo. El mouse 9ue incluido como conce0to en >ero6 Palo ,lto /esearc: enter @P,/ C< 0ero no 9ue :asta %4*1 Aue la ,00le 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 misma. =e encarga de cam)iar en 0antalla la 0osicin >ON del cursor. -$atos del ;ouse En Processing< las $aria)les Aue nos 0ermiten o)tener datos del mouse son mouseZ # mouseV @ntese el uso de ma#3sculas en la > # en la NC tomando como re9erencia la esAuina su0erior izAuierda como e8e &<&. Para $er los $alores actuales del mouse en la consola< se recurre a un sim0le 0rograma:
,oid draN() R !rame>ate(62); println(mouseZ 4 W F W 4 mouseV); S
uando un 0rograma inicia< el $alor de mouseZ # mouseV es &. =i el cursor se mue$e dentro de la $entana de re0resentacin< el $alor cam)ia a la actual 0osicin 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 0rograma donde no e6iste una estructura draN() o est+ acti$ada la 9uncin no@oop() en el setup()< los $alores de am)os ser+n siem0re &. Eeneralmente< la 0osicin del mouse es utilizada 0ara controlar la 0osicin de algunos elementos de 0antalla. ;o interesante se 0roduce cuando e6isten di9erentes relaciones entre unos elementos # otros a )ase de conseguir datos de entrada 0or la 0osicin del mouse. Para in$ertir los $alores del mouse< sim0lemente :a# Aue restarle a mouseZ el anc:o de 0antalla @NidthC # a mouseV el alto de 0antalla @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
110
//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); ellipse(mouseZ42/, 3/, 00, 00); ellipse(mouseZ52/, D., 00, 00); S
//*irculo de 1rriba //*irculo de el Cedio //*irculo de 1ba o
//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 1ba o 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 im0rimen como $alor la 0osicin del mouse 0re$ia al cuadro Aue se esta e8ecutando. =i el mouse no se mue$e< el $alor siem0re ser+ el mismo. =in em)argo< si el mouse se mue$e r+0idamente< lo $alores 0ueden oscilar entre di$ersos 0ar+metros. Para $er esta di9erencia< se 0uede e8ecutar un sim0le 0rograma Aue alterne los mo$imientos lentos # r+0idos del mouse:
,oid draN() R !rame>ate(62); println(pmouseZ 5 mouseZ); S
111
,l di)u8ar una lnea desde la anterior 0osicin del mouse :asta la 0osicin actual< se re$ela la $elocidad # la direccin del trazado. uando el mouse est+ Auieto< si di)u8a un 0unto. 2o o)stante< al mo$er el mouse< se di)u8an largas lneas.
// Dibu a 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 0ueden utilizarse 0ara controla la escala< 0osicin # rotacin de los elementos del 0rograma. Por e8em0lo< 0ueden em0learse 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 0or mouseZ # mouseV< :a# Aue 0ensar 0rimero en la clase de 0ar+metros Aue ace0tan dic:as 9unciones de trans9ormacin. Por e8em0lo< la 9uncin rotate() solo ace0ta $alores en radianes. Para :acer Aue una 9igura rote en 3.& grados< es necesario con$ertir los $alores de mouseZ en $alores de &.& a -[. En el siguiente e8em0lo< se utiliza la 9uncin map() 0ara 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
112
'e la misma 9orma< se 0uede utilizar una estructura BH 0ara reconocer indi$idualmente di9erentes sectores de la 0antalla:
// @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/); //1ba o5B(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/); //1ba o5Derecha S S
113
// @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
-4otones del ;ouse ;os dis0ositi$os de entrada de las com0utadora< 0or lo general< 0oseen entre - # 3 )otones< # Processing 0uede detectarlos. ;a deteccin de la 0osicin del mouse< sumado a los )otones< 0ermiten utilizar al mouse como un im0ortante dis0ositi$o de entrada en un 0rograma interacti$o. ;a $aria)le mouseAressed de$uel$e un $alor true cuando un )otn del mouse es o0rimido< 0or el contrario de$uel$e un !alse. ,dem+s< 0ermite detectar Aue )otn 9ue o0rimido a tra$s de la $aria)le mouse=utton< 0udiendo ser su $alor @-HT @izAuierdoC< >BX\T @derec:oC # *-NT-> @centroC< de0endiendo el )otn Aue se desee detectar. Estas $aria)les 0ueden utilizarse inde0endientes 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! (mouseAressed << true) 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
114
S rect(23, 23, 3/, 3/); S
2ota: ,l utilizar so9t?are Aue detecte dis0ositi$os de entrada< se suele correr el riesgo de Aue el usuario no 0osea el dis0ositi$o indicado @es0ecialmente si se 0lanea su)ir el 0ro#ecto a la ?e)C. Por e8em0lo< e6isten usuarios Aue 0oseen un dis0ositi$o de mouse con dos )otones # otros Aue tienen tres )otones. Es im0ortante tener esto en mente a la :ora de 0rogramar con dis0ositi$os de entrada. -Icono del %ursor El cursor 0uede ser ocultado con la 9uncin no*ursor()< # del mismo modo 0uede reem0lazarse 0or la 9uncin cursor(). uando la 9uncin no*ursor() se est+ e8ecutando< el cursor se encuentra totalmente oculta< sin em)argo< la 0osicin 0uede conseguirse con mouseZ # mouseV.
// Dibu a 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+ com0letamente 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/.); i! (mouseAressed << true) R cursor(); S S
,dem+s< la 9uncin cursor() ace0ta determinados 0ar+metros Aue 0ermiten cam)iar el cursor determinado 0or de9ecto 0or otro di9erente. ;os 0ar+metros autoOdescri0ti$os son: 1>>?I @9lec:aC< *>?$$ @cruzC< \1ND @manoC< C?M- @mo$erC< T-ZT @te6toC # I1BT @es0eraC.
// Dibu ar 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/.); i! (mouseAressed << true) R cursor(\1ND); S else R cursor(C?M-); S
Ignacio Buioli | Jaime Prez Marn 11'
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 0or de9ecto en el ordenador< # $aran entre sistemas o0erati$os.
112
(nidad 22
$i/ujo) .or*as Est5ticas

El :ec:o de di)u8ar im0lica trasladar las 0erce0ciones indi$iduales # la imaginacin en 9ormas $isuales de re0resentacin. ;as di9erencias entre los di)u8os de las 0ersonas demuestran Aue cada K manoL # cada mente es 3nica. ;os di)u8os $an desde las redes mec+nicas de =ol ;eIitt< 0asando 0or 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 0or com0utadora se inicia a 0lantear en la dcada de %4.&. I$an =ut:erland :a)a creado en %4.3< el so9t?are de &ketchpad @ta)la de di)u8oC 0ara su disertacin de P:'. El =Hetc:0ad se con$irti en el antecesor de 0rogramas como el ,utocad< el ,do)e Illustrator o el InHsca0e. -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 0ermite acumular 0i6eles cuadro a cuadro.
//Dibu a un punto en la posicin del cursor ,oid setup() R si(e(6//, 6//); S ,oid draN() R point(mouseZ, mouseV); S //Dibu a desde la anterior posicin del mouse a la actual //para crear lneas continuas ,oid setup() R si(e(6//, 6//); S ,oid draN() R line(mouseZ, mouseV, pmouseZ, pmouseV); S //Dibu a una lnea cuando el botn del mouse es oprimido ,oid setup() R si(e(6//, 6//); S ,oid draN() R i! (mouseAressed << true) R line(mouseZ, mouseV, pmouseZ, pmouseV); S S ,oid setup() R //Dibu a 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 line(mouseZ, mouseV, pmouseZ, pmouseV); S
El :ec:o de di)u8ar con so9t?are no restringe a solo seguir $alores de entrada con el mouse. Inclu#endo algo
113
tan sim0le como una estructura H?>< es 0osi)le di)u8ar lineas mas com0le8as con 0oca 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 i! (mouseAressed << true) 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*5genes 'e la misma 9orma Aue se em0lean las 9iguras 0reOdiseGadas de Processing como :erramientas de di)u8o< las im+genes Aue nosotros mismos cargamos 0ueden ser em0leadas 0ara la misma la)or.
// Dibu ando 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 // Dibu ando con una ima'en Gue posee transparencia ABma'e alphaBm'; ,oid setup() R si(e(6//, 6//); // -sta ima'en tiene transparencia
116
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
118
(nidad 23
:alores de Entrada) <eclado

)e;Aressed, )e;, )e;*ode
;os teclados son com3nmente utilizados como dis0ositi$os de entrada de caracteres 0ara com0oner documentos de te6to< Email< mensa8era instant+nea< # relacionados. =in em)argo< el 0otencial de un teclado de com0utadora $a muc:o m+s all+ Aue su uso com3n. ;a e60ansin de la m+Auina de escri)ir al teclado 0ermiti utilizar este mismo como medio 0ara e8ecutar 0rogramas< mo$erse entre a0licaciones # na$egar en 3' en los di$ersos $ideoO8uegos. Es 0osi)le ignorar la im0resin de caracteres # concentrarse solo en el ritmo en el Aue se o0rimen las teclas. 'e esta 9orma< 0odremos crear un 0rograma Aue o)tenga como $alor de entrada la $elocidad con la Aue se escri)e< # utilizar dic:os $alores 0ara controlar la $elocidad de un e$ento. En los 3ltimos aGos< el teclado :a sido re$alorizado 0or otra clase de dis0ositi$os Aue no res0onden al estilo de escritura DIE/5N. Mtodos de tamaGo m+s 0eAueGo< como el teclado numrico de los tel9onos @a 0esar de Aue dic:a inter9az :alla 9allado en la industria # a:ora los tel9onos m$iles utilicen teclado ti0o DIE/5NC. Por otro lado< el reconocimiento de $oz est+ a$anzando 9uertemente< # se 0roclama como una alternati$a 9utura a la escritura 0or medio del teclado. -$atos del <eclado Processing 0uede registrar la 3ltima tecla 0resionada 0or un dis0ositi$o de teclado. Por lo tanto< la $aria)le Aue se em0lea es denominada )e;Aressed1 # de$uel$e un $alor de ti0o boolean. 'ic:o $alor ser+ true solo cuando una tecla :alla sido 0resionada< de lo contrario ser+ !alse. Mientras la tecla es 0resionada< este $alor se mantendr+ true< sin em)argo< se con$ertir+ en un !alse cuando la tecla sea li)erada.
// Dibu a 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, dibu a una S else R // lnea# $ino, rect(./, ./, 2/, 2/); // dibu a 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
120
;a $aria)le )e; es del ti0o char1 0ermite almacenar un car+cter< el 3ltimo 0resionado. ;a $aria)le )e; solo almacenar+ un $alor cada $ez. 'e esta manera< 0odemos crear un 0rograma 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 em0learse 0ara detectar cual 9ue la 3ltima tecla o0rimida. El siguiente e8em0lo usa la e60resin relacional )e; << ^1^. El em0leo de las comillas sim0les @ ^ ^C # no de las comillas do)les @ C se de)e a Aue las comillas do)le se inter0retan como $alores del ti0o $trin'< # )e; solo de$uel$e $alores del ti0o char. Por lo tanto< si utiliz+ramos comillas do)les nos 0roducira un error. El e$ento se 0roducir+ cuando se o0rima 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, dibu a una lnea i! (()e;Aressed << true) UU ()e; << ^1^)) R line(3/, 23, 3/, K3); S else R // $ino, dibu a una elipse ellipse(3/, 3/, 3/, 3/); S S
En contadas ocasiones necesitaremos detectar si una tecla< Aue 0roducir+ un e$ento< es 0resionada< 0ero se 0uede correr el riesgo de Aue el usuario tenga acti$ada la ma#3scula. Por ende< $amos a recurrir a com0ro)ar am)as teclas 0ara un mismo e$ento. Para esto< utilizaremos la e60resin 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; 0uede utilizarse como $aria)le de control.
int x < /; ,oid setup() R si(e(6//, 6//); S ,oid draN() R i! ()e;Aressed << true) R
121
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
-<eclas %odificadas ,dem+s de leer letras numricas< caracteres< # sm)olos< Processing 0uede leer $alores de otras letras tales como ,lt< ontrol< =:i9t< BarraOEs0aciadora< Enter< /eturn< Esca0e # la )arra de )orrar. ;a $aria)le )e;*ode almacena constantes encargadas de administrar esa in9ormacin. =e em0lea con la e60resin )e;*ode << *?D-D1 donde la constante 0uede 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 im0lementacin es mu# $aria)le de0endiendo la 0lata9orma 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
122
(nidad 24
:alores de Entrada) Eventos

mouseAressed(), mouse>eleased(), mouseCo,ed(), mouseDra''ed() )e;Aressed(), )e;>eleased() loop(), redraN()
;as 9unciones 0ueden llamar e$entos Aue alteran el normal 9lu8o del 0rograma cuando una accin como un )otn o una tecla es o0rimida. Por lo tanto< un e$ento de una interru0cin del 9lu8o normal del 0rograma. Fna tecla o0rimida< o la 0osicin del mouse< es almacenada :asta Aue el )loAue draN() termin de e8ecutarse. En esos casos< se 0uede 0roducir 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 e8em0lo< si se utilizara un e$ento Aue detecta el 0resionar un )otn del mouse< las acciones ocurrir+n solo una $ez :asta Aue el )otn sea li)erado # 0resionado nue$amente. Esto 0ermite Aue los datos Aue mane8en los e$entos del mouse o el teclado sean ledos inde0endientemente de lo Aue est ocurriendo en el )loAue 0rinci0al. -Eventos del ;ouse ;os e$entos del mouse son mouseAressed()< mouse>eleased()< mouseCo,ed()< # mouseDra''ed():
mouseAressed() mouse>eleased() mouseCo,ed() mouseDra''ed()
El cdigo dentro se e8ecuta cuando un )otn del mouse es o0rimido. El cdigo dentro se e8ecuta cuando un )otn del mouse es li)erado. El cdigo dentro se e8ecuta cuando el cursor se mue$e. El cdigo dentro se e8ecuta cuando el cursor se mue$e mientras un )otn del mouse es o0rimido
;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 o0rimido. En el siguiente e8em0lo se 0uede $er como el 9ondo del 0rograma cam)ia gradualmente su ni$el de gris a medida Aue un )otn del mouse es o0rimido.
!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 e8em0lo se e8ecuta lo mismo Aue el e8em0lo 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 0uede a0reciarse manteniendo a0retado el )otn del mouse 0or un largo tiem0o # 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
123
,oid mouse>eleased() R 'ra; 4< 2/; S
,ntes de di)u8ar dentro de estas 9unciones< es im0ortante 0ensar en el 9lu8o del 0rograma. Por e8em0lo< :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 a0areceran un sim0le cuadro en 0antalla # 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 e ecut"ndose rect(mouseZ, mouseV, 00, 00); S
El cdigo de las 9unciones mouseCo,ed() # mouseDra''ed() se e8ecuta cuando :a# alg3n cam)io de 0osicin en el cursor. El cdigo dentro de mouseCo,ed() se e8ecuta al 9inal de cada cuadro cuando la 0osicin del mouse cam)ia # no es 0resionado ning3n )otn. En cam)io< el cdigo dentro de mouseDra''ed() se e8ecuta cuando la 0osicin del cursor es alterada a la $ez Aue es o0rimido 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 <eclado ada tecla 0resionada es registrada # 0osee dos clases de e$entos< )e;Aressed() # )e;>eleased():
)e;Aressed() )e;>eleased()
El cdigo dentro de este )loAue se e8ecuta cuando un tecla es 0resionada El cdigo dentro de este )loAue se e8ecuta cuando un tecla es li)erada
ada $ez Aue una tecla es 0resionada 0odemos registrar el e$ento # relacionarlo a una serie de acciones. 'e esta 9orma< 0odemos usar )e;Aressed() 0ara controlar $alores numricos # as utilizarlos 0ara< 0or e8em0lo< cam)iar la 0osicin de un rect+ngulo.
124
,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 e ecut"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 e8em0lo< se di)u8a una 5 cuando la tecla 5 se o0rime< # desa0arece cuando la tecla se suelta.
boolean dibu arT < !alse; ,oid setup() R si(e(6//, 6//); no$tro)e(); S ,oid draN() R bac)'round(2/.); i! (dibu arT << true) R rect(2/, 2/, :/, 2/); rect(07, ./, 22, .3); S S ,oid )e;Aressed() R i! (()e; << ^T^) TT ()e; << ^t^)) R dibu arT < true; S S ,oid )e;>eleased() R dibu arT < !alse; S
;os siguientes dos e8em0los tra)a8an con )e;Aressed() 0ara leer # analizar los $alores de entrada 0or el teclado com)in+ndolos con datos del ti0o $trin'.
// &n e emplo 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);
12'
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 0rogramas utilizan el )loAue draN() 0ara di)u8ar cuadro a cuadro las acciones Aue se 0retenden tan r+0ido como sea 0osi)le. on la 9uncin !rame>ate()< es 0osi)le limitar la cantidad de cuadros Aue e8ecuta una accin cada segundo< # la 9uncin no@oop() es utilizada 0ara :acer Aue el )loAue draN() de8e de e8ecutarse constantemente. ;as 9unciones adicionales< loop() # redraN()< 0ro$een de mas o0ciones cuando se utilizan e$entos del mouse # el teclado. 'e este modo< se 0odr+ e8ecutar un 0rograma Aue se encuentre con no@oop() # utilizar la 9uncin loop() solo cuando se reAuiera. Esto sir$e 0ara a:orrar una gran cantidad de recursos @es0ecialmente si se 0iensa utilizar el 0ro#ecto en la ?e)C. El siguiente e8em0lo e8ecuta un )loAue draN() 0or dos segundos cada $ez Aue el )otn del mouse es o0rimido. Pasado el tiem0o< el 0rograma se 0one en 0ausa.
int !rame < /; ,oid setup() R si(e(6//, 6//); !rame>ate(0/); S ,oid draN() R
122
S ,oid mouseAressed() R loop(); !rame < /; S
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/.); // ; dibu ar lneas en la line(mouseZ, /, mouseZ, 6//); // posicin del mouse# line(/, mouseV, 6//, mouseV); !rame44; S
;a 9uncin redraN() e8ecuta el cdigo del )loAue draN() una $ez # des0us detiene su e8ecucin. Esto es mu# 3til si nuestro 0rograma no necesita ser actualizado continuamente. , continuacin< se 0resenta un e8em0lo donde el )loAue draN() se e8ecuta una $ez cuando se o0rime 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 ,oid mouseAressed() R redraN(); // - ecuta el cdi'o en el draN() una ,e( S
123
(nidad 2'
:alores de Entrada) ;ouse II

constrain(), dist(), abs(), atan2()
;a 0osicin del cursor es un 0unto en la $entana de re0resentacin Aue se actualiza en cada cuadro. Este 0unto 0uede ser analizado # modi9icado en relacin a otros elementos 0ara 0roducir nue$os $alores. Es 0osi)le contraer los $alores del mouse en un rango es0ec9ico< calcula la distancia entre su 0osicin # otro elemento< inter0olar entre dos $alores< determinar su $elocidad< # calcular el +ngulo del mouse en relacin a otra 0osicin. -Aestringir ;a 9uncin constrain() 0ermite limitar un n3mero en un determinado rango. /eci)e tres 0ar+metros:
constrain(,alor, min, max)
El 0ar+metro $alor es el n3mero a limitar< el 0ar+metro min determina el $alor mnimo del rango< # el 0ar+metro ma( determina el m+6imo $alor del rango. =i el $alor es menor o igual al 0ar+metro min1 entonces el $alor eAui$ale a min. /egresa< entonces el $alor de ma( si el $alor es ma#or o igual a ma(.
int x < constrain(03, 6/, 7/); int ; < constrain(3, 6/, 7/); int ( < constrain(76, 6/, 7/); // 1si'na 03 a x // 1si'na 6/ a ; // 1si'na 7/ a (
uando se utiliza 8unto con mouseZ # mouseV1 0odemos determinar el rango de $alores 0or el Aue se $a a mo$er el cursor. Por e8em0lo< 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 0uede utilizarse 0ara calcular la distancia entre la 0osicin del cursor # un 0unto en la 0antalla. /eci)e cuatro 0ar+metros:
dist(x6, ;6, x2, ;2)
;os 0ar+metros (4 # y4 determinan el 0rimer 0unto< mientras Aue (5 # y5 determinan el segundo 0unto. ;a distancia entre am)os es calculado como un n3mero de ti0o decimal @ !loatC.
126
!loat x < dist(/, /, 3/, /); !loat ; < dist(3/, /, 3/, 7/); !loat ( < dist(0/, 2/, D/, 7/);
// 1si'na 3/#/ a x // 1si'na 7/#/ a ; // 1si'na D:#/2023. a (
El $alor regresado 0or dist() 0uede utilizarse 0ara 0ara cam)iar las 0ro0iedades 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
// Dibu a 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 Inter0olacin es una tcnica de animacin< Aue 0ermite generar mo$imiento entre dos 0untos. El :ec:o de mo$er una 9raccin de la distancia total 0or cuadro< 0ermite generar desacelariones o incluso aceleraciones en la 9orma Aue se mue$e una 9igura. El siguiente diagrama muestra lo Aue ocurre cuanto un 0unto se mue$e siem0re la mitad entre su actual localizacin # su 0r6ima localizacin:
128
uadro% uadrouadro3 uadro1 uadro5 uadro. uadro!
%o*ien7o
9/jetivo
omo la 9igura disminu#e su $elocidad al acercarse al o)8eti$o< la 9igura )a8a. En el siguiente e8em0lo< la $aria)le x es la 0osicin actual del crculo< # la $aria)le ob eti,oZ es el o)8eti$o al cual se 0retende llegar.
!loat x < /#/; !loat interp < /#/3; //NEmeros de /#/ ; 6#/ ,oid setup() R si(e(6//, 6//); smooth(); S ,oid draN() R bac)'round(/); !loat ob eti,oZ < mouseZ; x 4< (ob eti,oZ 5 x) * interp; ellipse(mouseZ, 0/, ./, ./); ellipse(x, K/, ./, ./); S
Para a0licar el mismo 0rinci0io a la 0osicin en 6 # en # a la $ez< ser+ necesario calcular la distancia entre am)as 0osiciones. En el siguiente e8em0lo el 0eAueGo crculo KsigueL al cursor. Mientras Aue el crculo grande se 0osiciona en 0antalla 0or medio de un c+lculo de inter0olacin.
!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 ob eti,oZ < mouseZ; !loat ob eti,oV < mouseV; x 4< (ob eti,oZ 5 x) * interp; ; 4< (ob eti,oV 5 ;) * interp; !ill(630); ellipse(mouseZ, mouseV, 2/, 2/); !ill(233); ellipse(x, ;, ./, ./); S
El siguiente e8em0lo introduce la 9uncin abs() 0ara conseguir el $alor a)soluto de un n3mero. Esto Auiere decir Aue el n3mero siem0re ser+ 0ositi$o< aunAue la 9uncin reci)a un n3mero negati$o. Es necesario< #a Aue los $alores utilizados en al inter0olacin 0ueden ser negati$os o 0ositi$os< de0endiendo de la 0osicin en la Aue se encuentren con res0ecto al o)8eti$o. Fna estructura BH es utilizada 0ara actualizar la 0osicin< 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(/); !loat ob eti,oZ < mouseZ; //Distancia de la posicin al ob eti,o !loat dx < ob eti,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
-:elocidad =e 0uede calcular la $elocidad del cursor 0or com0arar su actual 0osicin con la anterior. Puede conseguirse 9+cilmente utilizando la 9uncin dist() # los $alores de mouseZ1 mouseV1 pmouseZ< # pmouseV como 0ar+metros. El siguiente e8em0lo calcula la $elocidad del mouse # la utiliza como $alor de de tamaGo de una eli0se.
,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 e8em0lo muestra una res0uesta instant+nea de la $elocidad del mouse. ;os n3meros Aue 0roducen son e6tremos # 0ueden ir desde cero a enormes $alores de un cuadro al otro. ;a tcnica de inter0olacin 0odra utilizarse 0ara aumentar o disminuir gradualmente una 0ro0iedad 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 ob eti,o < dist(mouseZ, mouseV, pmouseZ, pmouseV); ,elocidad 4< (ob eti,o 5 ,elocidad) * interp;
131
rect(/, 00, ob eti,o, 6K); rect(/, 3/, ,elocidad, 6K); S
-9rientacin ;a 9uncin atan2() es usada 0ara calcular el +ngulo desde un 0unto a la coordenada de origen (/,/). /eci)e dos 0ar+metros:
atan2(;, x)
El 0ar+metro y es la coordenada de # de donde se encuentra el +ngulo< mientras Aue el 0ar+metro ( es la coordenada en 6 de dic:o 0unto. ;os $alores del +ngulo son regresado en radianes< en un rango de [ a O[. Es im0ortante destacar Aue el orden de los 0ar+metros 6 e # est+n in$ertidos en este caso< con res0ecto 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 e60lica con las siguientes im+genes:
Para calcular el atan2() relati$o a otro 0unto en lugar del (/,/)< de)e restarle dic:a coordenada a los 0ar+metros ; # x. Para esto< lo ideal es utilizar la 9uncin translate() con atan2() 0ara controlar la rotacin< 8unto con pushCatrix() # popCatrix() 0ara controlar la 9igura.
132
//>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
133
(nidad 22
:alores de Entrada) <ie*-o , .ec=as

second(), minute(), hour(), millis(), da;(), month(), ;ear()
;os seres :umanos 0oseemos una relati$a 0erce0cin del tiem0o< 0ero las m+Auinas mantienen una idea 9i8a # regular del tiem0o. En tiem0os 0asados< se utiliza)an relo8es de sol # de agua 0ara 0oder tener una 9orma correcta de $isualizar el tiem0o. Jo# en da las 0ersonas recurren a los relo8es digitales< un relo8 numrico graduado en doce :oras< con minutos # segundos. ;a 0osi)ilidad de Aue un 0rograma sea ca0az de leer el actual tiem0o # 9ec:as< a)re la 0osi)ilidad a un +rea interesante. 'arle la 0osi)ilidad a un 0rograma de de0ender del tiem0o< nos otorga 0oder :acer Aue este cam)ie de color cada da< o un relo8 digital Aue 0roduzca una animacin cada :ora. -Segundos, ;inutos, Doras Para em0ezar< Processing es ca0az de leer los datos del relo8 de la com0utadora. ;os segundos actuales son ledos con la 9uncin second()< la cual regresa un $alor entre & # 54. ;os minutos actuales son ledos con la 9uncin minute()1 la cual regresa un $alor entre & # 54. ;a :ora actual es leda 0or la 9uncin hour()1 la cual le$anta cualAuiera de las -1 :oras< regresa $alores entre & # -3. En este sistema< la medianoc:e es &< el medioda es %-< las 4:&& a.m. es 4< # las 5:&& 0.m. es %!. =i se e8ecuta el siguiente 0rograma 0odr+ $erse la :ora actual en la consola:
int s < second(); int m < minute(); int h < hour(); println(h 4 WFW 4 m 4 WFW 4 s); //>e'resa //>e'resa //>e'resa //Bmprime ,alores ,alores ,alores la hora de de de en / a 37 / a 37 / a 20 la consola
=i se e8ecuta dentro del )loAue draN()< 0odremos $er como el tiem0o se $a actualizando. El siguiente e8em0lo 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 0uede crear de 9orma mu# sim0le un relo8 Aue muestre la :ora # se $a#a actualizando al utilizar la 9uncin text(). ;a 9uncin n!() se utiliza 0ara se0arar a0ro0iadamente el es0acio de la izAuierda # la derec:a del n3mero.
134
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 e60resar el 0aso del tiem0o< # no todas de)en estar ligadas a la 9orma de un relo8. En el siguiente e8em0lo< las lneas sim)olizan las :oras< los minutos # los segundos. Para :acerlo sim0lemente se recurre a usar la 9uncin map() # as con$ertir los $alores de & a 54< 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 0ueden utilizarse 0ara otra clase de 9actores. En este caso< se 0rogramar+ un cl+sico relo8 de mano. El incon$eniente se 0roduce en la 9uncin hour()< #a Aue esta de$uel$e 3nicamente $alores de -1 :oras< # reAuerimos $alores de %- :oras. =in em)argo< 0odremos conseguir dic:a escala 0or sacar el P %-.
,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/);
13'
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 tiem0o desde Aue inici el 0rograma. Este tiem0o es almacenado en miliOsegundos< o sea< milsimas de segundos. 'os mil miliOsegundos son - segundos< -&& miliOsegundos son &<- segundos. Este n3mero 0uede ser o)tenido con la 9uncin millis() # 0uede ser utilizado 0ara calcular el tiem0o transcurrido desde Aue inici el 0rograma.
//$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 ti0o int< 0ero es con$eniente con$ertirlo en un !loat 0ara 0oder 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
-.ec=a ;a in9ormacin de la 9ec:a es leda de manera similar a la del tiem0o. 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 % # %-< donde % es Enero< . es Junio # %- 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;(); int m < month(); int ; < ;ear(); println(d 4 W W 4 m 4 W //>e'resa ,alor de 6 al 06 //>e'resa ,alor de 6 al 62 //>e'resa el a+o en cuatro d'itos (2//7, 2/6/, etc#) W 4 ;);
El siguiente e8em0lo e$al3a si el da actual es el 0rimero del mes. En caso de ser cierto< im0rime en la consola el mensa8e K=ien$enido a un nue$o >esL.
,oid draN() R int d < da;(); i! (d << 6) R //Malores de 6 a 06
132
S S
println(W=ien,enido a un nue,o Ces#W);
El siguiente e8em0lo se e8ecuta continuamente # e$al3a si el da actual es el 0rimer da del aGo< o sea< ,Go 2ue$o. En caso de Aue sea cierto< im0rime en la consola K Hoy es el primer d:a del A8o?L.
,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
133
(nidad 23
;ovi*iento) ?Bneas , %urvas

Fna 0ro9unda com0resin del mo$imiento es sumamente 3til a la :ora de comunicar 0ara el )ailarn< el animador # el director de cine. Duien 0ractica el arte de los nue$os medios 0uede em0lear el mo$imiento 0ara 0otenciar cualAuiera de sus tra)a8os< desde un sitio ?e) a un $ideoO8uego. El elemento 9undamental ser+ el tiem0o< o< m+s 0recisamente< como los elementos cam)ian en el tiem0o. ;as im+genes est+ticas 0ueden e60resar la nocin de mo$imiento< un medio )asado en el tiem0o< como un $deo< un film1 # el so9t?are 0ueden e60resar eso mismo de 9orma directa. ;a de9inicin de mo$imiento a tra$s de cdigo muestra el 0oder # la 9le6i)ilidad del medio. -%ontrolando el ;ovi*ientos Para 0oner una 9igura en mo$imiento< siem0re necesitaremos de al menos una $aria)le Aue cam)ie al menos una de sus 0ro0iedades en cada cuadro Aue se e8ecuta la 9uncin draN(). En unidades 0re$ias< se :an 0resentado algunas 9ormas de generar mo$imientos. Para Aue la 9igura no de8e un rastro< necesitamos lim0iar la 0antalla antes de di)u8ar la 9igura actualizada. Para esto< 0ondremos la 9uncin bac)'round() al 0rinci0io de la estructura draN()< de esta 9orma estaremos lim0iando cada cuadro antes de di)u8ar en el. N 0or 3ltimo< tener en cuenta la utilizacin dela 9uncin !rame>ate() 0ara controlar la cantidad de cuadros 0or segundo Aue $a a 0rocesar el 0rograma @a ma#or cantidad< el mo$imiento ser+ mas 9luido< 0ero se necesitar+ de una ma#or ca0acidad en el ordenadorC.
!loat ; < 3/#/; !loat ,el < 6#/; !loat radio < 63#/; ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); ellipseCode(>1DB&$); S ,oid draN() R bac)'round(/); ellipse(00, ;, radio, radio); ; < ; 4 ,el; i! (; 8 hei'ht4radio) R ; < 5radio; S S
;a din+mica 0ermite tam)in crear una serie de e9ectos $isuales mu# interesantes. Fno de ellos< # de sencilla 0rogramacin< es crear un desen9oAue mientras se mue$e la 9igura. Es una de las tantas alternati$as al utilizar bac)'round() al 0rinci0io del draN(). Ftilizando sim0lemente un rect+ngulo del tamaGo de la $entana de re0resentacin< 0odremos darle a dic:a 9igura cierta trans0arencia. =i el n3mero de al9a se acerca a -55< 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 0osicin de la 9igura. 'e esta 9orma< cuando la 9igura se e6ceda de la $entana de re0resentacin< esta $aria)le 0uede 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+ siem0re dentro de las dimensiones de la $entana de re0resentacin.
136
!loat ; < 3/#/; !loat ,el < 6#/; !loat radio < 63#/; int direccion < 6; ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); ellipseCode(>1DB&$); 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 direccion < 5direccion; S S
Para tener una 9igura Aue tam)in cam)ie la 0osicin relati$a a los m+rgenes izAuierdo # derec:o de la $entana de re0resentacin< reAuiere un segundo gru0o de $aria)les. El siguiente e8em0lo tra)a8a con el mismo 0rinci0io 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 !loat ,elV < /#.; //Melocidad del mo,imiento int direccionZ < 6; //Direccin del mo,imiento int direccionV < 56; //Direccin del mo,imiento ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); ellipseCode(>1DB&$); S ,oid draN() R !ill(/, 62); rect(/, /, Nidth, hei'ht); !ill(233); ellipse(x, ;, radio, radio); x 4< ,elZ * direccionZ; i! ((x 8 Nidth5radio) TT (x 9 radio)) R direccionZ < 5direccionZ; //*ambia S ; 4< ,elV * direccionV; i! ((; 8 hei'ht5radio) TT (; 9 radio)) R direccionV < 5direccionV; //*ambia S S
en en en en
el el el el
e e e e
e e e e
Z V Z V
Direccin
Direccin
5am)in es 0osi)le cam)iar las 0ro0iedades del 9ondo< color< relleno # tamaGo< en lugar de solo la 0osicin de una 9igura. El siguiente e8em0lo modi9ica el tamaGo de unas eli0ses con la misma idea de cam)io de direccin del e8em0lo anterior.
138
!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 direccion < 5direccion; S S
En contraste con los mo$imientos im0lcitos $istos en los e8em0los anteriores< 0odemos crear mo$imientos e60lcitos. Esta clase de mo$imientos reAuieren Aue se esta)lezca 0rimero una 0osicin 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 0osicin de 0artida. En contra 0arte< las $aria)les !inalZ # !inalV corres0onden a la 0osicin de llegada. ;as $aria)les x e ; corres0onden a la 0osicin actual de la 9igura. ;a $aria)le step re0resenta el 0orcenta8e del cam)io Aue tendr+ la 9igura< # la $aria)le pct mantiene el $ia8e del 0orcenta8e total de la distancia recorrida. Por lo tanto< step # pct de)en siem0re ser entre &.& # %.&. uando el 0rograma se e8ecuta< step se incrementa # as cam)ia la 0osicin 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 < /#/; //Aorcenta e recorrido (de /#/ a 6#/) ,oid setup() R si(e(6//, 6//); no$tro)e(); distZ < !inalZ 5 inicioZ; distV < !inalV 5 inicioV; S ,oid draN() R !ill(/, 62); rect(/, /, Nidth, hei'ht); 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
140
;a tcnica de inter0olacin< introducida en unidades 0re$ias< 0uede ser un gran recurso 0ara los mo$imientos de animacin. El siguiente e8em0lo ada0ta el cdigo anterior # agregar la tcnica de inter0olacin.
!loat x < 2/#/; //*oordenada Z inicial !loat ; < 6/#/; //*oordenada V inicial !loat ob eti,oZ < K/#/; //*oordenada Z de Destino !loat ob eti,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); rect(/, /, Nidth, hei'ht); !loat d < dist(x, ;, ob eti,oZ, ob eti,oV); i! (d 8 6#/) R x 4< (ob eti,oZ 5 x) * interpolacion; ; 4< (ob eti,oV 5 ;) * interpolacion; S !ill(233); ellipse(x, ;, 2/, 2/); S
-;ovi*iento a lo largo de las %urvas En unidades anteriores< se detall 0articularmente el uso de cur$as sim0les con 9ormulas matem+ticas Aue Processing 0osee en su estructura. En lugar de di)u8ar la cur$a entera en un solo cuadro< es 0osi)le distri)uir este 0roceso en los 0asos 0ara llegar de un 0unto a otro. El siguiente cdigo es un sim0le agregado a los e8em0los anteriores< donde el tra#ecto en lugar de :acerse de 9orma recta< se utiliza un tra#ecto de cur$a.
!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 exponente < /#3; //Determina la *ur,a !loat x < /#/; //*oordenada Z actual !loat ; < /#/; //*oordenada V actual !loat step < /#/6; //Tama+o de cada mo,imiento !loat pct < /#/; //Aorcenta e 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(/, 2); rect(/, /, Nidth, hei'ht); pct 4< step; i! (pct 9 6#/) R x < inicioZ 4 (pct * distZ); ; < inicioV 4 (poN(pct, exponente) * distV); S
141
!ill(233); ellipse(x, ;, 2/, 2/); S
5odos los ti0os de cur$as $istos en las unidades 0re$ias 0ueden utilizarse 0ara escalar 9iguras o modi9icar su 0osicin. 5am)in< una $ez Aue el 0rograma e8ecuta un camino cur$o< 0uede calcular # generar otro.
!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 exponente < /#3; //Determina la *ur,a !loat x < /#/; //*oordenada Z actual !loat ; < /#/; //*oordenada V actual !loat step < /#/6; //Tama+o de cada mo,imiento !loat pct < /#/; //Aorcenta e recorrido (de /#/ a 6#/) int direccion < 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(/, 2); rect(/, /, Nidth, hei'ht); pct 4< step * direccion; i! ((pct 8 6#/) TT (pct 9 /#/)) R direccion < direccion * 56; S i! (direccion << 6) R x < inicioZ 4 (pct * distZ); !loat e < poN(pct, exponente); ; < inicioV 4 (e * distV); S else R x < inicioZ 4 (pct * distZ); !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 0uede usarse 0ara 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 re0resentacin. =u0ongamos Aue omitimos la 0osicin en 6< de esta manera utilizaramos la coordenadaO# como controlador de la $elocidad de la 9igura< a 0esar de Aue el tra#ecto sea una recta.
142
El siguiente e8em0lo muestra como utilizar una cur$a como regulador de la $elocidad. ;a eli0se comienza mu# lento< e inmediatamente comienza a acelerarse. ;a $aria)le e60onente es la encargada de regular la cur$a< 0or lo tanto< la $elocidad est+ ligado ntimamente a ella. Por :acer clicH con el mouse se selecciona un nue$o 0unto.
!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 exponente < /#3; //Determina la *ur,a !loat x < /#/; //*oordenada Z actual !loat ; < /#/; //*oordenada V actual !loat step < /#/6; //Tama+o de cada mo,imiento !loat pct < /#/; //Aorcenta e 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(/, 2); rect(/, /, Nidth, hei'ht); 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 ,oid mouseAressed() R pct < /#/; inicioZ < x; inicioV < ;; distZ < mouseZ 5 x; distV < mouseV 5 ;; S
-;ovi*iento a trav"s de la <ransfor*acin ;as 9unciones de trans9ormacin 0ueden usarse tam)in en mo$imiento 0or cam)iar los 0ar+metros Aue reci)en las 9unciones translate()1 rotate() # scale(). ,ntes de utilizar las 9unciones de trans9ormacin< es im0ortante tener conocimientos 0lenos en ellas< # sa)er 0rinci0almente Aue estas cam)ian
143
las 0ro0iedades del )loAue draN(). =i e8ecutamos la 9uncin translate(3, /)< todo lo Aue se inclu#a en el )loAue draN() comenzar+ corrido 5 0i6eles en el e8e 6. 2o solo eso< aumentar+ de 5 en 5 en cada re0eticin. '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(); ellipseCode(>1DB&$); S ,oid draN() R !ill(/, 62); rect(/, /, Nidth, hei'ht); !ill(233); translate(/, ;); //-stablece la coordenada5; del crculo ellipse(00, /, radio, radio); ; 4< ,el; i! (; 8 hei'ht4radio) R ; < 5radio; S S !loat ; < 3/#/; !loat ,el < 6#/; !loat radio < 63#/; ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); ellipseCode(>1DB&$); S ,oid draN() R !ill(/, 62); rect(/, /, Nidth, hei'ht); !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);
144
; < ; 4 ,el; i! (; 8 hei'ht4radio) R ; < 5radio; S S !loat an'ulo < /#/; ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); S ,oid draN() R !ill(/, 62); rect(/, /, Nidth, hei'ht); !ill(233); an'ulo < an'ulo 4 /#/2; translate(K/, ./); rotate(an'ulo); rect(50/, 50/, :/, :/); S
;as 9unciones translate()1 rotate() # scale() 0ueden ser utilizadas 0ara generar mo$imientos< 0ero usarlas todas 8untas resulta intrincado. Para tener un ma#or control de dic:as 0ro0iedades se recomienda una 0ro9unda lectura de las unidades dedicadas a trans9ormaciones $istas anteriormente< # recurrir al uso de pushCatrix() # popCatrix().
14'
(nidad 26
;ovi*iento) ;ec5nicos , 9rg5nicos

;os 0rogramadores suelen determinar como Auieren Aue sus 0rogramas se mue$an. osas como esas suelen transmitir # comunicar di$ersas cosas< 0or lo tanto no es correcto li)rarlo al azar. =olemos clasi9icar a las cosas entre lo Aue 0osee una clase de mo$imiento # lo Aue no lo 0osee. Jacemos distensiones entre lo animado # lo inanimado. El mo$imiento en un 0rograma 0uede ser mas $enta8oso a3n< #a Aue 0odra intentarse :acer una 9iel co0ia a la realidad o ignorar es 0or com0leto. ;os 0rogramas :acen 0osi)le inconta)les ti0os de mo$imientos di9erentes< 0ero el 9oco est+ 0uesto en dos de ellos: los mec+nicos # los org+nicos. -;ovi*iento ;ec5nico ;a 9uncin sin() suele usarse con muc:a 9recuencia a la :ora de 0roducir un mo$imiento elegante. Esto se de)e a su 9acilidad 0ara 0roducir aceleraciones # desacelariones con un 3nico $alor. ;a onda seno< tomando los $alores de las dos dimensiones< 0roducir+ 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 re0resenta 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 0untos Aue recorre el e8e #.
;os $alores de sin() son utilizados 0ara crear el mo$imiento de una 9igura en el siguiente e8em0lo. ;a $aria)le an'ulo incrementa constantemente # 0roduce el cam)io en sin() en un rango de O% a %. ;os $alores son multi0licados 0or radio 0ara :acer Aue estos sean ma#ores. El resultado es asignado a la $aria)le ;o!!set< # esta luego es usada 0ara determinar la 0osicin de la eli0se 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); rect(/, /, Nidth, hei'ht); !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
142
,gregando $alores de sin() # cos() se 0roducir+n mo$imientos muc:o m+s com0le8os. En el siguiente e8em0lo< un 0eAueGo 0unto se mue$e de 9orma circular usando los $alores de sin() # cos(). Fn gran 0unto utiliza los mismos $alores 0ero 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(/, .); rect(/, /, Nidth, hei'ht); 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); //Dibu a 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, :, :); //Dibu o el crculo 'rande S
;a fase de una 9uncin seno es una iteracin a tra$s de sus 0osi)les $alores. El despla3amiento de fase de una seGal en relacin a otra es sencillamente un retraso en tiem0o e60resado en grados de +ngulo< en el cual un crculo com0leto @3.& gradosC es igual a un ciclo de la seGal. =i se des0laza el +ngulo utilizado 0ara generar una animacin< la animacin resultante se encontrar+ des9asada.
;os siguientes dos e8em0los cam)ian la coordenadaO6 # el di+metro de los crculos 0ara demostrar el des0lazamiento de 9ase. En el 0rimer e8em0lo< cada crculo tiene el mismo mo$imiento :orizontal< 0ero des9asado en el tiem0o. En el segundo< cada crculo mantiene la misma 0osicin # $aran su tamaGo< 0ero el rango de crecimiento est+ des9asado en el tiem0o.
!loat an'ulo < /#/; !loat ,el < /#6; ,oid setup() R si(e(6//, 6//); no$tro)e(); smooth();
143
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
-;ovi*iento 9rg5nico Entre los e8em0los 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 0ersona res0irando< un ro Aue 9lu#e o la :umareda Aue su)e. Fno de los recursos con los Aue cuentan los 0rogramas 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() 0ueden utilizarse 0ara generar mo$imientos im0redeci)les al em0learse con la 9uncin random(). El siguiente e8em0lo 0resenta una lnea< # en cada cuadro su direccin cam)ia entre 0eAueGos $alores< de O&.3 a &.3.
!loat x < /#/; !loat ; < 3/#/; !loat an'ulo < /#/; !loat ,el < /#3; ,oid setup() R //*oordenada5Z //*oordenada5V //Direccin del Co,imiento //Melocidad del Co,imiento
146
//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
si(e(6//, 6//); bac)'round(/); stro)e(233, 60/); random$eed(626);
El siguiente e8em0lo es una $ersin animada de un e8em0lo $isto unidades anteriores. ,Au la $aria)le an'ulo 0ara la 9uncin ho a() 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/#/; ho a(6D, 7, an'ulo/6#0); ho a(00, 62, an'ulo); ho a(.., 6/, an'ulo/6#0); ho a(:2, 3, an'ulo); ho a(DD, K, an'ulo*2); S ,oid ho a(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 0ara 0roducir mo$imientos org+nicos. Na Aue los n3meros regresados 0or noise() son 9+ciles de controlar< son mu# 3tiles a la :ora de 0roducir irregularidades. El siguiente e8em0lo di)u8a dos lneas # la 0antalla< # la 0osicin de sus 0untas 9inales est+ determinada 0or 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/);
148
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 0uede ser utilizada 0ara generar te6turas din+micas. En el siguiente e8em0lo< los 0rimeros dos 0ar+metros determinan una te6tura en dos dimensiones< # el tercer 0ar+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
1'0
(nidad 28
$atos) 1rra,s
1rra;, à (arra; access), neN, 1rra;#len'th, append(), shorten(), expand(), arra;cop;()
El trmino array se re9iere a una estructura de gru0o o a la im0osicin de un n3mero. En 0rogramacin< un arra# es un con8unto de datos almacenados )a8o el mismo nom)re. En ocasiones se los suele llamar $ectores. ;os arra#s 0ueden ser creados 0ara almacenar un determinado ti0o de datos< # cada uno de sus elementos 0ueden ser almacenados # ledos indi$idualmente. inco $alores del ti0o entero @%4%4< %41&< %4!5< %4!.< %44&C 0ueden ser almacenados en un arra# del ti0o entero @intC. Por e8em0lo< si llam+ramos al arra# KdatesL< guardaramos los $alores en la siguiente secuencia:
;a 0osicin en la Aue se encuentran los datos en un arra# son numerados desde el n3mero cero. Esto muc:as $eces 0roduce errores< #a Aue 0or costum)re uno asocia la 0rimera 0osicin con el n3mero uno. El 0rimer elemento se encuentra en la 0osicin cero `/a< el segundo en la 0osicin uno `6a< # as. ;os arra#s 0uede utilizarse 0ara 0rogramar de un modo muc:o m+s sencillo. Mientras no sea necesario utilizarlos< 0ueden em0learse 0ara administrar estructuras. Por e8em0lo< esta)lecemos una serie de 0untos Aue ser+n almacenados en el arra#< los mismos ser+n utilizados 0ara di)u8ar una estrella.
El anterior e8em0lo demuestra los )ene9icios del em0leo de los arra#s. ;a estrella tiene %& $rtices< com0uesto de - 0untos cada uno. =i utiliz+ramos $aria)les reAueriramos de -& de ellas. En cam)io< con un arra# 0or e8e< solo necesitaramos -.
1'1
(aria)les =e0aradas
int int int int int int int int int int int int int int int int int int int int x/ ;/ x6 ;6 x2 ;2 x0 ;0 x. ;. x3 ;3 x: ;: xK ;K xD ;D x7 ;7 < < < < < < < < < < < < < < < < < < < < 3/; 6D; :6; 0K; D0; .0; :7; :/; K6; D2; 3/; K0; 27; D2; 06; :/; 6K; .0; 07; 0K;
Fn arra# 0or cada 0unto

intà intà intà intà intà intà intà intà intà intà p/ p6 p2 p0 p. p3 p: pK pD p7 < < < < < < < < < < R R R R R R R R R R 3/, :6, D0, :7, K6, 3/, 27, 06, 6K, 07, 6D 0K .0 :/ D2 K0 D2 :/ .0 0K
Fn arra# 0or e8e

S; intà x < R 3/, S; 3/, S; intà ; < R 6D, S; K0, S; S; S; S; S; S; :6, 27, 0K, D2, D0, 06, .0, :/, :7, 6K, :/, .0, K6, 07 S; D2, 0K S;
El siguiente e8em0lo muestra la utilizacin de un arra# en un 0rograma. ;os datos Aue almacena el arra# son ledos con una estructura H?>. ;a sinta6is ser+ discutida en las 0+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 1rra,s ;os arra#s son declarados mu# similar a otra clase de datos< 0ero se distinguen 0or la im0lementacin de corc:etes < ] # ^. uando un arra# es declarado< el ti0o de datos Aue 0uede almacenar de)e ser es0eci9icado tam)in. Fna $ez Aue dic:o arra# sea declarado # su ti0o sea es0eci9icado< este de)e ser creado con la 0ala)raOcla$e neN. Es 0aso adicional se utiliza 0ara a:orrar es0acio en la memoria de la com0utadora. ;uego de Aue el arra# es creado< #a est+ listo 0ara Aue se le asignen $alores. E6isten< adem+s< di9erentes 9ormas de declarar< crear # asignar. En los siguientes e8em0lo< se discuten las di9erentes maneras< siem0re asignando los $alores %4< 1&< !5< !.< # 4&. Particularmente notar la relacin entre los di9erentes mtodos # la estructura setup().
intà data; ,oid setup() R si(e(6//, 6//); data < neN int`3a; data`/a < 67; data`6a < ./; data`2a < K3; data`0a < K:; data`.a < 7/; S //Declarar //*rear //1si'nar
1'2
intà data < neN int`3a; ,oid setup() R si(e(6//, 6//); data`/a < 67; data`6a < ./; data`2a < K3; data`0a < K:; data`.a < 7/; S
//Declarar, crear //1si'nar
intà data < R 67, ./, K3, K:, 7/ S; ,oid setup() R si(e(6//, 6//); S
//Declarar, crear ; asi'nar
;os anteriores tres e8em0los asumen Aue tra)a8aremos con los )loAues setup() # draN(). =in em)argo< eso no es necesario< 0ueden usarse cualAuiera de los 3 mtodos anteriores sin dic:as estructuras.
intà data; data < neN int`3a; data`/a < 67; data`6a < ./; data`2a < K3; data`0a < K:; data`.a < 7/; //Declarar //*rear //1si'nar
intà data < neN int`3a; data`/a < 67; data`6a < ./; data`2a < K3; data`0a < K:; data`.a < 7/;
//Declarar, crear //1si'nar
intà data < R 67, ./, K3, K:, 7/ S;
//Declarar, crear, asi'nar
El 0aso de declarar< crear # asignar 0ermite 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 0osicin del elemento.
intà data < R 67, ./, K3, K:, 7/ S; line(data`/a, /, data`/a, 6//); line(data`6a, /, data`6a, 6//); line(data`2a, /, data`2a, 6//); line(data`0a, /, data`0a, 6//); line(data`.a, /, data`.a, 6//);
/ecordar Aue el 0rimer elemento se encuentra en la 0osicin &. =i el 0rograma trata de acceder a un $alor Aue e6cede las dimensiones del arra#< el 0rograma se tendr+ # terminar+ 0or de$ol$er un Array9nde(;ut;f=ounds%(ception.
intà data < R 67, println(data`/a); println(data`2a); println(data`3a); ./, K3, K:, 7/ S; //Bmprime 67 en la consola //Bmprime K3 en la consola // ->>?>Q -l Eltimo elemento del arra; est" en la posicin .
;a 0ro0iedad len'th almacena el n3mero de elementos en un arra#. =e 0uede acceder a esta 0ro0iedad con el nom)re del arra# seguido de un 0unto # dic:a 0ro0iedad. El siguiente e8em0lo demuestra como utilizarlo:
1'3
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?> 0ara acceder a los elementos del arra#< es0ecialmente 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?> 0uede ser usada 0ara agregar datos a un arra#. Por e8em0lo< 0uede :acerse un calculo de $alores # luego ser asignados como elementos de un arra#. El siguiente e8em0lo almacena los $alores de$ueltos 0or 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 0rograma m+s 9+cil de leer # m+s mane8a)le. En el siguiente e8em0lo< el arra# xà almacena la coordenadaO6< # el arra# ,elà almacena el rango corres0ondiente a la misma. Escri)ir este 0rograma sin la im0lementacin de arra#s reAuerira -1 $aria)les inde0endientes.
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/.); !or (int i < /; i 9 x#len'th; i44) R
1'4
S S
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); //Dibu a la lnea
-1l*acenando datos de ;ouse Fna im0lementacin 9recuente de los arra#s es el almacenamiento de los datos del mouse. ;as $aria)les pmouseZ # pmouseV almacenan la 0osicin 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 0asa< mouseZ # mouseV @# a s mismo pmouseZ # pmouseVC son reem0lazados 0or nue$os $alores< # los antiguos $alores son descartados. rear un arra# es la me8or manera de no 0erder esos $alores # utilizarlos 0ara algo. En el siguiente e8em0lo< los 3ltimos # mas recientes %&& $alores de mouseV son almacenados # mostrados en 0antalla 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
,0licando 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;
1''
S //1're'a nue,os ,alores al inicio del arra; x`/a < mouseZ; ;`/a < mouseV; //Dibu a los crculos !or (int i < /; i 9 num; i44) R ellipse(xìa, ;ìa, i/2#/, i/2#/); S S
El siguiente e8em0lo 0roduce los mismos resultados< 0ero utiliza un mtodo muc:o m+s 0timo. En lugar de ordenar los elementos del arra# en cada 9otograma< el 0rograma escri)e los nue$os datos en la 0osicin siguiente del arra#. ;os elementos del arra# 0ermanecen en la misma 0osicin una $ez Aue est+n escritos< 0ero 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 o0erador @ se utiliza 0ara $ol$er de nue$o al 0rinci0io. Esta tcnica es es0ecialmente 3til con matrices mu# grandes< 0ara e$itar la co0ia innecesaria de datos Aue 0ueden ralentizar el 0rograma.
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 1rra, Processing 0ro$ee de un gru0o de 9unciones 0ara 9acilitar el tra)a8o con arra#s. En estas 0+ginas solo se e60lican cuatro de ellas< 0ero la in9ormacin com0leta # detallada est+ dis0oni)le en lnea< en """.processing.org#reference. ;a 9uncin append() e60ande un arra# en un nue$o elemento< agrega los datos a la nue$a 0osicin # 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
1'2
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 e60andir el arra# en un tamaGo es0ec9ico< o incluso do)lar su tamaGo. =i el arra# necesita incluir una cantidad mu# grande de nue$os elementos< es muc:o mas r+0ido # 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 0ueden ser co0iados con el o0erador 0orAue ellos son o)8etos. El mtodo cl+sico 0ara co0iar elementos de un arra# es utilizando una 9uncin es0ecial 0ara co0iar el arra# entero # luego )uscar el elemento deseado con un ciclo H?>. ;a 9uncin arra;*op;() es la manera mas e9iciente 0ara co0iar un arra#. ;os datos son co0iados del arra# utilizado como 0rimer 0ar+metro al arra# utilizado como segundo 0ar+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 0ueden ser escritas 0ara 0er9eccionar el tra)a8o en arra#< 0ero :a# Aue ser consciente de Aue act3an di9erente si utilizan datos int o datos char. uando un arra# es usado como 0ar+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 0ar+metro:
1'3
!loatà data < R 67#/, ./#/, K3#/, K:#/, 7/#/ S; ,oid setup() R hal,e(data); println(data`/a); println(data`6a); println(data`2a); println(data`0a); println(data`.a); S
//Bmprime //Bmprime //Bmprime //Bmprime //Bmprime
W7#3W W2/#/W W0K#3W W0D#/W W.3#/W
,oid hal,e(!loatà d) R !or (int i < /; i 9 d#len'th; i44) R dìa < dìa / 2#/; S S
//Aara cada elemento del arra; //di,idir el ,alor por 2
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); println(data`/a 4 W, W 4 println(data`6a 4 W, W 4 println(data`2a 4 W, W 4 println(data`0a 4 W, W 4 println(data`.a 4 W, W 4 S //- ecuta //Bmprime //Bmprime //Bmprime //Bmprime //Bmprime la !uncin W67#/, 7#3W W./#/, 2/#/W WK3#/, 0K#3W WK:#/, 0D#/W W7/#/, .3#/W
hal!Data`/a); hal!Data`6a); hal!Data`2a); hal!Data`0a); hal!Data`.a);
!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
-1rra,s 4idi*ensionales ;os datos 0ueden 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 -' son< esencialmente< una lista de arra#s en %'. Estos de)en ser declarados< luego creador # recin des0us se 0ueden 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/
1'6
println(points`7a`6a);
//Bmprime 0K
Este 0rograma 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 0osi)le continuar # :acer arra#s en 3' o 1' 0or so)reOe60lotar 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 im0lementar arra#s en %' o -'< no m+s Aue eso.
1'8
(nidad 30
I*agen) 1ni*acin
;a animacin se 0roduce cuando una serie de im+genes< cada una ligeramente di9erente< se 0resentan en una sucesin r+0ida. Fn medio di$erso< con un siglo de :istoria< la animacin :a 0rogresado desde los e60erimentos iniciales de Iinsor Mc a# a las inno$aciones comerciales # realista de las 0rimeras 0roducciones de Ialt 'isne# =tudio< con 0elculas e60erimentales 0or animadores como ;otte /einiger # I:itne# James a mediados del siglo >>. El alto $olumen de los e9ectos es0eciales de animacin en 0elculas del ti0o li$e+action< # la a$alanc:a de 0elculas in9antiles de di)u8os animados< est+n cam)iando el 0a0el de la animacin en la cultura 0o0ular. -I*5genes Secuenciales ,ntes de Aue una serie de im+genes sea 0resentada como una secuencia< de)emos cargarlas. ;a $aria)le del ti0o imagen de)e ser declarada 9uera del )loAue setup() # draN()< # luego sus $alores de)en ser asignados en el setup(). ;as siguientes im+genes 0ertenecen 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`2a < loadBma'e(Wani5//2#'i!W); ima'es`0a < loadBma'e(Wani5//0#'i!W); ima'es`.a < loadBma'e(Wani5//.#'i!W); ima'es`3a < loadBma'e(Wani5//3#'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 e8em0lo muestra una alternati$a al cdigo anterior< utilizando una estructura H?> 0ara o0timizar el 0roceso. Esas lneas de cdigo 0ueden cargar entre % # 444 im+genes 0or cam)iar el $alor de la $aria)le numHrame. ;a 9uncin n!() es usada 0ara dar 9ormato al nom)re de la imagen a cargar. El o0erador P es usado 0ara controlar el ciclo:
120
int numHrames < D; //NEmero de cuadros por animar 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; ima'e(ima'es`!ramea, /, /); S
;as im+genes 0ueden mostrarse en un orden aleatorio< lo cual agrega cierto inters al 0rograma. ;o 9undamental es reem0lazar el tiem0o 0or inter$alos irregulares< en un orden aleatorio con tiem0o aleatorio.
int numHrames < D; //NEmero de cuadros por animar ABma'eà ima'es < neN ABma'e`numHramesa; ,oid setup() R si(e(6//, 6//); !or (int i < /; i 9 ima'es#len'th; i44) R $trin' ima'eName < Wani5W 4 n!(i, 0) 4 W#'i!W; ima'esìa < loadBma'e(ima'eName); S S ,oid draN() R int !rame < int(random(/, numHrames)); ima'e(ima'es`!ramea, /, /); !rame>ate(random(6, :/#/)); S //*uadro por mostrar
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 0ero inde0endientemente del mo$imiento 0rinci0al< se de)e esta)lecer un tem0oralizador # a$anzar al siguiente cuadro solo cuando el $alor del tem0oralizador aumente como la $aria)le 0rede9inida. En el siguiente e8em0lo< la animacin Aue ocurre en la mitad su0erior es controlada 0or la 9uncin !rame>ate(). ;a animacin en la mitad in9erior es actualizada solo dos $eces 0or segundo.
int numHrames < D; //NEmero de cuadros para animar int topHrame < /; //-l cuadro Gue se muestra arriba int bottomHrame < /; //-l cuadro Gue se muestra aba o ABma'eà ima'es < neN ABma'e`numHramesa; int lastTime < /; ,oid setup() R si(e(6//, 6//); !rame>ate(0/);
!or (int i < /; i 9 ima'es#len'th; i44) R $trin' ima'eName < Wani5W 4 n!(i, 0) 4 W#'i!W; ima'esìa < loadBma'e(ima'eName); 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*5genes en ;ovi*iento Mo$er una imagen< en lugar de 0resentar una secuencia< es otro en9oAue de la animacin de im+genes. ;as mismas tcnicas 0ara la creacin de mo$imientos :an sido #a 0resentadas en unidades anteriores. El e8em0lo siguiente mue$e una imagen de izAuierda a derec:a< $ol$iendo a la izAuierda cuando se est 9uera del )orde de la 0antalla:
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 0ueden a0licarse a las im+genes. Estas 0ueden ser trasladadas< rotadas # escaladas< 0ara 0roducir la ilusin de mo$imiento en el tiem0o. En el siguiente e8em0lo< las imagen gira alrededor del centro de la $entana de re0resentacin:
ABma'e im'; !loat an'ulo; ,oid setup() R si(e(6//, 6//); im' < loadBma'e(Wmo,5//2#'i!W); 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 0ueden ser animadas 0or cam)iar sus 0ro0iedades de di)u8os. En este e8em0lo< la o0acidad de la imagen oscila 0roduciendo trans0arencia.
122
ABma'e im'; !loat opacidad < /; //-stablece la opacidad inicial ,oid setup() R si(e(6//, 6//); im' < loadBma'e(Wmo,5//0#'i!W); 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
123
(nidad 31
I*agen) PB&eles
'et(), set()
En la 0rimer unidad Aue trata el tema de im+genes< se de9ine a una imagen como una cuadrcula rectangular de 06eles en la Aue cada elemento es un n3mero Aue es0eci9ica un color. 'e)ido a Aue la 0antalla en s es una imagen< los 06eles indi$iduales se de9inen tam)in como n3meros. Por lo tanto< los $alores de color de los 06eles indi$iduales se 0ueden leer # cam)iar. -?e,endo PB&eles uando un 0rograma de Processing se e8ecuta< lo 0rimero Aue inicia es la $entana de re0resentacin< esta)lecida con los $alores Aue se inclu#en en si(e(). El 0rograma gana el control de dic:a +rea # esta)lece el color de cada 06el. ;a 9uncin 'et() 0uede leer los datos de cualAuier 06el de la 0antalla. Ja# tres $ersiones de dic:a 9uncin< una 0ara cada uso:
'et() 'et(x, ;) 'et(x, ;, ancho, alto)
=i 'et() es usado sin 0ar+metros< este :ar+ una im0resin com0leta de 0antalla< # la regresar+ como una ABma'e. ;a ca0tura Aue de$uel$e de)e ser guardada en una $aria)le de ti0o ABma'e. ;uego< dic:a ca0tura 0uede utilizarse como una imagen cualAuiera..;a $ersin con dos 0ar+metros regresa el color de un 06el 0articular< localizado en la 0osicin 6 e #< res0ecti$amente. Fn +rea rectangular es regresada si se utilizan los 0ar+metros 0ara ancho # alto.
stro)eIei'ht(D); line(/, /, Nidth, hei'ht); line(/, hei'ht, Nidth, /); ABma'e cross < 'et(); //?btiene una captura entera ima'e(cross, /, 3/);//Dibu a la ima'en en una nue,a posicin
smooth(); stro)eIei'ht(D); line(/, /, Nidth, hei'ht); line(/, hei'ht, Nidth, /); 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); line(/, /, Nidth, hei'ht); line(/, hei'ht, Nidth, /); ABma'e slice < 'et(/, /, 2/, 6//);//?btiene una captura entera set(6D, /, slice); set(3/, /, slice);
124
;a 9uncin 'et() o)tiene los 06eles actuales mostrados en 0antalla. Eso Auiere decir Aue no solo 0uede ser una ca0tura de 9ormas del 0rograma< 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/); //Dibu a la ima'en en la nue,a posicin
uando es usado con los 0ar+metros x e ;< la 9uncin 'et() regresa un $alor Aue de)e ser asignado a una $aria)le del ti0o color. Ese $alor 0uede ser utilizado 0ara esta)lecer el color de )orde o de relleno de una 9igura. En el siguiente e8em0lo< el color o)tenido es usado como relleno de un rect+ngulo:
ABma'e medusa; medusa < loadBma'e(Wmedusa# p'W); no$tro)e(); ima'e(medusa, /, /); color c < 'et(7/, D/); //?btiene el color del Axel en el (7/, D/) !ill(c); rect(2/, 0/, ./, ./);
;os $alores de$ueltos 0or el mouse 0ueden ser usados como 0ar+metros de 'et(). Esto le 0ermite al cursor seleccionar colores de la $entana de re0resentacin:
ABma'e medusa; ,oid setup() R si(e(6//, 6//); no$tro)e(); medusa < loadBma'e(Wmedusa# p'W); S ,oid draN() R ima'e(medusa, /, /); color c < 'et(mouseZ, mouseV); !ill(c); rect(3/, /, 3/, 6//); S
;a 9uncin 'et() 0uede ser utilizada con un ciclo H?> 0ara :aca 0oder identi9icar $arios colores o un gru0o de 06eles.
ABma'e medusa; int ; < /; ,oid setup() R si(e(6//, 6//); medusa < loadBma'e(Wmedusa# p'W); S ,oid draN() R ima'e(medusa, /, /); ; < constrain(mouseV, /, 77); !or (int i < /; i 9 .7; i44) R color c < 'et(i, ;); stro)e(c);
12'
line(i43/, /, i43/, 6//); S stro)e(233); line(/, ;, .7, ;); S
ada Aima'e tiene su 0ro0ia 9uncin 'et() 0ara conseguir 06eles de la imagen. Esto 0ermite a los 06eles ser o)tenidos de la imagen< inde0endientemente de los 06eles Aue se muestran en 0antalla. Na Aue ABma'e es un o)8eto< se 0uede acceder a su 9uncin 'et() con el o0erador del 0unto< como se muestra a continuacin:
ABma'e medusa; medusa < loadBma'e(Wmedusa# p'W); stro)e(233); stro)eIei'ht(62); ima'e(medusa, /, /); line(/, /, Nidth, hei'ht); line(/, hei'ht, Nidth, /); ABma'e medusa*rop < medusa#'et(2/, 2/, :/, :/); ima'e(medusa*rop, 2/, 2/);
-Escri/iendo PB&eles ;os 06eles en la $entana de 0resentacin de Processing 0ueden ser escritos directamente con la 9uncin set(). Ja# dos $ersiones de esta 9uncin< am)as con tres 0ar+metros:
set(x, ;, color) set(x, ;, ima'en)
uando el tercer 0ar+metro es un color< set() cam)ia el color de un 06el de la $entana de re0resentacin. uando el tercer 0ar+metro es una imagen< set() escri)e una imagen en la 0osicin 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() 0uede escri)ir una imagen 0ara mostrar en la $entana de re0resentacin. Fsar set() es muc:o m+s $eloz Aue utilizar ima'e()< #a Aue los 06eles son co0iados directamente. =in em)argo< las im+genes di)u8adas con set() no 0ueden ser escaladas ni 0intadas< # no son a9ectadas 0or las 9unciones de trans9ormacin.
122
ABma'e medusa; ,oid setup() R si(e(6//, 6//); medusa < loadBma'e(Wmedusa# p'W); S ,oid draN() R int x < constrain(mouseZ, /, 3/); set(x, /, medusa); S
ada $aria)le del ti0o ABma'e tiene su 0ro0ia 9uncin set()< 0ara escri)ir los 06eles directamente a la imagen. Esto 0ermite a los 06eles ser escritos en una imagen inde0endientemente de los 06eles Aue se muestran en la $entana de re0resentacin. Na Aue ABma'e es una imagen< la 9uncin set() se e8ecuta con el nom)re de la imagen # el o0erador de 0unto.
ABma'e medusa; medusa < loadBma'e(Wmedusa# p'W); bac)'round(/); color blanco < color(233); medusa#set(/, 3/, blanco); medusa#set(6, 3/, blanco); medusa#set(2, 3/, blanco); medusa#set(0, 3/, blanco); ima'e(medusa, 2/, /);
123
(nidad 32
<i-ografBa) ;ovi*iento
, 0esar del 0otencial 0ara el ti0o de cintica en el cine< la ti0ogra9a animada no comenz :asta la dcada de %45&< con el ttulo de la 0elcula del tra)a8o de =aul Bass< Binder Maurice< # Pa)lo "erro. Estos diseGadores # sus com0aGeros< lograron e9ectos de calidad mu# alta con sus secuencias de ttulos cinticos en 0elculas como North by North"est @%454C< Dr. No @%4.-C< # =ullitt @%4.*C. Entonces< se e60lor el 0oder e$ocador de la cintica en 9orma de las letras 0ara esta)lecer un estado de +nimo # e60resar ni$eles adicionales de signi9icado en relacin con el lengua8e escrito. En los aGos siguientes el diseGo de ttulos de 0elcula :a madurado # :a sido aumentado 0or la ti0ogra9a e60erimental 0ara la tele$isin # el Internet. -Pala/ras en ;ovi*iento Para Aue la ti0ogra9a se mue$a< es necesario Aue el 0rograma se e8ecute continuamente. Por lo tanto< es necesario utilizar una estructura draN().Fsar la ti0ogra9a con draN() reAuiere tres 0asos. 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 0uede ser usada en el )loAue draN() a tra$s de la 9uncin text(). El siguiente e8em0lo utiliza una 9uente llamada Xai5i. Para 0ro)ar dic:o e8em0lo es necesario crear tu 0ro0ia 9uente con la :erramienta K0reate .ontL # luego cam)iar el nom)re del 0ar+metro de loadHont() 0or 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 0onerla en mo$imiento< sim0lemente di)u8aremos un cam)io de 0osicin en cada cuadro. ;as 0ala)ras 0ueden mo$erse en un orden en un orden regular si sus $alores son cam)iados en cada cuadro< # tam)in 0uede mo$erse sin un orden a0arente 0or reci)ir $alores aleatorios.
AHont !ont; !loat x6 < /; !loat x2 < 6//; ,oid setup() R si(e(6//, 6//); !ont < loadHont(WeaiTi5.D#,lNW); 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//;
126
S x2 5< /#D; i! (x2 9 52//) R x2 < 63/; S
AHont !ont; ,oid setup() R si(e(6//, 6//); !ont < loadHont(WeaiTi5.D#,lNW); textHont(!ont); no$tro)e(); S ,oid draN() R !ill(2/., 2.); rect(/, /, Nidth, hei'ht); !ill(/); text(Wprocessin'W, random(56//, 6//), random(52/, 62/)); S
;a ti0ogra9a no necesita mo$erse en orden 0ara cam)iar en el tiem0o. Muc:os de los 0ar+metros de trans9ormaciones< como la o0acidad< 0uede utilizarse en el te6to. Es 0osi)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 direccion < 5direccion; S !ill(/, opacidad); text(W!undidoW, ., :/); S
,l a0licar las 9unciones de translate()1 rotate() # scale() tam)in 0ueden 0roducirse mo$imientos:
AHont !ont; $trin' s < WM->TBX?W; !loat an'ulo < /#/; ,oid setup() R si(e(6//, 6//); !ont < loadHont(WeaiTi5.D#,lNW); textHont(!ont, 2.); !ill(/); S ,oid draN() R bac)'round(2/.); an'ulo 4< /#/2; pushCatrix();
128
translate(00, 3/); scale((cos(an'ulo/.#/) 4 6#2) * 2#/); rotate(an'ulo); text(s, /, /); popCatrix();
7tra tcnica de re0resentacin< llamada 0resentacin r+0ida de $isualizacin serial @/=(PC< muestra 0ala)ras en la $entana de 9orma secuencial # 0ro$ee distintas 9ormas de 0ensar 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 ;ovi*iento Indi$idualmente< las letras o9recen ma#or 9le6i)ilidad a la :ora de animar Aue las 0ala)ras. onstruir 0ala)ras letra 0or letra< # darle un mo$imiento indi$idual a cada una de ellas< 0uede con$ertirse en una tarea mu# ardua. 5ra)a8ar de esta manera reAuiere m+s 0aciencia # dedicacin Aue 0rogramas de otras caractersticas< 0ero 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//); !ont < loadHont(WeaiTi5.D#,lNW); 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
130
//*ada letra entra desde aba o 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; !or (int i < /; i 9 letras#len'th; i44) R text(letrasìa, x, ;ìa); x 4< textIidth(letrasìa); S S
131
(nidad 33
<i-ografBa) Aes-uesta
Muc:as 0ersonas 0asan :oras al da escri)iendo cartas en las com0utadoras< 0ero esta accin se $e mu# limitada. PDu caractersticas se 0odra agregar a un editor de te6to 0ara Aue sea m+s sensi)le a la mecangra9aQ Por e8em0lo< la $elocidad de la escritura 0odra disminuir el tamaGo de las letras< o una larga 0ausa en la escritura 0odra aGadir muc:os es0acios< imitando as una 0ausa de una 0ersona mientras :a)la. PDu 0asa si el teclado 0uede registrar la di9icultad con Aue una 0ersona escri)e @la 9orma de Auien toca una nota sua$e del 0iano< cuando se 0ulsa una tecla con sua$idadC # autom+ticamente 0uede asignar atri)utos como la cursi$a para las e(presar sua$idad # negrita -ara e&-resas fuer7aQ Estas analogas se sugieren cmo conser$adoras del so9t?are actual Aue trata a la ti0ogra9a # mecanogra9a. -Pala/ras res-onsivas , los elementos ti0ogr+9icos se le 0ueden asignar los com0ortamientos Aue de9inen una 0ersonalidad en relacin con el mouse o el teclado. Fna 0ala)ra 0uede e60resar la agresin mo$indose r+0idamente :acia el cursor< o uno Aue se ale8a 0oco a 0oco 0uede e60resar timidez.
//@a palabra We,itarW se ale a 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/); rect(/, /, Nidth, hei'ht); !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
132
-?etras res-onsivas =e0arar una 0ala)ra en las letras Aue lo com0onen crea m+s o0ciones 0ara determinar su res0uesta a la del mouse o el teclado. ;as letras inde0endientes tienen la ca0acidad de res0onder de una manera di9erente # contri)u#en a la res0uesta total de la 0ala)ra. ;os dos e8em0los siguientes muestran esta tcnica. El mtodo to*har1rra;() se utiliza 0ara e6traer los caracteres indi$iduales de una $aria)le $trin'. El mtodo char1t() es una 9orma alternati$a 0ara 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(!); letras < palabra#to*har1rra;(); !ill(/); S ,oid draN() R bac)'round(2/.); pushCatrix(); translate(/, 00); !or (int i < /; i 9 letras#len'th; i44) R !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); letras < palabra#to*har1rra;(); 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, /); !or (int i < /; i 9 letras#len'th; i44) R !loat distancia < abs(total?!!set 5 mouseZ); distancia < constrain(distancia, 2., :/);
133
S S
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
134
(nidad 34
%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 0or los elementos Aue lo com0onen. uando el color es de9inido 0or los $alores /EB< :a# tres n3meros Aue almacenan los com0onentes de ro8o< $erde # azul< # un cuarto n3mero o0cional Aue almacena un $alor de trans0arencia. uando se tra)a8a con los $alores J=B< los tres n3meros almacenan el tono< saturacin< # los $alores de )rillo # un cuarto indica la trans0arencia. El color $isi)le es una com)inacin de estos com0onentes. El a8uste de las 0ro0iedades de colores indi$iduales en 9orma aislada de los dem+s es una tcnica 3til 0ara cam)iar din+micamente un $alor de un solo color o la 0aleta entera de un 0rograma. -E&tra,endo %olor En Processing< una $aria)le del ti0o color sim0lemente almacena un $alor indi$idual de un com0onente del color. Este $alor com)ina los com0onentes ro8o< $erde< azul # al9a. 5cnicamente< este $alor es un int @enteroC # 0uede utilizarse din+micamente como se :a $isto en unidades anteriores. ;a $aria)le color almacena $alores entre & # -55 Aue luego 0uede utilizarse como com0onentes 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 0ara leer los com0onentes de color. ;a 9uncin red() e6trae el com0onente ro8o. ;a 9uncin 'reen() e6trae el com0onente $erde. ;a 9uncin blue() e6trae el com0onente azul.
color c6 < color(/, 62:, 233); !loat r < red(c6); !loat ' < 'reen(c6); !loat b < blue(c6); println(r 4 W, W 4 ' 4 W, W 4 b); color c2 < color(6/2); !loat r2 < red(c2); !loat '2 < 'reen(c2); !loat b2 < blue(c2); println(r2 4 W, W 4 '2 4 W, W 4 b2); //*rea un nue,o color //1si'na /#/ a r //1si'na 62:#/ a ' //1si'na 233#/ a b //Bmprime W/#/, 62:#/, 233#/ W //*rea un ,alor de 'ris //1si'na 6/2#/ a r2 //1si'na 6/2#/ a '2 //1si'na 6/2#/ a b2 //Bmprime W6/2#/, 6/2#/, 6/2#/W
;a 9uncin alpha() e6trae el com0onente al9a de un color. /ecordar agregar un cuarto $alor a color()< de lo contrario< al9a ser+ siem0re -55 0or de9ecto.
13'
color c < color ' < !loat a < !loat b < println(a
color(/, 36, 6/2); color(/, 62:, 233, 22/); alpha(c); alpha('); 4 W, W 4 b);
//*rea un nue,o color //*rea un nue,o color //1si'na 233#/ a a //1si'na 22/#/ a b //Bmprime W233#/, 22/#/W
;as 9unciones hue()1 saturation() # bri'htness() 9uncionan como red()1 'reen() # blue() 0ero en el modo J=B de color. /es0ecti$amente< e6traen en el $alor de tono< saturacin # )rillo. /ecordar 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 0or de9ecto< # esto es 0osi)le en Processing.
colorCode(\$=, 0:/, 6//, 6//); color c < color(26/, 6//, ./); !loat h < hue(c); !loat s < saturation(c); !loat b < bri'htness(c); println(h 4 W, W 4 s 4 W, W 4 b); color c < !loat r < !loat h < println(r color(26K, .6, 66K); red(c); hue(c); 4 W, W 4 h); //-stablece el modo de color como \$= //*rea un nue,o color //1si'na 26/#/ a h //1si'na 6//#/ a s //1si'na ./#/ a b //Bmprime W26/#/, 6//#/, ./#/W //*rea un nue,o color //1si'na 26K#/ a r //1si'na 20:#:.KK. a 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#/); color c < color(/#2, /#D, 6#/); !loat r < red(c); !loat h < hue(c); println(r 4 W, W 4 h); //-stablece el modo de color como >X= //*rea un nue,o color //1si'na /#2 a r //1si'na /#3.6:::K a h //1si'na W/#2, /#3.6:::KW
;os $alores regresados 0or dic:as 9unciones son todos $alores del ti0o !loat @decimalC< 0or lo tanto dar+ un error si se trata de asignar a una $aria)le ti0o int. =iem0re 0ueden utilizarse las 9unciones de con$ersin si se lo desea.
color c < color(66D, 22, 2.); int r6 < red(c); !loat r2 < red(c); int r0 < int(red(c)); //*rea un nue,o color //->>?>Q red() re'resa un ,alor decimal //1si'na 66D#/ a r2 //1si'na 66D a r0
omo se discuti en las unidades de im+genes< estas 9unciones se utilizan 0ara leer 06eles indi$idualmente en la 0antalla. En el siguiente e8em0lo< la 9uncin 'et() es utilizada 0ara acceder al color actual de donde se encuentra la 0osicin del cursor.
//-stablece el color de las lneas cuando el //*omponente ro o 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/);
132
color c < 'et(mouseZ, mouseV); !loat r < red(c); //-xtrae el componente ro o stro)e(2335r); //-stablece el contorno line(mouseZ, /, mouseZ, hei'ht); line(/, mouseV, Nidth, mouseV);
//$imula la composicin crom"tica de un pxel en un //panel plano ABma'e medusa; ,oid setup() R si(e(6//, 6//); medusa < loadBma'e(Wmedusa# p'W); stro)e(233); S ,oid draN() R bac)'round(medusa); color c < 'et(mouseZ, mouseV); !loat r < red(c); //-xtrae >o o !loat ' < 'reen(c); //-xtrae Merde !loat b < blue(c); //-xtrae 1(ul !ill(r, /, /); rect(02, 2/, 62, :/); //*omponente >o o !ill(/, ', /); rect(.., 2/, 62, :/); //*omponente Merde !ill(/, /, b); rect(3:, 2/, 62, :/); //*omponente 1(ul S
;as 9unciones red()1 'reen() # blue() 0ueden ser utilizadas de di9erentes maneras. Por e8em0lo< los $alores Aue de$uel$en 0ueden utilizarse 0ara controlar el mo$imiento de las 9ormas # 9iguras. En el siguiente e8em0lo< se utiliza el $alor de )rillo de una imagen 0ara controlar la $elocidad de 1&& 0untos en 0antalla.
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
133
-Paletas de color $in5*ico Fno de los conce0tos m+s im0ortantes en el tra)a8o con el color es la relati$idad. uando un color se coloca al lado de otro< am)os 0arecen cam)iar. =i el color tiene el mismo as0ecto en una #u6ta0osicin< a menudo de)en ser di9erentes @de9inidos con di9erentes n3merosC. Esto es im0ortante 0ara 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 e8em0lo< la colocacin de estos cinco colores...
'
...en di9erente orden< cam)ia su a0ariencia:
,B 'E
,'BE
En el siguiente e8em0lo< los colores almacenados en una $aria)le oli,a # 'ris siem0re son los mismos< mientras Aue los $alores de amarillo # naran a se cam)ian din+micamente en relacin a la 0osicin 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 naran a < color(27, 6//, D0 5 ;*6/); !ill(naran a); ellipse(3., .2 4 ;*6:, 2., 2.); S
Fna )uena tcnica 0ara crear 0aletas de colores es utilizando im+genes # e6traer sus colores con la 9uncin 'et(). 'e0endiendo de los o)8eti$os< se 0uede cargar una imagen 9otogr+9ica o una Aue se :a construido 06el 0or 06el. Fna imagen de cualAuier dimensin 0uede ser cargada # usado como una 0aleta de colores. ,
136
$eces es con$eniente utilizar 0ocos colores.

ABma'e im'; ,oid setup() R si(e(6//, 6//); smooth(); !rame>ate(/#3); im' < loadBma'e(Wmedusa# p'W); 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(); im' < loadBma'e(Wmedusa# p'W); 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 0osi)ilidades. Fna $ez Aue los colores se encuentran en un arra#< 0ueden ser 9+cilmente reorganizados o cam)iados. En el siguiente e8em0lo< 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 0one en orden de oscuro a claro< # luego regresa los colores ordenados. Na Aue cuenta de & a -55< 0one 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, ;);
138
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` a)) << i) R sorted`numa < colors` a; num44; S S S return sorted; S
S S ima'e*olors < tipo*olor(ima'e*olors);
160
(nidad 3'
I*agen) .iltro, ;e7cla, %o-ia, ;5scara

!ilter(), blend(), blend*olor(), cop;(), mas)()
;as im+genes digitales tienen el 0otencial nota)le 0ara ser 9+cilmente reOcon9iguradas # com)inarse con otras im+genes. El so9t?are a:ora simula un 0roceso de o0eraciones de consumo Aue antes eran la 0reocu0acin de un cuarto oscuro con luz # Aumica. ada 06el de una imagen digital es un con8unto de n3meros Aue se 0ueden agregar o multi0licar. ,lgunos de estos c+lculos se )asan en la aritmtica # otros utilizan las matem+ticas m+s com0le8as de 0rocesamiento de seGales< 0ero los resultados $isuales son lo m+s im0ortantes. ;os 0rogramas de so9t?are tales como el E2F Image Mani0ulation Program @EIMPC # ,do)e P:otos:o0< :an :ec:o 0osi)le la realizacin de muc:os de los c+lculos m+s comunes # 3tiles< sin 0ensar en las matem+ticas detr+s de los e9ectos. Estos 0rogramas 0ermiten a los usuarios realizar 9+cilmente las o0eraciones tcnicas< tales como la con$ersin de im+genes de colores /EB a escala de grises< aumentando el contraste de una imagen< 0roduciendo un )alance de color u otra clase de a8ustes. Fn 9iltro 0uede desen9ocar una imagen< imitar la solarizacin< o simular los e9ectos de acuarela. ;as acciones de 9iltrado de 9iccin< mezcla< # la co0ia se 0uede controlar 9+cilmente con el cdigo 0ara 0roducir cam)ios nota)les. Estas tcnicas 0ueden ser demasiado lenta 0ara su uso en animacin en tiem0o real. -.iltrando , ;e7clando Processing 0ro$ee de 9unciones 0ara 9iltrar # mezclar im+genes mostradas en la $entana de re0resentacin. Estas o0eran 0or alterar los 06eles de una imagen o utilizar como 0ar+metro dos de estas. ;a 9uncin !ilter() 0osee dos $ersiones:
!ilter(modo) !ilter(modo, ni,el)
E6isten oc:o o0ciones di9erentes 0ara 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 e8em0lo a0lica 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 e8em0lo< si un 0rograma di)u8a dos lneas< # un desen9oAue es creado luego de Aue una lnea es di)u8ada< a9ectar+ 3nicamente a la 0rimera.
smooth(); stro)eIei'ht(3); noHill(); line(/, 0/, 6//, :/); !ilter(=@&>, 0); line(/, 3/, 6//, D/);
,l cam)iar el 0ar+metro de ni,el en cada cuadro se 0uede 0roducir mo$imiento. Para esto< :aremos uso de un )loAue draN() Aue actualice el ni$el de desen9oAue de un 9iltro.
161
!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 0osee su 0ro0io mtodo !ilter(). Esto 0ermite tra)a8ar con las im+genes de 9orma indi$idual. Para esto< utilizamos el o0erador 0unto.
ABma'e im' < loadBma'e(Wmedusa# p'W); ima'e(im', /, /); im'#!ilter(BNM->T); ima'e(im', 3/, /);
;a 9uncin blend() mezcla los 06eles de di9erentes maneras< de0endiendo la clase de 0ar+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 0ar+metro modo 0uede 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 0ar+metros x e ; corres0onden a las coordenadas 6 e # de la u)icacin a co0iar. ;os 0ar+metros ancho # alto< esta)lecen en tamaGo del +rea a co0iar. ;os 0ar+metros dx # d; son la coordenada 6 e # de destino. ;os 0ar+metros dancho # dalto< esta)lecen el tamaGo del +rea de destino. Para mezclar dos im+genes< lo idea es utilizar la segunda como 0ar+metro de im'. En el siguiente e8em0lo 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 0ueden mezclar im+genes im0ortadas a la $entana de re0resentacin 0or utilizar la segunda $ersin de la 9uncin blend(). El siguiente e8em0lo utiliza como modo a D1>e-$T.
162
ABma'e im' < loadBma'e(Wmedusa# p'W); 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< 0odemos mezclar dos im+genes.
ABma'e im' < loadBma'e(Wmedusa# p'W); 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 0ara mezclar los colores indi$idualmente.

blend*olor(c6, c2, modo)
;os 0ar+metros c6 # c2< son los $alores 0ara crear un nue$o color cuando estos se mezclen 8untos. ;a o0cin 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 PB&eles ;a 9uncin cop;() 0osee dos $ersiones< # cada una de ellas una gran cantidad de 0ar+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 0ar+metros< co0ia los 06eles de una regin de la $entana de re0resentacin< # los 0ega en otra regin. ;a $ersin con nue$e 0ar+metros co0ia toda o una 0orcin de una imagen< es0eci9icada con srcBm'< # la 0ega en una regin de la $entana de re0resentacin. =i el recurso # el destino son de di9erentes tamaGos< los 06eles son autom+ticamente escalados 0ara alcanzar el anc:o # el alto de destino. ;os otros 0ar+metros son los mismos Aue se descri)ieron 0re$iamente en la 9uncin blend(). ;a 9uncin cop;() di9iere de las 9unciones 'et() # set()< $istas anteriormente< #a Aue esta 0uede o)tener 06eles # resta)lecerles una 0osicin.
ABma'e im' < loadBma'e(Wmedusa# p'W); ima'e(im', /, /); cop;(/, /, 6//, 3/, /, 3/, 6//, 3/);
163
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 0osee un mtodo cop;(). Puede utilizarse 0ara co0iar 0orciones 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 trans0arencia 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< 0uede con$ertirse con la 9uncin !ilter(). ;as +reas mas claras muestran la imagen< mientras Aue las mas oscuras la cu)ren. El siguiente e8em0lo utiliza la 9uncin mas)() con las siguientes im+genes:
puerto# p'
mascara# p'
;a imagen resultante # el cdigo 0ara 0roducirla:

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', /, /);
164
1-"ndice .iltros
16'
(nidad 32
I*agen) Procesa*iento de I*agen

pixelsà, loadAixels(), updateAixels(), createBma'e()
El 0rocesamiento de im+genes es un trmino mu# am0lio # general 0ara re9erirse a la mani0ulacin # modi9icacin de las mismas< o en su de9ecto< 0roducir un resultado esttico o me8orar la comunicacin. Programas como EIMP o ,do)e P:otos:o0 0ro$een al usuario de :erramientas 0ara mani0ular 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 una imagen es mostrada en 0antalla< cada elemento del arra# es di)u8ado como un 06el. Por lo tanto< al multi0licar el anc:o 0or el alto de la imagen se 0uede determinar el n3mero de 06eles em0leados. =i una imagen es de %&& 06eles de anc:o 0or %&& 06eles de alto< el arra# contendr+ %&&&& elementos. = una imagen es de -&& 06eles de anc:o 0or - 06eles de alto< el arra# tendr+ 1&& elementos. ;a 0rimera 0osicin del arra# es el 0rimer 06el de la esAuina su0erior izAuierda< # la 3ltima es el 3ltimo 06el de la esAuina in9erior derec:a. -PB&eles El arra# pixelsà almacena el $alor de color de cada 06el. ;a 9uncin loadAixels() de)e ser llamada antes de pixelsà. ;uego de Aue los 06eles son ledos o modi9icados< ellos de)en actualizarse mediante la 9uncin updateAixels(). omo be'in$hape() # end$hape()< loadAixels() # updateAixels()< siem0re 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 0ara ser modi9icado # actualizado. Ja# Aue asegurarse< adem+s< Aue est declarado en torno a cualAuier )loAue< # solo utilizarlo cuando sea necesario< 0uesto su so)reutilizacin 0uede entor0ecer el 0rograma # :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# 0ueden ser ma0eadas a una 0osicin corres0ondiente del arra#< 0or multi0licar el $alor de # 0or el anc:o de la $entana de re0resentacin< # sumarle a este el $alor de x. Para calcular< entonces< cualAuier 0osicin de 06eles 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 o0uesta< de)e di$idirse la 0osicin de los 06eles en el arra# 0or el
anc:o de la $entana de re0resentacin< 0ara o)tener la coordenadaO#< # o)tener el mdulo de la 0osicin # el anc:o de la $entana de re0resentacin< 0ara 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 0rogramas Aue reAuieren mani0ular una gran cantidad de 06eles< la im0lementacin de pixelsà es muc:o m+s r+0ida Aue la de 'et() # set(). ;os siguientes e8em0los :an sido mostrados al e60licarse 'et() # set() en unidades anteriores. 2o o)stante< aAu se im0lementan con pixelsà 0ara demostrar la $elocidad con la Aue o0era el 0rograma.
,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; int mx < constrain(mouseZ, /, 77); int m; < constrain(mouseV, /, 77); loadAixels(); color c < pixels`m;*Nidth 4 mxa; !ill(c); rect(2/, 2/, :/, :/); S
ada imagen tiene su 0ro0io arra# pixelsà< al cual se 0uede acceder con el o0erador 0unto. Esto :ace 0osi)le mostrar una imagen mientras se modi9ican los 06eles 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/.); int mx < constrain(mouseZ, /, 77); int m; < constrain(mouseV, /, 77); arch#loadAixels();
163
arch#pixels`m;*Nidth 4 mxa < color(/); arch#updateAixels(); ima'e(arch, 3/, /);
,l im0lementar el arra# pixelsà1 en lugar de la 9uncin ima'e() 0ara mostrar una imagen en 0antalla< este arra# 0ro$ee de m+s control de la mencionada imagen. =im0les o0eraciones matem+ticas o 0eAueGos c+lculos< sumado a un ciclo H?>< re$ela el $erdadero 0otencial 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(); 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< 0) R pixelsìa < arch#pixelsìa; S updateAixels(); ABma'e arch < loadBma'e(Wpuerto# p'W); int count < arch#Nidth * arch#hei'ht; arch#loadAixels(); loadAixels(); !or (int i < /; i 9 count; i44) R pixelsìa < arch#pixels`count 5 i 5 6a; S updateAixels(); ABma'e arch < loadBma'e(Wpuerto# p'W); int count < arch#Nidth * arch#hei'ht; arch#loadAixels(); loadAixels(); !or (int i < /; i 9 count; i44) R pixelsìa < arch#pixelsì/2a; S updateAixels();
-%o*-onentes del PB&el ;as 9unciones red()< 'reen() # blue() son utilizadas 0ara leer $alores indi$iduales de los 06eles. Estos $alores 0ueden ser modi9icados # de$ueltos al arra# pxelsà. En el siguiente e8em0lo< se muestra como in$ertir los $alores de color de una imagen.
ABma'e arch < loadBma'e(Wpuerto# p'W); bac)'round(arch); loadAixels(); !or (int i < /; i 9 Nidth*hei'ht; i44) R color p < pixelsìa; //*onse'uir !loat r < 233 5 red(p); //Codi!icar !loat ' < 233 5 'reen(p); //Codi!icar !loat b < 233 5 blue(p); //Codi!icar
pxeles ,alor ro o ,alor de ,erde ,alor de a(ul
166
pixelsìa < color(r, ', b); S updateAixels();
//1si'nar ,alor modi!icado
;os $alores del teclado # el mouse 0ueden ser utilizados en la manera en la Aue el arra# pixelsà modi9ica mientras el 0rograma se est+ e8ecutando. En el siguiente e8em0lo< una imagen es con$ertida a escala de grises al incrementar sus com0onentes. Estos $alores son incrementados con mouseZ< :aciendo la imagen mas luminosa.
ABma'e arch; ,oid setup() R si(e(6//, 6//); arch < loadBma'e(Wpuerto# p'W); 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 ro o !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(); line(mouseZ, /, mouseZ, hei'ht); S
Estas 9unciones de modi9icacin indi$idual son mu# 3tiles< 0ero tam)in mu# lentas. uando se reAuiere Aue se modi9iAue de 9orma indi$idual cientos o miles de $eces mientras se e8ecuta el 0rograma< se recomienda utilizar una tcnica conocida como bit+shifting. -%onvolucin 7tra 9orma de modi9icar las im+genes es cam)iar el $alor de cada 06el en relacin a sus 06eles $ecinos. Fna matri6 de n3meros< llamada Hernel de con$olucin< es a0licada a cada 06el de la 0antalla. ,0licando el Hernel a cada 06el es llamado 0roceso de con$olucin. Este ti0o de 0roceso matem+tico es tan e9iciente Aue o0era en 0rogramas de 0roduccin gr+9ica mu# 0otentes como el ,do)e P:otos:o0. omo un e8em0lo< tomaremos un 06el de una imagen a la Aue le a0licaremos el Hernel. El 06el o0era como centro de los 06eles Aue se encuentran a su alrededor. ada 06el es multi0licado 0or el Hernel #< luego estos $alores se suman entre s. El resultado es un 06el con un nue$o $alor de color< 0roducto de a0licar el Hernel:
;a 0rimer e60resin creada al a0licar el Hernel es la siguiente:
168
(233 * /#666) 4 (22: * /#666) 4 (630 * /#666) 4 (22: * /#666) 4 (630 * /#666) 4 ( / * /#666) 4 (630 * /#666) 4 ( / * /#666) 4 ( / * /#666)
=im0li9icado 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 %-4<1-.. Pasado a entero es %-4< # luego es con$ertido a $alor de grises 0ara el 06el. Para realizar una con$olucin en la imagen com0leta< es necesario a0licar el Hernel en cada uno de los 06eles. Es sa)ido Aue un 0ro)lema im0ortante son los 06eles de las aristas o los )ordes< donde algunos de los 06eles Aue los rodean esca0an de la $entana de re0resentacin. En estos casos< el 0rograma sim0lemente los ignora # a0lica el Hernel al resto de los $alores. ;os 0atrones Aue se utilizan en los Hernel crean di$ersos 9iltros 0ara a0licar a la imagen. =i todos los $alores del Hernel son 0ositi$os< crea lo Aue suele denominarse un 9iltro 0asaO)a8os. Fn 9iltro 0asaO)a8os< remue$e +reas donde :a# una e6trema di9erencia en los $alores ad#acentes de los 06eles. ,l a0licarlo en una imagen com0leta< crea una es0ecie de desen9oAue. Ftilizar< en el Hernel< una mezcla de $alores 0ositi$os # negati$os crea un 9iltro 0asaOaltos. Fn 9iltro 0asaOaltos< remue$e +reas donde :a# mu# 0oca di9erencia en los $alores ad#acentes de los 06eles. Esto 0roduce una clase de en9oAue. El siguiente e8em0lo< demuestra como usar una matri6 Hernel de 3 6 3< 0ara trans9ormar una imagen. =i se modi9ican los $alores del arra# )ernelàà< se o)tendr+n distintos resultados. ;a 9uncin createBma'e() crea un 06el $aco. 'ic:a 9uncin reAuiere tres 0ar+metros< 0ara asignar el anc:o< el alto # el 9ormato de la imagen. El 9ormato 0uede ser >X= @color com0letoC o 1>X= @color com0leto con al9aC. 2o es necesario utilizar loadAixels() inmediatamente des0us 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 aba o !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à ed'eBm'#updateAixels();
180
ima'e(ed'eBm', /, /);
//Dibu a 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< 0ueden utilizarse 0ara muc:as otras cosas Aue solo mostrar colores. ;os siguientes e8em0los 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 < loadBma'e(Wpuerto# p'W); arch#loadAixels(); S ,oid draN() R bac)'round(2/.); color c < arch#pixelsìndexa; //?btiene pxel !loat r < red(c) / 0#/; //?btiene ,alor ro o 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 ro o en la lon'itud de las lneas ABma'e arch; ,oid setup() R si(e(6//, 6//); arch < loadBma'e(Wpuerto# p'W); arch#loadAixels(); S ,oid draN() R bac)'round(2/.); int m; < constrain(mouseV, /, 77); !or (int i < /; i 9 arch#hei'ht; i44) R //?btiene el pxel color c < arch#pixels`m;*Nidth 4 ia; //?btiene ,alor de ro o !loat r < red(c); line(i, /, i, hei'ht/2 4 r/:); S S
181
//*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 < loadBma'e(Wpuerto# p'W); 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
182
1-"ndice %onvolucin
183
(nidad 33
$atos de Salida) I*5genes

sa,e(), sa,eHrame()
;a 0antalla de una com0utadora muestra una imagen en la 0antalla muc:as $eces 0or segundo. ;a ma#ora de los sistemas o0erati$os 0ermiten o)tener una ca0tura de la 0antalla mientras se est+ e8ecutando el sistema. =i se utiliza una Macintos:< de)e o0rimirse omandoO=:i9tO3. En caso de usarse Iindo?s< de)e o0rimirse el )otn Im0resin de Pantalla @Im0r Pant Pet =isC. Esta imagen es guardada en 0orta0a0eles< 0or lo tanto en cualAuier editor de im+genes 0uede usarse la 9uncin Pegar @ ontrol_(C 0ara $er la corres0ondiente ca0tura. E6isten< adem+s< so9t?are Aue 9acilitan el almacenamiento de estas im0resiones. Incluso< lo interesante< es Aue 0ermiten almacenarlas en 9orma de secuencia< cuadroOaOcuadro. 'e)e considerarse Aue 3& cuadros 0or segundo< tan solo 3& segundos de secuencia necesitan almacenar 4&& cuadros. =i se utiliza en la ?e)< 0odra :acerse mu# lenta la descarga de la animacin secuencial. ;as o0ciones m+s comunes suelen ser tcnicas de degrado de calidad de la imagen< 0ara una m+s r+0ida $isualizacin en la ?e). -Cuardando I*5genes ;a 9uncin sa,e() es em0leada 0ara guardar una imagen del 0rograma. /eAuiere tan solo un 0ar+metro< un $trin' Aue se con$ierte en el nom)re de la imagen.
sa,e(nombredearchi,o)
;as im+genes 0ueden ser almacenadas en una gran $ariedad de 9ormatos< de0endiendo de la e6tensin utilizada en el 0ar+metro. Por e8em0lo< si el 0ar+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,/E,. =i ninguna e6tensin es incluida< se almacenar+ como 9ormato 5I"" 0or de9ecto< # el #ti! ser+ aGadido al nom)re. Ja# Aue asegurarse de 0oner el nom)re entre comillas 0ara di9erenciar al 0ar+metro como un $trin'. ;a imagen ser+ guardada en la actual car0eta del sHetc:.
line(/, /, Nidth, hei'ht); 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 e8em0lo< solo la 0rimer lnea es guardada en linea#ti!.
line(/, /, Nidth, hei'ht); //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() a0arece 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 0antalla. Esto< como es sa)ido< no solo no es correcto sino Aue adem+s entor0ece el 9uncionamiento del 0rograma. 'e entre las soluciones m+s sim0les Aue se 0ueden em0lear< 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().
184
,oid setup() R si(e(6//, 6//); S ,oid draN() R bac)'round(2/.); line(/, /, mouseZ, hei'ht); line(Nidth, /, /, mouseV); S ,oid mouseAressed() R sa,e(Wlinea#ti!W); S
-Cuardando I*5genes 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 0ar+metro< las im+genes son guardadas como screen5////#ti!1 screen5///6#ti!1 screen5///2#ti!< etc. El com0onente nombredearchi,o5 0uede ser cam)iado 0or cualAuier nom)re se desee< # la e6tensin ext 0uede ser cam)iada 0or cualAuier e6tensin de imagen. ;os ]]]] es la 0orcin Aue es0eci9ica los dgitos con los Aue se guardan las im+genes. =i se utiliza ]]]]< ese $alor es reem0lazado 0or el $alor Aue en ese momento tiene !rame*ount. Por e8em0lo< el cuadro n3mero %-! es llamado nombredearchi,o5/62K#ti!< # el %!-3 es nombredearchi,o56K20#ti!. =i se agrega un ] e6tra< so0ortar+ %&&&& 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 0rograma. Por e8em0lo< si se desea guardar -&& cuadros luego de o0rimir el )otn del mouse.
//Xuarda 2. cuadros, de x56///#ti! a x56/20#ti! ,oid draN() R bac)'round(2/.); line(mouseZ, mouseV, pmouseZ, pmouseV); 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
18'
bac)'round(2/.); line(mouseZ, mouseV, pmouseZ, pmouseV); i! ((!rame*ount P 3) << /) R sa,eHrame(Wx5]]]]#ti!W); S
182
(nidad 36
$atos de Salida) E&-ortar 1rc=ivos

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 0a0el< # no se acumulan en los ga)inetes durante aGos acumulando 0ol$o. Fn arc:i$o digital es una secuencia de )#tes en una u)icacin en el disco del ordenador. , 0esar 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 com0utadoras im0lica tra)a8ar con los arc:i$os. Por e8em0lo< 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 0ara almacenar el contenido. uando la in9ormacin se guarda< se le da un nom)re 0ara la 9utura recu0eracin del mismo. 5odos los arc:i$os del so9t?are tienen un 9ormato< un con$enio de orden de los datos< 0ara Aue las a0licaciones de so9t?are se0an cmo inter0retarlos cuando los leen de la memoria. ,lgunos 9ormatos comunes inclu#en 5>5 0ara arc:i$os de te6to sin 9ormato< MP3 0ara almacenar sonido # E>E 0ara los 0rogramas e8ecuta)les en Iindo?s. "ormatos comunes 0ara los datos de las im+genes son JPEE # EI" # 9ormatos comunes 0ara los documentos de te6to son '7 # /5". ;a 9ormato >M; se :a 0o0ularizado en los 3ltimos aGos como un 9ormato de datos de uso general Aue 0uede ser e6tendido 0ara sostener los ti0os es0ec9icos de datos en un 9ormato 9+cil de leer arc:i$o. -.or*ateando $atos E6isten caracteres 0articulares Aue no 0oseen una $isualizacin directa. ;os mas comunes son el es0acio tabular # la nue$a l:nea. Estos caracteres 0ueden re0resentarse con ft # fn< res0ecti$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< 0ueden 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 ti0o int a ser 9ormateado< # los d'itos es la cantidad total de dgitos Aue de)e 0roducir el 9ormato. Por otro lado< en la segunda $ersin< el !loatMalor es el $alor ti0o !loat a ser 9ormateado. El 0ar+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/)); println(n!(./, 3)); println(n!(7/, 0)); println(n!(2//#7., 6/, .)); println(n!(./#2, 3, 0)); println(n!(7#/62, /, 3)); //Bmprime W///////2//W //BmprimeW///./W //Bmprime W/7/W //Bmprime W///////2//#7.//W //Bmprime W///./#2//W //Bmprime W7#/62//W
-E&-ortando 1rc=ivos Euardar arc:i$os es una 9orma mu# 3til de 0oder mostrar datos de determinado ti0o una $ez Aue el 0rograma
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 car0eta del sHetc:. =e 0uede acceder a esta sim0lemente utilizando la :erramienta K=:o? =Hetc: "olderL en el men3 K=Hetc:L. En adicin< la 9uncin exit() se utiliza 0ara detener el 0rograma.
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(); !or (int i < /; i 9 x#len'th; i44) R ,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; !or (int i < /; i 9 x#len'th; i44) R 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 0ro$ee de otra 9orma de e60ortar arc:i$os. En lugar de escri)ir el arc:i$o com0letamente una $ez< como en sa,e$trin's()< el mtodo createIriter() a)re un arc:i$o 0ara escri)irlo # 0ermite su escritura mientras se e8ecuta el 0rograma. Para 0oder conseguir Aue el arc:i$o se guarde correctamente< es necesario $alerse del mtodo !lush()< 0ara escri)ir cualAuier clase de dato al arc:i$o. El mtodo close() es igualmente necesario 0ara 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 point(mouseZ, mouseV); // Irite the coordinate to a !ile Nith a // WftW (T1= car"cter) entre cada entrada output#println(mouseZ 4 WftW 4 mouseV); S S
186
,oid )e;Aressed() R output#!lush(); output#close(); exit(); S
//Aresiona una tecla para 'uardar los datos //-scribe los datos //Hinali(a el archi,o //Detiene el pro'rama
El siguiente e8em0lo es una $ariacin del anterior< 0ero utiliza las teclas Enter # Barra de Es0acio 0ara 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 exit(); //Detiene el pro'rama S S
188
(nidad 38
Estructuras) 9/jetos
class, ?b ect
;as $aria)les # las 9unciones son los )loAues constructores de la 0rogramacin. "recuentemente< muc:as 9unciones son utilizadas 8untas 0ara relacionar $aria)les. ;a 0rogramacin orientada a o)8etos< la cual es 0osi)le con Processing< utiliza o)8etos # clases como )loAues constructores. Fna clase de9ine un gru0o de mtodos @9uncionesC # de cam0os @$aria)lesC. Fn o)8eto es sim0lemente una instancia de la clase. ;os cam0os de un o)8eto son< generalmente< accesi)les solo $a sus 0ro0ios mtodos< lo cual 0ermite ocultar su com0le8idad del 0rograma general. =imilar a lo Aue ocurre al mane8ar< un conductor no $e los 0rocesos de ingeniera Aue ocurren en el motor< 0ero si 0uede $er la $elocidad a la Aue $a en el $elocmetro. El mismo ti0o de a)straccin es utilizada en la 0rogramacin orientada a o)8etos @P77C. -Progra*acin 9rientada a 9/jetos Fn 0rograma modular se com0one de mdulos de cdigo< encargados de una tarea es0ec9ica. ;as $aria)les son la 9orma m+s )+sica en 0ensar en reutilizar elementos en un 0rograma. Permiten Aue un $alor 0ueda a0arecer la cantidad de $eces Aue sea necesario # Aue sea cam)iado. ;as 9unciones a)straen una tarea es0ec9ica # 0ermiten a los )loAues de cdigo se reutilizados. Eeneralmente< uno est+ conectado con lo Aue la 9uncin :ace< # no como ella 9unciona. ;a 0rogramacin orientada a o)8etos e6tiende la modularidad de utilizar $aria)les # escri)ir 9unciones 0or relacionarlas entre ellas< al ser agru0adas 8untas. Es 0osi)le :acer una analoga entre los o)8etos del so9t?are # los artefactos reales. Para o)tener una $isin del mundo como 0eAueGos 0rogramas orientados a o)8etos< se 0resenta la siguiente lista:
@o*/re %a*-os ;"todos @o*/re %a*-os ;"todos @o*/re %a*-os ;"todos @o*/re %a*-os ;"todos
Can(ana color, peso crecer(), caer(), pudrir() Cariposa especie, 'enero a'itar1las(), aterri(ar() >adio !recuencia, ,olumen encender(), tono(), establecerMolumen() 1uto marca, modelo, color, a+o acelerar(), !renar(), 'irar()
,l e6tender el e8em0lo de la Can(ana< se re$elan 0osi)ilidades mas interesantes de la 0rogramacin orientada a o)8etos. Para :acer un 0rograma Aue simule la $ida de una manzana< el mtodo crecer() 0osi)lemente reci)a $alores de entrada de tem0eratura # :umedad. El mtodo crecer() 0uede incrementar el cam0o peso del o)8eto< )as+ndose en esos $alores de entrada. El mtodo caer() se encontrara re$isando constantemente el cam0o peso< # cuando este 0ase cierto lmite< la manzana caer+ a la tierra. El mtodo pudrir() comenzar+ a 9uncionar una $ez Aue la manzana llegue al suelo. Este mtodo 0odra :acer decrecer el cam0o 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 # cam0os. ;os o)8etos de una clase de)en tener un nom)re 0ro0io< al igual Aue una $aria)le. Por e8em0lo< dos o)8etos llamados !u i # 'olden 0ertenecen a la clase Can(ana.
@o*/re %a*-os @o*/re %a*-os
!u i colorF red pesoF :#2 'olden colorF ;elloN pesoF D#.
'os 0o0ulares estilos de re0resentacin de clases son las ta)las # un diagrama circular ins0irado en la )iologa de una clula. ada estilo de re0resentacin muestra el nom)re de la clase< los cam0os # los mtodos. Es mu# 3til de9inir las caractersticas de cada clase en alguno de estos diagramas antes de comenzar con el cdigo en s. >an3ana color peso crecer ! caer ! pudrir ! clase Manzana fu'i red A.5 crecer ! caer ! pudrir ! o)8eto 9u8i golden yello" B.C crecer ! caer ! pudrir ! o)8eto golden
El diagrama circular adAuiere m+s )ien un conce0to de encapsulaci*n< la idea 0or la cual los cam0os 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 cam0os # mtodos de un o)8etos son accesi)les a tra$s del o0erador punto< un per:odo. Para o)tener el calor de color del o)8eto !u i< la sinta6is corres0ondiente ser+ !u i#color. Para e8ecutar el mtodo crecer() dentro de o)8eto 'olden< :a)r+ Aue escri)ir 'olden#crecer(). -(sando %lases , 9/jetos 'e9inir una clase es crear tu 0ro0io ti0o de datos. Pero no como los ti0os de datos 0rimiti$os tales como int< !loat o boolean< sino m+s )ien como los ti0o $trin'< ABma'e # AHont< 0or dic:a razn siem0re se escri)en con letra ca0ital @0rimera letra en ma#3sculasC. uando se crea una clase< lo 0rimero es 0ensar cuidadosamente el cdigo Aue lle$ar+ dentro< # no 0rogramar a la ligera. ;o com3n es :acer 0rimero una lista de $aria)les reAueridas @las cuales 0asaran a llamarse cam0osC< # determinar Aue ti0o de datos ser+n. En el 0rimero de los e8em0los Aue se $er+n a continuacin< un circulo es 0osicionado en la 0antalla< 0ero el cdigo es escrito de una 9orma distinta a como se $ena $iendo @es escrito en un +m)ito de 0aradigma orientado a o)8etosC. Es necesario dos cam0os Aue almacenen la 0osicin del crculo< # un tercer cam0o Aue
201
controle su di+metro.
!loat x !loat ; !loat diametro
oordenadaO6 del crculo oordenadaO# del crculo 'i+metro del crculo
El nom)re de la clase de)e ser cuidadosamente considerado. Este 0uede ser un nom)re sim)lico de lo Aue se est di)u8ando en 0antalla< o un nom)re de las con$enciones de $aria)les. =in em)argo< siem0re< de)en ser escritos con la letra ca0ital. Esto a#uda al 0rograma a se0arar clases como $trin' o ABma'e de los ti0os 0rimiti$os como int o boolean. El nom)re de la clase 0ara el siguiente e8em0lo ser+ Aunto< 0uesto Aue *irculo no :u)iese sido 0ertinente al caso @#a Aue se esta di)u8ando un 0untoC. En 0rinci0io< se dis0ondr+ del 0rograma escrito como 0rogramacin estructurada< #a Aue siem0re 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 eli0se tenga su 0ro0ia clase. 'e esta 9orma< antes del )loAue setup()1 la 0rimer lnea de cdigo crea al o)8eto pt de la clase Aunto. El o)8eto pt es construido dentro del setup(). ;uego< usando el o0erador 0unto< se le asignan los $alores a la eli0se dentro del draN().
Aunto pt; //Declara el ob eto
,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); pt < neN Aunto(); pt#x < 00; pt#; < 3/; pt#diametro < 0/; S
//*onstru;e //1si'na 00 //1si'na 3/ //1si'na 0/
el al al al
ob eto campo x campo ; campo diametro
,oid draN() R bac)'round(/); ellipse(pt#x, pt#;, pt#diametro, pt#diametro); S class Aunto R !loat x, ;; !loat diametro; S //*oordenada x e ; //Di"metro del crculo
202
,:ora #a est+ lista la clase Aunto. ,3n as< toda$a no est+ siendo im0lementada de manera 3til. En el siguiente e8em0lo< se le agregar+ un mtodo a la clase Aunto @es aAu donde la 0rogramacin 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 0ara mostrar en la $entana
En la 3ltima lnea del cdigo de la clase< se coloca el mtodo mostrar()< el cual 9unciona como el o0erador 0unto anteriormente $isto. 'entro del mtodo< se coloca la 9uncin Aue di)u8a el crculo. Es e$idente notar Aue a:ora los 0ar+metros se escri)en sin el o0erador 0unto< esto es 0orAue la 9uncin ellipse() se encuentra dentro de la clase Aunto< 0or lo Aue no es necesario :acer una concatenacin.
Aunto pt; //Declara el ob eto
,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); pt < neN Aunto(); pt#x < 00; pt#; < 3/; pt#diametro < 0/; S ,oid draN() R bac)'round(/); pt#mostrar(); S
//*onstru;e el ob eto
class AuntoR !loat x, ;, diametro; ,oid mostrar() R ellipse(x, ;, diametro, diametro); S S
El siguiente e8em0lo introduce un 0aso en la 0rogramacin de o)8etos llamado constructor. Fn constructor es un )loAue de cdigo Aue es acti$ado cuando el o)8eto es creado. El constructor siem0re lle$a el mismo nom)re Aue la clase< # es generalmente utilizado 0ara asignar $alores a los cam0os del o)8eto @si no e6iste el constructor< el $alor de los cam0os ser+ ceroC. El constructor es otro ti0o de mtodo< solamente Aue no es 0recedido 0or el ,oid< 0uesto Aue no de)e de$ol$er ninguna clase de dato. uando el o)8eto pt es creado< los 0ar+metros 33< 5& # 3& son asignados a las $aria)les xpos< ;pos # dia< res0ecti$amente con el constructor. on dic:o )loAue< los $alores son asignados a los cam0os del o)8eto< x< ; # diametro. Para Aue los cam0os sean accesi)les con cada mtodo del o)8eto< ellos de)en ser declarados 9uera del constructor.
Aunto pt; //Declara el ob eto ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); pt < neN Aunto(00, 3/, 0/); //*onstru;e el ob eto S ,oid draN() R bac)'round(/);
203
pt#mostrar();
class Aunto R !loat x, ;, diametro; Aunto(!loat xpos, !loat ;pos, x < xpos; ; < ;pos; diametro < dia; S ,oid mostrar() R ellipse(x, ;, diametro, S S
!loat dia) R //1si'na 00 a x //1si'na 3/ a ; //1si'na 0/ a diametro diametro);
,s mismo< la clase Aunto 0uede ser e6tendida 0or agregar m+s mtodos Aue me8oren su utilizacin en la escena. El siguiente e8em0lo e6tiende la 9uncionalidad de la clase 0or aGadir mo$imiento constante de arri)a a a)a8o. Para esto es necesario determinar dos nue$os cam0os. Fn cam0o Aue regule la $elocidad # otro la direccin del o)8eto. ;os llamaremos ,el # dir< res0ecti$amente< 0ara Aue sean cortos # 9igurati$os. 'e esta 9orma< ,el ser+ de ti0o !loat 0ara tener un ma#or rango de $elocidad< # dir un int #a Aue solo necesitamos dos $alores.
!loat ,el int dir
'istancia Aue se mue$e cada cuadro 'ireccin del mo$imiento @% es a)a8o< O% es arri)aC
Para crear el mo$imiento deseado< se necesita actualizar la 0osicin del o)8eto en cada cuadro. ;a direccin tam)in tiene Aue cam)iar al llegar a los )ordes de la $entana de re0resentacin. ,dem+s< :a# Aue considerar el ti0o de $alor a regresar. omo en este caso no se necesita regresar ning3n $alor< se ante0one la 0ala)ra cla$e ,oid.
,oid mo,er()
,ctualiza la 0osicin del crculo
El cdigo dentro de los mtodos mo,er() # mostrar() 0odra incluirse en tan solo un mtodo. Pero< 0or cuestiones de claridad< en estos e8em0los se 0re9iere se0ararlos.
class Aunto R !loat x, ;; !loat diametro; !loat ,el; int dir < 6; //*oordenada5x, coordenada5; //Di"metro del crculo //Distancia Gue se mue,e cada cuadro //Direccin del mo,imiento (6 es aba o, 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
204
,oid mostrar() R ellipse(x, ;, diametro, diametro); S
Para guardar es0acio # mantenerse en9ocado en el 0rograma en s< los e8em0los Aue se muestran en el 0resente manual no $uel$en a mostrar el cdigo de la clase Aunto< # sim0lemente 0one un comentario como //Bnsertar clase Aunto. uando usted $ea un comentario como ese< co0ie # 0egue el cdigo de la clase corres0ondiente en lugar del comentario. El siguiente e8em0lo muestra el resultado de utilizar una clase con un o)8eto en mo$imiento:
Aunto pt; //Declara el ob eto ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); pt < neN Aunto(00, 3/, 0/, 6#3); S ,oid draN() R !ill(/, 63); rect(/, /, Nidth, hei'ht); !ill(233); pt#mo,er(); pt#mostrar(); S //Bnsertar clase Aunto
//*onstru;e el ob eto
omo con las 9unciones< una clase )ien escrita 0one el 9oco en el resultado # no en los detalles de e8ecucin. ;os o)8etos de)en construirse con el 0ro0sito de ser reutilizados. ;uego de Aue un com0le8o 0rograma es escrito # codi9icado como un o)8eto< 0uede ser utilizado 0osteriormente como :erramienta 0ara construir un nue$o 0rograma. Por e8em0lo< las 9unciones # las clases Aue $ienen incluidas en Processing< son utilizadas en cualAuier 0rograma de autor como sim0les :erramientas. omo con los ti0os de $aria)les< los o)8etos adicionales son aGadidos al 0rograma 0or declarar m+s nom)res. En el siguiente e8em0lo se utilizan tres o)8etos< nom)rados pt61 pt21 pt0< # cada uno tiene sus 0ro0ios mtodos.
Aunto pt6, pt2, pt0; //Declara ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); pt6 < neN Aunto(2/, 3/, ./, pt2 < neN Aunto(3/, 3/, 6/, pt0 < neN Aunto(D/, 3/, 0/, S ,oid draN() R !ill(/, 63); rect(/, /, Nidth, hei'ht); !ill(233); pt6#mo,er(); pt2#mo,er(); pt0#mo,er(); pt6#mostrar(); pt2#mostrar (); pt0#mostrar (); S //Bnsertar clase Aunto el ob eto
/#3); 2#/); 6#3);
//*onstru;e pt6 //*onstru;e pt2 //*onstru;e pt0
20'
/esulta mu# com0le8o resumir los conce0tos )+sicos # la correcta sinta6is de la 0rogramacin orientada a o)8etos en tan solo un e8em0lo. Por lo tanto< se aGade una nue$a clase llamada Hue$o< 0ara com0ararla con la clase Punto. ;a clase Hue$o se crea con la necesidad de 0oder 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 cam0os # los mtodos necesarios 0ara la creacin de la clase:
!loat x !loat ; !loat ladeo !loat an'ulo !loat escala ,oid tambalear() ,oid mostrar()
oordenadaO6 desde la mitad del :ue$o oordenadaO# desde a)a8o del :ue$o `ngulo de com0ensacin de izAuierda a derec:a =e utiliza 0ara de9inir el ladeo ,lto del :ue$o Mue$e el :ue$o de un lado al otro '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() 0ara com0ro)ar Aue 9unciona. ;a 9uncin scale() es aGadida a mostrar() 0ara decrecer el tamaGo del o)8eto. uando se com0rue)e Aue la 0rimer 0arte del 0rograma est+ 9uncionando a la 0er9eccin< el mtodo rotate() # el cam0o ladeo son aGadidos 0ara cam)iar el +ngulo del o)8eto. "inalmente< el cdigo es escrito 0ara Aue el o)8eto se mue$a. El cam0o an'ulo se utiliza 0ara calcular la inclinacin. 'e esta 9orma< el mtodo tambalear() es aGadido 0ara incrementar el +ngulo # calcular< de este modo< el ladeo mismo. ;a 9uncin cos() se agrega 0ara acelerar o 9renar el tam)aleo de lado a lado. ;uego de muc:as 0rue)as< la clase \ue,o 9inal se muestra de la siguiente manera:
class \ue,o !loat !loat !loat !loat R x, ;; ladeo; an'ulo; escala; //*oordenada5x, coordenada5; //dn'ulo de compensacin de i(Guierda a derecha //$e utili(a para de!inir el ladeo //1lto del hue,o //*onstructor
\ue,o(int xpos, int ;pos, !loat l, !loat e) R 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./);
202
S S
be(ierMertex(5./, 5:3, 523, 56//, /, 56//); end$hape(); popCatrix();
;a clase \ue,o se inclu#e en el 0rograma de la misma 9orma Aue la clase Aunto. Fn o)8eto de ti0o \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 ob eto ,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
-1rra, de 9/jetos 5ra)a8ar con arra# de o)8etos es similar a tra)a8ar con arra# de otro ti0o de datos. omo todos los arra#< un arra# de o)8etos se distingue 0or 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 0asos )+sicos 0ara 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 0asos 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 ob eto puntosìa < neN Aunto(x, 3/, 6:, rate); S S ,oid draN() R !ill(/, 62); rect(/, /, Nidth, hei'ht); !ill(233);
203
!or (int i < /; i 9 puntos#len'th; i44) R puntosìa#mo,er(); //Cue,e cada ob eto puntosìa#mostrar(); //Cuestra cada ob eto S S //Bnsertar clase Aunto
;a clase 1nillo se 0resenta como otro e8em0lo de arra# de o)8etos. Esta clase de9ine un crculo Aue a0arece cuando se :ace clicH con el mouse< # crece :asta un anc:o de 1&& 06eles< luego de esto de8a de mostrarse. uando esta clase es aGadida< un nue$o anillo a0arece cada $ez Aue el )otn del mouse es o0rimido. Estos son los cam0os # los mtodos 0ara :acer esta clase 0osi)le:
!loat x !loat ; !loat diametro boolean on ,oid crecer() ,oid mostrar()
oordenadaO6 del anillo oordenadaO# del anillo 'i+metro del anillo Muestra o no el anillo Incrementa el di+metro si la $aria)le on es un true 'i)u8a el anillo
;a clase 1nillo se 0rograma como una sim0le clase. Esta clase no tiene constructor 0uesto Aue sus $alores no se esta)lecen :asta Aue se e8ecuta el mtodo inicio() es llamado desde el 0rograma.
class 1nilloR !loat x, ;; !loat diametro; boolean on < !alse; ,oid inicio(!loat xpos, x < xpos; ; < ;pos; on < true; diametro < 6; S //*oordenada5x, coordenada5; //Di"metro del anillo //Cuestra o no el anillo !loat ;pos) R
,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); ellipse(x, ;, diametro, diametro); S S S
En este 0rograma< el arra# anillosà es creado 0ara sostener cincuenta o)8etos de clase 1nillo. El es0acio en memoria del arra# anillosà # de los o)8etos de clase 1nillo de)e ser siem0re almacenado en el )loAue setup(). uando el )otn del mouse es o0rimido 0or 0rimera $ez< las $aria)les de 0osicin del o)8eto 1nillo se esta)lecen como la actual 0osicin del cursor. ;a $aria)le de control anillo1ctual< es incrementada de a uno 0or $ez< as la 0r6ima $ez los )loAues
draN()< crecer() # mostrar() ser+n e8ecutados 0or el 0rimer elemento de 1nillo.
ada $ez Aue el )otn del mouse es 0resionado< un nue$o anillo se muestra en 0antalla. uando el lmite de elementos es alcanzado< el 0rograma salta al inicio de los mismos # asignas las 0rimeras 0osiciones.
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 ob eto 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 ,oid mouseAressed() R anillosànillo1ctuala#inicio(mouseZ, mouseV); anillo1ctual44; i! (anillo1ctual 8< num1nillos) R anillo1ctual < /; S S //Bnsertar clase 1nillo
'e igual manera Aue los cdigos de 0rogramacin modular< estos 0ueden usarse de muc:as maneras # com)inarse de in9initas 9ormas< de0endiendo las necesidades de cada 0ro#ecto. Esta es una de las cosas m+s e6citantes de 0rogramar con o)8etos. -;0lti-les 1rc=ivos ;os 0rogramas escritos :asta el momento se escri)an como un solo gran con8unto de cdigo. Na Aue esta clase de 0rogramas 0ueden con$ertirse en largos 0aAuetes de cdigo< un sim0le arc:i$o se con$ierte en un gran 0ro)lema. uando un 0rograma se con$ierte en una con$ergencia de cientos o miles de lneas< es con$eniente Aue e6ista una 0osi)ilidad de se0arar sus 0artes en mdulos. Processing 0ermite mane8ar gran cantidad de arc:i$os< # cada sHetc: 0uede estar com0uesto 0or gran cantidad de sHetc:s< Aue son mostrados en 9orma de 0estaGas.
208
210
En la esAuina su0erior derec:a< se encuentra un )otn con el icono de una 9lec:a Aue a0unta< 8ustamente< :acia la derec:a. =e trata del un su)Omen3 destinado a el mane8o de 0estaGas en Processing. ,l o0rimir dic:o )otn< se des0legar+ una lengMeta con unas 0ocas o0ciones. ;a o0cin Ne" ,ab @2ue$a PestaGaC nos 0ermite< 8ustamente< crear una nue$a 0estaGa 0ara 0oder tra)a8ar con cdigo modular. ,l o0rimir la misma< se nos dar+ la o0cin de 0onerle un nom)re. =uele ser recomenda)le Aue el nom)re tenga un sentido al contenido del cdigo # no sea un sim0le acto azaroso. 'e esta 9orma< si el cdigo contiene la clase Punto< es con$eniente Aue la 0estaGa se llame KPuntoL. , continuacin se le da al )otn ;D< # acto seguido tendremos la nue$a 0estaGa lista 0ara comenzar a aGadirle el cdigo Aue necesitemos. ;a 0estaGa se guardar+ como un sHetc: a 0arte dentro de la car0eta de 0roduccin. ,dem+s< el men3 de las 0estaGas 0ermite otras o0eraciones mu# 3tiles. ;a 0osi)ilidad de /enom)rar una 0estaGa con la o0cin <enameR o de Eliminarla con la o0cin Delete. ,gregado a esto< 0ara cuando se tiene una gran cantidad de 0estaGas< se encuentra la o0cin Pre$ious ,ab @PestaGa ,nteriorC # Ne(t ,ab @PestaGa =iguienteC< las cuales nos 0ueden ser mu# 3tilesR o directamente nos a0arece una lista con el nom)re de las 0estaGas Aue estamos tra)a8ando< )asta con solo o0rimir en la deseada.
211
(nidad 40
$i/ujos) .or*as %in"ticas

;as tcnicas de animacin e60erimental de di)u8o< 0intura< # calado en cine< son todos 0redecesores 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 @%41-C< .ree <adicals de ;en ;#e @%45!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 des0us< :izo m+s accesi)le. ;as :erramientas de so9t?are 0ara animacin am0lan< a3n m+s< las tcnicas de cine< 0ermitiendo al artista editar # animar los elementos de 9orma continua des0us de Aue :an sido ela)orado. En %44%< =cott =ni))e =Hetc: dio mo$imiento con so9t?are a las tcnicas e60loradas 0or Mc;aren< ;#e< # BraH:age. ;a a0licacin traduce el mo$imiento de la mano< al de los elementos $isuales en la 0antalla. ada gesto crea una 9orma Aue se mue$e en un )ucle de un segundo. ;as animaciones resultantes 0ueden ser ca0as 0ara crear una o)ra de reminiscencias com0le8idad es0acial # tem0oral< del estilo de 7sHar "isc:inger. =ni))e< am0liando este conce0to con el tel9ono de mo$imiento @%445C< 0ermiti a la gente tra)a8ar simult+neamente en un es0acio de di)u8o com0artido a tra$s de Internet. -Derra*ientas 1ctivas Muc:as :erramientas creadas con so9t?are 0ueden cam)iar su 9orma mientras se encuentran en 0roceso de di)u8o. Por com0arar los $alores de mouseZ # mouseV con sus $alores 0re$ios< 0odemos determinar la direccin # la $elocidad con la Aue se :acen los trazados. En el siguiente e8em0lo< la di9erencia entre la actual # la anterior 0osicin del cursor< determina el tamaGo de una eli0se Aue es di)u8ada en 0antalla.
,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); point(mouseZ, mouseV); S
;os instrumentos de di)u8os con so9t?are 0ueden< adem+s< seguir un ritmo o ser ar)itrario 0or reglas inde0endientes del di)u8o manual. Esta es una 9orma de controlar el di)u8o< m+s all+ de las caractersticas inde0endientes de cada uno. En los e8em0los Aue siguen< el di)u8o solo o)edece el 0unto de origen # de cierre dado 0or autor< lo Aue ocurre en medio es incontrola)le 0or este 3ltimo.
int an'le < /; ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); !ill(/, 6/2); S ,oid draN() R //Dibu a solo cuando el mouse es presionado i! (mouseAressed << true) R an'le 4< 6/; !loat ,al < cos(radians(an'le)) * :#/;
212
S S
!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);
-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 1ctivos ;os elementos de di)u8o indi$iduales< con su corres0ondiente cuidado< 0ueden 0roducir di)u8os con o sin $alores de entrada 0roducidos 0or un usuario. Estos di)u8os acti$os 0odran traducirse como un gato o un ma0ac:e Aue cae en un )ote de 0intura< # de8a sus :uellas 0or todas 0artes< sin Aue nosotros 0odamos controlarlo. reado 0or una serie de acciones 0redeterminadas< el di)u8o acti$o 0uede ser 0arcialmente 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/.);
213
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);
=i $arias de estas lneas se di)u8an a la $ez< el di)u8o se degrada con el tiem0o< #a Aue cada lnea sigue a $agar de su 0osicin original. En el siguiente e8em0lo< el cdigo anterior 9ue modi9icado 0ara crear la clase Cue,e@inea. Duinientos de estos o)8etos Cue,e@inea llenan la $entana de re0resentacin. uando las lneas se di)u8an en 0rimera instancia< $i)ran< 0ero mantienen su 9orma. on el tiem0o< la imagen se degrada en un caos< #a Aue cada lnea $aga tra$s de la su0er9icie 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 e8em0lo enseGa una sim0le :erramienta de animacin Aue muestra un ciclo continuo de %im+genes. ada imagen es mostrada 0or %&& milisegundos 0ara crear la animacin. Mientras cada imagen es creada< es 0osi)le di)u8ar en la misma 0or 0resionar # mo$er el mouse.
214
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 i! (mouseAressed << true) R 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
21'
(nidad 41
E&tensin) ;odos
omo 0arte de una im0lementacin m+s ele$ada del so9t?are< se comienzan a incluir los Modos ]a 0artir de Processing %.5^. Esta 9uncionalidad alterna las 9ormas de 0rogramar o de mostrar el resultado de los 0rogramas e8ecut+ndose. 'esde la inter9az< se 0ro$ee de un sim0le )otn en la esAuina su0erior derec:a:
,l o0rimirlo se nos des0legar+ una 0eAueGa lengMeta con o0ciones 0ara alternar entre los distintos modos @0ueden llegar a e6istir m+s modos en las nue$as $ersiones Aue en las antiguas< siem0re es con$eniente consultar la re9erenciaC. Por de9ecto< el )otn #< 0or lo tanto< el modo< se encuentra en K Ea$aL @llamado K&tandardL en $ersiones 0re$ias a la -.&C. Por de9ecto $iene el modo Ea$a # el %(perimental. 5am)in e6iste la 0osi)ilidad de aGadir modos< de la misma 9orma Aue uno aGade li)reras @li)rar#C o :erramientas @toolC. Para esto solo :a# Aue o0rimir en el )otn #< a continuacin< la o0cin K,dd Mode...L. El 0rograma se encargar+ de )uscar los modos dis0oni)les 0ara su sencilla descarga. , 0artir de esta o0cin el 3nico modo Aue $iene instalado 0or de9ecto es el modo Ja$a. =i se deseara instalar cualAuier modo desarrollado 0or Processing o 0or terceros de)er+ realizarse con el )otn K,dd Mode...L. Esta 3ltima o0cin solo est+ dis0oni)le a 0artir de la $ersin -.&. -Fava =e trata del modo de tra)a8o Aue se encuentra 0or de9ecto en nuestro 0rograma. ,l iniciar el so9t?are 0or 0rimera $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 0ara la 0reO$isualizacin # la e60ortacin del sHetc:. Esto Auiere decir Aue e60ortar+ el sHetc: en un Ja$a ,00let. Est+ 0ensado 0ara la creacin de a0licaciones de escritorio. =iem0re se recomienda Aue se tra)a8e en este modo< m+s all+ de Aue luego Auiera 0asarse a otro. Esto se de)e a la 9acilidad # la 0recisin @0uesto Processing es 0rinci0almente 0ensado 0ara Ja$aC. ;uego de esto< ser+ cuestin de 0asar de modo # ada0tar lo Aue no 9uncione de manera 0tima. En este modo no se 0ueden e60ortar los ,00lets 0ara ?e)< solo 0ara a0licaciones de escritorio. En $ersiones anteriores a la -.&< el modo Ja$a era conocido como Standard. -E&-eri*ental El modo E60erimental nace con la 9usin de dos 0ro#ectos realizados 0or ase# /eas # Ben "r#. onsiste en una es0ecializacin del so9t?are orientado a 0rogramadores con una demanda m+s 0recisa en la 0roduccin de 0rogramas. Entre otras cuestiones< 0osee una consola de errores< un de)ugger # di$ersas :erramientas Aue lo acom0aGan @como un ins0ector de $aria)lesC. Para instalarlo de)e descargarse de 9orma 0articular #a Aue se consider necesario una 9ase de 0rue)as de larga duracin antes de comenzar a distri)uirlo. -1ndroid Este modo de)e ser instalado a 0arte. El modo de tra)a8o K,ndroidL consiste en< como )ien indica su nom)re< crear a0licaciones # 0rogramas 0ara dis0ositi$os ,ndroid @=istema 70erati$o 0ara m$iles distri)uido 0or EoogleC. 2o o)stante< 0ara tra)a8ar en ,ndroid es condicin Aue se encuentre instalado en el ordenador el ='X de ,ndroid. Este se encuentra dis0oni)le de manera gratuita en :tt0:BBde$elo0er.android.comBsdH # admite sistemas ;inu6< Macintos: # Iindo?s. =in em)argo< la 9orma de tra)a8o no es e6actamente la misma< 0or lo Aue 0odra :a)er incon$enientes o incom0ati)ilidades en las a0licaciones. Fn e8em0lo com3n es Aue alguna galera no 9uncionen correctamente o sim0lemente se desesta)ilicen. 'ado algunos cam)ios realizados 0or Eoogle< las $ersiones %.5.6 de Processing #a no 0ermiten em0lear el modo ,ndroid. =e recomienda descargar $ersiones a 0artir de la -.& si se desea desarrollar 0ara estos sistemas.
Es un modo 0ensado )+sicamente 0ara 0rogramadores 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 0osi)le Aue Processing no so0orte las m+s modernas< sin em)argo< estas no se distri)u#en al 03)lico en generalC. ,nte cualAuier incon$eniente< consultar la re9erencia en el sitio ?e): :tt0:BB?iHi.0rocessing.orgB?B,ndroid. -Favascri-t Este modo de)e ser instalado a 0arte. on la creacin de la li)rera 0ara Ja$ascri0t llamada Processing.8s< nace la 0osi)ilidad de traducir los sHetc:s en o)8eto de an$as @tag de J5M;5 Aue 0ermite di)u8ar con Ja$ascri0tC. , 0artir de la $ersin -.&< se inclu#e el modo Ja$ascri0t< el cual 0ermite 0rogramar en el entorno de Processing # 0ro)ar el cdigo directamente en el na$egador 0redeterminado @el cual de)e so0ortar an$as< se recomienda la 3ltima $ersin de Mozilla "ire9o6C. ,dem+s de esto< al e60ortar el sHetc:< se crear+ el ,00let en su $ersin ?e) @Ja$ascri0tC< listo 0ara usar en cualAuier sitio J5M;. 'e)e tenerse en cuenta Aue e6iste la 0osi)ilidad de Aue algunas 9unciones no se encuentren del todo so0ortadas en el modo Ja$ascri0t< o 9uncionen de una manera distinta. ,nte cualAuier incon$eniente< consultar la re9erencia en el sitio ?e): :tt0:BB0rocessing8s.orgBre9erenceB. , 0esar de Aue las sinta6is de am)os entornos deri$an del lengua8e de B __< el tra)a8o 0or detr+s no es 0recisamente el mismo. Por lo tanto< :a# Aue tener cierto cuidado a la :ora de 0rogramar< #a Aue algunas estructuras 0ueden no com0ortarse como uno lo es0era. Mas all+ de eso< e6isten ciertos comandos es0eciales dedicados ntimamente al tra)a8o en el modo Ja$ascri0t. El comando gp s< 0ermite la insercin de directi$os Aue solo leer+ el modo Ja$asctri0t @la li)rera Processing.8sC. Por ende< de)e ser incluido en un comentario # arri)a de todo del sHetc:.
/* gp s 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 sim0le o multiOlnea:
/* gp s directi,oY6<W,alorW; directi,oY2<W,alorW; ### */ /* gp s directi,oY6<W,alorW; directi,oY2<W,alorW; ### */
=i )ien los directi$os no son muc:os< son 3tiles 0ara controlar el 9lu8o del sHetc: # 0re0ararlo 0ara la ?e). Fna de las utilidades Aue 0osee es la 0recarga de ciertos elementos< 0or e8em0lo< las im+genes. El directi$o preload es utilizado 0ara cargar las im+genes mientras se carga el sHetc:. ;a im+genes de)en encontrarse en la car0eta KdataL # ser cargadas a tra$s de la 9uncin loadBma'e() o reGuestBma'e():
/* gp s 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 0recarga de las 9uentes de te6to< Aue 3ltimamente co)ran un im0ulso im0ortante en los sitios ?e). Para esto se utiliza el directi$o !ont< el cual se utiliza 8unto con la 9uncin createHont(). ;a
213
carga es realizada a tra$s de la regla g!ont5!ace de ==.

/* gp s !ont<W1rial#tt!W; */ ,oid setup()R si(e(2//,2//); no@oop(); textHont(createHont(W1rialW,02)); S ,oid draN()R 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$ascri0t est+n destinados a la ?e)< se encuentran 0ermanentemente e8ecut+ndose. Muc:as $eces< en sHetc: com0le8os< esto 0uede ocu0ar muc:a ca0acidad del ordenador @es0ecialmente en ordenadores m+s antiguosC. Por lo tanto< se encuentra dis0oni)le el directi$o pause?n=lur. El mismo 0uede 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: 0uesta Ken 9ocoL< el mismo ser+ K0ausadoL. =i es !alse< este continuar+ e8ecut+ndose @esta o0cin es 0or de9ectoC:
/* gp s pause?n=lur<WtrueW; */
Por otra 0arte< tam)in e6iste un directi$o Aue controla los e$entos del teclado. El directi$o 'lobalee;-,ents 0ermite controlar si las teclas ser+n :a)ilitadas 0ara el sHetc: constantemente< incluso mientras na$ega 0or el mismo sitio< o si se 0re9iere solo :a)ilitarla 0ara cuando el usuario est+ en 9oco. /eci)e solo dos $alores< true o !alse. =i el $alor es true< los e$entos del teclado ser+n :a)ilitados 0or mas Aue no se est en 9oco en el sHetc:. En cam)io< si es !alse< ser+ des:a)ilitado @esta o0cin es 0or de9ectoC:
/* gp s 'lobalee;-,ents<WtrueW; */
'e0endiendo de la con9iguracin 0or de9ecto del na$egador< los elementos de an$as 0ueden o no tener a0licada la condicin de sua$izado en los )ordes. Para eso se utiliza el directo crisp. Este directi$o 0ermite o)ligar a Aue esto si se cum0la en la re0resentacin de line()< el trian'le()< # el rect() 0rimiti$as de di)u8o. Esto 0ermite lneas sua$es # lim0ias. Por otro lado< es mu# 0osi)le Aue su em0leo necesite un incremento del tra)a8o del PF. /eci)e solo dos $alores< true o !alse:
/* gp s crisp<WtrueW; */
;os directi$os son 3tiles # est+n en constante e60ansin. Para e$itar con9usiones # $er algunos e8em0los de su 9uncionamiento< consultar la re9erencia: :tt0:BB0rocessing8s.orgBre9erenceB.
216
(nidad 42
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 0osi)ilidad de crear a0licaciones # 0rogramas Aue :agan su render en tres dimensiones. 2o o)stante< no se recomienda Aue los 0rogramadores 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 sim0le< no a)ordaremos en la e60licacin de gr+9icos 3' @#a Aue la e6tensin sera de otro li)roC. ,3n as< $emos con$eniente e60licar la )ase 0ara sem)rar en el lector una semilla de curiosidad. -.or*a 3$ ;as 9ormas 3' son 0osicionadas en una $entana de re0resentacin con 3 coordenadas. En construcciones -'< estas coordenadas son la coordenadaO6 # la coordenadaO#< en 3' se suma la coordenadaOz. Processing usa< como coordenada de origen< el (/, /, /) en la esAuina su0erior 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 -'< 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 0ara 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 -'. =a)iendo esto< :a# Aue entender un 0unto 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 0osee< en 0rinci0io< cuatro di9erentes motores de render:
J1M12D: Motor 0or de9ecto de Processing 0ara render en -'. A2D: Motor 0ara render -' muc:o m+s r+0ido Aue J,(,-'< 0ero de menos calidad. A0D: Motor 0ara render 3'. ?A-NX@: Motor 0ara render 3' con aceleracin de Jard?are< )asado en 70enE;.
218
En $ersiones anteriores a la -.&< los modos A2D # A0D 9unciona)an inde0endientes. =in em)argo< a 0artir de la -.&< estos modos 9uncionan con la ingeniera de 70enE;. Esto 0roduce Aue sean mas e9icientes< 0ero tam)in Aue consuman un 0oco m+s de recursos. Por lo tanto< e6isten dos motores de render 0ara 3': el A0D # el ?A-NX@. Para esta)lecerlos como el motor de nuestra a0licacin< sim0lemente :a# Aue incluir dic:a constante como un tercer 0ar+metro de la 9uncin si(e(). Por e8em0lo:
si(e(://, ://, A0D);
=uele recomendarse tra)a8ar con A0D #a Aue es el motor m+s com0ati)le con el so9t?are # no reAuiere de li)reras e6ternas. 2o o)stante< 0ara tra)a8os de ma#or com0le8idad # ela)oracin< a $eces se o0ta 0or utilizar el motor ?A-NX@. En $ersiones anteriores a la -.&< reAuiere Aue se inclu#a en el sHetc: la li)rera Aue 0ermite el 9uncionamiento de motor 70enE;. ;a siguiente lnea de cdigo de)e ir arri)a de todo en le 0rograma:
import processin'#open'l#*; //$olo en ,ersiones anteriores a la 2#/
Para $ersiones 0osteriores a la -.&< la li)rera :a sido eliminada # el motor 70enE; 9ue incluido en el n3cleo del so9t?are. Por lo tanto< no es necesario im0ortar la li)rera. ;uego 0uede :acerse el llamado corres0ondiente a la 9uncin si(e():
si(e(://, ://, ?A-NX@);
, 0artir de esta declaracin< es 0osi)le di)u8ar en 3'. Incluso es 0osi)le tener un resultado de salida de un com0onente 3' a tra$s de las 9unciones be'in>aN() # end>aN(). ;os com0onentes de salida 0ara 3' reAuieren un 9ormato es0ec9ico @#a Aue luego 0ueden usarse en 0rogramas de modelado 3'C. "ormatos como '>" # 7BJ de)en ser reconocidos a tra$s de una li)rera dedicada. @m+s in9ormacin en: :tt0:BB0rocessing.orgBre9erenceBli)rariesB C -%5*ara 5odos los modelos se com0onen< )+sicamente< de una 9igura en una escena # una c+mara Aue lo o)ser$a. Processing< 0or lo tanto< o9rece un ma0eo e60lcito de una c+mara analgica< a tra$s de 70enE;. En internet e6iste un gran n3mero de documentacin acerca de 70enE;< distri)uido de manera gratuita. ;a c+mara en Processing 0uede ser de9inida 0or unos 0ocos 0ar+metros en cuestin: la distancia 9ocal< # la le8ana # la cercana de los 0lanos. ;a c+mara contiene el KPlano de ImagenL< una ca0tura K)idimensionalL< de lo Aue se o)ser$a.
El render reAuiere tres trans9ormaciones. ;a 0rimera de ellas es llamada trans9ormacin de $ista. Esta trans9ormacin 0osiciona # orienta a la c+mara en el mundo. ,l esta)lecerse una trans9ormacin de $ista @e60resada como una matri6 de 1 6 1C< de manera im0lcita de9ine Aue el K0unto 9ocalL es el origen. En Processing< una 9orma sencilla de esta)lecer la trans9ormacin $ista es con la 9uncin camera(). Por encima
220
de la trans9ormacin de $ista se encuentra la trans9ormacin de modelo. Fsualmente< estas son multi0licadas una con la otra #< de ese modo< consideradas como la trans9ormacin del modelo+$ista. ;a 0osicin de la trans9ormacin de modelo en la escena es relati$o a la c+mara. "inalmente< se 0lantea la trans9ormacin de proyecci*n< la cual se )asa en las caractersticas internas de la c+mara. -;ateriales , ?u7 ;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< 0rinci0almente< el modelado matem+tico< # la e9iciente com0utacin en la interaccin entre luz # su0er9icie. 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 0artir de ra#os de luz< emergentes de una 9uente lumnica Aue re)ota so)re las su0er9icies de los o)8etos< :asta Aue gol0ea a la escena com0leta. ,l ser un c+lculo matem+tico< muc:as $eces tiene 0ro)lemas en re0roducir 9enmenos naturales< como el Ksangrado del colorL< cuando un color se re9le8a so)re otra su0er9icie. =uele solucionarse con tcnicas como el modelo de \iluminacin glo)al\< Aue se a0lica< no slo 0or la luz Aue $iene directamente de las 9uentes de luz 0rede9inidas< sino tam)in la luz re9le8ada de las su0er9icies 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 @0lano som)readoC:
El ?ire9rame es el mtodo mas sim0le 0ara crear un render. Este sim0lemente muestra las lneas de los contornos de los 0olgonos en su color )+sico. Esta arc:i$ado en Processing 0or di)u8ar con una 9uncin stro)e() @contornoC # sin un !ill() @rellenoC. El siguiente en com0le8idad es :iddenOline. En este modelo solo los contornos son di)u8ados< 0ero se ocultan aAuellos Aue son enmascarados 0or su0er9icies. 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() 0osee un color distinto Aue el del 9ondo. ;a simulacin de luces # su0er9icies< de manera correcta< 0roducen un resultado m+s realista. ;a 0rimer 9uncin lumnica Aue nos a0orta 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 0rograma< el cual se esta)lece con la 9uncin ambient(). 'ic:a 9uncin tra)a8a 0or conseguir los 0ar+metros de !ill() # stro)e(). ;a 9uncin li'ht$pecular() esta)lece el color es0ecular 0ara las luces. ;a calidad es0ecular del color interact3a con la calidad es0ecular 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 0resentan 9unciones de luces de ma#or com0le8idad. Entre ellas< point@i'ht()< la cual crea una luz 0untual< directional@i'ht()< la cual crea una luz direccional< # spot@i'ht() Aue crea una es0ecie de luz Kc:is0eanteL< como una gota. /eci)en distintos 0ar+metros 0orAue cada luz es 3nica. 5odas las luces de)en ser reseteadas al 9inal del )loAue draN()< 0uesto Aue necesitan ser reOcalculadas. ;a te6tura de los materiales son un elemento im0ortante en el realismo de la escena 3'. Processing 0ermite Aue las im+genes sean ma0eadas a las caras de los o)8etos. ;a te6tura se de9orma del mismo modo Aue el o)8eto se de9orma. Para conseguir un ma0eo< es necesario Aue la cara o)tenga las coordenadas -' de la te6tura.
221
;as te6turas son ma0eadas a las 9ormas geomtricas con una $ersin de la 9uncin ,ertex() con dos 0ar+metros adicionales< conocido como u # ,. Estos 0ar+metros son las coordenadaO6 # la coordenadaO# de la te6tura a ser ma0eada. ,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
E8em0lo %: 'i)u8ando en 3' @5rans9ormacinC
//>otar un rect"n'ulo alrededor de su e e x ; su e e ; ,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
E8em0lo -: 'i)u8ando en 3' @;uces # "ormas 3'C

//Dibu ar una es!era arriba de una ca a ; 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 e e ;
222
box(.//, 6//, .//); pushCatrix(); popCatrix(); translate(/, 52//, /); sphere(63/); popCatrix(); S
//Dibu ar ca a //Aosicin de la es!era //Dibu ar la es!era sobre la ca a
E8em0lo 3:
onstru#endo "ormas 3'
//Dibu ar un cilindro centrado en el e e V, Gue ,a;a desde ;</ a ;<hei'ht# //-l radio de arriba puede ser di!erente de el radio de aba o //; el nEmero de lados dibu ados es ,ariable ,oid setup() R si(e(.//, .//, A0D); S ,oid draN() R bac)'round(/); li'hts(); translate(Nidth/2, hei'ht/2); rotateV(map(mouseZ, /, Nidth, /, AB)); rotateb(map(mouseV, /, hei'ht, /, 5AB)); no$tro)e(); !ill(233, 233, 233); translate(/, 5./, /); dibu ar*ilindro(6/, 6D/, 2//, 6:); //Dibu a una me(cla entre //cilindro ; cono //dibu ar*ilindro(K/, K/, 62/, :.); //Dibu a un *ilindro //dibu ar*ilindro(/, 6D/, 2//, .); //Dibu a una pir"mide S ,oid dibu ar*ilindro(!loat top>adius, !loat bottom>adius, !loat tall, int sides) R !loat an'le < /; !loat an'leBncrement < TI?YAB / sides; be'in$hape(L&1DY$T>BA); !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, dibu ar el circulo arriba i! (top>adius Q< /) R an'le < /; be'in$hape(T>B1NX@-YH1N); //Aunto *entral ,ertex(/, /, /); !or (int i < /; i 9 sides 4 6; i44) R ,ertex(top>adius * cos(an'le), /, top>adius * sin(an'le)); an'le 4< an'leBncrement; S end$hape(); S //$i no es un cono, dibu ar el circulo aba o i! (bottom>adius Q< /) R an'le < /;
223
S S
be'in$hape(T>B1NX@-YH1N); // *enter point ,ertex(/, tall, /); !or (int i < /; i 9 sides46; i44) R ,ertex(bottom>adius * cos(an'le), tall, bottom>adius * sin(an'le)); an'le 4< an'leBncrement; S end$hape();
E8em0lo 1: E60ortar en '>"

//-xportar a un archi,o DZH cuando la tecla > es presionada import processin'#dx!#*; 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 record < true; S S //Aresionar > para 'uardar el archi,o //$olo en ,ersiones anteriores a la 2#/
E8em0lo 5: Im0ortar un arc:i$o 7BJ

//Bmportar ; mostrar un archi,o ?=J
224
import saito#ob loader#*; ?=JCodel model; ,oid setup() R si(e(.//, .//, A0D); model < neN ?=JCodel(this); model#load(Wchair#ob W); model#draNCode(A?@VX?N); no$tro)e(); S
//@os modelos deben estar en la carpeta data
,oid draN() R bac)'round(/); li'hts(); pushCatrix(); translate(Nidth/2, hei'ht, 5Nidth); rotateV(map(mouseZ, /, Nidth, 5AB, AB)); rotateZ(AB/.); scale(:#/); model#draN(); popCatrix(); S
E8em0lo .: 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/#/, //o oZ, o oV, o ob /#/, /#/, /#/, //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
E8em0lo !: 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
22'
bac)'round(/); translate(Nidth/2, hei'ht/2); //-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
E8em0lo *: Iluminacin
//Dibu ar un cubo con 0 di!erentes tipos de lu( ,oid setup() R si(e(.//, .//, A0D); no$tro)e(); S ,oid draN() R bac)'round(/); translate(Nidth/2, hei'ht/2); //@u( puntual naran a 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 e es 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
E8em0lo 4: Ma0eo 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(/);
222
translate(Nidth/2, hei'ht/2); rotateZ(map(mouseV, /, hei'ht, 5AB, AB)); rotateV(map(mouseZ, /, Nidth, 5AB, AB)); be'in$hape(L&1DY$T>BA); 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
223
(nidad 43
E&tensin) G;?
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 0or la I3 0ara el intercam)io de in9ormacin. =i )ien es mu# utilizado en internet< no solo se utiliza en ese am)iente. =e encuentra 0resente en los /== 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 e8em0lo< se 0uede seleccionar la lectura solo del ttulo de un documento< o del contenido general. -9/jeto G;? , 0artir de la $ersin -.&< el o)8eto ZC@ 0asa a 9ormar 0arte de los o)8etos 0reesta)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 car0eta data. 2o o)stante< es 0osi)le le$antar documentos >M; directamente desde la ?e). -.unciones de G;? 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 0ara tener control so)re los hi'os de un documento. =uelen utilizarse las siguientes 9unciones:
'et*hild*ount() 'et*hild() 'et*hildren() 'et*ontent()
/egresa el n3mero de :i8os de un documento /egresa solo un :i8o /egresa todos los :i8os de un documento como un ,rra# /egresa el contenido de un elemento
En orden de a0licar esto< a continuacin se 0resenta un e8em0lo donde se crea un sim0le lector de /==. El lector le$anta una F/; donde se encuentra un >M;< 0or lo tanto no es necesario tener el documento en la car0eta data. ;uego< sim0lemente im0rime 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 0oco m+s dedicadas. Estas sir$en 0ara de$ol$er di$ersos $alores de los atri)utos del documento:
226
'etBnt() 'etHloat() 'et$trin'() 'etName()
/egresa un atri)uto entero de un elemento /egresa un atri)uto decimal de un elemento /egresa un atri)uto =tring de un elemento /egresa el nom)re de un elemento
-9tras :ersiones 7curre una con9usin al momento de declarar el o)8eto >M;. En $ersiones anteriores a la -.&< Processing utiliza)a un elemento >M; Aue deri$a)a de una li)rera. En $ersiones anteriores a la %.5.%< la li)rera de)a incluirse. Es recomenda)le actualizarse a la 3ltima $ersin< es0ecialmente 0or la gran cantidad de $enta8as Aue o9rece utilizar el o)8eto >M; # no el elemento. Para el e8em0lo anterior del lector de /==< en $ersiones anteriores a la -.& 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
228
1-artados) Ejercicios
;a 0rogramacin es una :erramienta tcnica donde la matem+tica 8uega un 0a0el 9undamental 0ara el a0rendiza8e. Es necesario desarrollar una mentalidad lgica< # mientras m+s elementos se 0ongan en 8uego los resultados tendr+n un car+cter de ma#or inters. =i )ien e6isten in9initas 9ormas de enseGar la in9orm+tica< @#< m+s a3n< un lengua8e de 0rogramacinC creemos Aue es 9undamental el e8ercicio constante de los elementos del cdigo< la correcta sinta6is< las relaciones entre 9unciones< estructuras lgicas #< so)retodo< el com0leto control del 0ensamiento metdico Aue 0osee un ordenador. Por lo tanto< se o9rece @0ara aumentar la curiosidadC una serie de e8ercicios did+cticos. Muc:os de ellos 0uede necesitar la gua de un docente o a#uda de documentacin e6terna< 0ero a)solutamente todos son 0er9ectamente realiza)les # com0letamente 3tiles. -(nidad 1 OEscri)ir un comentario de lnea sim0le # uno multilnea. OIm0rimir su nom)re en la consola. OIm0rimir el resultado de una suma en la consola. -(nidad 2 O rear una com0osicin colocando cuidadosamente una lnea # una eli0se. O rear un nudo o lazo usando slo cur$as Bzier. O rear una com0osicin en una $entana de re0resentacin de -&& 06eles de anc:o 0or -&& 06eles de alto. Incluir dos lneas< dos eli0ses # un rect+ngulo. omentar cada lnea del cdigo. OEn el e8ercicio anterior< agregar 9ormato a las 9ormas @tamaGo de )orde< con o sin relleno< e9ecto smoot:< etc...C. OJacer una com0osicin li)re con tri+ngulos< 0aralelogramos # cur$as. ,gregar 9ormato a las 9ormas. omentar cada lnea del cdigo. -(nidad 3 O/e9le6ionar acerca de los di9erentes ti0os de n3meros Aue usamos diariamente. P=on n3meros enteros @intC o decimales @!loatCQ OIm0rimir en la consola el anc:o # el alto de la $entana de re0resentacin a tra$s de $aria)les locales. O rear una $aria)le ti0o entero @intC< una decimal @!loatC # una lgica @booleanC. ,signarle a cada una un $alor es0ec9ico @asegurarse de Aue sea del ti0o de la $aria)leC. Im0rimir en la consola las $aria)les. -(nidad 4 OFtilizar dos $aria)les en una suma # las mismas en una resta 0ara cam)iarle el color a un rect+ngulo # a una eli0se res0ecti$amente. omentar cada lnea del cdigo. OFtilizar dos $aria)les en una multi0licacin # una di$isin 0ara mo$er dos lneas res0ecti$amente. omentar cada lnea del cdigo. O rear una $aria)le de ti0o entero @ intC # asignarle un $alor. 'eterminar si es un n3mero 0ar o im0ar im0rimiendo su mdulo en la consola. O/ealizar dos o0eraciones matem+ticas # guardarlas en $aria)les de ti0o decimal @ !loatC. /edondear los resultados :acia arri)a # :acia a)a8o res0ecti$amente e im0rimirlos en la consola. OFtilizar $arias $aria)les 0ara esta)lecer la 0osicin # el tamaGo de tres eli0ses. OFtilizar la multi0licacin 0ara crear una sucesin de lneas con un incremento de es0acio entre ellas. OE60lorar las 9unciones 0ara restringir n3meros. Fsa min() # max() 0ara di)u8ar un 0atrn de lneas regular de una secuencia de n3meros irregulares.
230
-(nidad ' O rear $arias e60resiones relacionadas e im0rime su e$aluacin en la consola con println(). O rear una com0osicin con una serie de lneas # eli0ses. Fsa una estructura BH 0ara seleccionar Au lneas del cdigo Auieres Aue 9uncionen # cu+les Auieres Aue salten. O,Gadir un else al cdigo del e8ercicio anterior 0ara cam)iar Au cdigo 9uncionar+. OJacer un 0rograma Aue e$al3e si el $alor de una $aria)le es 0ar o im0ar a tra$s de una estructura BH # el o0erador mdulo. =i es 0ar im0rimir en la consola Par< sino im0rimir Im0ar. OJacer un 0rograma Aue di)u8e un rect+ngulo si el $alor de una $aria)le es ma#or a 5&. 'e lo contrario< Aue di)u8e una eli0se. ,0licar 9ormato a las 9ormas. omentar cada lnea del cdigo. -(nidad 2 OJacer un 0rograma Aue di)u8e en la $entana de re0resentacin diez crculos conOcntricos @uno dentro del otroC aumentando su tamaGo de a diez a medida Aue se di)u8an. Ftilizar un ciclo H?>. omentar cada lnea del cdigo. OJacer un 0rograma Aue di)u8e un 0atrn regular con cinco lneas. ;uego reescri)ir el cdigo usando una estructura H?>. OJacer un 0rograma Aue di)u8e un 0atrn denso com)inando dos estructuras H?>. O om)inar dos e60resiones relacionales con un o0erador lgico 0ara controlar la 9orma del 0atrn. -(nidad 3 O'i)u8ar una estrella de cinco 0untas. O'i)u8ar una 9igura irregular de al menos . 0untas. 'arle 9ormato 0ara Aue sea de color negro. omentar cada lnea del cdigo. O'i)u8ar una cur$a com0le8a usando be(ierMertex(). -(nidad 6 OEuardar en una $aria)le el cuadrado de un n3mero a eleccin. Im0rimir el n3mero en la consola. ;uego utilizar ese resultado en otra $aria)le # determinar su raz cuadrada. O rear un rango de degradado con una cur$a. O rear una cur$a e60onencial utilizando las 9unciones de e60onente. =e 0uede utilizar cualAuier 9orma. ,0licar 9ormato. omentar cada lnea del cdigo. -(nidad 8 O rear una com0osicin donde el 9ondo de la $entana de re0resentacin tenga un color. OE60lorar un rango sal$a8e de com)inaciones de color dentro de una com0osicin. O rear una com0osicin com0le8a en una $entana de re0resentacin de -&& 06eles de anc:o 0or -&& 06eles de alto. 'e)e tener al menos dos rect+ngulos< tres eli0ses< cuatro lneas o cur$as # un tri+ngulo. ,gregar 9ormato # cam)iar el color a las 9ormas. Ftilizar al menos tres colores. omentar cada lnea del cdigo. O(er Aue ocurre al cam)iarle al anterior cdigo el modo de color de >X= a \$= o de \$= a >X=. -(nidad 10 O argar una imagen en un 0rograma. ,segurarse Aue la imagen # la $entana de re0resentacin tengan e6actamente el mismo tamaGo. O,l 0rograma anterior cam)iarle el tinte de la imagen a un tono ro8o. O argar dos im+genes en un 0rograma. am)iar el tono de una 0or ro8o # la otra 0or $erde. ,m)as de)en 0oder $erse. omentar cada lnea del cdigo. O argar una imagen EI" o P2E con trans0arencia 0arar crear un collage su0er0oniendo las im+genes.
231
-(nidad 11 OEuardar tres letras en tres $aria)les ti0o car+cter @ charC distintas. Im0rimir cada una 0or se0arado en la consola. OEuardar su nom)re en un o)8eto ti0o $trin'. Im0rimir el o)8eto en la consola. OEuardar una 9rase en un o)8eto ti0o $trin'. Im0rimir el o)8eto en la consola. -(nidad 12 O on$ertir un $alor de ti0o decimal a entero e im0rimirlo en la consola. O argar una imagen en un 0rograma. Im0rimir en la consola el anc:o # el alto de la misma. O argar una cadena de te6to en un 0rograma. Ftilizar el largo de la misma como anc:o de un rect+ngulo. omentar cada lnea del cdigo. -(nidad 13 OE60lorar di9erentes ti0os de 9uente en Processing. 'i)u8ar su 0ala)ra 9a$orita en la $entana de re0resentacin con su 9uente de te6to 9a$orita. OEuardar su nom)re en un o)8eto $trin' # escri)irlo en la $entana de re0resentacin utilizando una 9uente caracterstica. O/e0etir el 0rograma anterior tres $eces en un mismo sHetc:. Poner en las distintas alineaciones cada uno de los te6tos. am)iar< adem+s< el tamaGo de cada una. 'e)en ser de distintos tamaGos entre s. omentar cada lnea del cdigo. -(nidad 14 O rear una com0osicin con los datos generados al usar sin(). OE60lorar di)u8ando crculos # arcos con sin() # cos(). 'esarrollar una com0osicin con los resultados de la e60loracin. O rear un arco com0le8o o es0iral utilizando los cdigos a0rendidos de seno # coseno. 'arle 9ormato # color. omentar cada lnea del cdigo. -(nidad 1' OEuardar en una $aria)le ti0o decimal @ !loatC un $alor aleatorio de & a 5. ;uego im0rimir dic:a $aria)le en la consola. Posteriormente utilizar dic:o $alor dentro de una $aria)le ti0o entero @ intC< con$irtindola 0re$iamente en un n3mero entero a tra$s de la 9uncin $ista anteriormente. Im0rimir el nue$o n3mero en la consola. ,claracin: En la consola de)en mostrarse los dos n3meros @el decimal # el enteroC. /e0roducir m+s de una $ez 0ara $er los cam)ios de aleatoriedad. O rear una com0osicin regularizada 0or el azar. 'e)en di)u8arse diez eli0ses o diez rect+ngulos. on algunos $alores aleatorios modi9icar su tamaGo< contorno< color # 0osicin. omentar cada lnea del cdigo. O rear una com0osicin con diez rect+ngulos Aue cam)ie su tamaGo< color # 0osicin en )ase a un $alor aleatorio # su noise. -(nidad 12 O rear al menos cinco 9iguras dentro de las 9unciones pushCatrix() # popCatrix(). ;uego crear algunas m+s 9uera de dic:as 9unciones. Fsar una 9uncin translate() 0ara mo$er solo las 9iguras dentro de pushCatrix() # popCatrix(). -(nidad 13 O,0licarle al 0rograma anterior una 9uncin rotate() # una 9uncin scale() entre pushCatrix() # popCatrix(). omentar cada lnea del cdigo.
232
-(nidad 16 OJacer un 0rograma Aue mue$a una 9igura @eli0se o rect+nguloC 0or aumentar su 0osicin en 6 o en # con una $aria)le. Ftilizar el )loAue draN(). 'arle 9ormato a la 9igura. omentar cada lnea del cdigo. OE60lorar lo Aue ocurre con el e8ercicio anterior si se modi9ica la $elocidad de los cuadros 0or segundo con !rame>ate(). am)iar 0or tres $alores distintos. OE60lorar lo Aue ocurre al intentar mo$er un tri+ngulo o un 0aralelogramo. O/eescri)ir el 0rimer e8ercicio utilizando pushCatrix() # popCatrix() 8unto con translate(). -(nidad 18 O rear una 9uncin Aue di)u8e una 9lor. 'arle 9ormato de contorno< # al menos dos colores. O rear un 0rograma m+s com0le8o utilizando la 9uncin creada en el e8ercicio anterior. ,Gadirle dos 0ar+metros Aue controlen la 0osicin # dos Aue controlen los colores. on dic:a 9uncin di)u8ar tres 9lores en la $entana de re0resentacin. omentar cada lnea del cdigo. -(nidad 20 O rear en un 0rograma una 9uncin 8ardn Aue llame a la 9uncin 9lor creada en los e8ercicios de la unidad anterior @9uncin con recursinC. -(nidad 21 O rear un 0rograma Aue cam)ie el tamaGo de una eli0se cuando el cursor se mue$e en el e8e 6< # Aue cam)ie su color cuando se mue$e en el e8e #. O rear una :erramienta de di)u8o Aue 9uncione con las $aria)les del cursor @ mouseZ< mouseV< pmouseZ # pmouseVC. El cursor no de)e $erse # de)e di)u8ar al o0rimir el )otn del mouse. Incluir colores. omentar cada lnea del cdigo. -(nidad 22 O/eescri)ir el e8ercicio de di)u8o de la unidad anterior utilizando una estructura m+s com0le8a. -(nidad 23 O rear un 0rograma donde el usuario 0ueda mo$er una 9igura @0re9erentemente rect+ngulo o eli0seC 0or todo el lienzo. OE60lorar Aue ocurre si se intenta mo$er un tri+ngulo o 0aralelogramo. OE60lorar Aue ocurre si en lugar de sumar la 0osicin en 6 o en #< se multi0lica. O rear un 0rograma Aue mue$a un di)u8o com0le8o con datos de entrada del teclado # otra 9igura con datos de entrada del mouse. omentar cada lnea del cdigo. -(nidad 24 OE60lorar las di9erencias entre las distintas 9unciones de )loAue del mouse. Intentar crear un 0rograma Aue las em0lee a todas 8untas en mo$imientos interacti$os. OE60lorar las 0osi)ilidades Aue o9rece el em0leo de )e;Aressed() # )e;>eleased() 0ara mo$er 9iguras com0le8as. P u+l es la di9erencia sustancial m+s im0ortanteQ PPara Au otras cosas 0uede ser$irQ OE60lorar las 0osi)les a0licaciones 0ara la 9uncin redraN(). -(nidad 2' OFtilizar la 9uncin constrain() 0ara detener una eli0se cuando esta llegue a la 0osicin %&& del e8e 6. OE60lorar la 0osi)ilidad de detectar un im0acto entre una 9igura 9i8a # otra m$il con la 0osicin del cursor. Ftilizar la 9uncin dist().
233
-(nidad 22 O rear un 0rograma Aue muestre la :ora actual a tra$s de 9iguras @rect+ngulo< eli0se< tri+ngulo< lnea< etcC. /ealizar una 0roduccin 0ersonal. Ftilizar 9ormatos # color. -(nidad 23 O rear un 0rograma Aue mue$a una es9era di)u8ando el sm)olo del in9inito. -(nidad 26 OE60lorar las di9erencias conclu#entes 0ara determinar Aue un mo$imiento es org+nico o mec+nico. O rear dos cuadrados Aue se mue$an con mo$imientos mec+nicos. 5ratar de conseguir Aue se sincronicen entre si como engrana8es. O rear una ser0iente con lineas o eli0ses Aue se mue$a de manera org+nica. -(nidad 28 O rear un 0rograma Aue determine el 0romedio de al menos cuatro n3meros. Ftilizar solo un arra#. 2o utilizar $aria)les. Im0rimir el resultado en la consola. -(nidad 30 O rear un 0rograma Aue com)ine dos ti0os de animaciones di9erentes 0ara una imagen est+tica. O rear un nue$o ti0o de animacin en )ase a lo im0artido en la unidad. -(nidad 31 O rear una :erramienta de di)u8o Aue< al concretar su com0osicin< ca0ture una 0orcin del di)u8o # la muestre en la 0osicin actual del cursor. -(nidad 32 OE60lorar las 0osi)ilidades de 0roducir mo$imientos aleatorios en una ti0ogra9a. OIn$estigar el ni$el de sntesis de mo$imientos entre las letras Aue se 0ueda 0roducir. O rear un 0rograma Aue mue$a una ti0ogra9a a tra$s de un datos de entrada interacti$o @mouse o tecladoC. -(nidad 33 O rear un 0rograma Aue escri)a dos 0ala)ras. Fna de ellas de)e 0oseer un mo$imiento mec+nico interacti$o # la otra uno org+nico. -(nidad 34 O rear un 0rograma de $isualizacin de datos de los colores de una imagen. OE60lorar las 0osi)ilidades de una $isualizacin de datos con )rillo # saturacin de la imagen. -(nidad 3' O rear un 0rograma Aue cam)ie el 9iltro a0licado en una imagen al o0rimir las teclas del % al 4. OE60lorar Aue ocurre al 9usionar dos im+genes con 9iltros distintos. O rear una m+scara 0ara una imagen # luego a0licarle un 9iltro. -(nidad 32 OE60lorar las 0osi)ilidades de 0rocesamiento digital de im+genes. O rear un 0rograma com0le8o de edicin 9otogr+9ica a )ase de 9iltros # de la alteracin de sus 06eles. omentar cada lnea del cdigo. -(nidad 33 O rear una :erramienta de di)u8o com0le8a con $alores de entrada del mouse # el teclado. Ftilizar la 9uncin
'et() 0ara :acer una im0resin del di)u8o # a0licarle un 9iltro de imagen a0rendido en unidades anteriores. "inalmente< guardar la imagen resultante con la 9uncin sa,e(). E60lorar como 0uede :acerse 0ara resetear
el 0rograma. omentar cada lnea del cdigo. -(nidad 36 O rear un 0rograma Aue muestre en la $entana de re0resentacin una 0oesa o cuento de cualAuier autor. Posicionar # 9ormatear el te6to 0ara Aue sean $isualizados correctamente incluso con saltos de lnea o ta)ulaciones. O rear un 0rograma Aue simule un contador digital mostrando minutos # segundos. 'e)e mostrar siem0re dos dgitos 0ara los minutos # dos 0ara los segundos. OE60lorar las 0osi)ilidades de almacenar acciones en un arc:i$o 9ormato t(t. O rear un 0rograma Aue 0ermita al usuario escri)ir su nom)re # luego lo almacene en un arc:i$o de te6to. ,l cerrar el 0rograma< dic:o nom)re de)e 0ermanecer en el mencionado arc:i$o. -(nidad 38 O rear un o)8eto con una animacin com0le8a e interacti$a. OE60lorar la reutilizacin de dic:o o)8eto< con cam)io de 0ar+metros. O rear dos o)8etos< uno Aue se mue$a mec+nicamente< # otro en 9orma org+nica. omentar cada lnea del cdigo. -(nidad 40 O rear una :erramienta de di)u8o acti$o donde una sim0le cur$a mute en una com0osicin con al menos tres colores. ;os colores de)en guardar relacin de 0aleta @:ue< saturacin< )rilloC. omentar cada lnea del cdigo.
23'
1-artados) $ocu*entacin
-1-artado 1) Derra*ientas El so9t?are de Processing 0ermite la im0lementacin de Jerramientas @5oolsC 0ara 9acilitar el tra)a8o al usuario. ,lgunas de estas $ienen instaladas en el 0ro0io 0rograma< # 0uede accederse a ellas desde el men3 ,ools. Por de9ecto< se inclu#en: +Auto .ormat Auto+.ormato!: Intenta 9ormatear el cdigo 0ara :acer un layout @diseGoC m+s legi)le # :umano. =e aGaden o eliminan es0acios # saltos de lneas 0ara :acer un cdigo mas Klim0ioL. Para acceder r+0idamente 0uede utilizarse su ata8o en Iindo?s: 0ontrol F ,. +Archi$e &kecth Archi$ar &kecth!: ,rc:i$a una co0ia del sHetc: en un documento .3ip. ;a co0ia se almacena en el mismo directorio Aue el sHetc:. +0olor &elector &elector de 0olor!: =im0le inter9az 0ara seleccionar colores en /EB< J=B o :e6adecimal. +0reate .ont 0rear .uente!: on$ierte las 9uentes de te6to en el arc:i$o de 9uentes Aue utiliza Processing 0ara tra)a8ar # lo aGade al directorio del sHetc:. =e a)re un cuadro de di+logo Aue le dan o0ciones 0ara con9igurar el ti0o de letra< su tamaGo< si se trata de antiOaliasing< # si todos los caracteres de)en ser generados. +.i( %ncoding G <eload Arreglar 0odificaci*n y <ecargar!: ;os sHetc:s Aue contienen caracteres Aue no son cdigo ,= II # 9ueron guardados en Processing &%1& o $ersiones anteriores< 0osi)lemente se $ean mu# e6traGos cuando son a)iertos. aracteres como diresis< o 8a0oneses. ,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"O*. ,dem+s< e6isten :erramientas creadas 0or usuarios Aue contri)u#en al 0rograma. Estas 0ueden descargarse de 9orma li)re # gratuita desde el sitio de :erramientas de Processing @:tt0:BB0rocessing.orgBre9erenceBtoolsBC. ;as :erramientas de contri)ucin de)en ser descargardas 0or se0arado # colocadas dentro de la car0eta \5ools\ del 0rograma Processing @0ara encontrar la u)icacin de Processing en el ordenador< a)ra la $entana de Pre9erencias de la a0licacin de Processing # )usAue \=Hetc:)ooH location\ en la 0arte su0eriorC. =e de)e co0iar la car0eta de la :erramienta descargada dentro de la car0eta K5oolsL. Es 0osi)le Aue se necesite crear la car0eta K5oolsL si es la 0rimer :erramienta Aue se instala. En las $ersiones 0osteriores a la -.&< e6iste una o0cin dentro del men3 K5oolsL< la o0cin K,dd 5ools...L @,Gadir JerramientasC. , 0artir de esta o0cin< Processing )usca nue$as :erramientas aun no instaladas # las 0resenta en un entorno amiga)le 0ara su instalacin. ;uego de esto solo :a# Aue seleccionar la :erramienta deseada # a0retar el )otn KInstallL. -1-artado 2) ?i/rerBas Para 0roducciones Aue reAuieren muc:o desarrollo< a $eces es necesario im0lementar ;i)reras @;i)rariesC Aue 0otencien nuestros 0rogramas. 2o se trata de muc:o mas Aue una gran cantidad de cdigo. Para insertar alguna li)rera de las Aue $ienen 0or de9ecto< se de)e dirigir al men3 K &ketch/ # luego a K9mport Library.../. ,Au mismo a0arecer+n las li)reras dis0oni)les Aue $ienen instaladas 0or de9ecto en Processing: +Video: Inter9az de la li)rera E=(ideo 0ara utilizar una c+mara< re0roduccin de 0elculas # creacin< tam)in< de las mismas. ;os usuarios de linu6 de)er+n instalar el gstreamer 0ara utilizar esta li)rera. En $ersiones anteriores a la -.&< la inter9az era del DuicHtime de ,00le. +Arduino: Permite control directo de una 0laca ,rduino a tra$s de Processing. +Net"ork: En$a # reci)e datos $a Internet a tra$s de la creacin de sim0les lientes # =er$idores. +>inim: Ftiliza la Ja$a=ound ,PI 0ara 0ro$eer una 9+cil uso como li)rera de sonido. Fn sim0le ,PI Aue 0ro$ee un gran mane8o # 9le6i)ilidad al usuario Aue desea im0lementar sonido.
232
+Netscape.Ea$ascript: Mtodos de comunicacin entre Ja$ascri0t # Ja$a ,00lets e60ortados de Processing. +&erial: =o0orte 0ara el en$o de data entre Processing # un :ard?are e6terno< $a comunicacin serializada @/=O-3-C. +PD. %(port: Eenera arc:i$os P'" +DH. %(port: ;neas # tri+ngulos en los modos de render AD0 o ?A-NX@< 0ueden ser e60ortados como un arc:i$o '>". on las actualizaciones< e6isten li)reras Aue :an sido trasladadas a la )ase de datos # reem0lazadas 0or 9unciones o automatizaciones. Estas son: +0andy &VG 9mport: Esta )i)lioteca se :a trasladado a la )ase de cdigo de Processing en la $ersin %14. Para la carga de gr+9icos =(E< se recomienda utilizar las 9unciones Ashape()< load$hape() # shape(). +H>L 9mport: Esta )i)lioteca se :a trasladado a la )ase de cdigo de Processing en la $ersin %14. Para cargar datos >M;< se recomienda utilizar la clase H>L # la 9uncin loadZC@(). En $ersiones anteriores a la -.&< se de)er+ utilizar el elemento ZC@-lement. +;penGL: =o0orte 0ara e60ortar sHetc: con aceleracin en gr+9icos a tra$s de 70enE;. Ftiliza la li)rera J7E;. , 0artir de la $ersin -.& :a de8ado de e6istir como li)rera 0ara encontrarse en el n3cleo del so9t?are. Por lo tanto< solo es necesario llamar a la li)rera en $ersiones anteriores a la -.&. a)e destacar Aue cada li)rera tiene una documentacin corres0ondiente con la cual se entiende su im0lementacin # correcta sinta6is. ;a misma se encuentra en la re9erencia del sitio @:tt0:BB0rocessing.orgBre9erenceBli)rariesBC. En dic:o sitio< adem+s< 0odremos encontrar uno de los 0untos 9uertes de Processing< las li)reras creadas 0or usuarios contri)uidores. Ja# a dis0osicin m+s de %&& li)reras< todas con un atracti$o di9erente. ;as li)reras de contri)ucin de)en ser descargadas 0or se0arado # colocadas dentro de la car0eta K;i)rariesL de tu 0rograma de Processing @0ara encontrar la u)icacin de Processing en el ordenador< a)ra la $entana de Pre9erencias de la a0licacin de Processing # )usAue \=Hetc:)ooH location\ en la 0arte su0eriorC. =i todo es correcto< la li)rera de)era a0arecer en el men3 K=Hetc:L< KIm0ort ;i)rar#...L. En las $ersiones 0osteriores a la -.&< e6iste una o0cin dentro del men3 K=Hetc:L< KIm0ort ;i)rar#...L< la o0cin K,dd ;i)rar#...L @,Gadir ;i)reraC. , 0artir de esta o0cin< Processing )usca nue$as li)reras aun no instaladas # las 0resenta en un entorno amiga)le 0ara su instalacin. ;uego de esto solo :a# Aue seleccionar la li)rera deseada # a0retar el )otn KInstallL. -1-artado 3) Processing>js ,l incluirse la tag an$as como un estandar de J5M;5 @ 9can,as89/can,as8C los 0rogramadores ?e) son ca0aces de Kdi)u8arL en internet con Ja$ascri0t. ;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 /esig @luego es desarrollado 0or "lorian JenettC crea una li)rera Aue KtraduceL un sHetc: @.0deC de Processing al Ja$ascri0t necesario 0ara Aue 9uncione en an$as. 'e esta 9orma< insertar un o)8eto an$as en la ?e) es muc:o mas 0r+ctico # e9iciente Aue un Ja$a ,00let. Para comenzar a im0lementarlo< solo :a# Aue dirigirse a :tt0:BB0rocessing8s.org # descargar la ultima $ersin de la li)rera< la cual tiene so0orte 0ara todos los na$egadores ?e) modernos. ;uego de esto< solo es necesario tener un loGuesea#html # un loGuesea#pde @Aue ser+ el 0ro0io sHetc:C. 'e manera sim0le< en el 9head8 de tu loGuesea#html< se linHea la li)rera de la siguiente manera:
9script src<Wprocessin'# sW89/script8
=iem0re uno asegur+ndose Aue el src sea el directorio correcto. Posteriormente< en el IbodyJ< se crea una etiAueta de an$as de la siguiente manera:
233
9can,as data5processin'5sources<WloGuesea#pdeW89/can,as8
Fna $ez colocado esto< el sHetc: de Processing de)era estar 9uncionando sin ning3n 0ro)lema como un o)8eto de an$as. Es 0osi)le Aue algunas 9unciones de Processing no 9uncionen correctamente o directamente no 9uncionen al 0asarlas a an$as @se est+ constantemente tra)a8ando en elloC. ,nte cualAuier duda< lo ideal es consultar la re9erencia de Processing.8s: :tt0:BB0rocessing8s.orgBre9erenceB. -1-artado 4) Hiring Iiring es un entorno de 0rogramacin de cdigo li)re 0ara microcontroladores. Permite la escritura de 0rogramas multi0lata9orma 0ara controlar di$ersos dis0ositi$os conectados a una am0lia gama de ta)leros de microcontrolador # as crear todo ti0o de cdigos creati$os< o)8etos interacti$os< es0acios o e60eriencias 9sicas. El entorno est+ cuidadosamente creado 0ensando en diseGadores # artistas< # as 9omentar una comunidad donde los 0rinci0iantes< a tra$s de e60ertos de todo el mundo< com0artan las ideas< conocimientos # su e60eriencia colecti$a. M+s in9ormacin en: :tt0:BB?iring.org.coB -1-artado ') 1rduino ,rduino es una 0lata9orma de cdigo a)ierto )asada en 0rototi0os de electrnica 9le6i)le # 9+cil de usar mediante :ard?are # so9t?are. Est+ 0ensado 0ara los artistas< diseGadores< a9icionados # cualAuier 0ersona interesada en la creacin de o)8etos o entornos interacti$os. El microcontrolador de la 0laca se 0rograma utilizando el lengua8e de 0rogramacin de ,rduino @)asado en IiringC # el entorno de desarrollo ,rduino @)asado en ProcessingC. M+s in9ormacin en: :tt0:BBarduino.ccB -1-artado 2) .rit7ing "ritzing es una iniciati$a de cdigo a)ierto 0ara a0o#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 0ermite a los usuarios documentar sus 0rototi0os< com0artirlos con los dem+s< enseGar la electrnica en un saln de clases< # crear un diseGo 0ara la 9a)ricacin de P B 0ro9esional. M+s in9ormacin en: :tt0:BB9ritzing.orgB -1-artado 3) Das %anvas ,lgunos 0ro#ectos Aue deri$an al comenzar a im0lementarse li)reras como Processing.8s< 0retenden utilizar Processing en la ?e) a tra$s de an$as. =ea el caso del sitio Jas an$as< uno de los m+s 0otentes. ,l ingresar al sitio :tt0:BB:ascan$as.com se nos 0resenta una inter9az sencilla Aue nos 0ermite 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 70enI'C se 0uede :acer un sHetc:< o)tener una F/; del mismo< com0artirlo dentro de dic:o sitio< # conseguir el recurso listo 0ara incluir como o)8eto de an$as en cualAuier ?e).
236
;5s Infor*acin)
=tt-)II-rocessing>org
-%ontacto con los 1utores) Ignacio Buioli: i)uioliagmail.com Jaime Prez Marn: 8aime0erezmarinagmail.com
238

Processing Un Lenguaje Al Alcance de Todos

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Processing Un Lenguaje Al Alcance de Todos

Caricato da

Copyright:

Formati disponibili

Processing,

un lenguaje al alcance de todos

Ignacio Buioli | Jaime Prez Marn

Ignacio Buioli | Jaime Prez Marn

Ignacio Buioli | Jaime Prez Marn

Ignacio Buioli | Jaime Prez Marn

Estructuras) Ele*entos del %digo

Ignacio Buioli | Jaime Prez Marn

Ignacio Buioli | Jaime Prez Marn

N escrito de la siguiente manera 9uncionar+ e6actamente igual:

Ignacio Buioli | Jaime Prez Marn

.or*as) %oordinadas , Pri*itivas

Ignacio Buioli | Jaime Prez Marn

Ignacio Buioli | Jaime Prez Marn

line(63, 2/, 3, D/); line(7/, :3, 3, D/);

Ignacio Buioli | Jaime Prez Marn

;a 9uncin ellipse() di)u8a una eli0se en la $entana de re0resentacin:

Ignacio Buioli | Jaime Prez Marn

rect+ngulo se coloca arri)a.

ellipse(:/, :/, 33, 33); rect(63, 63, 3/, 3/);

//@nea superior //@nea central //@nea in!erior

//Hi'ura i(Guierda //Hi'ura central //Hi'ura derecha

Ignacio Buioli | Jaime Prez Marn

//-lipse 'ris //-lipse blanca //-lipse ne'ra

//>ect"n'ulo 'ris //>ect"n'ulo blanco //>ect"n'ulo ne'ro

Ignacio Buioli | Jaime Prez Marn

Ignacio Buioli | Jaime Prez Marn

6 bit D bits 6: bits 02 bits 02 bits 02 bits

Ignacio Buioli | Jaime Prez Marn

!loat ;; boolean b; x < 3/; ; < 62#:; b < true;

Ignacio Buioli | Jaime Prez Marn

Ignacio Buioli | Jaime Prez Marn

;ate*5ticas) .unciones 1rit*"ticas

//Dibu a un rect"n'ulo 'ris //1si'na 233 a 'risMal //Dibu a un rect"n'ulo blanco

//Aueden usarse c"lculos //entre ,ariables como //,alores

Ignacio Buioli | Jaime Prez Marn

Ignacio Buioli | Jaime Prez Marn

int i < .; !loat ! < 0#/; int a < i / !; !loat b < i / !;

Ignacio Buioli | Jaime Prez Marn

int int int int

< < < <

round(2#/); round(2#6); round(2#3); round(2#7);

//1si'na //1si'na //1si'na //1si'na

Ignacio Buioli | Jaime Prez Marn

Ignacio Buioli | Jaime Prez Marn

Ignacio Buioli | Jaime Prez Marn

Ignacio Buioli | Jaime Prez Marn

;a siguiente ta)la muestra todas las o0eraciones 0osi)les # los resultados:

Ignacio Buioli | Jaime Prez Marn

S i!((a 8 63) UU (b 9 0/))R

//->>?> O $olo puede aplicarse a ,ariables boolean

Ignacio Buioli | Jaime Prez Marn

1-"ndice de Estructura I., E?SE , E?SE-I.

Ignacio Buioli | Jaime Prez Marn

digo utilizando un "7/

.O =ale de la estructura # contin3a e8ecutando el resto del 0rograma

!or (int i < /; i 9 6//; i 4< 2) R stro)e(2335i); line(i, /, i, 2//); S

!or (int x < 6/; x 9 6//; x 4< 6/) R point(x, 6/); S

Ignacio Buioli | Jaime Prez Marn

;a siguiente es una alternati$a de 9ormato usada mu# 9recuentemente:

Ignacio Buioli | Jaime Prez Marn

line(2/, 2/, D/, D/); S else R line(2/, D/, D/, 2/); S

Ignacio Buioli | Jaime Prez Marn

1-"ndice de Estructura .9A

.oras) %oordinadas , Priitivas

;ate5ticas) .unciones 1rit"ticas

//6 //M6 //M2 //M0 //2

//M6 //6, 2, M2

//M6 //6, 2, M2 //0, ., M0

//M6 //6, 2, M2 //0, ., M0

//M6 //6, 2, M2 //M0 //M. //0, ., M3

]::77** ]0H.0= ]K.-*-

$trin' s < WNe'roW; println(s#to@oNerase()); println(s#to&pperase());