Processing Un Lenguaje Al Alcance de Todos

Processing,
un lenguaje al alcance de todos
Edicin 2013
versin 02
Ignacio Buioli | Jaime Prez Marn
ndice
ndice......................................................................................................................................................................3 Introduccin............................................................................................................................................................4 Estructuras Elementos del !digo........................................................................................................................" #ormas !oordinadas $ Primiti%as.........................................................................................................................& 'atos (aria)les...................................................................................................................................................*+ Matem,ticas #unciones -ritmticas....................................................................................................................2. !ontrol 'ecisiones..............................................................................................................................................2/ !ontrol 0e1eticin...............................................................................................................................................3* #ormas (rtices..................................................................................................................................................3" Matem,ticas !ur%as............................................................................................................................................43 !olor !olor 1or 23meros....................................................................................................................................44 Imagen (isualizacin $ 5inta.............................................................................................................................../" 'atos 5e6to........................................................................................................................................................../& 'atos !on%ersin $ 7)8etos................................................................................................................................"* 5i1ogra9a (isualizacin......................................................................................................................................"/ Matem,ticas 5rigonometra................................................................................................................................."& Matem,ticas -leatoriedad...................................................................................................................................++ 5rans9ormaciones Matrices $ 5raslaciones.........................................................................................................4* 5rans9ormaciones 0otacin $ Escala..................................................................................................................44 Estructuras !ontinuidad......................................................................................................................................4& Estructuras #unciones.........................................................................................................................................&/ #ormas Par,metros $ 0ecursin .....................................................................................................................*./ (alores de Entrada Mouse................................................................................................................................**. 'i)u8o #ormas Est,ticas....................................................................................................................................**+ (alores de Entrada 5eclado..............................................................................................................................*2. (alores de Entrada E%entos..............................................................................................................................*23 (alores de Entrada Mouse II.............................................................................................................................*24 (alores de Entrada 5iem1o $ #ec:as...............................................................................................................*34 Mo%imiento ;neas $ !ur%as.............................................................................................................................*34 Mo%imiento Mec,nicos $ 7rg,nicos.................................................................................................................*4" 'atos -rra$s......................................................................................................................................................*/* Imagen -nimacin.............................................................................................................................................*". Imagen P6eles..................................................................................................................................................*"4 5i1ogra9a Mo%imiento.......................................................................................................................................*"4 5i1ogra9a 0es1uesta........................................................................................................................................*+2 !olor !om1onentes..........................................................................................................................................*+/ Imagen #iltro< Mezcla< !o1ia< M,scara............................................................................................................*4* Imagen Procesamiento de Imagen...................................................................................................................*4" 'atos de =alida Im,genes................................................................................................................................*&4 'atos de =alida E61ortar -rc:i%os....................................................................................................................*&+ Estructuras 7)8etos...........................................................................................................................................2.. 'i)u8os #ormas !inticas.................................................................................................................................2*2 E6tensin Modos...............................................................................................................................................2*" E6tensin #iguras 3'........................................................................................................................................22. E6tensin >M;..................................................................................................................................................22& -1artados 'ocumentacin................................................................................................................................23*
El 1resente li)ro< de ti1o manual actualiza)le< corres1onde al a1rendiza8e del so9t?are de Processing 2... El :ec:o de 1oseer una %ersin anterior o 1osterior no entor1ece ni im1ide el a1rendiza8e con el 1resente manual. =in em)argo< se recomienda actualizarse a la 3ltima %ersin esta)le. @ante cualAuier duda< consultar en :tt1 BB1rocessing.orgBdo?nloadBC. Dueda entendido Aue Processing es creado< en 1rinci1io< 1or !ase$ 0eas $ Ben #r$< $ se trata de un so9t?are de cdigo a)ierto Aue se distri)u$e )a8o una licencia E2F E;P @ General Public LicenseC.
Introduccin
'ado el a%ance de los medios de 1roduccin multimedial< nace un 1otente so9t?are dedicado a la 1roduccin de im,genes< animaciones e interacti%os. El so9t?are denominado Processing. El 1ro$ecto da inicio en el 2..*< realizado 1or !ase$ 0eas $ Ben #r$< a 1artir de terminologas realizadas en el MI5 ;a)< dirigido 1or Jo:n Maeda< e in9luenciado 1or el 1ro$ecto Design by Numbers. Es as Aue Processing se con%ierte en un 1oderoso entorno de 1roduccin )asado en Ja%a. 2os 1areci im1ortante la creacin de un li)ro ti1o manual de introduccin a Processing Aue se encuentre dis1oni)le en es1aGol< 1uesto Aue la ma$ora de los manuales del mercado se encuentran 3nicamente en ingls $ no :a$ ninguna %ersin al castellano. 2o es de 1oca monta la cantidad de :is1ano:a)lantes Aue e6isten en el mundo< es1ecialmente interesados en a1render lengua8es de 1rogramacin orientados a entornos Ja%a. Por tal moti%o< este manual comenz< en 1rinci1io< como una traduccin de los manuales de Processing. 2o o)stante< la distri)ucin de los mismos no nos con%encan en cuanto a ductilidad de lectura< 1or lo tanto decidimos tomarlos de )ase 1ara crear nuestro 1ro1io manual Aue a$ude a aAuellos @Aue 1or di%ersos moti%os no sa)en leer en inglsC interesados en la 1roduccin multimedial Aue el so9t?are o9rece. En este li)ro< se o9rece< adem,s< a1ndices corres1ondientes a cada sector $ e8em1los Aue muestran el 9uncionamiento de las estructuras $ de los 1rogramas. =e recomienda Aue< una %ez conseguido el 1rograma< los e8em1los sean %istos desde a: $ no solo desde la imagen Aue lo acom1aGa. !omo se menciona anteriormente< este li)ro< 1rinci1almente< comienza como una traduccin del li)ro Processing: A programming Handbook for Visual Designer and Artist de !ase$ 0eas $ Ben #r$. 2o o)stante< se inclu$en conce1tos $ material no 1resente en dic:o li)ro @as como tam)in se Auitan cosas del mismo Aue no nos :an 1arecido 1ertinentesC.
Software
- u! es Processing" Es un so9t?are de cdigo a)ierto< $ cualAuier 1ersona 1uede contri)uir en su me8ora. 'es1ro%isto de inter9aces innecesarias< se %ale de un lengua8e de 1rogramacin @de igual nom)reC )asado en Ja%a 1ara realizar com1osiciones de gran inters. !omo so9t?are< consiste ),sicamente en un sim1le editor de te6to 1ara escri)ir cdigo< un ,rea de mensa8e< una consola de te6to< un sistema de 1estaGas 1ara mane8ar arc:i%os< una )arra de :erramientas con )otones de accionar com3n $ una )arra de men3. !uando el 1rograma se e8ecuta< se a)re una %entana de re1resentacin. ;os arc:i%os Aue se escri)en en Processing se denominan sketch. Esos sHetc: se escri)en en el editor de te6to. -dmite las 9unciones de co1iarB1egar $ )uscarBreem1lazar te6to. ;a consola muestra errores 1roducidos al e8ecutar el 1rograma. 5am)in< 1uede mostrar te6to a tra%s de las 9unciones print ! $ println !. -#escarga El so9t?are de Processing 1uede descargarse del sitio ?e) :omnimo del 1rograma. 'esde un na%egador ?e)< ingresar a """.processing.org $ )uscar la seccin de descarga @ do"nloadC. -dmite sistemas o1erati%os
de ;inu6< Macintos: $ Iindo?s. En el sitio se encuentran las instrucciones mismas 1ara la descarga. -$onte%to
Barra de Men3 #ile #Archi$o#. !omandos 1ara mane8ar $ e61ortar arc:i%os. Edit #%ditar#. !ontroles 1ara editar te6to. @!o1iar< 1egar< cortar< encontrar< reem1lezar< etc.C. =Hetc: #&ketch#. !ontrol 1ara e8ecutarB9renar el 1rograma $ 1ara aGadir li)reras. 5ools #Herramientas#. Jerramientas de asistencia 1ara Processing. Jel1 #Ayuda#. 0e9erencias a arc:i%os $ al lengua8e. Barra de Jerramientas 0un #%'ecutar#. !om1ila el cdigo< a)re una %entana de re1resentacin $ muestra el 1rograma. =to1 #Parar#. 5ermina de correr el 1rograma. 2e? #Nue$o#. !rea un nue%o =Hetc:. 71en #Abrir#. Pro%ee de o1ciones 1ara a)rir un sHetc: del li)ro de sHetc:< a)rir un e8em1lo< o un sHetc: en cualAuier sitio del ordenador. =a%e #Guardar#. Euarda el actual sHetc: en la actual u)icacin. Para otra u)icacin usar el o1cion K=a%e asL. E61ort #%(portar#. E61orta el actual sHetc: como un a11let de Ja%a unido a una arc:i%o J5M;.
&nidad 1
Estructuras' Ele(entos del $digo

Ele(entos )ue se introducen en esta &nidad'
// (comentario), /* */ (comentario multilinea),;(terminador de accin), , (coma), print(), println()
El :ec:o de crear un 1rograma im1lica recurrir a la escritura $ a1render un lengua8e. =imilar a cuando a1rendemos un nue%o lengua8e oral o escrito< necesitamos a1render una sinta6is $ una lgica. Escri)ir en un lengua8e :umano es mu$ com1licado. Posee am)igMedad en las 1ala)ras< $ muc:a 9le6i)ilidad 1ara la construccin de 1,rra9os. En ese sentido< el lengua8e de m,Auina es m,s sencillo< 1ero 1osee una di9icultad clara la lgica de la 1rogramacin. Fsualmente< un ser :umano 1uede 1ercatarse de un error de sinta6is $ darlo 1or alto< rest,ndole 1arcial o com1leta im1ortancia. =in em)argo< en un lengua8e de m,Auina las cosas son de una 9orma o de otra 7 est, )ien< o est, mal. -$o(entarios ;os comentarios son ignorados 1or los ordenadores< 1ero son (u* i(+ortantes 1ara los :umanos. Processing 1ermite agregar notas en cualAuier sector del cdigo. Pueden ser de solo una lnea o de muc:as lneas. Na Aue los 1rogramas usan signos mu$ arcaicos $ de di9cil identi9icacin< muc:as %eces es com1licado recordar Aue :aca cada sector indi%idualmente. Por lo tanto se recurre a la utilidad del comentario< mu$ 3til a la :ora de re%isar el cdigo< $a sea 1or el 1ro1io 1rogramador como 1or otros. El siguiente 1rograma e61lica< 1or s solo< como se comenta
// // // // Dos barras laterales son usadas para comentar Todo el texto en la misma lnea es parte de un comentario No debe haber espacio entre las barras, por 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 1ermiten di)u8ar 9ormas< colores< realizar c,lculos matem,ticos< entre otras %ariadas acciones. Por lo general se escri-en en (in.sculas * seguidas +or +ar!ntesis . -lgunas 9unciones ace1tan par)metros< los cuales se escri)en entre los 1arntesis. =i ace1ta m,s de uno< son se1arados 1or una coma @,C. - continuacin un 1rograma Aue inclu$e dos 9unciones si(e() $ bac)'round().
//*on esta !uncin establecemos el tama+o de la ,entana de presentacin //-l primer par"metro corresponde al ancho de la ,entana //-l se'undo par"metro corresponde al alto# si(e(.//, 0//); //*on esta !uncin establecemos el color de !ondo de la ,entana //1cepta di,ersos par"metros, para una escala de 'rises bastar" con ,alores de / (ne'ro) a 233 (blanco)# bac)'round(/);
-E%+resiones * /cciones =i us,ramos una analoga< la e61resin de un so9t?are es como una 9rase. ;as e61resiones< 1or lo general<
"
%an acom1aGadas de alg3n o1erador como 4< 5< * o /< $a sea a la izAuierda o a la derec:a del %alor. Fna e61resin en 1rogramacin 1uede ser ),sica< como un solo n3mero< o una com1le8a cadena de elementos. 'e esta manera< una e61resin siem1re tiene un %alor determinado.
E61resin
3 6/#3*2 ((042)*56/)46
(alor
3 26#/ 5.7
Ja$ e61resiones Aue tam)in 1ueden usarse en com1aracin de un %alor con otro. ;os o1eradores de 8 #mayor a# $ 9 #menor a# de%uel%en solo dos %alores true @$erdadero! $ !alse @falso!.
E61resin
: 8 0 3. 9 3/
(alor
true !alse
Fn con8unto de e61resiones 1ueden 9ormar una acci*n< lo Aue en 1rogramacin eAui%ale a una oraci*n. =e com1leta cuando se 1resenta el terminador de la accin. En Processing< el terminador de accin es el 1untoO $Ocoma @;C. -l igual Aue :a$ di%ersos ti1os de oraciones< :a$ di%ersos ti1os de acciones. Fna accin 1uede de9inir una %aria)le< e8ecutar una %aria)le< asignar una %aria)le< e8ecutar una 9uncin< o construir un o)8eto. continuacin unos e8em1los
si(e(2//, 2//); 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 1untoO$Ocoma< el 1rograma dara un error. -Sensi-ilidad En nuestra lengua< :a$ casos en los Aue las 1ala)ras comienzan en ma$3sculas $ casos en los Aue no. Es a lo Aue se llama letra capital. Por e8em1lo< nom)res de lugares como Buenos -ires o -ndaluca< o nom)res 1ro1ios como Pa)lo o EnriAue< todos ellos comienzan con la letra ca1ital @1rimer letra en ma$3sculasC. Ja$ di%ersos lengua8es de 1rogramacin Aue son 1ermisi%os con esto $ suelen de8arlo 1asar. En el caso de Processing< se 1roduce una diferenciacin entre ma$3sculas $ min3sculas< siendo Aue la correcta 9orma de escritura es en (in.sculas. Escri)ir si(e() como $i(e() 1roducira un error.
si(e(2//, 2//); =ac)'round(6/2); //->>?> 5 @a = en bac)'round est" como letra capital#
-Es+acios en 0lanco E6iste una gran %ariedad de lengua8es de 1rogramacin Aue son estrictos en cuanto a los es1acios en )lanco Aue se de8an entre cada estructura. =in em)argo< Processing se 1resta 1ara esto $ le resta im1ortancia. Podemos tener el siguiente cdigo
si(e(2//, 2//); bac)'round(6/2);
N escrito de la siguiente manera 9uncionar, e6actamente igual

si(e (2// 2// bac)'round ; ( , ); 6/2 )
-$onsola !uando un 1rograma es e8ecutado< la com1utadora realiza acciones a tal %elocidad Aue es im1osi)le 1erci)irlas 1ara el o8o :umano. Por lo tanto< es im1ortante mirar la consola< no solo 1ara errores< sino tam)in 1ara entender Aue ocurre detr1s del 1rograma. ;a consola en Processing< se encuentra como un es1acio en negro de)a8o del editor de te6to. !omo es mu$ im1ortante entender Aue ocurre dentro del 1rograma< e6isten las 9unciones print() $ println(). Estas 9unciones no en%an 1,ginas a im1rimir< ni muestran nada en la %entana de re1resentacin. =im1lemente muestran te6to en la consola. ;a consola 1uede ser usada 1ara mostrar una %aria)le< con9irmar un e%ento o c:eAuear datos e6ternos Aue est,n ingresando. -l igual Aue los comentarios< print() $ println() 1ueden :acer m,s clara la lectura del cdigo.
//$i se desea imprimir texto, este debe estar entre comillas println(Arocessin'###); //Bmprime Arocessin'### en la consola //$i se desea imprimir una ,ariable //no debe ponerse su nombre entre comillas int x < 2/; println(x); //Bmprime 2/ en la consola //Cientras println() escribe cada cosa en una sola lnea, print() escribe todo en la misma lnea print(2/); println(0/); //Bmprime 2/0/ en la consola println(D/); //Bmprime D/ en una nue,a lnea de la consola //Tambi%n pueden concatenarse mEltiples textos con el operador 4 (no con!undir con su uso matem"tico) int x < 2/; int ; < D/; println(x 4 F 4 ;); //Bmprime 2/ F D/ en la consola
&nidad 2
,or(as' $oordinadas * Pri(itivas

si(e(), point(), line(), trian'le(), Guad(), rect(), ellipse(), be(ier(), bac)'round(), !ill(), stro)e(), noHill(), no$tro)e(), stro)eIei'ht(), stro)e*ap(), stro)eJoin(), smooth(), no$mooth(), ellipseCode(), rectCode()
'i)u8ar una 9orma con un cdigo 1uede ser di9cil 1orAue todos sus as1ectos de su u)icacin de)en ser es1eci9icados con un n3mero. !uando uno est, acostum)rado a di)u8ar con un l,1iz o 9ormas mo%indose en una 1antalla con el ratn< 1uede tomar muc:o tiem1o em1ezar a 1ensar en la relacin de la red con una 1antalla de coordenadas estrictas. ;a di9erencia 9undamental entre %er una com1osicin so)re 1a1el o en su mente $ su traduccin en notacin de cdigo es mu$ am1lia< 1ero mu$ sencilla de entender. -$oordenadas -ntes de :acer un di)u8o< es im1ortante Aue 1ensemos acerca del tamaGo $ las caractersticas de la su1er9icie so)re la Aue %amos a di)u8ar. =i %amos a :acer un di)u8o en 1a1el< 1odemos elegir multitud de utensilios $ ti1os de 1a1el. Para un es)ozo r,1ido< 1a1el de 1eridico $ car)oncillo es lo m,s a1ro1iado. Para un di)u8o m,s re9inado< 1uede ser 1re9eri)le 1a1el sua%e :ec:o a mano $ l,1ices. !ontrariamente< cuando est,s di)u8ando en un ordenador< las o1ciones 1rinci1ales dis1oni)les son el tamaGo de la %entana $ el color del 9ondo. ;a 1antalla de un ordenador es una rejilla de 1eAueGos elementos luminosos llamados 16eles. ;as 1antallas %ienen en muc:os tamaGos $ resoluciones. E6isten tres ti1os di9erentes de 1antallas 1ara nuestro estudio< $ todas ellas tienen un n3mero di9erente de 16eles. ;os 1ort,tiles tienen *.+"4.... 16eles @*"4. de anc:o 1or *./. de altoC< las 1antallas 1lanas tienen *.3*..+2. 16eles @*24. de anc:o 1or *.24 de altoC $ los %ie8os monitores tienen +4".432 16eles @*.24 de anc:o 1or +"4 de altoC. Millones de 16eles 1ueden sonar como una cantidad mu$ %asta< 1ero 1roducen una 1o)re calidad %isual com1arado a un medio 9sico< como el 1a1el. ;as 1antallas modernas tienen una resolucin de a1ro6imadamente cien 1untos 1or 1ulgada< mientras Aue las im1resoras modernas 1ro%een m,s de mil 1untos 1or 1ulgada. Por otra 1arte< las im,genes en 1a1el son 9i8as< mientras Aue las 1antallas tienen la %enta8a de ser ca1aces de cam)iar su imagen muc:as %eces 1or segundo. ;os 1rogramas en Processing 1ueden controlar todos o un su-conjunto de 16eles de la 1antalla. !uando 1ulsa el )otn 0un< una %entana de re1resentacin se a)re $ te 1ermite leer $ escri)ir dentro de los 16eles. Es 1osi)le crear im,genes m,s grandes Aue la 1antalla< 1ero en la ma$ora de los casos< :aremos una %entana de re1resentacin igual o menor a la 1antalla. El tamaGo de la %entana de re1resentacin est, controlada 1or la 9uncin si(e()
si(e(ancho, alto)
;a 9uncin si(e() tiene dos 1ar,metros el 1rimero esta)lece el anc:o de la %entana $ el segundo su alto.
//Dibu a la ,entana de representacin de 02/ de ancho ; 2./ de alto (pxeles)# si(e(02/,2./);
Fna 1osicin de la 1antalla est, com1rendida 1or un e8e de coordenadas 6 $ un e8e de coordenadas $. El e8e de coordenadas 6 es la distancia :orizontal desde el origen $ el e8e de coordenadas $ es la distancia %ertical. En Processing< el origen es la es)uina su+erior i2)uierda de la %entana de re1resentacin $ coordina los %alores :acia a)a8o $ :acia la derec:a. ;a imagen de la izAuierda muestra el sistema de coordenadas< $ la imagen de la derec:a muestra %arias 1osiciones en la re8illa
&
Fna 1osicin se escri)e con el valor del eje % seguido del valor del eje *< se1arados 1or una coma. ;a notacin 1ara el origen es (/,/)< la coordenada (3/,3/) tiene /. de coordenada 6 $ /. de coordenada $< $ la coordenada (2/,:/) tiene 2. de coordenada 6 $ ". de coordenada $. =i el tamaGo de la %entana de re1resentacin es de *.. 16eles de anc:o $ *.. 16eles de alto< el 16el de la esAuina su1erior izAuierda es (/,/)< el 16el de la esAuina su1erior derec:a es (77,/)< el 16el de la esAuina in9erior izAuierda es (/,77)< $ el 16el de la esAuina in9erior derec:a es (77,77). Esto se %e m,s claro si usamos la 9uncin point(). -,iguras +ri(itivas Fn 1unto es el elemento %isual m,s sim1le $ se di)u8a con la 9uncin point()
point(x,;)
Esta 9uncin tiene dos 1ar,metros el 1rimero es la coordenada 6 $ el segundo es la coordenada $. - menos Aue se es1eci9iAue otra cosa< un 1unto es del tamaGo de un slo 16el.
point(2/, 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 1osi)le di)u8ar cualAuier lnea mediante una serie de 1untos< 1ero son m,s sim1les de di)u8ar con la 9uncin line(). Esta 9uncin tiene cuatro 1ar,metros< dos 1or cada e6tremo
line(x6, ;6, x2, ;2)
;os 1rimeros dos 1ar,metros esta)lecen la 1osicin donde la lnea em1ieza $ los dos 3ltimos esta)lecen la 1osicin donde la lnea termina.
line(23, 7/, D/, :/); line(3/, 62, .2, 7/); line(.3, 0/, 6D, 0:);
*.
line(63, 2/, 3, D/); line(7/, :3, 3, D/);
;a 9uncin trian'le() di)u8a un tri,ngulo. 5iene seis 1ar,metros< dos 1or cada 1unto
trian'le(x6, ;6, x2, ;2, x0, ;0)
El 1rimer 1ar de9ine el 1rimer 1unto< el segundo 1ar el segundo 1unto $ el 3ltimo 1ar el tercer 1unto. !ualAuier tri,ngulo 1uede ser di)u8ado conectando tres lneas< 1ero la 9uncin trian'le() :ace 1osi)le di)u8ar una 9igura con relleno. 5ri,ngulos de todas 9ormas $ tamaGos 1ueden ser creados cam)iando los %alores de los 1ar,metros.
trian'le(33, 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 1olgono de cuatro lados. Esta 9uncin tiene oc:o 1ar,metros< dos 1or cada 1unto.
Guad(x6, ;6, x2, ;2, x0, ;0, x., ;.)
(ariando los %alores de los 1ar,metros se 1uede construir rect,ngulos< cuadrados< 1aralelogramos $ cuadril,teros irregulares.
Guad(2/, 2/, 2/, K/, :/, 7/, :/, ./); Guad(2/, 2/, K/, 52/, 66/, /, :/, ./);
'i)u8ar rect,ngulos $ eli1ses 9uncionan de una manera di9erente a las 9iguras %istas anteriormente. En lugar de de9inir cada 1unto< los cuatro 1ar,metros esta)lecen la 1osicin $ las dimensiones de la 9igura. ;a 9uncin rect() di)u8a un rect,ngulo
rect(x, ;, ancho, alto) rect(x, ;, ancho, alto, radio) rect(x, ;, ancho, alto, si, sa, id, ii) //1 partir de la ,ersin 2#/ //1 partir de la ,ersin 2#/
;os dos 1rimeros 1ar,metros esta)lecen la localizacin de la esAuina su1erior izAuierda< el tercero esta)lece el anc:o< $ el cuarto el alto. Fse el mismo %alor de ancho $ alto 1ara di)u8ar un cuadrado. ;a %ersin con el 1ar,metro radio 1ermite agregar )orde redondeados al rect,ngulo. El 1ar,metro radio corres1onde al radio de redondeo. ;a %ersin con otros cuatro 1ar,metros 1ermite agregar un radio distinto de redondeo a
**
cada esAuina. =iendo si @=u1erior IzAuierdoC< sa @=u1erior 'erec:oC< id @In9erior 'erec:oC $ ii @In9erior IzAuierdoC.
rect(/, /, 7/, 3/); rect(3, 3/, K3, .); rect(2., 3., :, :); rect(:., 3., :, :); rect(2/, :/, K3, 6/); rect(6/, K/, D/, 2);
;a 9uncin ellipse() di)u8a una eli1se en la %entana de re1resentacin

ellipse(x, ;, ancho, alto)
;os dos 1rimeros 1ar,metros esta)lecen la localizacin del centro de la eli1se< el tercero esta)lece la anc:o< $ el cuarto la altura. Fse el mismo %alor de ancho $ de alto 1ara di)u8ar un crculo.
ellipse(03, /, 62/, 62/); ellipse(0D, :2, :, :); ellipse(./, 6//, K/, K/);
;a 9uncin be(ier() 1uede di)u8ar lneas Aue no son rectas. Fna cur%a Bzier est, de9inida 1or una serie de 1untos de control $ 1untos de ancla8e. Fna cur%a es di)u8ada entre dos 1untos de ancla8e< $ los 1untos de control de9inen su 9orma
be(ier(x6, ;6, cx6, c;6, cx2, c;2, x2, ;2)
Esta 9uncin reAuiere oc:o 1ar,metros 1ara de9inir cuatro 1untos. ;a cur%a se di)u8a entre el 1rimer 1unto $ el cuarto< $ los 1untos de control est,n de9inidos 1or el segundo $ tercer 1unto. En los 1rogramas Aue se utilizan cur%as Bzier< tales como -do)e Illustrator o InHsca1e< los 1untos de control son re1resentados 1or 1eAueGos nodos Aue so)resalen de los )ordes de la cur%a.
be(ier(02, 2/, D/, 3, D/, K3, 0/, K3); //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/, ., .);
-3rden de di-ujo
El orden en Aue di)u8amos las 9iguras en el cdigo< de9ine Au 9iguras a1arecer,n so)re otras en la %entana de re1resentacin. =i di)u8amos un rect,ngulo en la 1rimera lnea de un 1rograma $ una eli1se en la segunda lnea< el rect,ngulo a1arecer, de)a8o de la eli1se cuando e8ecutemos el 1rograma. 0e%irtiendo el orden< el
*2
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
-4alores de grises ;os e8em1los %istos anteriormente :an usado el 9ondo 1or de9ecto de color gris claro< lneas negras< $ 9iguras )lancas. Para cam)iar estos %alores< es necesario introducir sinta6is adicional. ;a 9uncin bac)'round() esta)lece el color de la %entana de re1resentacin con un n3mero entre . $ 2//. Este rango 1uede ser incmodo si no est,s 9amiliarizado con 1rogramas de di)u8o en el ordenador. El %alor 2// es )lanco $ el %alor . es negro< con un rango de %alores de grises en medio. =i no se de9ine un %alor 1ara el 9ondo< se usa el %alor 1or de9ecto 2.4 @gris claroC. ;a 9uncin !ill() de9ine el %alor del relleno de las 9iguras< $ la 9uncin stro)e() de9ine el %alor del contorno de las 9iguras di)u8adas. =i no se de9ine un %alor de relleno< se usa el %alor 1or de9ecto 233 @)lancoC. =i no se de9ine un %alor de contorno< se usa el %alor 1or de9ecto / @negroC.
rect(6/, 6/, !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 a1lica a todas las 9iguras di)u8adas des1us. Para cam)iar el %alor de relleno o contorno< usamos la 9uncin !ill() o stro)e() de nue%o. Fn 1ar,metro o1cional adicional 1ara !ill() o stro)e() regula la trans1arencia. 'e9iniendo el 1ar,metro a 233 :ace Aue la 9igura sea totalmente o1aca< $ a / totalmente trans1arente
bac)'round(/); !ill(233, 22/); rect(63, 63, 3/, 3/); rect(03, 03, 3/, 3/);
El relleno $ el contorno de una 9igura se 1uede eliminar. ;a 9uncin noHill() detiene a Processing de rellenar 9iguras< $ la 9uncin no$tro)e() detiene la creacin de lneas $ contornos de las 9iguras. =i usamos noHill() $ no$tro)e() no di)u8aremos nada en la 1antalla.
Ignacio Buioli | Jaime Prez Marn *3
-/tri-utos de di-ujo -dem,s de cam)iar los %alores de relleno $ contorno de las 9iguras< tam)in es 1osi)le cam)iar atri)utos de la geometra. ;as 9unciones smooth() $ no$mooth() acti%an $ desacti%an el sua%izado @conocido como 9iltro antialiasingC. !uando usamos una de estas 9unciones< a9ectar, a todas las 9unciones di)u8adas des1us. =i usamos 1rimero smooth()< usar no$mooth() cancelar, el a8uste< $ %ice%ersa.
smooth(); ellipse(0/, .D, 0:, 0:); no$mooth(); ellipse(K/, .D, 0:, 0:);
;os atri)utos de la lnea< est,n controlados 1or las 9unciones stro)eIei'ht()< stro)e*ap() $ stro)eJoin(). ;a 9uncin stro)eIei'ht() tiene un 1ar,metro numrico Aue de9ine el grosor de todas las lneas di)u8adas des1us de usar esta 9uncin. ;a 9uncin stro)e*ap() reAuiere un 1ar,metro Aue 1uede ser >?&ND< $L&1>- o A>?J-*T. >?&ND redondea los 1untos 9inales< $ $L&1>- los cuadra. A>?J-*T es una mezcla de am)os redondea las esAuinas cuadradas sua%emente. Esta 9uncin se usa en lneas. ;a 9uncin stro)eJoin() tiene un 1ar,metro Aue 1uede ser =-M-@< CBTT-> o >?&ND. Estos 1ar,metros determinan la 9orma del contorno de la 9igura. =-M-@ corta en diagonal las esAuinas cuadradas< CBTT-> cuadra las esAuinas @es el %alor 1or de9ectoC $ >?&ND redondea las esAuinas.
smooth(); stro)eIei'ht(62); stro)e*ap(>?&ND); line(2/, 0/, D/, 0/); 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
-5odos de di-ujo Por de9ecto< los 1ar,metros 1ara ellipse() de9inen la coordenada 6 del centro< la coordenada $ del centro< el anc:o $ el alto. ;a 9uncin ellipseCode() cam)ia la 9orma en Aue se usan estos 1ar,metros 1ara di)u8ar eli1ses. ;a 9uncin ellipseCode() reAuiere un 1ar,metro Aue 1uede ser *-NT->< >1DB&$< *?>N-> o *?>N->$. El modo 1or de9ecto es *-NT->. El modo >1DB&$ tam)in usa el 1rimer $ segundo 1ar,metro de ellipse() 1ara esta)lecer el centro< 1ero el tercer 1ar,metro de)er ser la mitad del anc:o< $ el cuarto 1ar,metro de)e ser la mitad del alto. El modo *?>N-> :ace Aue ellipse() 9uncione de manera 1arecida a rect(). !ausa Aue el 1rimer $ segundo 1ar,metro se trasladen a la esAuina su1erior izAuierda del rect,ngulo Aue circunscri)e la eli1se $ usa el tercer $ cuarto 1ar,metro 1ara de9inir la anc:ura $ la altura. El modo *?>N->$ tiene un e9ecto similar a *?>N->< 1ero causa Aue el tercer $ cuarto 1ar,metro de ellipse() se de9inan en la esAuina in9erior derec:a del rect,ngulo.
*4
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. 0eAuiere un 1ar,metro Aue 1uede ser *?>N->< *?>N->$ o *-NT->. El modo 1or de9ecto es *?>N->< $ *?>N->$ causa Aue el tercer $ cuarto 1ar,metro de rect() se de9inan en la esAuina contraria a la 1rimera. El modo *-NT-> causa Aue el 1rimer $ segundo 1ar,metro de rect() de9inan el centro del rect,ngulo $ usa el tercer $ cuarto 1ar,metro 1ara el anc:o $ el alto.
no$tro)e(); rectCode(*?>N->); !ill(62:); rect(./, ./, :/, :/); rectCode(*-NT->); !ill(233); rect(./, ./, :/, :/); rectCode(*?>N->$); !ill(/); rect(./, ./, :/, :/);
//>ect"n'ulo 'ris //>ect"n'ulo blanco //>ect"n'ulo ne'ro
*/
/+!ndice de Pri(itivas
*"
&nidad 3
#atos' 4aria-les
int,!loat, boolean, true, !alse, < (asi'nacin), Nidth, hei'ht
PDu son los datosQ ;os datos< con 9recuencia son caractersticas 9sicas asociadas a un algo. Por e8em1lo< cuando decimos Aue una 1ersona llamada Juan Prez< en su registro de conducir 9igura una M @1or gnero masculinoC sa)emos Aue ese %alor M esta asociado a la 1ersona Juan Prez. En los sistemas in9orm,ticos< los datos son guardados como n3meros $ caracteres. Por e8em1lo< los ordenadores est,n constantemente reci)iendo datos del mouse $ el teclado. !uando se crea un 1rograma< 1ueden guardarse datos de< 1or e8em1lo< una 9orma< un color< o el cam)io constante de la 1osicin del mouse. -6i+os de datos Processing 1uede al(acenar * (odificar muc:os ti1os de datos< como n3meros< letras< 1ala)ras< im,genes< colores< 9uentes $ %alores )ooleanos @ true $ !alseC. El :ec:o de guardar datos im1lica un ma$or o menor uso de la memoria del ordenador donde estemos tra)a8ando. 2o es lo mismo guardar la 1ala)ra K-ndalucaL Aue guardar sim1lemente la K-L. !ada dato es re1resentado como una serie de )its @. $ *C. Por e8em1lo< .*....*.. 1uede ser inter1retado como una letra. !omo seres :umanos< no :ar, 9alta a1render el lengua8e )inario 1ara 1rogramar< Processing se 1resta 1ara Aue el tra)a8o nos sea muc:o m,s sencillo. =in em)argo< .*.....* 1uede ser inter1retado como al letra K-L o como el n3mero "/. Por lo tanto< es im1ortante de9inir Aue ti1o de dato estamos tra)a8ando. El 1rimer ti1o de datos Aue enunciaremos< ser,n los datos numricos. E6isten dos clases de datos numricos enteros $ decimales @9lotantesC. !uando :a)lamos de enteros< nos re9erimos a n3meros com1letos< como /< O*2.< 4 $ &4/. Processing re1resenta %aria)les de ti1o entero con int. En cam)io< los n3mero decimales< tam)in llamados de punto+flotante< crean 9racciones de los n3meros enteros como *2.4< O*2..+/< 4.333 $ &4/.4"+"/43. Processing re1resenta los datos ti1o decimales con !loat. ;a %aria)le m,s sim1le en Processing es de ti1o boolean. =olo admite dos %alores true o !alse #$erdadero o falso#. =uele utilizarse cuando es necesario Aue el 1rograma tome una decisin ignorando el resto de las 1osi)ilidades. - continuacin< una ta)la con los ti1os de %aria)le $ el tamaGo Aue ocu1a cada una
2om)re
boolean b;te char int !loat color
5amaGo
6 bit D bits 6: bits 02 bits 02 bits 02 bits
0ango 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
-4aria-les Fna %aria)le es un contenedor 1ara guardar datos. ;as %aria)les 1ermiten Aue cada datos sea reutilizado (uc7as veces en un 1rograma. !ada %aria)le tiene dos 1artes un nombre $ un $alor. =i una %aria)le almacena el %alor 2* $ es llamada edad< el nom)re edad 1uede a1arecer muc:as %eces en el 1rograma. !uando el 1rograma se e8ecute< la 1ala)ra edad cam)iar, 1or el %alor de 2*. En adicin a este nom)re $ %alor< :a$ Aue declarar Aue ti1o de datos so1orta esa %aria)le. Fna %aria)le de)e ser< siem1re< declarada antes de ser usada. Fna declaracin de %aria)le consta del ti1o de datos Aue ace1tar, esa %aria)le< seguida de un nom)re creado 1or nosotros. En el siguiente e8em1lo se declaran %arios ti1os de %aria)les $ se les asigna un %alor
int x; //Declaracin de ,ariable x del tipo entero
*+
!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 ti1o 1ueden ser declaradas en la misma lnea $ luego asignarse un %alor 1or se1arado a cada una
!loat x, ;, b; x < 53#3:; ; < 62#:; b < K:#KD7;
!uando una %aria)le es declarada< es im1ortante %er Aue clase de dato se le %a a asignar 1ara elegir correctamente el ti1o de dato. 2i el nom)re< ni el ti1o de dato 1uede ser cam)iado una %ez declarado. =i es 1osi)le reasignar otro %alor
int x < :7; 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 1ara asignar %alores< 3nicamente. ;e asigna el %alor Aue se encuentra en el lado derec:o< a la %aria)le del lado izAuierdo. Por lo tanto< es im1ortante Aue lo Aue se encuentre del lado izAuierdo sea una %aria)le
3 < 23; //->>?> O @o Gue se encuentre del lado i(Guierdo debe ser una //,ariable
Ja$ Aue tener en cuenta el ti1o de datos Aue estemos mane8ando. 2o es 1osi)le asignar un ti1o de datos a una %aria)le Aue solo ace1te otra clase. Por e8em1lo< no 1odemos asignar %alores decimales a una %aria)le ti1o entero
int x < 62#D7; !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 1ueden tener nom)res Aue descri)an su contenido. Eso sim1li9ica muc:o la tarea a la :ora de 1rogramar. -dem,s< esto 1odra a$udar a reducir la cantidad de comentarios. -3n as< Aueda en el 1rogramador elegir Aue clase de nom)res utilizar. Por e8em1lo< 1ara %aria)les de tem1eratura< se 1odran utilizar los siguientes nom)res
t temp temperatura
*4
temp*uarto temperatura*uarto
;a 1rimer letra tiene Aue ser un car,cter en min3sculas< las siguientes 1ueden ser 1r,cticamente cualAuier cosa. -3n as< no se admiten acentos en ninguna 1arte del cdigo. -4aria-les de Progra(a Processing< como lengua8e< :a construido %aria)les mu$ 3tiles Aue $a %ienen 1reO1rogramadas< a 9in de 9acilitarle el tra)a8o al usuario. =e las denomina $ariables del programa o $ariables del sistema. El anc:o $ el alto de la %entana de re1resentacin est,n almacenadas como %aria)les denominadas Nidth #ancho# $ hei'ht #alto#< res1ecti%amente. =i el 1rograma no inclu$e si(e()< 1or de9ecto Nidth $ hei'ht adAuieren el %alor de *...
println(Nidth 4 , 4 hei'ht); 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 1rograma en di9erentes escalas $ Aue estas sean 1ro1orcionales.
si(e(6//, 6//); ellipse(Nidth * /#3, hei'ht * /#3, Nidth * /#::, hei'ht * /#::); line(Nidth * /#3, /, Nidth * /#3, hei'ht);
*&
&nidad 8
5ate(1ticas' ,unciones /rit(!ticas

4 (suma), 5 (resta), * (multiplicacin), / (di,isin), P (mdulo), () (par%ntesis) 44 (incremento), O (decremento), 4< (asi'nar de suma), 5< (asi'nar resta), *< (asi'nar multiplicacin), /< (asi'nar di,isin), 5 (ne'ati,o) ceil(), !loor(), round(), min(), max()
5ener am1lios conocimientos en matem,ticas 1uede ser im1ortante a la :ora de 1rogramar. =in em)argo< no es necesario ser un )asto conocedor de la misma 1ara dis9rutar de la 1rogramacin. Ja$ muc:as 9ormas $ estilos 1ara 1rogramar< $ cada Auien elige indi%idualmente a Aue as1ectos otorgarles un ma$o grado de minuciosidad $ a cuales descuidarlos un 1oco. Es mu$ com3n Aue aAuellos Aue tu%ieron una cantidad ele%ada de matem,ticas en la escuela @1or e8em1lo< en orientaciones en ciencias naturales o en alguna tcnicaC se sientan atrados al %er su matem,tica con%ertida en mo%imiento. 2o o)stante< no es necesario ser un %erdadero conocedor. Processing es un lengua8e Aue se 1resta a la matem,tica desde un as1ecto m,s tranAuilo. =i )ien 1ueden realizarse com1le8as o1eraciones< tam)in 1ueden lograrse resultados similares con una matem,tica m,s intuiti%a. En esta clase de manuales< se e61lican 9unciones aritmticas sencillas 1ara lograr grandes resultados< 1uesto 9unciones de ma$or com1le8idad caen 9uera de los o)8eti%os de este li)ro. -/rit(!tica En 1rogramacin< las 1ro1iedades %isuales de una imagen son asignadas 1or n.(eros. Esto Auiere decir Aue 1odemos controlarlas de 9orma aritmtica. El siguiente es un claro e8em1lo de eso
int 'risMal < 630; !ill('risMal); rect(6/, 6/, 33, 33); '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 o1eradores de suma< resta< multi1licacin $ di%isin< 1odemos controlar< 1or e8em1lo< la 1osicin de los elementos. El signo 4 se utiliza 1ara la suma< el signo O 1ara la resta< el signo * 1ara la multi1licacin $ el signo / 1ara la di%isin.
int a < 0/; line(a, /, a, hei'ht); a < a 4 ./; //1si'na K/ a la ,ariable a stro)eIei'ht(.); 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
2.
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< *< / $ < 1osi)lemente sean mu$ 9amiliares< 1ero el signo P es muc:o m,s e6tico. El o1erador P es el de mdulo. 'etermina cuando un n3mero es di%idido 1or otro< o sea< da como resultado el resto del mismo. El n3mero a la derec:a es di%idido 1or el Aue 1ongamos a la izAuierda. 'e%ol%er, como resultado el resto de la o1eracin.
E61resin
7 P 0 7 P 2 03 P .
0esultado
/ 6 0
E61licacin El 3 solo entra tres %eces en el &< no so)ra nada. El 2 solo entra cuatro %eces en el &< so)ra *. El 4 entra oc:o %eces en el 3/< so)ra 3.
=in muc:os 1ro)lemas< 1uede e61licarse m,s claramente con un cuento. !uatro 1ersonas est,n :am)rientas $ %an a comer 1anes a un restaurante. =i :a$ solo 3/ 1anes< entonces esas 4 1ersonas solo 1odr,n comer 4 1anes cada uno< $ so)rar,n 3 1anes. Eso Aue so)ra es el resultado del mdulo. Ja$ muc:os usos 1ara el mdulo< como 1or e8em1lo sa)er cuando un n3mero es 1ar o im1ar. =in em)argo< en Processing es mu$ com3n utilizarlo 1ara mantener a los n3meros en rango. Por e8em1lo< si una %aria)le sigue increment,ndose @*< 2< 3< 4< /< "< +< 4...C< el mdulo 1uede con%ertirla en una secuencia. Fn incremento continuo 1uede con%ertirse en un ciclo entre . $ 3 1or a1licar P 4
x 0 1 2 3 4 5 6 7 8 9 10 __________________________________________________________________________ x%4 0 1 2 3 0 1 2 3 0 1 2
Muc:os e8em1los a lo largo de las e61licaciones usar,n el mdulo de esta 9orma. -l tra)a8ar con o1eraciones matem,ticas $ %aria)les< es im1ortante tener en claro Aue ti1o de datos estamos mane8ando. ;a com)inacin de dos enteros @ intC nos dar, como resultado otro entero. ;a com)inacin de dos decimales @!loatC siem1re nos dar, como resultado un decimal. Pero la com)inacin de un entero @ intC con un decimal @!loatC siem1re nos dar, un n3mero decimal< a 1esar de la o1eracin diera un resultado e6acto. Es im1ortante ser cuidadoso al momento de com)inar ti1os de datos 1ara e%itar errores
2*
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 im1ortante 1restar atencin a algunos conce1tos matem,ticos< como 1or e8em1lo el conce1to de lmite< donde un n3mero di%idido 1or cero tiende a infinito. En esos casos el 1rograma 1roducir, un error
int a < /; int b < 62 / a; //->>?> O -xcepcin Catem"ticaF producida por el cero#
-Prioridad en el 3+erador9 /gru+acin ;a 1rioridad del ordenador determina Aue o1eraciones se realizan antes )ue otras. Esto es de gran im1ortancia $a Aue 1uede ser determinante 1ara nuestro resultado. Por e8em1lo< la e61resin 0 4 . * 3< nos dar, como resultado 20< 1uesto Aue tiene 1rioridad la multi1licacin. Primero< . * 3 resultar, en 2/ $ a continuacin se le sumar, 0< dando 1or resultado 20. ;a 1rioridad 1uede ser cam)iada agregando 1arntesis. =i tu%iramos la e61resin (0 4 .) * 3< entonces la 1rioridad estara en la suma< dando como resultado 9inal 3/.
x < 0 4 . * 3; ; < (0 4 .) * 3 //1si'na 20 a la ,ariable //1si'na 03 a la ,ariable
;a siguiente ta)la< a modo e61licati%o< muestra Aue elementos tiene 1rioridad so)re otros. =iendo< 1ues< Aue los Aue se encuentran mas arri)a< tiene mas 1rioridad Aue los Aue est,n de)a8o
Multi1licati%os -diti%os -signacin * 4 < / 5 P
-/tajos !uando 1rogramamos< recurrimos muc:o a estructuras cclicas. Muc:as %eces es necesario utilizar ata8os de escritura 1ara reducir el tamaGo del cdigo $ Aue sea mas legi)le. El o1erador de incremento es 44< mientras Aue el de decremento es 55. -m)os son usados como ata8os de suma $ resta.
int x < 6; x44; 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 e61resin< solo cam)iaremos de lugar el o1erador de incrementoBdecremento
int x < 6; println(44x); println(x); //Bmprime 2 //Bmprime 2
-l asignar el o1erador de suma con el o1erador de asignacin @ 4<C o)tendremos el o1erador de suma
Ignacio Buioli | Jaime Prez Marn 22
asignada. En el caso de com)inar el de resta con el de asignacin @ 5<C o)tendremos el o1erador de resta asignada
int x < 6; 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 o1erador de multi1licacin con el o1erador de asignacin @ *<C o)tendremos el o1erador de multi1licacin asignada. En el caso de com)inar el de di%isin con el de asignacin @ /<C o)tendremos el o1erador de di%isin asignada
int x < .; 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 o1erador de negacin @5C es utilizado cuando deseamos cam)iar el signo @1ositi%oBnegati%oC de alg3n n3mero
int x < 3; x < 5x; println(x); //-Gui,ale a x < x * 56 //Bmprime 53
-:i(itando ;.(eros ;as 9unciones ceil()< !loor()< round()< min() $ max() son utilizadas 1ara 1er9eccionar las o1eraciones matem,ticas. ;a 9uncin ceil()< redondea un n3mero decimal con%irtindolo en un entero. ;o con%ierte en el %alor igual o ma$or. 0edondea :acia arri)a.
int 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. 0edondea :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< de1endiendo el decimal. =i el decimal es menor a ./< entonces redondea :acia a)a8o. =i el decimal es ma$or o igual a ./< redondea :acia arri)a.
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 ti1o decimales. - 1esar de no ser mu$ 3til< 1uede utilizarse.
!loat ; < round(2#6); //1si'na 2#/ a ;
;a 9uncin min() determina el n3mero mas c:ico en una secuencia de n3meros. ;a 9uncin max() determina el n3mero m,s grande en una secuencia de n3meros. Ideal 1ara determinar el n3mero ma$o o menor de una secuencia. -m)as 9unciones 1ueden admitir dos o tres 1ar,metros.
int u < min(3, 7); !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 1rograma corre< lo :ace en el orden en Aue u)icamos la lneas. Primero la 1rimer lnea< luego la segunda< luego la tercera< $ as. El 1rograma 9inaliza cuando lee la 3ltima lnea. Muc:as %eces< $ 1ara agregar inters< es necesario Aue esta lectura se Auie)re. - ese orden suele llam,rselo flu'o. E6isten< entonces< estructuras de control 1ara rom1e el 9lu8o del 1rograma. -E%+resiones =elacionales PDu es la %erdadQ Esta gran cuestin 9ilos9ica es mu$ sencilla de res1onder en la 1rogramacin. =encillamente< si algo es true @%erdaderoC es una verdad< $ si algo es !alse @9alsoC es todo lo contrario. =e trata tan solo de una nocin lgica< no es necesario Aue se trate realmente de una K%erdadL. =in em)argo< si en la lgica del 1rograma< eso es una %erdad< entonces el 1rograma de%ol%er, un %alor true< de lo contrario de%ol%er, un %alor !alse. 5an sencillo como un * $ un ..
E61resin
0 0 3 3 9 8 9 8 3 3 0 0
E%aluacin
true !alse !alse true
!ualAuiera de estas e61resiones 1uede leerse en es1aGol. PEl n3mero tres es menor al n3mero cincoQ =i la res1uesta es KsiL e61resa el %alor true @%erdaderoC. -l com1ararse dos %alores con una e61resin relacional< solo 1ueden dar dos resultados 1osi)les true o !alse. - continuacin< una ta)la con los %alores relacionales $ su signi9icado
71erador
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 com1rar dos %alores con una e61resin 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 o1erador de igualdad @ <<C determina si los dos %alores Aue se e%al3an son eAui%alentes. 'e%uel%e true si la igualdad se cum1le. En cam)io< el o1erador de di9erenciacin @ Q<C e%al3a si dos %alores no son eAui%alentes. 'e%uel%e true si la desigualdad se cum1le.
println(0 << 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 1ermiten a un 1rograma sa)er Aue lnea de cdigo e8ecutar $ cuales no. ;as lneas de cdigo solo ser,n K%isi)lesL 1ara el 1rograma si se cum1le una condicin. Permiten al 1rograma di9erenciar acciones de1endiendo el %alor de %aria)les. Por e8em1lo< el 1rograma di)u8a una lnea o una eli1se de1endiendo el %alor de una %aria)le. ;as estructura BH es usada en Processing 1ara tomar esas decisiones
i!(condicin)R acciones; S
;a condicin de)e ser una e61resin Aue se resuel%e con true o !alse. =i la condicin es true< el cdigo Aue este desde la a1ertura del corc:ete @ R C :asta el cierre del mismo @ S C< se e8ecuta. En caso de ser !alse< el 1rograma directamente no KleeL las acciones. ;os siguientes tres e8em1los 1retenden mostrar el 9uncionamiento de la estructura BH. =e recurre al mismo cdigo< solo Aue con di9erentes %alores la %aria)le x
//@as condiciones son x 8 6// ; x 9 6// //*omo el ,alor de x es 63/ //se 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/);
2"
//@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 es1ec9ico de Aue la condicin de como resultado !alse< $ estemos deseando Aue a3n as< ocurra alg3n e%ento< se utilizar,< como agregado a la estructura BH< la estructura -@$-. ;a estructura -@$- e6tiende a la estructura BH< 1ermitiendo agregar acciones cuando la condicin de%uel%e un resultado !alse.
int x < 7/; //*omo x ,ale 7/, 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 1ueden ser KencadenadasL una dentro de otra 1ara tener com1leto control de las lneas de cdigo. En el siguiente e8em1lo se e%al3a si el %alor es ma$or a *..< $ luego de eso si es ma$or a 3...
int x < .2/; i! (x 8 6//)R //*ondicin para 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
2+
-3+eradores :gicos ;os o1eradores lgicos se utilizan al com)inar dos o mas e61resiones relacionales $ 1ara in%ertir los %alores lgicos. ;os sm)olos de los o1eradores lgicos corres1onden a los conce1tos de N< 7 $ 27.
71erador
UU TT Q
=igni9icado
V ? N?
;a siguiente ta)la muestra todas las o1eraciones 1osi)les $ los resultados

E61resin
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 o1erador lgico 7 @TTC< :ace Aue el %alor sea un true solo si una 1arte de la e61resin es true @%erdaderaC.
int a < 6/; int b < 2/; i!((a 8 3 ) TT (b 9 0/))R
//$i a es ma;or a 3 o b es menos //a 0/ 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 1rocesos de lgica se desco(+onen en +asos. ;os 1arntesis son utilizados 1ara delimitar las com1onentes $ as si(+lificar el tra)a8o. En las siguientes lneas se muestra un )re%e 1aso a 1aso de como de)e inter1retarse
Aaso 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 o1erador lgico N @UUC< :ace Aue el %alor sea true solo si am)as e61resiones son true.
int a < 6/; int b < 2/; i!((a 8 3 ) UU (b 9 0/))R line(2/, 3/, D/, 3/);
//$i a es ma;or a 3 ; b es menos //a 0/ dibu ar una //lnea# *omo ambas condiciones
24
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 o1erador lgico 27 @QC es una marca. =im1lemente invierte el %alor lgico. Por e8em1lo< si se trata de un %alor true< al escri)ir Qtrue< estaramos con%irtiendo su %alor en !alse. =olo es 1osi)le a1licarlo a una %aria)le del ti1o boolean.
boolean b < true; println(b); 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
2&
/+!ndice de Estructura I,, E:SE * E:SE-I,
3.
&nidad >
$ontrol' =e+eticin
!or
;a )re%e :istoria Aue 1oseen los ordenadores nos remonta a su antigua 9uncin Aue era realizar c,lculos %elozmente. -ctualmente< las com1utadoras emergen como m,Auinas Aue 1ueden realizar ecuaciones matem,ticas mu$ com1le8as a una incre)le %elocidad. ;os antiguos ordenadores eran distri)uidos como m,Auinas Aue 1oda realizar 1recisas $ r,1idas ecuaciones re1etiti%as. -Iteracin ;as estructuras re1etiti%as son encargas de 1roducir iteraciones. Es decir< a tra%s de 1ocas lneas de cdigo se 1uede re+etir< 1r,cticamente< in9initas %eces una misma lnea de cdigo. Esto a$uda a un me8or rendimiento del 1rograma< 1ero es1ecialmente a un me8or rendimiento del 1rogramador< Aue con sim1les estructuras 1uede reducir nota)lemente el tiem1o $< 1or ende< errores. =e utiliza una estructura denominada estructura H?>< la cual es encargada de re1etir un ciclo las %eces Aue Aueramos. En el siguiente e8em1lo se muestra el original cdigo< com1uesto de unas *4 lneas< $ la %ersin con el ciclo H?> com1uesto tan solo de 4
!digo 7riginal
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 utilizando un #70
si(e(2//, 2//); !or (int i < 2/; i 9 63/; i 4< 6/) R line(i, 2/, i, 6D/); S
;a estructura H?> 1er9ecciona las re1eticiones< 1udiendo sim1li9icarse su cdigo ),sico en esta sim1le $ 9uncional estructura
!or(iniciador, condicin, actuali(acin)R acciones; S
;os 1arntesis asociados a esta estructura corres1onden a tres acciones internas iniciador< condicin $ actuali(acin. ;as acciones dentro del )loAue del cdigo se e8ecutan constantemente< siem1re $ cuando la condicin de%uel%a un true @%erdaderoC. El iniciador asigna el %alor inicial de la iteracin< mientras Aue la actuali(acin modi9ica el %alor del iniciador con cada )ucle. ;os 1asos en un H?> son los siguientes
*O El iniciador comienza a e8ecutarse 2O ;a condicin e%al3a si es true o false 3O =i la condicin es true< contin3a en el 1aso 4< si es !alse< 1asa al 1aso " 4O E8ecuta las acciones en el )loAue /O E8ecuta la actualizacin $ 1asa al 1aso 2
Ignacio Buioli | Jaime Prez Marn 3*
"O =ale de la estructura $ contin3a e8ecutando el resto del 1rograma
;os siguientes e8em1los muestran di%ersas 9ormas de uso de la estructura H?> en un 1rograma
// -l iniciador esWint i < 2/W, la condicin esWi 9 D/W, // ; la actuali(acin es Wi 4< 3W# *abe notar Gue el // punto5;5coma termina los dos primeros elementos !or (int i < 2/; i 9 D/; i 4< 3) R // -sta lnea continuar" 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 /nidada ;a estructura H?> 1roduce re1eticiones en una dimensin. -nidando iteraciones 1odemos crear e9ectos sumamente interesantes. Por e8em1lo< teniendo tan solo dos coordenadas de 1untos< si los anidamos en una estructura H?>< 1odemos cam)iar una sim1le dimensin a una 9igura de dos dimensiones.
!or (int ; < 6/; ; 9 6//; ; 4< 6/) R point(6/, ;); S
!or (int x < 6/; x 9 6//; x 4< 6/) R point(x, 6/); S
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 1ara crear 9ondos< te6turas $ los conocidos patterns. ;os n3meros 1roducidos 1or las %aria)les de control de re1eticiones 1ueden a1licarse a la 1osicin< al color< al tamaGo< a la trans1arencia o a cualAuier otra cosa de atri)uto %isual.
!ill(/, K:); no$tro)e(); smooth(); !or (int ; < 56/; ; 9< 6//; ; 4< 6/) R !or (int x < 56/; x 9< 6//; x 4< 6/) R ellipse(x 4 ;/D#/, ; 4 x/D#/, 63 4 x/2, 6/); S S no$tro)e(); !or (int ; < /; ; 9 6//; ; 4< 6/) R !or (int x < /; x 9 6//; x 4< 6/) R !ill((x4;) * 6#.); rect(x, ;, 6/, 6/); S S !or (int ; < 6; ; 9 6//; ; 4< 6/) R !or (int x < 6; x 9 ;; x 4< 6/) R line(x, ;, x4:, ;4:); line(x4:, ;, x, ;4:); S S
-,or(ato de las Estructuras Es im1ortante el es1acio entre las estructura 1ara Aue sea legi)le $ clara la lectura de las mismas. ;as lneas de cdigo dentro de las mismas suelen lle%ar ta)ulaciones. !uando el 1rograma se :ace largo una clara lectura es ideal en esta clase de estructuras. En este li)ro utilizamos la siguiente con%encin de es1acios en )lanco
int x < 3/; i! (x 8 6//) R line(2/, 2/, D/, D/); S else R line(D/, 2/, 2/, D/); S
;a siguiente es una alternati%a de 9ormato usada mu$ 9recuentemente

int x < 3/; i! (x 8 6//) R
33
line(2/, 2/, D/, D/); S else R line(2/, D/, D/, 2/); S
Es esencial utilizar un 9ormato lim1io 1ara mostrar la 8erarAua del cdigo. El entorno de Processing tratar, de a8ustar su cdigo a medida de Aue escri)e. -3n as< en la seccin ,ools siem1re 1uede utilizarse la :erramienta -Auto .ormat/ 1ara lim1iar el cdigo cuando se lo necesite.
34
/+!ndice de Estructura ,3=
3/
&nidad ?
,or(as' 4!rtices
be'in$hape(), end$hape(), ,ertex(), cur,eMertex(), be(ierMertex()
;as 9iguras geomtricas introducidas en la unidad .ormas: 0oordenadas y Primiti$as1 consiguen un e9ecto %isual altamente 1otente. 2o o)stante< un 1rogramador 1uede %alerse de sim1les ecuaciones Aue le 1ermiten crear 9iguras mas com1le8as. Na no estamos :a)lando de 9iguras 1rimiti%as< Aue solo reci)en coordenadas en 6 $ en $< sino de 9iguras de ma$or com1le8idad construidas a )ase de %rtices.
Estas 9iguras son realmente sim1les en com1aracin a las 1osi)ilidades Aue o9rece. En los %ideoO8uegos actuales< se utilizan a1ro6imadamente una media de 1<000 %rtices< lo Aue con%ierte a esta :erramienta como una 9uncin im1rescindi)le en 1rogramacin. -4!rtice Para crear una 9igura :ec:a con %rtices< utilizaremos< en 1rinci1io< la 9uncin be'in$hape()< des1us de9iniremos cada 1unto @%rticeC con la 9uncin ,ertex()1 $< 9inalmente< com1letaremos la 9igura con end$hape(). ;as 9unciones de be'in$hape() $ end$hape() siem1re de)en usarse en 1ares. ;os 1arntesis de la 9uncin ,ertex() ace1tan dos 1ar,metros< una coordenada de 6 e $
,ertex(x, ;)
Por de9ecto< la 9igura Aue se 9orme tendr, un relleno )lanco con contorno en negro. ;as 9unciones !ill()< stro)e()1 noHill()1 no$tro)e() $ stro)eIei'ht()< introducidas en la unidad .ormas: 0oordenadas y Primiti$as< son 3tiles 1ara controlar la %isualizacin de la 9igura. Para cerrar la 9igura< 1uede usarse la constante *@?$- en la 9uncin end$hape().
noHill(); be'in$hape(); ,ertex(0/, 2/); ,ertex(D3, 2/); ,ertex(D3, K3); ,ertex(0/, K3); end$hape(); noHill(); be'in$hape(); ,ertex(0/, 2/); ,ertex(D3, 2/); ,ertex(D3, K3); ,ertex(0/, K3); end$hape(*@?$-);
El orden en Aue se escri)en los %rtices ca(-ia la 9orma en la Aue la 9igura es di)u8ada. El siguiente e8em1lo es e6actamente igual Aue el e8em1lo anterior< solo Aue se :an in%ertido el tercer %rtice 1or el cuarto
3"
noHill(); be'in$hape(); ,ertex(0/, 2/); ,ertex(D3, 2/); ,ertex(0/, K3); ,ertex(D3, K3); end$hape();
-Gadiendo mas %rtices $ 9ormatos se 1uede 1otenciar de manera incre)le la 1otencia %isual. 5am)in< como se %io antes< se 1uede utilizar la estructura H?> 1ara me8orar el sistema.
!ill(/); no$tro)e(); smooth(); be'in$hape(); ,ertex(6/, /); ,ertex(6//, 0/); ,ertex(7/, K/); ,ertex(6//, K/); ,ertex(6/, 7/); ,ertex(3/, ./); end$hape(); noHill(); smooth(); stro)eIei'ht(2/); be'in$hape(); ,ertex(32, 27); ,ertex(K., 03); ,ertex(:/, 32); ,ertex(:6, K3); ,ertex(./, :7); ,ertex(67, K3); end$hape(); no$tro)e(); !ill(/); be'in$hape(); ,ertex(./, 6/); !or (int i < 2/; i 9< 6//; i 4< 3) R ,ertex(2/, i); ,ertex(0/, i); S ,ertex(./, 6//); end$hape();
Fna 9igura com1le8a 1uede ser com1uesta 1or miles de %rtices< 1ero :a$ Aue tener en cuenta Aue muc:os %rtices 1odran :acer m,s lento al 1rograma. -Puntos * :@neas ;a 9uncin be'in$hape() 1uede ace1tar di%ersos 1ar,metros Aue sir%en 1ara de9inir datos en los %rtices. ;os mismos %rtices 1ueden ser usados 1ara crear 9iguras sin relleno o lneas continuas. ;as constantes A?BNT$ $ @BN-$ son usadas 1ara de9inir la con9iguracin de 1untos $ lneas dentro de una 9igura.
3+
//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 1odemos con9igurar 1untos $ lneas< sino Aue tam)in for(as. Ftilizando las constantes T>B1NX@-$1 T>B1NX@-Y$T>BA1 T>B1NX@-YH1N1 L&1D$< $ L&1DY$T>BA con la 9uncin be'in$hape(). En estos casos necesitaremos ser muc:o m,s cuidadoso en el ,m)ito es1acial de la 9igura $ el orden en Aue 1onemos los %rtices.
//*onecta cada 'rupo de tres ,%rtices be'in$hape(T>B1NX@-$); ,ertex(K3, 0/); ,ertex(6/, 2/); ,ertex(K3, 3/); ,ertex(2/, :/); ,ertex(7/, K/); ,ertex(03, D3); end$hape(); //*omien(a con el tercer ,%rtice, conecta todos los //,%rtices subsecuentes a los dos primeros be'in$hape(T>B1NX@-Y$T>BA); ,ertex(K3, 0/); ,ertex(6/, 2/); ,ertex(K3, 3/); ,ertex(2/, :/); ,ertex(7/, K/); ,ertex(03, D3); end$hape(); be'in$hape(T>B1NX@-YH1N); ,ertex(6/, 2/); ,ertex(K3, 0/); ,ertex(K3, 3/); ,ertex(7/, K/); ,ertex(6/, 2/); end$hape(); be'in$hape(L&1D$); ,ertex(0/, 23); ,ertex(D3, 0/); ,ertex(D3, 3/); ,ertex(0/, .3); ,ertex(0/, :/); ,ertex(D3, :3);
34
,ertex(D3, D3); ,ertex(0/, D/); end$hape(); be'in$hape(L&1DY$T>BA); ,ertex(0/, 23); ,ertex(D3, 0/); ,ertex(0/, .3); ,ertex(D3, 3/); ,ertex(0/, :/); ,ertex(D3, :3); ,ertex(0/, D/); ,ertex(D3, D3); end$hape();
-$urvas ;a 9uncin ,ertex() 9unciona mu$ )ien 1ara crear 9iguras a )ase de lneas< 1ero si Aueremos crear una cur%a< necesitamos %alernos de las 9unciones cur,eMertex() $ be(ierMertex(). Estas 9unciones 1ueden usarse entre be'in$hape() $ end$hape()< siem1re $ cuando be'in$hape() no tenga ning3n 1ar,metro. ;a 9uncin cur,eMertex() es usada 1ara conectar dos 1untos con una cur%a. =e le en%an dos 1ar,metros
cur,eMertex(x, ;)
El 1rimero $ el 3ltimo cur,eMertex()< 8unto con be'in$hape() $ end$hape()< act3an como 1untos de control. ;a cur%atura de cada segmento es calculada 1or los cur,eMertex() Aue :a$ en medio de los 1untos de control
smooth(); noHill(); be'in$hape(); cur,eMertex(2/, 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 1osicin de dos 1untos de control $ de un 1unto de ancla8e.
be(ierMertex(cx6, c;6, cx2, c;2, x, ;)
El 1rimer be(ierMertex() se u)ica 8unto con el be'in$hape(). -nteriormente al be(ierMertex()< de)emos 1oner un ,ertex()< Aue de9inir, el 1rimer 1unto ancla. ;a cur%a se 9orma entre 1unto ,ertex() $ las coordenadas x e ; Aue se le en%an a be(ierMertex(). ;os 1rimeros cuatro 1ar,metros restantes de be(ierMertex() corres1onden al control de la cur%atura de la 9igura.
noHill(); be'in$hape(); ,ertex(02, 2/); be(ierMertex(D/, 3, end$hape();
D/, K3,
0/, K3);
//M6 //*6, *2, M2
3&
Para cur%as mas com1le8as< es necesario agregar una ma$or cantidad de be(ierMertext()< $ 1ar,metros de 9ormato
smooth(); noHill(); be'in$hape(); ,ertex(63, 0/); 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 ti1o Bzier suele ser mu$ com1licado< tan solo 1ara di)u8ar unas 1ocas cur%as. 'e1endiendo la di9icultad de lo Aue se 1retenda di)u8ar< a %eces es 1re9eri)le o1tar 1or la o1cin Aue sea m,s sencilla. =in em)argo< :a$ contri)uciones de usuarios mu$ 3tiles Aue 1odran ser de gran a$uda. Entre una de ellas se encuentra la Bzier 5ool @Aue 1uede descargarse desde http:##processing.org#reference#tools# C la cual nos da un sim1le entorno de tra)a8o %isual< donde 1odemos di)u8ar cur%as Bzier como si 9uese un 1rograma de gr,9icos %ectoriales @como -do)e Illustrator o InHsca1eC. -l 9inalizar nuestro di)u8o< 1odemos co1iarlo $ 1egarlo en nuestro entorno de tra)a8o en 9orma de cdigo. ;o con%ierte en una :erramienta de suma utilidad cuando se 1retende tra)a8ar con cur%as del ti1o Bzier.
4.
/+!ndice de 4!rtices
4*
/+!ndice de $urvas
42
&nidad A
5ate(1ticas' $urvas
sG(), sGrt(), poN(), norm(), lerp(), map()
;as ecuaciones de matem,tica ),sica 1ueden ser usadas 1ara di-ujar la +osicin * varios atri-utos de una 9orma. Esas ecuaciones :an sido discutidas 1re%iamente. Estas ecuaciones se utilizan 1ara acelerar o desacelerar las 9ormas en mo%imiento $ su recorrido a )ase de cur%as. -E%+onentes * =a@ces ;a 9uncin sG() se utiliza 1ara calcular el cuadrado de un n3mero. 7 sea< ese mismo n3mero multi1licado 1or s mismo. !omo )ien se sa)e< aunAue el n3mero sea negati%o< de%ol%er, un resultado 1ositi%o. -ce1ta solo un %alor como 1ar,metro
sG(,alor)
El $alor 1uede ser cualAuier n3mero. !uando sG() es usado< el %alor 1uede ser asignado a una %aria)le
!loat a < sG(6); !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 1ara calcular la raiz cuadrada de un n3mero. 7 sea< el numero Aue multi1licado 1or s mismo da determinado %alor. !omo )ien se sa)e< aunAue el n3mero sea negati%o< de%ol%er, un resultado 1ositi%o. -ce1ta solo un %alor como 1ar,metro
sGrt(,alor)
El $alor 1uede ser cualAuier n3mero. !uando sGrt() es usado< el %alor 1uede ser asignado a una %aria)le
!loat a < sGrt(:3:6); !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 1ara calcular un n3mero ele%ado 1or el e61onente Aue uno desee. -ce1ta dos 1ar,metros
poN(nEmero, exponente)
El n2mero es aAuel n3mero a multi1licar. El e(ponente es la cantidad de %eces Aue se %a a multi1licar.

!loat !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 @e6ce1to .C Aue es ele%ado a la . da como resultado *. =i se ele%a 1or * da como resultado el mismo n3mero
!loat a < poN(D, /); !loat b < poN(0, 6); !loat c < poN(., 6); //1si'na 6 //1si'na 0 //1si'na .
43
-;or(ali2acin * 5a+eo Ja$ %eces en Aue necesitamos con%ertir una serie de n3meros en un rango de ... a *... Esto es a lo Aue se denomina Normali3aci*n. !uando n3meros entre ... $ *.. son multi1licados entre s< nunca dar, un resultado menor a ... ni ma$or a *... Esto 1ermite multi1licar un n3mero 1or otro o 1or s mismo tantas %eces como Aueramos sin Aue se salga del rango. !omo la normalizacin suele de%ol%er n3meros decimales< utilizaremos %aria)les del ti1o !loat si lo reAuerimos. Para normalizar un n3mero< de)eremos di%idirlo 1or el m,6imo %alor del rango
(alor Inicial
/#/ 6/2#/ 233#/
!,lculo
/#/ / 233#/ 6/2#/ / 233#/ 233#/ / 233#/
(alor 2ormalizado
/#/ /#. 6#/
Podemos< 1ues< sim1li9icar la tarea con la 9uncin norm(). Esta ace1ta tres 1ar,metros
norm(,alor, menor, ma;or)
El $alor es el n3mero a normalizar en uno entre ... $ *... El menor $ el mayor son el n3mero menor $ el ma$or Aue com1onen el rango a utilizar. =i el resultado est, 9uera de rango resultar, en n3mero menor Aue . o ma$or Aue *.
!loat x < norm(/#/, /#/, 233#/); !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 e8em1lo< si normalizamos un n3mero su %alor se encontrar, entre ... $ *..< al multi1licar ese n3mero 1or /.... o)tendremos un %alor normalizado entre un rango de ... $ /..... Para normalizar n3meros Aue est,n entre ... $ *..< a un rango de 2.... $ 2/...< es necesario multi1licar 1rimero 1or /. $ luego sumarle 2...
0ango Inicial
/#/ a 6#/ /#/ a 6#/ /#/ a 6#/
0ango 'eseado
/#/ a 233#/ 56#/ a 6#/ 52/#/ a :/#/
!,lculo
x * 233#/ (x * 2#/) 5 6#/ (x * D/#/) O 2/#/
;a 9uncin lerp() es usada 1ara sim1li9icar esos c,lculos. 5iene tres 1ar,metros
lerp(,alor6, ,alor2, amt)
El $alor4 $ el $alor5 de9inen el rango al cual se Auiere normalizar un %alor normalizado entre ... $ *... El amt es aAuel %alor normalizado entre ... $ *... Es decir< :ace Aue las con%ersiones %istas en la ta)la anterior sean mas r,1idas $ sencillas 1ara el usuario.
!loat x < lerp(52/#/, :/#/, /#/); !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() 1ermite con%ertir directamente un n3mero Aue est, en un rango< a otro rango. Esta 9uncin utiliza tres 1ar,metros
map(,alor, menor6, ma;or6, menor2, ma;or2)
44
El $alor es el n3mero a reOma1ear. =imilar a la 9uncin norm !< menor4 $ mayor4 de9inen el rango en Aue se encuentra ese %alor. El menor5 $ mayor5 de9inen el nue%o rango.
!loat x < map(2/#/, /#/, 233#/, 56#/, 6#/); !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 e61onenciales son 3tiles 1ara crear cur%as mu$ sim1les $ r,1idamente. -l normalizar %alores de la 9uncin poN()< 1odemos o)tener r,1idamente cur%as ascendentes $ descendentes< con n3meros Aue no e6ceden el %alor de *. ;a ecuacin tendra la siguiente 9orma
; < xn
'onde el %alor de ( sera un %alor normalizado entre ... $ *..< $ el %alor de n un n3mero entero. El siguiente es un sim1le e8em1lo de como se u)ican estos %alores en una grilla de e8es cartesianos
Z /#/ /#2 /#. /#: /#D 6#/ V /#/ /#//6: /#/23: /#627: /#./7: 6#/
- continuacin se muestran una serie de e8em1los de la ca1acidad de las ecuaciones e61onenciales< con normalizacin $ utilizando ciclos H?>.
!or (int x < /; x 9 6//; x44) R !loat n < norm(x, /#/, 6//#/); //>an'o de /#/ a 6#/ !loat ; < poN(n, .); //*alcula la *ur,a ; *< 6//; //>an'o de /#/ a 6//#/ point(x, ;); S !or (int x < /; x 9 6//; x44) R !loat 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
4"
/+!ndice de $urvas 5ate(1ticas
4+
&nidad B
$olor' $olor +or ;.(eros

color, color(), colorCode()
5ra)a8ar con colores a tra%s de una 1antalla es di9erente a :acerlo en 1a1el o lienzo. Mientras Aue se a1liAuen las mismas reglas< el conocimiento de los 1igmentos 1ara 1intar @ro8o cadmio< azul 1rusiano< ocre tostadoC $ 1ara im1rimir @cian< amarillo< magentaC no necesitan ser traducidos 1ara crear colores digitales. Por e8em1lo< unir todos los colores en un monitor de ordenador tiene como resultado el color )lanco< mientras Aue unir todos los colores con 1intura tiene como resultado el color negro @o un marrn e6traGoC. Fn monitor de ordenador mezcla los colores con luz. ;a 1antalla es una su1er9icie negra $ se aGade luz coloreada. Esto se conoce como colores aditi%os< en contraste con el modelo de color sustracti%o 1ara tinta en 1a1el $ lienzo. Esta imagen e61one la di9erencia entre los dos modelos
*olor aditi,o
*olor sustracti,o
;a 9orma m,s com3n de es1eci9icar un color en el ordenador es mediante %alores 0EB. Fn %alor 0EB a8usta la cantidad de luz ro8a< %erde $ azul en un 16el de la 1antalla. =i miras de cerca la 1antalla de tu tele%isor o el monitor de tu ordenador< %er,s Aue cada 16el se com1one de tres elementos inde1endientes de luz ro8a< %erde $ azulR 1ero de)ido a Aue nuestros o8os slo 1ueden %er una cantidad limitada de detalle< los tres colores se mezclan 1ara 9ormar uno solo. ;a intensidad de cada elemento de color est, es1eci9icada con %alores entre . $ 2//< donde . es el mnimo $ 2// el m,6imo. O/juste de color En Processing< los colores est,n de9inidos 1or los 1ar,metros de las 9unciones bac)'round()< !ill() $
stro)e() bac)'round(,alor6, ,alor2, ,alor0) !ill(,alor6, ,alor2, ,alor0) !ill(,alor6, ,alue2, ,alor0, al!a) stro)e(,alor6, ,alor2, ,alor0) stro)e(,alor6, ,alor2, ,alor0, al!a)
Por de9ecto< el 1ar,metro $alue4 de9ine el com1onente de color ro8o< $alor5 el com1onente %erde $ $alue6 el azul. El 1ar,metro o1cional al9a 1ara !ill() o stro)e() de9ine la o1acidad. El %alor 2// del 1ar,metro alfa indica Aue el color es totalmente o1aco< $ el %alor . indica Aue es totalmente trans1arente @no ser, %isi)leC.
bac)'round(6K., 226, :/);
44
=elector de color Podemos seleccionar el color con el cursor sim1lemente introducir los %alores Aue deseamos.
bac)'round(627, 60/, DK); no$tro)e(); !ill(6K., 226, :/); rect(6K, 6K, ::, ::); bac)'round(627, 60/, DK); noHill(); stro)eIei'ht(.); stro)e(6K., 226, :/); rect(67, 67, :2, :2); bac)'round(66:, 670, 2/:); no$tro)e(); !ill(627, 60/, DK, 6/2); 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
4&
!or (int i < 36; i 9< 233; i 4< 36) R stro)e(2.2, 2/., .K, i); line(x, 2/, x42/, D/); x 4< 2/; S
;a o1acidad se 1uede usar 1ara crear nue%os colores mediante su1er1osicin de 9ormas. ;os colores originados de1enden del orden en Aue se di)u8en las 9ormas.
bac)'round(/); no$tro)e(); smooth(); !ill(2.2, 2/., .K, 6:/); 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 ti1o dato de color se usa 1ara almacenar colores en un 1rograma< $ la 9uncin color() se usa 1ara asignar una %aria)le de color. ;a 9uncin color() 1uede crear %alores de gris< %alores de gris con o1acidad< %alores de color $ %alores de color con o1acidad. ;as %aria)les del ti1o dato de color 1uede almacenar todas estas con9iguraciones
color('ris) color('ris, al!a) color(,alor6, ,alor2, ,alor0) color(,alor6, ,alor2, ,alor0, al!a)
;os 1ar,metros de la 9uncin color() de9ine un color. El 1ar,metro gris usado slo o con alfa< de9ine un rango de tonos de )lanco a negro. El 1ar,metro alfa de9ine la o1acidad con %alores de entre . @trans1arenteC a 2// @o1acoC. ;os 1ar,metros $alor4< $alor5 $ $alor6 de9inen %alores 1ara los distintos com1onentes. ;as %aria)les del ti1o de dato de color se de9inen $ se asignan de la misma 9orma Aue los ti1os de dato int $ !loat discutidos en la unidad 'atos (aria)les.
color 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#
'es1us de Aue una %aria)le color se :a$a de9inido< se 1uede usar como 1ar,metro 1ara las 9unciones bac)'round()< !ill() $ stro)e().
/.
color rub; < color(266, 2., 2., 6:/); color pin) < color(20K, 637, 6K:); bac)'round(pin)); no$tro)e(); !ill(rub;); rect(03, /, 2/, 6//);
=C0, DS0 Processing usa el 9ormato de color 0EB como 1redeterminado 1ara tra)a8ar< 1ero se 1uede usar en su lugar la es1eci9icacin J=B 1ara de9inir colores en 9uncin del matiz< saturacin $ )rillo. El matiz de un color es lo Aue normalmente 1iensa la gente del nom)re del color amarillo< ro8o< azul< naran8a< %erde< %ioleta. Fn matiz 1uro es un color sin diluir mu$ intenso. ;a saturacin es el grado de 1ureza en un color. (a desde el matiz sin diluir :asta el matiz com1letamente diluido< donde el color no tiene )rillo. El )rillo de un color es su relacin de luz $ oscuridad. ;a 9uncin colorCode() esta)lece el 9ormato de color 1ara un 1rograma
colorCode(modo) colorCode(modo, ran'o) colorCode(modo, ran'o6, ran'o2, ran'o0)
;os 1ar,metros de colorCode() cam)ian la 9orma en Aue Processing inter1reta el dato de color. El 1ar,metro modo 1uede ser tanto 0EB como J=B. El rango de 1ar,metros 1ermite a Processing usar %alores di9erentes al 1redeterminado @. a 2//C. En los gr,9icos de ordenador se usa 9recuentemente un rango de %alores entre ... $ *... 5anto si un 1ar,metro de un slo rango esta)lece el rango 1ara todos los colores< como si los 1ar,metros rango4< rango5 $ rango6 esta)lecen el rango de cada uno S tanto ro8o< %erde< azul como matiz< saturacin< )rillo< de1endiendo del %alor del 1ar,metro modo.
//-stablece el ran'o para los ,alores ro o, ,erde ; a(ul de /#/ a 6#/ colorCode(>X=, 6#/);
Fn a8uste 3til 1ara el 9ormato J=B es esta)lecer los 1ar,metros de rango4< rango5 $ rango6 res1ecti%amente a 3".< *.. $ *... ;os %alores de matiz desde . a 3". son los grados alrededor de la rueda de color< $ los %alores de saturacin $ )rillo desde . a *.. son 1orcenta8es. Este a8uste coincide con los %alores usados en muc:os selectores de color $< 1or tanto< :ace m,s sencilla la transicin de dato de color entre otros 1rogramas $ Processing
//-stablece el ran'o para el mati( con ,alores desde / a 0:/ ; la //saturacin ; el brillo con ,alores entre / ; 6// colorCode(\$=, 0:/, 6//, 6//);
;os siguientes e8em1los re%elan la di9erencia entre matiz< saturacin $ )rillo.

//*ambia el mati(; saturacin ; brillo constante colorCode(\$=); !or (int i < /; i 9 6//; i44) R stro)e(i*2#3, 233, 233); line(i, /, i, 6//); S //*ambia la saturacin; mati( ; brillo constante colorCode(\$=); !or (int i < /; i 9 6//; i44) R stro)e(602, i*2#3, 2/.); line(i, /, i, 6//); S
/*
//*ambia el brillo; mati( ; saturacin constante colorCode(\$=); !or (int i < /; i 9 6//; i44) R stro)e(602, 6/D, i*2#3); line(i, /, i, 6//); S //*ambia la saturacin ; el brillo; mati( constante colorCode(\$=); !or (int i < /; i 9 6//; i44) R !or (int < /; 9 6//; 44) R stro)e(602, *2#3, i*2#3); point(i, ); S S
Es 9,cil :acer transiciones sua%es entre colores cam)iando los %alores 1ara color()< !ill() $ stro)e(). El 9ormato J=B tiene una enorme %enta8a so)re el 9ormato 0EB cuando tra)a8amos con cdigos< 1orAue es m,s intuiti%o. !am)iando los %alores de los com1onentes ro8o< %erde $ azul< a menudo o)tenemos resultados ines1erados< mientras Aue estimando los resultados de los cam)ios del matiz< saturacin $ )rillo seguimos un camino m,s lgico. ;os siguientes e8em1los muestran la transicin del %erde al azul. El 1rimer e8em1lo :ace la transicin usando el 9ormato 0EB. 0eAuiere calcular los tres %alores de color< $ la saturacin del color cam)ia ines1eradamente en el centro. El segundo e8em1lo :ace la transicin usando el 9ormato J=B. =lo es necesario alterar un n3mero< $ el matiz cam)ia sua%emente e inde1endientemente de las otras 1ro1iedades del color.
//*ambio del a(ul al ,erde en !ormato >X= colorCode(>X=); !or (int i < /; i 9 6//; i44) R !loat r < :6 4 (i*/#72); !loat ' < 63: 4 (i*/#.D); !loat b < 2/. O (i*6#.0); stro)e(r, ', b); line(i, /, i, 6//); S // *ambio del a(ul al ,erde en !ormato \$= colorCode(\$=, 0:/, 6//, 6//); !or (int i < /; i 9 6//; i44) R !loat neN\ue < 2// O (i*6#2); stro)e(neN\ue, K/, D/); line(i, /, i, 6//); S
-De%adeci(al ;a notacin :e6adecimal @:e6C es una notacin alternati%a 1ara de9inir el color. Este mtodo es 1o1ular entre diseGadores Aue tra)a8an en la Ie) 1orAue est,ndares como J$1er5e6t MarHu1 ;anguage @J5M;C $ !ascading =t$le =:eets @!==C usan esta notacin. ;a notacin Je6 1ara el color codi9ica cada n3mero desde el . al 2// en un %alor de dos dgitos usando los n3meros de . a & $ las letras de - a #. 'e esta 9orma< tres %alores 0EB desde . a 2// se 1ueden escri)ir como un solo %alor :e6 de seis dgitos. Fnas 1ocas con%ersiones de e8em1lo demuestran esta notacin
0EB
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 0EB a notacin :e6 no es intuiti%a. - menudo< el %alor se toma del selector de color. Por e8em1lo< 1uedes co1iar $ 1egar un %alor :e6 desde el selector de color de Processing en tu cdigo. !uando se usan %alores de color codi9icados en notacin :e6< de)emos colocar un T antes del %alor 1ara distinguirlo dentro del cdigo.
// *di'o del tercer e emplo reescrito usando nEmeros hex bac)'round(]D6D23K); no$tro)e(); !ill(]1-DD0*); rect(6K, 6K, ::, ::);
-4alores de grises ;os e8em1los %istos anteriormente :an usado el 9ondo 1or de9ecto de color gris claro< lneas negras< $ 9iguras )lancas. Para cam)iar estos %alores< es necesario introducir sinta6is adicional. ;a 9uncin bac)'round() esta)lece el color de la %entana de re1resentacin con un n3mero entre . $ 2//. Este rango 1uede ser incmodo si no est,s 9amiliarizado con 1rogramas de di)u8o en el ordenador. El %alor 2// es )lanco $ el %alor . es negro< con un rango de %alores de grises en medio. =i no se de9ine un %alor 1ara el 9ondo< se usa el %alor 1or de9ecto 2.4 @gris claroC. ;a 9uncin !ill() de9ine el %alor del relleno de las 9iguras< $ la 9uncin stro)e() de9ine el %alor del contorno de las 9iguras di)u8adas. =i no se de9ine un %alor de relleno< se usa el %alor 1or de9ecto 2// @)lancoC. =i no se de9ine un %alor de contorno< se usa el %alor 1or de9ecto . @negroC.
rect(6/, 6/, !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 a1lica a todas las 9iguras di)u8adas des1us. Para cam)iar el %alor de relleno o contorno< usamos la 9uncin !ill() o stro)e() de nue%o. Fn 1ar,metro o1cional adicional 1ara !ill() o stro)e() regula la trans1arencia. 'e9iniendo el 1ar,metro a 2// :ace Aue la 9igura sea totalmente o1aca< $ a . totalmente trans1arente
bac)'round(/); !ill(233, 22/); rect(63, 63, 3/, 3/); rect(03, 03, 3/, 3/);
El relleno $ el contorno de una 9igura se 1uede eliminar. ;a 9uncin noHill() detiene a Processing de rellenar 9iguras< $ la 9uncin no$tro)e() detiene la creacin de lneas $ contornos de las 9iguras. =i usamos noHill() $ no$tro)e() no di)u8aremos nada en la 1antalla. -/tri-utos de di-ujo -dem,s de cam)iar los %alores de relleno $ contorno de las 9iguras< tam)in es 1osi)le cam)iar atri)utos de
/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 des1us. =i usamos 1rimero smooth()< usar no$mooth() cancelar, el a8uste< $ %ice%ersa.
smooth(); ellipse(0/, .D, 0:, 0:); no$mooth(); ellipse(K/, .D, 0:, 0:);
;os atri)utos de la lnea< est,n controlados 1or las 9unciones stro)eIei'ht()< stro)e*ap() $ stro)eJoin(). ;a 9uncin stro)eIei'ht() tiene un 1ar,metro numrico Aue de9ine el grosor de todas las lneas di)u8adas des1us de usar esta 9uncin. ;a 9uncin stro)e*ap() reAuiere un 1ar,metro Aue 1uede ser >?&ND< $L&1>- o A>?J-*T. >?&ND redondea los 1untos 9inales< $ $L&1>- los cuadra. A>?J-*T es una mezcla de am)os redondea las esAuinas cuadradas sua%emente. Esta 9uncin se usa en lneas. ;a 9uncin stro)eJoin() tiene un 1ar,metro Aue 1uede ser =-M-@< CBTT-> o >?&ND. Estos 1ar,metros determinan la 9orma del contorno de la 9igura. =-M-@ corta en diagonal las esAuinas cuadradas< CBTT-> cuadra las esAuinas @es el %alor 1or de9ectoC $ >?&ND redondea las esAuinas.
smooth(); stro)eIei'ht(62); stro)e*ap(>?&ND); line(2/, 0/, D/, 0/); 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
5odos de di-ujo Por de9ecto< los 1ar,metros 1ara ellipse() de9ine la coordenada 6 del centro< la coordenada $ del centro< la anc:ura $ la altura. ;a 9uncin ellipseCode() cam)ia la 9orma en Aue se usan estos 1ar,metros 1ara di)u8ar eli1ses. ;a 9uncin ellipseCode() reAuiere un 1ar,metro Aue 1uede ser *-NT->< >1DB&$< *?>N-> o *?>N->$. El modo 1or de9ecto es *-NT->. El modo >1DB&$ tam)in usa el 1rimer $ segundo 1ar,metro de ellipse() 1ara esta)lecer el centro< 1ero el tercer 1ar,metro de)er ser la mitad del anc:o< $ el cuarto 1ar,metro de)e ser la mitad del alto. El modo *?>N-> :ace Aue ellipse() 9uncione de manera 1arecida a rect(). !ausa Aue el 1rimer $ segundo 1ar,metro se trasladen a la esAuina su1erior izAuierda del rect,ngulo Aue circunscri)e la eli1se $ usa el tercer $ cuarto 1ar,metro 1ara de9inir la anc:ura $ la altura. El modo *?>N->$ tiene un e9ecto similar a *?>N->< 1ero causa Aue el tercer $ cuarto 1ar,metro de ellipse() se de9inan en la esAuina in9erior derec:a del rect,ngulo.
smooth(); no$tro)e(); 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. 0eAuiere un 1ar,metro Aue 1uede ser *?>N->< *?>N->$ o *-NT->. El modo 1or de9ecto es *?>N->< $ *?>N->$ causa Aue el tercer $ cuarto 1ar,metro de rect() se de9inan en la esAuina contraria a la 1rimera. El modo *-NT-> causa Aue el 1rimer $ segundo 1ar,metro de rect() de9inan el centro del rect,ngulo $ usa el tercer $ cuarto 1ar,metro 1ara la anc:ura $ la altura.
no$tro)e(); rectCode(*?>N->); !ill(62:); rect(./, ./, :/, :/); 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' 4isuali2acin * 6inta

ABma'e, loadBma'e(), ima'e() tint(), noTint()
;as 9otogra9as digitales son mu$ di9erentes si las com1aramos con las 9otogra9as analgicas ca1turadas en 9ilm. -l igual Aue las 1antallas de ordenador< las im,genes digitales son re8illas rectangulares de color. ;as dimensiones de las im,genes digitales se miden en unidades de 16eles. =i una imagen es de 32. 16eles de anc:o $ 24. 16eles de alto< tiene +".4.. 16eles totales. =i una imagen es de *24. 16eles de anc:o $ *.24 16eles de anc:o< el n3mero total de 16eles es de *3*.+2. @*<3 mega16elesC. !ada imagen digital tiene una 1ro9undidad de color. ;a 1ro9undidad de color se re9iere al n3mero de )its utilizado 1ara almacenar cada 16el. =i la 1ro9undidad de color de una imagen es *< cada 16el 1uede ser uno de dos %alores< 1or e8em1lo< negro o )lanco. =i la 1ro9undidad de color es de 4< cada 16el 1uede ser uno de *" %alores. =i la 1ro9undidad de color de una imagen es de 4< cada 16el 1uede ser uno de 2/" %alores. En cuanto a la imagen< se muestra con di9erentes 1ro9undidades de color. Esto a9ecta a la a1ariencia
*O)it @2 coloresC
2O)it @4 coloresC
4O)it @*" coloresC 4O)it @2/" coloresC
Jo$ en da< la ma$ora de las com1utadoras tra)a8an con una 1ro9undidad de 24 )its< lo Aue Auiere decir uno de *"+++2*" colores. =e lo llama com3nmente como millones de colores. ;as im,genes digitales se co(+onen de n.(eros Aue re1resentan los colores. El 9ormato de arc:i%o de una imagen determina como los n3meros se ordenan en el arc:i%o. -lgunos 9ormatos de arc:i%o de almacenamiento de los datos de color< utilizan ecuaciones de matem,ticas com1le8as 1ara com1rimir los datos $ reducir el tamaGo resultante del arc:i%o 9inal. Fn 1rograma Aue se carga un arc:i%o de imagen de)e conocer el 9ormato de la misma 1ara Aue 1ueda traducir los datos de arc:i%o en la imagen es1erada. E6isten di9erentes ti1os de 9ormatos de im,genes digitales Aue sir%en 1ara necesidades es1ec9icas. Processing 1ueden cargar arc:i%os EI#< JPEE< $ P2E< 8unto con algunos otros 9ormatos como se descri)e en la re9erencia. =i no tiene su imagen en uno de estos 9ormatos< se 1uede con%ertir a otros ti1os de 9ormatos con 1rogramas como EIMP o -do)e P:otos:o1. #ormat EI# JPEE P2E E6tension .gi9 .81g .1ng Pro9undidad de color *O)it a 4O)it 24O)it *O)it a 24O)it 5rans1arencia *O)it 2o Posee 4O)it
-4isuali2acin Processing 1uede cargar im,genes< mostrarlas en 1antalla< cam)iar su 1osicin< tamaGo< color< tinta $ trans1arencia. El ti1o de dato Aue se utiliza 1ara almacenar im,genes es conocido 1or el nom)re de ABma'e. -l igual Aue los n3meros enteros son almacenados en %aria)les del ti1o int< $ los %alores true $ !alse en %aria)les del ti1o boolean< las im,genes son almacenadas en %aria)les ti1o ABma'e. -ntes de mostrarla en al %entana< es necesario cargar la imagen con la 9uncin loadBma'e(). =e de)e re%isar con cuidado Aue adem,s de ingresar el nom)re correcto tam)in este la e6tensin de 9ormato correcta @1or e8em1lo< kant.'pg< "oah.gif< hola.pngC. ;as im,genes a cargar de)en encontrarse en la car1eta data< dentro de la car1eta del sketch. E6iste una 9orma mu$ sencilla de aGadir una imagen a esa car1eta sin cometer ning3n error. En la
Ignacio Buioli | Jaime Prez Marn /"
)arra de men3< dentro de la o1cin K=Hect:L< se encuentra el comando K-dd #ileL. =e 1odr, entonces na%egar 1or su ordenador $ )uscar el arc:i%o deseado. Fna %ez Aue se encuentra< se le da clicH a K71enL 1ara aGadir el arc:i%o a la car1eta data de su sHect:. !on la imagen dentro de la car1eta< :a)indose declarado un nue%o ABma'e $< 1osteriormente< cargado en ese ABma'e un arc:i%o de imagen< este 1uede ser mostrado en 1antalla con la 9uncin ima'e()
ima'e(nombre, x, ;) ima'e(nombre, x, ;, ancho, alto)
;os 1ar,metros de ima'e() determinan la 1osicin $ el tamaGo de la imagen @similar a otras 9unciones %istas 1re%iamenteC. El nombre es tan solo el nom)re de la %aria)le ABma'e donde se encuentra almacenada nuestra imagen. =i no se utilizan los 1ar,metros ancho $ alto< la imagen ser, mostrada en su tamaGo original.
ABma'e im'; //@a ima'en debe estar 'uardada en la carpeta data im' < loadBma'e(Warch# p'W); ima'e(im', /, /);
ABma'e im'; //@a ima'en debe estar 'uardada en la carpeta data im' < loadBma'e(Warch# p'W); ima'e(im', 2/, 2/, :/, :/);
-$olor de la I(agen * 6rans+arencia ;as im,genes 1ueden ser coloreadas con la 9uncin tint(). Esta act3a del mismo modo Aue !ill() $ stro)e()< solo Aue a9ecta 3nicamente a las im,genes
tint('ris) tint('ris, al!a) tint(,alor6, ,alor2, ,alor0) tint(,alor6, ,alor2, ,alor0, al!a) tint(color)
5odas las im,genes Aue se di)u8an luego de declarada la 9uncin tint()< ser, 1intada 1or ella. =i en alg3n momento se desea Aue no se 1inte< se 1uede utilizar la 9uncin noTint().
ABma'e im'; 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/, /);
/+
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 1ar,metros de tint() est,n ligados a lo esta)lecido 1or colorCode(). Ja$ Aue tener cuidado de no cam)iar el modo de color o el rango del mismo< $a Aue eso a9ectar, los 1ar,metros de tint(). Para generar trans1arencia sim1lemente utilizaremos la misma 9uncin tint() 1ero con un %alor de )lanco @2// en un modo 0EBC.
ABma'e im'; 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 1ueden almacenar la trans1arencia de la imagen. Mientras Aue las EI# solo 1ueden con%ertir un color @$a Aue solo 1osee *O)it de trans1arenciaC. En cam)io< las im,genes P2E tienen una 1ro9undidad de trans1arencia de 4O)it< 1or lo tanto admiten 2/" colores de trans1arencia.
//*ar'a una ima'en XBH con 65bit de transparencia ABma'e im'; im' < loadBma'e(WarchTrans#'i!W); bac)'round(233); ima'e(im', /, /); ima'e(im', 52/, /); //*ar'a una ima'en ANX con D5bit de transparencia ABma'e im'; im' < loadBma'e(Warch#pn'W); bac)'round(233); ima'e(im', /, /); ima'e(im', 52/, /);
/4
&nidad 11
#atos' 6e%to
Elementos que se introducen en esta Unidad:
char, $trin'
'esde la a1aricin del ordenador se 1lantearon lengua8es de 1rogramacin 1ara sus acciones. - 1artir de ese momento< :u)o muc:a in%estigacin en la entrada $ la salida de te6to. 'e esta 9orma se e61andi el cam1o de la 1rogramacin a lo Aue 9ueron los 1rimeros intentos 1or I- @Inteligencia -rti9icialC. Fna serie de 1rogramas en los Aue uno escri)a lo Aue desea)a $ el mismo 1rograma< a duras 1enas< res1onda algo mas o menos acorde. Esta clase de 1rogramas :a e%olucionado< m,s all, de Aue e6isten toda%a 1ro)lemas con esta clase de ideas. M,s adelante< se e61eriment con 1rogramas @1re9erentemente en la ?e)C de traduccin de idiomas< con resultados e6traordinarios 1or 1arte de algunos ser%idores< Aue a3n e6isten en la actualidad. Esta unidad no discute temas acerca de traduccin de idiomas o inteligencia arti9icial< sin em)argo el te6to es el ti1o de dato mas com3n creado $ modi9icado 1or el 1rograma. El te6to creado 1or eOmails< 1u)licaciones $ sitios ?e) es un %asto recurso de in9ormacin Aue 1uede ser almacenada $ 1resentada en 9orma de datos. -$aracteres ;os datos del ti1o char 1ueden almacenar ti1ogra9as como -< e< / $ U. El nom)re char es el diminuti%o 1ara character cu$o signi9icado es car,cter< $ este ti1o de datos se distingue 1or se escritos entre comillas @V VC. ;as %aria)les ti1o char son declaradas como %aria)les ti1o int o ti1o !loat.
char a < ^n^; 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 e8em1lo crea una nue%a %aria)le ti1o char< asigna %alores $ los im1rime 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 corres1onde 1or el cdigo de la ta)la -=!II. Por e8em1lo< - es "/< B es ""< ! es "+< $ as. Puede 1ro)ar cada cdigo usando la 9uncin println()
char letra < ^1^; println(letra); //Bmprime 1 en la consola int n < letra; //1si'na el ,alor num%rico de 1 a la ,arible n println(n); //Bmprime :3 en la consola
Es 1osi)le articular 9unciones matem,ticas con %alores al9a)ticos. En el siguiente e8em1lo se utiliza un ciclo H?> 1ara im1rimir el al9a)eto de la - a la W< 1or aumentar los %alores char con la 9uncin de incremento
char letra< ^1^; //Declara una ,ariable tipo char ; asi'na el ,alor de 1 !or (int i < /; i 9 2:; i44) R print(letra); //Bmprime un car"cter en la consola letra44; //$uma 6 al ,alor del car"cter S println(^#^); //1're'a un punto al !inal del al!abeto
/&
-Pala-ras * 3raciones -l utilizar una %aria)le de ti1o $trin' 1ueden almacenarse 1ala)ras $ oraciones com1letas. Para distinguir los datos $trin' del resto del 1rograma se utilizan comillas do)les @ WWC. ;as do)les comillas di9erencian VVsVV como $trin' de VsV como car,cter. ;os datos ti1os $trin' son di9erentes a los del ti1o int1 !loat o char< $a Aue se trata de un ob'eto1 o sea un ti1o de dato Aue 1uede almacenar muc:os elementos $ 9unciones. ;as %aria)les ti1o ABma'e $ AHont tam)in son o)8etos. ;as %aria)les ti1o $trin' se declaran $ se asignan como cualAuiera
$trin' $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 e8em1los muestran algunos usos ),sicos de las %aria)les ti1o $trin'
//@os datos tipo $trin' pueden contener lar'os textos $trin' s6 < W>a)ete bee bee_W; $trin' s2 < W>rrrrrrrrrrrrrrrummmmmp!!!! till!!!! tooooo_W; println(s6); //Bmprime W>a)ete bee bee_W println(s2); //Bmprime W>rrrrrrrrrrrrrrrummmmmp!!!! till!!!! tooooo_W //Datos tipo $trin' combinados con el operador 4 $trin' s0 < W>a)ete W; $trin' s. < Wrinn(e)eteW; $trin' s3 < s0 4 s.; println(s3); //Bmprime W>a)ete rinn(e)eteW
".
&nidad 12
#atos' $onversin * 3-jetos

boolean(), b;te(), char(), int(), !loat(), str() # (Aunto como ?perador) ABma'e#Nidth, ABma'e#hei'ht $trin'#len'th(), $trin'#startsIidth(), $trin'#endsIidth(), $trin'#char1t(), $trin'#to*har1rra;(), $trin'#sub$trin'(), $trin'#to@oNer*ase(), $trin'#to&pper*ase() $trin'#eGuals()
!uando creamos una %aria)le< es1eci9icamos el ti1o de datos con el Aue %a a tra)a8ar. =i la %aria)le almacena n3meros< su utilizar, una %aria)le ti1o int o ti1o !loat. =i la %aria)le almacena te6to< se usar, el ti1o $trin' o< si se tratara de solo un car,cter< del ti1o char. -s< %aria)les Aue almacenan %alores true o !alse son del ti1o boolean< 1ara almacenar una imagen digital la %aria)le ser, del ti1o ABma'e $ 1ara almacenar una ti1ogra9a del ti1o AHont. ;uego de ser declarada< se le asigna un %alor del ti1o de la %aria)le. =in em)argo< muc:as %eces es necesario con%ertir una %aria)le de determinado ti1o en otro ti1o. ;os ti1os de datos int1 !loat1 char $ boolean son llamadas %aria)les 1rimiti%as< $a Aue almacenan un si(+le elemento. En cam)io< las del ti1o $trin'1 ABma'e $ AHont son di9erentes< las %aria)les Aue se crean son o-jetos. ;os o)8etos son usualmente com1uestos 1or muc:as %aria)les 1rimiti%as $ otros o)8etos< $ 1ueden 1oseer 9unciones dentro de ellos mismos. ;os o)8etos se distinguen 1or comenzar la 1rimer letra en ma$3sculas. -$onversin de #atos -lgunos ti1os de datos 1ueden con%ertirse en otro ti1o autom,ticamente con solo se reasignados a una %aria)le de otro ti1o. Por e8em1lo< una %aria)le del ti1o int 1uede con%ertirse autom,ticamente en una del ti1o !loat< 1ero una del ti1o !loat no 1uede con%ertirse autom,ticamente en una del ti1o int.
!loat ! 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 ti1osQ Para esto e6isten una gran cantidad de 9unciones de con%ersin de un ti1o de dato a otro. =in em)argo< :a$ Aue aclarar Aue< como los datos almacenan di9erentes cantidad de )it< es mu$ 1ro)a)le Aue en algunos 1ases se 1ierda una gran cantidad de in9ormacin @mu$ 3til 1ara a:orrar memoria del 1rogramaC. ;as 9unciones de con%ersin son las siguientes boolean()1 b;te()1 char()1 !loat()1 int()< $ str(). !ada una trans9orma cualAuier clase de dato en el corres1ondiente a cada 9uncin. ;a 9uncin boolean() con%ierte el n3mero . en un %alor !alse $ cualAuier otro n3mero en un %alor true.
int i < /; boolean b < boolean(i); 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 re1resentacin de )$te. ;a 1ro9undidad numrica es tan solo de O*2+ a *24. =in em)argo< si el n3mero esta 9uera del rango< la 9uncin lo con%ierte en una re1resentacin en )$te.
"*
!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 corres1onde a una re1resentacin 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 1ara redondear un resultado !loat $ as este no ocu1e demasiada memoria innecesariamente. En muc:as casos :a$ 9unciones Aue de%uel%en %alores !loat $ en necesario con%ertirlos.
!loat ! < :3#0; int i < int(!); 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 re1resentacin $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 1ro%ee de mas control cuando con%ertimos un int o un !loat a un $trin'. -3-jetos ;as %aria)les ti1o $trin'< ABma'e $ AHont son del ti1o o)8eto. ;as %aria)les dentro de un o)8eto se denominan campos $ las 9unciones se denominan m7todos. =e 1uede acceder a los cam1os $ a los mtodos con el o1erador punto @.C. El o1erador 1unto 9unciona como 1uente entre el nom)re del o)8eto $ el elemento dentro del mismo. ABma'e1 AHont $ $trin' son o)8etos< $ 1or tanto 1oseen elementos. ;os o)8eto ti1o ABma'e 1oseen dos 9unciones Aue almacenan el anc:o $ el alto de la imagen cargada. =e llaman< de manera a1ro1iada< Nidth @anc:oC $ hei'ht @altoC. Para acceder a ellas< se escri)e el nom)re del o)8eto seguido 1or el o1erador 1unto $ el nom)re de la 9uncin.
"2
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' 1osee tam)in una gran cantidad de elementos Aue lo com1onen. Fno de ellos es el mtodo len'th()1 el cual regresa de %alor la cantidad de caracteres Aue lo com1onen
$trin' s6 < WTocar AianoW; $trin' s2 < WTW; println(s6#len'th()); println(s2#len'th());
//Bmprime W66W //Bmprime W6W
;os mtodos startsIith() $ endsIith() e%al3an cuando un $trin' em1ieza o termina< siem1re $ cuando se utilice el 1ar,metros adecuados
$trin' s6 < W=uenos 1iresW; println(s6#startsIith(W=W)); println(s6#startsIith(W1iresW)); println(s6#endsIith(W1iresW)); //Bmprime WtrueW //Bmprime W!alseW //Bmprime WtrueW
El mtodo char1t() es usado 1ara leer un solo car,cter de un &tring. 0eci)e como 1ar,metro un n3mero Aue indica la u)icacin del mismo
$trin' s < WMerdeW; println(s#char1t(/)); 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 1ara leer a 1orcin del $trin'. - di9erencia de char1t() Aue solo lee un car,cter< substrin'() 1uede leer un $trin' de caracteres. =e utiliza de 1ar,metro un n3mero Aue indica la 1osicin de un car,cter $ de%uel%e un $trin' desde esa 1osicin 1ara delante. =i se utilizan dos 1ar,metros determina una 1orcin es1ec9ica.
$trin' s < WXialloW; println(s#substrin'(2)); 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() 1uede usarse 1ara de%ol%er una co1ia del $trin' com1letamente en min3sculas. 'e la misma 9orma< to&pper*ase() :ace lo mismo 1ero de%uel%e el te6to en ma$3sculas.
"3
$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 1osi)le com1arar resultados con el o1erador relacional de igualdad @<<C. =in em)argo< el mtodo eGuals() del o)8eto $trin' sir%e 1recisamente 1ara eso. !om1ara el contenido de dos %aria)les $trin'.
$trin' s6 < W=lancoW; $trin' s2 < W=lancoW; $trin' s0 < WNe'roW; println(s6#eGuals(s2)); println(s6#eGuals(s0));
//Bmprime WtrueW //Bmprime W!alseW
"4
&nidad 13
6i+ograf@a' 4isuali2acin
AHont, loadHont(), textHont(), text() text$i(e(), text@eadin'(), text1li'n(), textIidth()
;as letras en una 1antalla son creadas 1or esta)lecer el color de los 16eles en una determinada u)icacin. Por lo tanto< la calidad de la ti1ogra9a se %e limitada 1or la resolucin de la 1antalla. !omo las 1antallas tienen una resolucin )a8a en com1aracin con el 1a1el< se :an desarrollado tcnicas 1ara me8orar la a1ariencia del te6to en la misma. ;as 9uentes de las 1rimeras com1utadoras de -11le Macintos: esta)an com1uestas 1or 1eAueGas im,genes de ma1a de )its< creadas es1ec9icamente en tamaGos como de *.< *2< $ 24 1untos. Ftilizando esta tecnologa< una %ariacin de cada 9uente 9ue diseGada 1ara cada tamaGo de un ti1o de letra en 1articular. Por e8em1lo< el car,cter de un ti1o de letra en el =an #rancisco< utiliza una imagen di9erente 1ara mostrar el car,cter en un tamaGo de *2 $ *4. Por otra 1arte< cuando la im1resora ;aserIriter se introdu8o en *&4/< la tecnologa Postscri1t de9ini 9uentes con una descri1cin matem,tica del esAuema de cada car,cter. Este ti1o 1ermiti< en la 1antalla< una escala de tamaGos grandes. -11le $ Microso9t desarrollaron< m,s tarde< el 5rue5$1e< otro 9ormato de 9uente. 0ecientemente< estas tecnologas se 9usionaron en el 9ormato 71en5$1e. Mientras tanto< el mtodo 1ara sua%izar te6to de 1antalla en )lancoO$Onegro se introdu8o. Estas tcnicas del ti1o anti+aliasing utilizan 16eles grises en el )orde de los caracteres 1ara com1ensar la )a8a resolucin de 1antalla. -$argando ,uentes * #i-ujando 6e%to -ntes Aue las letras sean mostradas en la %entana de Processing< es necesario cargar la 9uente $ 1ara esto de)emos con%ertir el arc:i%o en uno de 9ormato (;I. Para esto< Processing nos o9rece una sencilla :erramienta. En el men3 K5oolsL @:erramientasC seleccionar la o1cin K!reate #ontL @!rear #uenteC. Fn %entana se a)rir, $ le mostrar, las 9uentes Aue tiene actualmente instaladas en su eAui1o $ Aue 1ueden ser con%ertidas al 9ormato es1ec9ico. =eleccione la 9uente deseada de la lista $< a continuacin< :aga clicH en K7XL. ;a 9uente se co1iar, $ con%ertir, al 9ormato (;I. ;uego< autom,ticamente< ser, mo%ida a la car1eta K'ataL de su =Hetc: @de 9orma similar a como se carga una imagenC. !omo en las 1rimeras com1utadoras de -11le Macintos:< el 9ormato (;I 1ermite cargar el al9a)eto de una 9uente como una serie de sim1les im,genes. En la %entana del K!reate #ontL tam)in se encuentra una o1cin Aue 1ermite seleccionar el tamaGo al e61ortar al 9uente en un 9ormato (;I. Esto es 3til< $a Aue 9uentes mu$ grandes reAuieren ma$or cantidad de memoria. =i se %a a utilizar una 9uente no mas grande Aue *2< e61ortarla en tamaGo &" ser, totalmente innecesario. 'es1us Aue la 9uente es creada< antes de Aue el 1rograma la 1ueda utilizar es necesario cargarla en el mismo. Processing 1osee un ti1o de dato llamado AHont< en el Aue de)en cargarse las 9uentes. =e crea una nue%a %aria)le ti1o AHont $ se utiliza las 9uncin loadHont() 1ara cargarla. ;a 9uncin de textHont() se utiliza 1ara seleccionar la 9uente Aue se Auiere utilizar. Por 3ltimo< el te6to es escrito con la 9uncin text().
text(datos, x, ;) text(strin'datos, x, ;, ancho, alto)
El 1ar,metro datos 1uede ser un $trin'1 char1 int o !loat. El 1ar,metro stringdatos es un 1ar,metro Aue solo ace1ta datos ti1o $trin'. ;os 1ar,metros ( e y cam)ian la 1osicin :orizontal $ %ertical del te6to @como en cualAuier 9igura o imagenC. E6isten los 1ar,metros o1cionales ancho $ alto< los cuales modi9ican el tamaGo del te6to. ;a 9uncin !ill() controla el color del te6to $ la trans1arencia< as como tam)in a9ecta a 9iguras como ellipse() o rect(). El te6to no es a9ectado 1or stro)e(). ;os siguientes e8em1los utilizan una 9uente llamada -ressence< 1ara Aue 1ueda %er su te6to aseg3rese de cargar su 1ro1ia 9uente $ cargarla correctamente @con la e6tensinC en la 9uncin loadHont().
"/
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 1ueden utilizarse dos 9uentes distintas en el mismo 1rograma< 1ero de)er,n crearse dos %aria)les ti1o AHont Aue las almacenen
AHont !ont6, !ont2; !ont6 < loadHont(W1ressence502#,lNW); !ont2 < loadHont(W1rhermann502#,lNW); !ill(/); textHont(!ont6); text(WXN&W, :, .3); textHont(!ont2); text(WXN&W, :, D/);
-/tri-utos de 6e%to Processing inclu$e 9unciones 1ara controlar la 9orma en la Aue el te6to se muestra @1or e8em1lo< alterando su tamaGo o alineacinC. Processing< adem,s< 1uede calcular el anc:o de alg3n car,cter o gru1o de caracteres $
Ignacio Buioli | Jaime Prez Marn ""
1onerlo en 9uncin de alguna 9igura o 9orma. ;as 9uentes en Processing son tomadas como im,genes< $ no como %ectores. Por eso si la 9uente Aue cargamos est, en *2 de tamaGo< $ luego la agrandamos a &"< se %er, desen9ocada. ;a 9uncin correcta 1ara cam)iar el tamaGo de la 9uente es la de text$i(e().
text$i(e(tama+o)
El 1ar,metro tama8o de9ine la dimensin Aue ocu1ar,n las letras en unidades de 16eles.
//>educcin del tama+o de la letra AHont !ont; !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'() 1ermite alterar el es1acio entre lineas

text@eadin'(dist)
;a 1ro1iedad dist de9ine la distancia del es1acio en unidad de 1i6eles.

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 1uede ser marginado al centro< a la izAuierda o a la derec:a utilizando la 9uncin
text1li'n() text1li'n(C?D?)
En este caso< el modo es una constante Aue 1uede ser *-NT-> @centroC< >BX\T @derec:aC $ @-HT
"+
@izAuierdaC< $ se re9iere sim1lemente a la alineacin Aue tendr, el te6to mostrado en 1antalla.

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 1i6el de un car,cter o te6to. El calculo se realiza de1endiendo de las 1ro1iedades de textHont() $ text$i(e(). Na Aue cada car,cter 1osee un anc:o di9erente entre s< es im1osi)le sa)er la medida e6acta de una cadena de caracteres. Para esos casos donde necesitamos una medida es1ec9ica< o conocer el tamaGo de nuestra cadena< se utiliza esta 9uncin.
AHont !ont; !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);
"4
&nidad 18
5ate(1ticas' 6rigono(etr@a
AB, L&1>T->YAB, \1@HYAB, TI?YAB, radians(), de'rees() sin(), cos(), arc()
;a trigonometra 1ermite de9inir relaciones entre lados $ ,ngulos de los tri,ngulos. ;a 9unciones trigonomtricas de seno $ coseno nos 1ermiten generar n3meros re1etiti%os 1ara di)u8ar ondas< arcos< crculos $ es1irales. -Engulos * 3ndas ;os grados son una 9orma com3n de medir ,ngulos. Fn ,ngulo recto es de &.Y< a mitad de camino< alrededor de un crculo< es *4.Z< $ el crculo com1leto es de 3".Z. -l tra)a8ar con trigonometra< los ,ngulos se miden en unidades llamadas radianes. Ftilizando los radianes< el ,ngulo de un %alor se e61resa en relacin con el %alor de [ de matem,tica< escrito en caracteres latinos como \1i\. En trminos de unidades radianes< el ,ngulo recto es [B2< a mitad de camino alrededor de un crculo es sim1lemente [ < $ el 1unto de 1artida es 2[.
El %alor numrico de [ es una constante Aue es in9initamente larga $ sin ning3n 1atrn de re1eticin. Es la razn de la circun9erencia de un crculo a su di,metro. -l escri)ir el cdigo en Processing< se 1uede utilizar la constante matem,tica P9 1ara re1resentar a este n3mero. 7tros %alores de uso de [ se e61resa con las constantes :;A<,%<=P91 HAL.=P9 $ ,>?=P9. =i se e8ecuta la siguiente lnea de cdigo< se 1odr, %er el %alor de [ con sus 4 dgitos signi9icati%os
println(AB); //Bmprime el ,alor de c en la consola
En el uso cotidiano< el %alor numrico de [ suele denominarse como 3<*4. 'e esta manera< los ,ngulos 1uede con%ertirse en radianes a tra%s de la 9uncin radians()< $ %ice%ersa con la 9uncin de'rees().
!loat r6 < radians(7/); !loat r6 < radians(6D/); println(r6); //Bmprime 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 1re9erencia 1or el tra)a8o en ,ngulos< se %uel%e mu$ 1r,ctico el utilizar la 9uncin de con%ersin
"&
1ara estar m,s cmodo a la :ora de 1rogramar. Por otro lado< las 9unciones sin() $ cos() determinan el %alor de seno $ coseno< res1ecti%amente< de un ,ngulo determinado. -m)as 9unciones ace1tan tan solo * 1ar,metro
sin(an'ulo) cos(an'ulo)
El 1ar,metro angulo es siem1re un %alor en radianes es1ec9ico. El %alor Aue de%uel%e es del ti1o decimal entre O*.. $ *... ;as relaciones esta)lecidas entre el %alor en radianes $ el %alor de su seno son mostradas en el siguiente gr,9ico
- medida Aue el %alor del ,ngulo incrementa su %alor< el %alor de seno se re1ite. En el %alor de ,ngulo .< el %alor de seno tam)in es .. - medida Aue comienza a aumentar el ,ngulo< el seno decrece< :asta llegar a &.Y< donde el seno aumenta< 1asando 1or el %alor *4.Y @en cual el seno %uel%e a ser .C :asta el 2+.Y @donde el seno llega a su 1unto mas altoC. Por 3ltimo< cuando el %alor llega a 3".Y< el seno %uel%e a ser .< $ el ciclo %uel%e a re1etirse. ;os %alores del seno 1ueden ser %isto en su totalidad sim1lemente 1or ser u)icados dentro de una estructura H?>
!or (!loat an'le < /; an'le 9 TI?YAB; an'le 4< AB/2.#/) R println(sin(an'le)); S
!omo los %alores de seno son entre O*.. $ *.. son mu$ 9,ciles de usar en una com1osicin. Por e8em1lo< al multi1licarlos 1or /.< o)tendremos un rango de entre O/... $ /...
!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 1ositi%os< :a$ Aue sumar el %alor *.. 1ara Aue el rango 1ase a ser de ... a 2... ;uego< al di%idir esos %alores 1or 2.. o)tendremos un rango entre ... $ *... ;a 9uncin de map() tam)in 1uede utilizarse 1ara sim1li9icar el tra)a8o. En el siguiente e8em1lo se 1onen los %alores de seno en un rango entre . $ *...
+.
!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$< 1ara di)u8ar una serie de 1untos< o)tendremos como resultado una onda.
si(e(K//, 6//); no$tro)e(); !ill(/); !loat an'le < /#/; !or (int x < /; x 9< Nidth; x 4< 3) R !loat ; < 3/ 4 (sin(an'le) * 03#/); rect(x, ;, 2, .); an'le 4< AB/./#/; S
-l reem1lazar algunos n3meros con %aria)les< 1ermiten controlar la 9orma de onda de una 9orma m,s e6acta. ;a %aria)le offset controla la coordenadaO$ de la onda< la %aria)le scaleVal controla el anc:o de a onda $ la %aria)le angle9nc controla la %elocidad con la cual aumenta el ,ngulo de la onda< creando una onda de ma$or o menor 9recuencia.
si(e(K//, 6//); no$tro)e(); smooth(); !ill(/); !loat o!!set < 3/#/; //*ompensacin en V !loat scaleMal < 03#/; //-scala el ,alor de la ma'nitud de ?nda !loat an'leBnc < AB/2D#/; //Bncremento entre "n'ulos !loat an'le < /#/; //-l "n'ulo recibe ,alores desde / !or (int x < /; x 9< Nidth; x 4< 3) R !loat ; < o!!set 4 (sin(an'le) * scaleMal); rect(x, ;, 2, .); an'le 4< an'leBnc; S
En el caso de la 9uncin cos()< regresa el coseno de un ,ngulo. En otras 1ala)ras< son los mismos %alores Aue en seno< con la di9erencia Aue :a$ una com1ensacin de &.Y.
+*
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 e8em1los muestran una manera de generar 9ormas utilizando la 9uncin sin().
si(e(K//, 6//); !loat o!!set < 3/; !loat scaleMal < 0/#/; !loat an'leBnc < AB/3:#/; !loat an'le < /#/; be'in$hape(T>B1NX@-Y$T>BA); !or (int x < . ; x 9< Nidth43; x 4< 3) R !loat ; < sin(an'le) * scaleMal; i! ((x P 2) << /) R //Xenera un loop ,ertex(x, o!!set 4 ;); S else R ,ertex(x, o!!set 5 ;); S an'le 4< an'leBnc; S end$hape();
+2
si(e(K//, 6//); smooth(); stro)eIei'ht(2); !loat o!!set < 62:#/; !loat scaleMal < 62:#/; !loat an'leBnc < /#.2; !loat an'le < /#/; !or (int x < 532; x 9< Nidth; x 4< 3) R !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
-$@rculos, /rcos * Es+irales ;os crculos 1ueden ser di)u8ados directamente desde ondas seno $ coseno. En el siguiente e8em1lo< el ,ngulo aumenta de a *2Y :asta com1letar los 3".Y Aue tiene un crculo. En cada 1aso< la 9uncin cos() se utiliza 1ara determinar la 1osicin en 6< $ la 9uncin sin@C se utiliza 1ara la 1osicin en $. Na Aue am)as 9unciones de%uel%en tan solo %alores entre O*.. $ *..< el resultado es multi1licado 1or la %aria)le radio1 la cual %ale 34. Por 3ltimo< al agregar /. a cada %alor< el crculo se mantendr, en la 1osicin @/.</.C.
no$tro)e(); smooth(); int radio < 0D; !or (int de' < /; de' 9 0:/; de' 4< 62) R !loat an'le < radians(de'); !loat x < 3/ 4 (cos(an'le) * radio);
+3
!loat ; < 3/ 4 (sin(an'le) * radio); ellipse(x, ;, :, :); S
=i el ,ngulo al incrementar no 9inaliza en los 3".Y< entonces 1uede 9ormarse un sim1le arco
no$tro)e(); smooth(); int radius < 0D; !or (int de' < /; de' 9 22/; de' 4< 62) R !loat an'le < radians(de'); !loat x < 3/ 4 (cos(an'le) * radius); !loat ; < 3/ 4 (sin(an'le) * radius); ellipse(x, ;, :, :); S
Para sim1li9icar el tra)a8o con arcos< Processing inclu$e la 9uncin arc().

arc(x, ;, ancho, alto, iniciar, parar)
;os arcos son di)u8ados a 1artir de una eli1se in%isi)le< cu$os 1ar,metros est,n determinados 1or (1 y1 ancho $ alto. ;os 1ar,metros iniciar $ parar necesitan de unidades en radianes 1ara generar la cur%atura del arco. ;os siguientes e8em1los muestran un sencillo uso de los mismos
stro)eIei'ht(2); arc(3/, 33, 3/, 3/, 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 es1irales< sim1lemente se multi1lica el seno $ coseno 1or una escala de %alores ascendentes o descendentes.
no$tro)e(); smooth(); !loat radius < 6#/; !or (int de' < /; de' 9 0:/*:; de' 4< 66) R !loat 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
+4
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
+/
/+!ndice de Engulos 5ate(1ticos
+"
&nidad 1<
5ate(1ticas' /leatoriedad
random(), random$eed(), noise(), noise$eed()
;o aleatorio tiene una 9undamental im1ortancia en nuestra :istoria< es1ecialmente en el arte moderno. !on acciones como arrastrar o)8etos< rom1erlos< $ dem,s< los artistas generar una 1ieza con cierto ni%el de %alor aleatorio. Por e8em1lo< una tcnica mu$ usada de este estilo es llenar 1eAueGas )olsas con 1intura $ u)icarlas en un lienzo. Posteriormente< se lanzan dardos Aue rom1en estas )olsas $ de8an caer la 1intura de una 9orma com1letamente ines1erada< $ con resultados de te6turas mu$ interesantes. Es as< como se 1resenta un contraste mu$ ele%ado entre una estructura rgida $ el com1leto caos. -4alores Ines+erados ;a 9uncin random() 1ermite de%ol%er un %alor com1letamente aleatorio e ines1erado de un rango es1eci9icado 1or 1ar,metros
random(alto) random(ba o, alto)
;a 9uncin regresa un %alor aleatorio decimal @ !loatC desde el . :asta el 1ar,metro alto. 7tra 9orma de ingresar 1ar,metros a la 9uncin es a tra%s de dos 1ar,metros en lugar de uno solo. El %alor ba'o ser, el 1rimer %alor del rango< $ el %alor alto ser, el 3ltimo. Eso signi9ica Aue si ingresamos el %alor 3 1rimero< $ luego el %alor /< nos de%ol%er, un %alor aleatorio decimal entre< 1or su1uesto< 3 $ /. -dem,s< ace1ta 1er9ectamente %alores negati%os. El %alor siem1re ser, del ti1o !loat. =i se deseara o)tener un %alor aleatorio 1ero entero @ intC< de)eremos recurrir a la 9uncin int() 1ara con%ertirlo.
!loat ! < random(3#2); 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 im1redeci)les< cada %ez Aue el 1rograma se e8ecuta o)tendremos di9erentes resultados. Este n3mero 1uede ser utilizado 1ara controlar alg3n as1ecto del 1rograma.
smooth(); stro)eIei'ht(6/); stro)e(/, 60/); line(/, random(6//), 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 ace1ta dos 1ar,metros< tendremos mas control so)re algunas 1ro1iedades.
smooth(); stro)eIei'ht(2/); stro)e(/, 20/); !loat r < random(3, .3); stro)e(r * 3#:, 20/);
++
line(/, r, 6//, random(33, 73)); r < random(3, .3); stro)e(r * 3#:, 20/); line(/, r, 6//, random(33, 73)); r < random(3, .3); stro)e(r * 3#:, 20/); line(/, r, 6//, random(33, 73));
Podemos< adem,s< crear com)inaciones. Por e8em1lo< 1odemos utilizar un ciclo H?> 1ara crear te6turas mu$ interesantes $ sacar ma$or 1ro%ec:o al la aleatoriedad.
bac)'round(/); smooth(); stro)e(233, :/); !or (int i < /; i 9 6//; i44) R !loat r < random(6/); stro)eIei'ht(r); !loat o!!set < r * 3#/; line(i52/, 6//, i4o!!set, /); S
;os %alores aleatorios determinan el 9lu8o de un 1rograma. Por lo tanto< 1odemos im1lementarlos 8unto con alguna e61resin relacional< 1or e8em1lo un I#. En el siguiente e8em1lo< se e%al3a si el %alor es ma$or o menor Aue /.< $ di)u8a una 9igura di9erente de1endiendo el caso
!loat r < random(6//); i! (r 9 3/#/) R line(/, /, 6//, 6//); S else R ellipse(3/, 3/, K3, K3); S
5am)in 1odemos utilizarlo 1ara limitar la 9recuencia con la Aue se di)u8a alguna 9igura
int num < int(random(3/)) 4 6; !or (int i < /; i 9 num; i44) R line(i * 2, /, i * 2, 6//); S
- %eces deseamos conseguir un %alor aleatorio< 1ero Aueremos 9orzar a Aue siem1re sea el mismo. Para eso se utiliza la 9uncin random$eed(). Esta es la manera en la Aue 1roduciremos dic:os n3meros
random$eed(,alor)
El 1ar,metro $alor tiene Aue ser del ti1o entero @intC. Ftilizar el mismo n3mero 1roducir, siem1re el mismo orden de %alores. Es decir< mantendremos un %alor aleatorio< 1ero 9orzaremos a Aue siem1re se trate del mismo %alor.
int s < :; //Malor del $eed bac)'round(/); smooth(); stro)e(233, :/); random$eed(s); //Aroduce el mismo nEmero cada ,e( !or (int i < /; i 9 6//; i44) R
+4
!loat r < random(6/); stro)eIei'ht(r); !loat o!!set < r * 3; line(i52/, 6//, i4o!!set, /); S
-;oise ;a 9uncin noise() nos 1ermite tener un am1lio control en los %alores aleatorios Aue creamos. Princi1almente< se utiliza 1ara crear mo%imientos org,nicos. Ja$ tres %ersiones de la 9uncin< ace1ta un 1ar,metro< dos 1ar,metros e incluso tres 1ar,metros
noise(x) noise(x, ;) noise(x, ;, ()
;a %ersin de un solo 1ar,metro 1ermite crear una sim1le secuencia de n3meros aleatorios. Por ende< m,s cantidad de 1ar,metros 1ermiten crear mas dimensiones de aleatoriedad. 'os 1ar,metros 1ueden ser usados 1ara crear te6turas en dos dimensiones< mientras Aue tres 1ar,metros 1ueden utilizarse 1ara crear 9iguras en tres dimensiones o mo%imientos de animacin %ariados. Inde1endientemente del %alor ingresado< siem1re se de%uel%e un %alor entre ... $ *... =i se desea otra clase de %alor< se 1uede recurrir a alguna de las o1eraciones aritmticas $a %istas. ;os n3meros generados 1or esta 9uncin< 1ueden ser utilizados 1ara 1roducir le%es cam)ios dentro de un mismo rango. Por e8em1lo< mo%imientos mu$ cortos 1ero aleatorios de la misma 9igura @Aue sumados a %alores seno $Bo coseno 1roducir,n una %ariedad de mo%imientos org,nicosC. Por lo general< los me8ores %alores 1ara tra)a8ar son los Aue %an de entre ..../ $ ..3< 1ero de1ende de Aue es lo Aue se Auiera conseguir. -dem,s< 1osee en adicin la 9uncin noise$eed() la cual tra)a8a e6actamente igual Aue random$eed(). En el siguiente e8em1lo se incor1orar< tam)in< una %aria)le inc< la cual se utiliza 1ara controlar las di9erencias entre %alores aleatorios
inc < /#6
inc < /#/6 si(e(://, 6//); !loat , < /#/; !loat inc < /#6; no$tro)e(); !ill(/); noise$eed(/); !or (int i < /; i 9 Nidth; i < i4.) R !loat n < noise(,) * K/#/; rect(i, 6/ 4 n, 0, 2/);
+&
, < , 4 inc;
=i se utiliza el segundo 1ar,metro< se nos da la 1osi)ilidad de crear te6turas en dos dimensiones. En el siguiente e8em1lo< se utiliza 8unto con %ariaciones de la %aria)le inc $ un ciclo H?> 1ueden utilizarse 1ara crear sistemas mu$ interesantes
!loat xnoise < /#/; !loat ;noise < /#/; !loat inc < /#/.; !or (int ; < /; ; 9 hei'ht; ;44) R !or (int x < /; x 9 Nidth; x44) R !loat 'ra; < noise(xnoise, ;noise) * 233; stro)e('ra;); point(x, ;); xnoise < xnoise 4 inc; S xnoise < /; ;noise < ;noise 4 inc; S
-:ora )ien< las com)inaciones con las estructuras $a %istas $ el e9ecto de la aleatoriedad del ti1o noise son ilimitadas $ de muc:a %ariedad. Fn e9ecto interesante es com)inarlo con un %alor de seno 1ara generar una te6tura con tur)ulencia.
!loat poNer < 0; //Bntensidad de la turbulencia !loat d < D; //Densidad de la turbulencia no$tro)e(); !or (int ; < /; ; 9 hei'ht; ;44) R !or (int x < /; x 9 Nidth; x44) R !loat total < /#/; !or (!loat i < d; i 8< 6; i < i/2#/) R total 4< noise(x/d, ;/d) * d; S !loat turbulence < 62D#/ * total / d; !loat base < (x * /#2) 4 (; * /#62); !loat o!!set < base 4 (poNer * turbulence / 23:#/); !loat 'ra; < abs(sin(o!!set)) * 23:#/; stro)e('ra;); point(x, ;); S S
4.
&nidad 1>
6ransfor(aciones' 5atrices * 6raslaciones

translate(), pushCatrix(), popCatrix()
El sistema de coordenadas introducido en la unidad de #ormas utiliza la esAuina su1erior izAuierda 1ara %isualizar en la %entana de re1resentacin< con un origen en un sistema de coordenadas > e N. 'ic:o sistema 1uede ser modi9icado con trans9ormaciones. ;as coordenadas 1ueden< entonces< ser trasladadas< rotadas $ escaladas< de esta 9orma las 9iguras %ariar,n su 1osicin< rotacin $ tamaGo. -6raslacin ;a 9uncin translate() mue%e el origen de la esAuina su1erior izAuierda @la cual 1or de9ecto se encuentra en el .< .C a otra localizacin. -ce1ta dos 1ar,metros. El 1rimero es la coordenada en ( $ el segundo en y.
translate(x, ;)
;os %alores de ( $ de y Aue se ingresan a9ectan a cualAuier 9igura o 9orma Aue se 1retenda di)u8ar des1us. =i *. es el 1ar,metro de (< $ 3. es el 1ar,metro de y< un 1unto di)u8ado en la 1osicin @.< /C se mostrar, en la 1osicin @*.< 3/C.
//-l mismo rect"n'ulo es 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 1osicin 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 6ransfor(aciones ;a trans9ormacin 1or matri6 es un con8unto de n3meros Aue de9ine como< en trminos geomtricos< la 9igura o 9orma es di)u8ada en 1antalla. 5rans9ormaciones $ 9unciones como translate()< alteran los n3meros en esta matri6< 1ro%ocando Aue se di)u8e di9erente. En el e8em1lo anterior< :a)lamos de como estas trans9ormaciones 1osean la caracterstica de acumularse entre s. Es as Aue la 9uncin pushCatrix() nos sir%e 1ara guardar el estado de todas las trans9ormaciones en ese momento< as el 1rograma 1uede de%ol%erlo m,s tarde. Para regresar al estado anterior< se llama a la 9uncin popCatrix().
4*
(amos a 1ensar< entonces< a una matri6 como una :o8a de 1a1el Aue lle%a escrito en su su1er9icie una lista con las trans9ormaciones Aue deseamos @trasladar< rotar< escalarC. !uando una 9uncin translate() se e8ecuta< esta se agrega al 1a1el. Para guardar la actual matri6< 1ara utilizarla luego< agregamos una nue%a :o8a de 1a1el 1or encima de la 1ila $ co1iamos la in9ormacin. !ualAuier cam)io Aue generemos en la :o8a de arri)a< 1reser%ar,< sin em)argo< los n3meros originales Aue est,n de)a8o. Para %ol%er al sistema anterior de coordenadas< sim1lemente retiramos la :o8a Aue Aued encima @en la cual realizamos los cam)iosC.
=ir%e 1ensarlo< 1ara Auienes mane8an 1rogramas al estilo del -do)e P:otos:o1 o EIMP< como Aue la matri6 es tan solo una ca1a. - dic:a ca1a 1odemos darle caractersticas di%ersas @trasladar< rotar< escalarC. Es esencial como se ingresan dic:as coordenadas en una matri6< 1ero se trata tan solo de una terminologa mas tcnica $ mec,nica. ;a 9uncin pushCatrix() se utiliza 1ara aGadir una nue%a coordenada al gru1o< mientras Aue popCatrix() se utiliza 1ara remo%er dic:o gru1o. Por ende< la 9uncin pushCatrix() no 1uede ser utilizada sin popCatrix() $ %ice%ersa. Para esto< com1araremos los siguientes e8em1los. -m)os di)u8an dos rect,ngulos< 1ero con di9erentes resultados. En el segundo e8em1lo uno de los rect,ngulos se encuentra en una matri6 asociada a la 9uncin translate().
translate(33, 0); re"t(0, 20, 66, 30); re"t(0, 50, 66, 30); //Mueve 33 p xeles a la !ere"#a
pus#Matr x(); translate(33, 0); //Mueve 33 p xeles a la !ere"#a re"t(0, 20, 66, 30); p$pMatr x(); //%e&ueve el &$v & ent$ //'a s (u ente f$r&a n$ es afe"ta!a p$r translate(), )a *ue la //transf$r&a" +n est, es"r ta entre pus#Matr x()) p$pMatr x() re"t(0, 50, 66, 30);
-l utilizar una ma$or cantidad de matrices< uno 1uede tener m,s control de todo lo Aue 1asa en el 1rograma. En el siguiente e8em1lo< el 1rimer rect,ngulo es a9ectado 1or la 1rimer traslacin< el segundo 1or la 1rimera $ 1or la segunda< el tercero solo 1or la 1rimera< $a Aue la segunda traslacin est, asociada a una matri6 es1eci9ica.
pushCatrix(); translate(2/, /); rect(/, 6/, K/, 2/); pushCatrix(); translate(0/, /); rect(/, 0/, K/, 2/); popCatrix();
//Dibu a en (2/, 0/) //Dibu a en (3/, 0/)
42
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.
43
&nidad 1?
6ransfor(aciones' =otacin * Escala

Elementos que se introducen en esta Unidad: rotate !1 scale !
;as 9unciones de trans9ormacin son 1oderosas maneras 1ara cam)iar la geometra de un sector es1ec9ico del 1rograma. Na sea 1or el uso de tan solo una< o 1or la com)inacin de %arias< se reAuiere entender como tra)a8a cada una 1or se1arado. El orden en Aue las trans9ormaciones son escritas< a9ecta de 9orma mu$ notoria el com1ortamiento del 1rograma. -=otando * Escalando ;a 9uncin rotate() 1ermite rotar las coordenadas de un sistema< de modo tal Aue las 9iguras $ 9ormas sean di)u8adas con cierto ,ngulo. 0eci)e tan solo un 1ar,metro< el cual modi9ica la rotacin de acuerdo a un ,ngulo
rotate(an'ulo)
El 1ar,metro angulo asume Aue el %alor se encuentra en radianes. ;as 9iguras son siem1re rotadas en relacin a la 1osicin de origen @.< .C. !omo en todas las trans9ormaciones< el e9ecto de rotacin tam)in es acumulati%o. =i :a$ una rotacin de [B4 radianes $ otra de [B4 radianes< entonces la 9igura Aue se di)u8e se rotar, en [B2 radianes.
smooth(); rect(33, /, 0/, .3); rotate(AB/D); rect(33, /, 0/, .3);
smooth(); rect(6/, :/, K/, 2/); rotate(5AB/6:); rect(6/, :/, K/, 2/); rotate(5AB/D); rect(6/, :/, K/, 2/);
Estos e8em1los de8an en claro Aue la rotacin a )ase de la 1osicin de origen tiene sus limitaciones. Mas adelante se e61licar, como com)inar trans9ormaciones. Por otro lado< la 9uncin scale() 1ermite controlar las coordenadas del sistemas 1ara magni9icarlas $ di)u8ar 9iguras de ma$or escala. Esta so1orta uno o dos 1ar,metros
scale(tama+o) scale(xtama+o, ;tama+o)
;a %ersin de un solo 1ar,metro 1ermite escalar la 9igura en todas sus dimensiones< mientras Aue la de dos 1ar,metros a)arca la escala en el e8e 6 $ en el e8e $ de manera indi%idual. ;os 1ar,metros a ingresar se e61resan como %alores decimales con una relacin de 1orcenta8es. Por e8em1lo< 2.. :ace alusin a 2..U< *./ a */.U< $ ../ a /.U.
44
smooth(); ellipse(02, 02, 0/, 0/); scale(6#D); ellipse(02, 02, 0/, 0/);
smooth(); ellipse(02, 02, 0/, 0/); scale(2#D, 6#D); ellipse(02, 02, 0/, 0/);
En los e8em1los anteriores se %e Aue el contorno de la 9igura es a9ectado 1or la escala. Para solucionar este incon%eniente 1uede usarse algo similar al siguiente cdigo
!loat s < 6#D; smooth(); ellipse(02, 02, 0/, 0/); scale(s); stro)eIei'ht(6#/ / s); ellipse(02, 02, 0/, 0/);
N de la misma 9orma Aue translate() $ rotate()< en scale() los %alores tam)in son acumulati%os
rect(6/, 2/, K/, 2/); scale(6#K); rect(6/, 2/, K/, 2/); scale(6#K); rect(6/, 2/, K/, 2/);
-$o(-inando 6ransfor(aciones !uando una 9igura es a9ectada 1or transtale()< rotate() o scale()< siem1re todo es en relacin a la coordenada de origen. Por e8em1lo< al rotar un rect,ngulo en la coordenada @/.< 2.C< la rotacin se :ar, so)re ese mismo e8e
Para :acer Aue la 9igura rote so)re su 1ro1ia esAuina< se de)e cam)iar la coordenada a la 1osicin @.< .C. Para esto< utilizaremos la 9uncin translate(). !uando la 9igura rote< lo :ar, so)re su esAuina su1erior izAuierda.
4/
Ja$ dos maneras de 1ensar las trans9ormaciones. Fn mtodo es utilizar las 9unciones 1ara trans9ormar< $ luego corregir el 1ro)lema de 1osicin con las coordenadas 1ro1ias de la 9igura. El otro mtodo consiste en utilizar las 1ro1ias 9unciones de trans9ormacin 1ara corregir lo no deseado. Ftilizando este mtodo :a$ Aue tener cuidado en el orden Aue se u)ica cada 9uncin. En el siguiente e8em1lo se muestra el mismo cdigo dos %eces 1ero con las 9unciones in%ertidas
translate(Nidth/2, hei'ht/2); rotate(AB/D); rect(523, 523, 3/, 3/);
rotate(AB/D); translate(Nidth/2, hei'ht/2); rect(523, 523, 3/, 3/);
;os siguientes e8em1los demuestran el 1otencial de com)inar 9unciones de trans9ormacin< 1ero tam)in Aueda en claro Aue estas acciones reAuieren un ma$or 1laneamiento.
translate(6/, :/); rect(/, /, K/, 2/); rotate(5AB/62); rect(/, /, K/, 2/); rotate(5AB/:); rect(/, /, K/, 2/); translate(.3, :/); rect(503, 53, K/, 6/); rotate(5AB/D); rect(503, 53, K/, 6/); rotate(5AB/D); rect(503, 53, K/, 6/); noHill(); translate(6/, 2/); rect(/, /, 2/, 6/); scale(2#2); rect(/, /, 2/, 6/); scale(2#2); rect(/, /, 2/, 6/);
4"
noHill(); translate(3/, 0/); rect(56/, 3, 2/, 6/); scale(2#3); rect(56/, 3, 2/, 6/);
;a 1ro1iedad acumulati%a de las 9unciones de trans9ormacin 1uede ser mu$ 3til 1ara generar e9ectos mu$ interesantes con una estructura H?>.
bac)'round(/); smooth(); stro)e(233, 62/); translate(::, 00); //*on!i'ura posicin inicial !or (int i < /; i 9 6D; i44) R//6D repeticiones stro)eIei'ht(i); //Bncrementa 'rosor del contorno rotate(AB/62); //1cumula rotacin line(/, /, 33, /); S bac)'round(/); smooth(); no$tro)e(); !ill(233, .D); translate(00, ::); //*on!i'ura posicin inicial !or (int i < /; i 9 62; i44) R//62 repeticiones scale(6#2); //1cumula escala ellipse(., 2, 2/, 2/); S
-;uevas $oordenadas ;a 1osicin de origen 1or de9ecto se encuentra en el (/, /)< esAuina su1erior izAuierda< $ :ace re9erencia a una 1osicin de los 1i6eles. ;as 9unciones de trans9ormacin 1ueden alterar este sistema de coordenadas< en )ase a alg3n e9ecto Aue deseamos 1roducir.
//Cue,e el ori'en del (/,/) al centro si(e(6//, 6//); 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()< 1uede cam)iarse un rango de %alores.

//Cue,e el ori'en del (/,/) al centro //; cambia el tama+o del sistema de coordenadas si(e(6//, 6//); scale(Nidth/2, hei'ht/2); translate(6#/, 6#/); stro)eIei'ht(6#//Nidth); line(56, /, 6, /); //Dibu a e e Z
4+
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< 1uede usarse 1ara cam)iar el sistema de coordenadas a la esAuina in9erior izAuierda. Este es el sistema de coordenadas Aue usan el -do)e Illustrator $ el Post=cri1t.
//Cue,e el ori'en del (/,/) a la esGuina in!erior i(Guierda si(e(6//, 6//); translate(/, hei'ht); scale(6#/, 56#/); line(/, 6, Nidth, 6); //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);
44
&nidad 1A
Estructuras' $ontinuidad
draN(), !rame>ate(), !rame*ount, setup(), no@oop()
5odos los 1rogramas< mostrados en las unidades anteriores< e8ecutan el cdigo $< 1osteriormente< lo detienen. ;os 1rogramas con animaciones o Aue modi9ican su contenido en %i%o< reAuieren estar e8ecut,ndose continuamente. 'ic:os 1rogramas< se e8ecutan de manera continua $ 1ermiten< 1or lo tanto< animaciones o )ien conseguir datos a tra%s de dis1ositi%os de entrada. -Evaluacin $ontinua Fn 1rograma Aue estar, e8ecut,ndose continuamente reAuiere de la 9uncin draN(). El cdigo dentro de un )loAue draN() es e8ecutado en un continuo loo1 @re1eticinC :asta Aue se detenga de e8ecutar el 1rograma o se cierre la %entana de re1resentacin. Fn 1rograma 1uede tener solo un )loAue draN(). !ada %ez Aue el cdigo dentro del )loAue draN() es terminado de leer< lo muestra en la %entana de re1resentacin $ %uel%e a leer desde la 1rimer lnea @siem1re dentro del )loAue draN()C. Por de9ecto< las im,genes son di)u8adas a ". cuadros 1or segundo @91sC. ;a 9uncin !rame>ate() nos 1ermite cam)iar la cantidad de esos cuadros 1or segundo. El 1rograma se e8ecutar, a la %elocidad Aue se le d al !rame>ate()< a3n as< muc:os 1rogramadores am)iciosos suelen e6ceder la cantidad de cuadros 1or segundos en relacin al 1oder de su ordenador. =e recomienda no e6ceder los ". cuadros Aue $a %ienen 1or de9ecto. ;a %aria)le !rame*ount siem1re contiene el n3mero de cuadros Aue se est1 ejecutando desde Aue el 1rograma 9ue iniciado. Fn 1rograma Aue 1osee un )loAue draN() siem1re %ariar, el n3mero de cuadros @*< 2< 3< 4< /< "...C :asta Aue el 1rograma sea detenido< la com1utadora agote su ca1acidad de 1rocesamiento o se 1ierda la 9uente de tensin Aue la alimenta.
//Bmprime cada nEmero de cuadro en la consola ,oid draN() R println(!rame*ount); S //$e 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 1ar,metro dentro de la estructura draN()< 1roduciremos un sim1le e9ecto de mo%imiento. Por e8em1lo< a tra%s de una %aria)le< cam)iar la 1osicin en la Aue se encuentra una lnea.
!loat ; < /#/; ,oid draN() R !rame>ate(0/); line(/, ;, 6//, ;); ; < ; 4 /#3; S
!uando este cdigo es e8ecutado< las %aria)les son reem1lazadas con los %alores actuales $ %uel%e a correr las acciones en este orden
4&
!loat ; < /#/ !rame>ate(0/) 55555555555555555555555555555555555555555555555555555555 -ntra al draN() line(/, /#/, 6//, /#/) ; < /#3 !rame>ate(0/) 55555555555555555555555555555555555555555555555555555555 -ntra al draN() por se'unda ,e( line(/, /#3, 6//, /#3) ; < 6#/ !rame>ate(0/) 55555555555555555555555555555555555555555555555555555555 -ntra al draN() por tercera ,e( line(/, 6#/, 6//, 6#/) ; < 6#3 -tc###
;a %aria)le de control mostrada anteriormente @llamada yC de)e ser declarada 9uera del )loAue draN(). 'e otro modo< cada %ez Aue el )loAue se actualice %ol%er, a crear la %aria)le< es decir< es como si es %alor se restear). !omo se 1uede com1ro)ar anteriormente< el 9ondo del 1rograma no se actualiza autom,ticamente con cada %uelta del )loAue draN(). Esto 1roduce un e9ecto de )arrido. =in em)argo< PAu 1asa si lo Aue Aueremos es solo una lnea mo%indose< en lugar de una es1ecie de )arridoQ. 0ecurriremos a declararlo como una de las +ri(eras l@neas dentro del draN() $ con un color en es1ec9ico. ;a solucin se 1iensa como si se estu%iese di)u8ando cada cuadro a mano. =i Aueremos Aue la 1osicin antigua de una 9igura desa1arezca< %ol%emos a 1intar el 9ondo< este 1intar, la 9igura $< 1osteriormente< se di)u8ar, la 9igura en la 1osicin actualizada.
!loat ; < /#/; ,oid draN() R !rame>ate(0/); bac)'round(2/.); ; < ; 4 /#3; line(/, ;, 6//, ;); S
;a %aria)le Aue controla la 1osicin de la lnea 1uede ser usada 1ara otros 1ro1sitos. Por e8em1lo< alterar el color del 9ondo
!loat ; < /#/; ,oid draN() R !rame>ate(0/); bac)'round(; * 2#3); ; < ; 4 /#3; line(/, ;, 6//, ;); S
Pasado unos 1ocos segundos del 1rograma< la lnea desa1arece 1or de)a8o. !on una sim1le estructura BH solucionamos ese 1ro)lema
&.
!loat ; < /#/; ,oid draN() R !rame>ate(0/); bac)'round(; * 2#3); ; < ; 4 /#3; line(/, ;, 6//, ;); i! (; 8 6//) R ; < /; S S
-$ontrolando el ,lujo Ja$ 9unciones Aue< incluso en 1rogramas din,micos< solo reAuieren ser e8ecutadas una %ez. El )loAue setup() 1ermite Aue cualAuier 9uncin Aue se escri)a dentro de el se e8ecute solo una %ez. Mu$ 3til 1ara 9unciones como si(e() o loadBma'e()< Aue suelen ser e8ecutadas 3nicamente la 1rimera %ez. El )loAue setup() se escri)e siem1re antes Aue el )loAue draN() $< al igual Aue con el )loAue draN()< 1uede :a)er solo un )loAue setup() 1or 1rograma. !uando un 1rograma es e8ecutado< 1rimero se lee lo Aue est, 9uera de los )loAues setup() $ draN()< luego se lee todo lo Aue est, dentro del setup() $< 9inalmente< lo Aue est, dentro del draN(). En el siguiente e8em1lo< el tamaGo de la %entana< el 9iltro de sua%izado $ el relleno no cam)iar,n< as Aue se incluir,n en el )loAue setup().
&*
!loat ; < /#/; ,oid setup() R si(e(6//, 6//); smooth(); !ill(/); S ,oid draN() R bac)'round(2/.); ellipse(3/, ;, K/, K/); ; 4< /#3; i! (; 8 63/) R ; < 53/#/; S S
!uando este cdigo es e8ecutado< las %aria)les son reem1lazadas con los %alores actuales $ %uel%e a correr las acciones en este orden
!loat ; < /#/ si(e(6//, 6//) 55555555555555555555555555555555555555555555555 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 */.< el cdigo en la estructura I# con%ierte el %alor a O/.. ;a %aria)le Aue cam)ia con cada re1eticin del )loAue draN() de)e ser declarada fuera de los )loAues setup() $ draN(). =i est, es declarada dentro del draN()< se estar, reOcreando con cada re1eticin del mismo< 1or lo tanto su %alor nunca cam)iara. Por otro lado< 9uera de los )loAues setup() $ draN() solo 1ueden declararse $ asignarse %aria)les. =i se declarara una 9uncin< causar, un error. =i un 1rograma solo di)u8ar, un cuadro< este 1uede declararse en el setup(). ;a 3nica di9erencia entre setup() $ draN() es Aue el setup() se e8ecuta solo una ve2.
,oid setup() R si(e(6//, 6//); smooth(); !ill(/); ellipse(3/, 3/, ::, ::); S
Ftilizando la 9uncin no@oop()< 1odemos :acer Aue el draN() de8e de re1etir $ sim1lemente di)u8e un cuadro. El siguiente e8em1lo es similar al anterior< con la di9erencia Aue la eli1se es di)u8ada en el draN()
&2
,oid setup() R si(e(6//, 6//); smooth(); !ill(/); no@oop(); S ,oid draN() R ellipse(3/, 3/, ::, ::); S
-E%tensin de la 4aria-le !uando tra)a8amos con los )loAues setup() $ draN() es necesario tomar consciencia de donde declaramos $ asignamos cada %aria)le. ;a localizacin de la %aria)le determina su e(tensi*n. ;a regla 1ara conocer la e6tensin Aue 1osee una %aria)le es mu$ sim1le su la %aria)le est, dentro de una estructura< esa %aria)le es local $ 1uede usarse solamente dentro de esa estructuraR si la %aria)le est, en el 1rograma< 9uera de cualAuier estructura< esa %aria)le es glo)al $ 1uede usarse en cualAuier estructura. ;as %aria)les declaradas en el setup() 1ueden usarse solo en el setup(). ;as %aria)les declaradas en el draN() 1ueden usarse solo en el draN().
int d < 36; ,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 1uede utilizarse 9uera de ese )loAue.
,oid draN() R int d < D/; //-sta ,ariable puede usarse donde sea en el draN() i! (d 8 3/) R int x < 6/; //-sta ,ariable puede usarse solo en este bloGue BH line(x, ./, x4d, ./); S line(/, 3/, d, 3/); line(x, :/, x4d, :/); //->>?>Q No se puede leer esta ,ariable !uera del S //bloGue ,oid draN() R !or (int ; < 2/; ; 9 D/; ; 4< :) R //@a ,ariable puede usarse line(2/, ;, 3/, ;); //solo en el bloGue H?> S line(;, /, ;, 6//); //->>?>Q No se puede acceder a ; !uera del H?> S
;a im1lementacin de %aria)les locales $ glo)ales 1ermite Aue se 1ueda tener dos o m,s %aria)les con el mismo nom)re. -3n as< no se recomienda el tra)a8o con %aria)les del mismo nom)re $a Aue 1uede 1roducir con9usin en Auien 1rograma.
&3
int d < .3; //1si'na .3 a la ,ariable d ,oid setup() R si(e(6//, 6//); int d < 7/; //1si'na 7/ a la ,ariable local d rect(/, /, 00, d); //&sa la ,ariable local d con S //,alor 7/ ,oid draN() R rect(00, /, 00, d); //&sa d con ,alor de .3 S
Fna %aria)le dentro de un )loAue con el mismo nom)re Aue una %aria)le 9uera del )loAue es< com3nmente< un error mu$ di9cil de encontrar.
&4
&nidad 1B
Estructuras' ,unciones
,oid, return
Fna 9uncin contiene en s misma un modulo de modi9icacin de 1rograma. =e :an utilizado :asta a:ora 9unciones Aue %ienen incluidas en Processing< tales como si(e()< line()< stro)e()< $ translate()< 1ara escri)ir los 1rogramas. =in em)argo< es 1osi)le escri)ir nuestras 1ro1ias 9unciones. ;as 9unciones :acen Aue el cdigo redundante sea mas conciso al mostrarlo en 9orma de )loAue< 1or e6traer elementos comunes. -l mantener 9orma de )loAue< 1ermite Aue el mismo cdigo se utilice una in9inidad de %eces sin necesidad de re1etir las lneas. -dem,s< mantiene una estructura mas sencilla de leer en caso de tener alg3n error. ;as 9unciones de Processing 1or lo general ace1tan una determinada cantidad de 1ar,metros. Por e8em1lo< line() ace1ta cuatro 1ar,metros< los cuales de9inen la 1osicin de dos 1untos. -l cam)iar los n3meros< se cam)ia la 1osicin de la linea. 5am)in el com1ortamiento de la 9uncin 1uede de1ender de la cantidad de 1ar,metros Aue le sean en%iados. Por e8em1lo< la 9uncin !ill() al reci)ir un 1ar,metro 1intar, en escala de grises< con dos 1ar,metros ser,n grises con trans1arencia $ con tres 1ar,metros 0EB. Fna 9uncin 1uede ser imaginada como una ca8a con una serie de mecanismos dentro Aue 1ermiten actuar so)re una serie de datos. Por lo general :a$ datos de entrada $ cdigo dentro de la ca8a< los cuales 1roducen datos de salida
Por e8em1lo< una 9uncin 1uede utilizarse 1ara sumar *. a un n3mero o multi1licar dos
El e8em1lo anterior es sumamente sim1le< 1ero el conce1to 1uede e6tenderse a cuestiones Aue no sean necesariamente tan o)%ias
&/
-/-straccin En trminos de 1rograma< la 1ala)ra a)straccin tiene un signi9ica distinto a el sim1le :ec:o de como uno 1uede 1intar o di)u8ar. =e re9iere a la accin de esconder detalles< en9oc,ndose 3nicamente en los resultados. ;a inter9az de un autom%il 1ermite Aue el trans1orte se mue%a 1or el accionar de los 1edales $ el %olante< ignorando los 1rocesos Aumicos internos de los 1istones $ la com)ustin. ;a idea de a)straccin 1uede 1ensarse tam)in desde el cuer1o :umano. Por e8em1lo< 1odemos controlar nuestra res1iracin< 1ero 1or lo general este 1roceso es in%oluntario. Imaginemos 1or un momento Aue tu%iramos total control de cada accionar de nuestro cuer1o. =i control,ramos nuestra res1iracin< los latidos del corazn< las reacciones Aumicas Aue se 1roducen en nuestro cuer1o $ la retroalimentacin de las neuronas< nos sera com1letamente im1osi)le :acer algo tan sim1le como leer un li)ro o escri)ir un cdigo 1ara un 1rograma. 2uestro cere)ro a)strae estos as1ectos 1ara Aue 1odamos concentrarnos en otros as1ectos de la %ida. 'e esta 9orma< la a)straccin es 9undamental a la :ora de escri)ir un 1rograma. En Processing contamos con a)stracciones< 9unciones como line()< ellipse() $ !ill()< ocultan los 1rocesos Aue realizan 1ara Aue 1odemos concentrarnos en su 1ro1ia im1lementacin. =i nos interesa di)u8ar una lnea< 1osi)lemente nos interese su 1osicin< tamaGo< color $ grosor< $ no el tener una gran cantidad de cdigo Aue e8ecute dic:o sistema. -$reando ,unciones de &suario -ntes de e61licar en detalle como crear una 9uncin de usuario< e61licaremos el 1orAue alguien Auerra crear su 1ro1ia 9uncin. El siguiente 1rograma e61lica como acortar un sistema< 1ara Aue sea m,s modular< a tra%s de una sim1le 9uncin. Esto :ace Aue el cdigo sea m,s sencillo de leer< modi9icar< e61andir. -lgo mu$ com3n es di)u8ar una 9igura en 1antalla re1etidas %eces. Poseemos el cdigo Aue 1ermite crear la 9orma Aue se muestra a continuacin< $ reAuerimos 1oder generar la te6tura Aue se %e a la derec:a
;o 1rimero Aue :aremos ser, di)u8ar sim1lemente la 9igura en 1antalla< solo 1ara corro)orar Aue el cdigo 9uncione
,oid setup() R si(e(6//, 6//); no$tro)e(); smooth(); no@oop(); S ,oid draN() R !ill(233); ellipse(3/, 3/, :/, :/); !ill(/); ellipse(3/46/, 3/, 0/, 0/); !ill(233); ellipse(3/46:, .3, :, :); S
//*rculo =lanco //*rculo Ne'ro //*rculo =lanco ; AeGue+o
El 1rograma anterior muestra una 9orma mu$ lim1ia $ clara de di)u8ar una sim1le 9igura. Pero si dese,ramos
&"
Aue 9uesen dos< nos %eremos o)ligados a multi1licar el n3mero de lneas de cdigo. =i el cdigo tiene " lneas< tendremos *2. Para diseGar nuestra te6tura< necesitaremos " 9iguras< 1or lo tanto son 3" lneas de cdigo. Imaginemos un caso con 3. 9iguras< dentro del )loAue draN() se 1resentaran *4. lneas de sim1le cdigo.
,oid setup() R si(e(6//, 6//); no$tro)e(); smooth(); no@oop(); S ,oid draN() R //Hi'ura de la Derecha !ill(233); ellipse(:3, .., :/, :/); !ill(/); ellipse(K3, .., 0/, 0/); !ill(233); ellipse(D6, 07, :, :); //Hi'ura de la B(Guierda !ill(233); ellipse(2/, 3/, :/, :/); !ill(/); ellipse(0/, 3/, 0/, 0/); !ill(233); ellipse(0:, .3, :, :); S
!omo las 9iguras son idnticas< 1odemos utilizar una 9uncin 1ara sim1li9icar la tarea. =im1lemente agregaremos los datos de entrada de la 1osicin en 6 $ en $.
,oid setup() R si(e(6//, 6//); no$tro)e(); smooth(); no@oop(); S ,oid draN() R 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 4 lneas de cdigo< 1ero tan solo lo escri)iremos una %ez. !on esta estrategia< es 1osi)le di)u8ar 3. o8os con 34 lneas de cdigo. !ada %ez Aue la 9uncin es usada con el draN()< las lneas de cdigo dentro de la 9uncin son e8ecutadas. El 9lu8o casual del 1rograma es interrum1ido 1or la 9uncin. Fna %ez terminada la e8ecucin del cdigo dentro de la 9uncin< se dis1one a leer lo Aue sigue en el )loAue draN()
&+
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 Muele,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< 1odemos crear tantas 9iguras como Aueramos. 'e esta 9orma de8aremos de 1reocu1arnos 1or como la 9igura es di)u8ada< $ nos concentraremos en en%iar correctamente la 1osicin a tra%s de los dos 1ar,metros
,oid setup() R si(e(6//, 6//); no$tro)e(); smooth(); no@oop(); S ,oid draN() R 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 im1ortante a la :ora de escri)ir una 9uncin< es tener la idea clara de lo Aue se %a a :acer. P'i)u8ar, una 9iguraQP!alcular, un n3meroQP-1licara un 9iltro de imagenQ Fna %ez Aue se 1iensa en Aue se Auiere :acer< :a$ Aue 1ensar en los 1ar,metros Aue reci)ir,. 'e este modo se construir, una 9uncin en 1ocos 1asos. En el siguiente e8em1lo< el mismo e61lora algunos detalles de la 9uncin antes de escri)irla. 'es1us< se constru$e la 9uncin< donde se agrega un 1ar,metro cada %ez Aue se com1rue)a el cdigo
,oid setup() R si(e(6//, 6//); smooth(); no@oop();
&4
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 1ueda di)u8ar las tres >< 1rimero crearemos el cdigo 1ara Aue solo di)u8e una. ;lamaremos a la 9uncin dibu arZ() 1ara Aue sea m,s claro. 'entro< escri)iremos el cdigo 1ara di)u8ar la > de color gris claro @el mismo Aue est, arri)aC $ la llamaremos a la 9uncin desde el draN(). !omo la 9uncin no reci)e 1ar,metros< di)u8ar, la > tal cual est, en el cdigo
,oid setup() R si(e(6//, 6//); smooth(); no@oop(); S ,oid draN() R 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 1ar,metro. En el siguiente e8em1lo< la %aria)le gris a sido aGadida 1ara 1oder reci)ir un 1ar,metro Aue act3e como %aria)le de control de la escala de grises de la >. Este 1ar,metro %aria)le< de)e incluir el ti1o $ un nom)re.
,oid setup() R si(e(6//, 6//); smooth(); no@oop(); S ,oid draN() R 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
&&
Esto est, )ien 1ara un e8em1lo sencillo< 1ero una 9uncin 1uede no necesariamente ace1tar solo un 1ar,metro. Podemos crear una cantidad ilimitada de estos. !ada 1ar,metro de)e tener un lugar entre los 1arntesis< 1osterior al llamado de la 9uncin. 'e)e es1eci9icarse el ti1o de dato $ el nom)re de cada uno de ellos. En el siguiente e8em1lo< se agrega el 1ar,metro grosor:
,oid setup() R si(e(6//, 6//); smooth(); no@oop(); S ,oid draN() R 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 e8em1lo< se e6tiende sus 1ro1iedades con tres 1ar,metros m,s adicionales a los anteriores
,oid setup() R si(e(6//, 6//); smooth(); no@oop(); S ,oid draN() R 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 1rogramar 9unciones< :aciendo 1aso 1or 1aso< sin 1erder el o)8eti%o original. En este caso< 1odemos concluir generando el di)u8o de las > originales de la siguiente 9orma
,oid setup() R si(e(6//, 6//); smooth(); no@oop(); S ,oid draN() R 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
*..
-:ora Aue tenemos 1rogramada nuestra 9uncin dibu arZ()1 es 1osi)le crear cosas mu$ interesantes Aue seran 1oco 1r,cticas sin la im1lementacin de una de ellas. Por e8em1lo< con un llamado de la 9uncin dentro de una estructura H?>< 1odemos iterar con 1eAueGas %ariaciones el modo en Aue se muestra la 9igura
,oid setup() R si(e(6//, 6//); smooth(); no@oop(); S ,oid draN() R !or (int i < /; i 9 2/; i44) R 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 e8em1lo usaremos una 9uncin Aue nom)raremos ho a() $ otra Aue llamaremos parra(). !on esto se 1retende demostrar como una 9uncin 1uede correr dentro de otra. Para em1ezar de9iniremos Aue 1ar,metros reAuerimos
!loat x !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 1rograma 1ara di)u8ar la 9igura es mu$ sencillo

,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); no@oop(); S ,oid draN() R
*.*
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()< 1osee 1ar,metros 1ara cam)iar la 1osicin< 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 es1acio entre cada :o8a
,oid setup() R si(e(6//, 6//); smooth(); no@oop(); S ,oid draN() R parra(00, 7, 6:); S ,oid parra(int x, int num\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 1ueden tener el mismo nom)re< siem1re $ cuando tengan distinta cantidad de 1ar,metros. -l crear 9unciones con el mismo nom)re< se lo denomina sobrecarga de funciones. Esto es lo Aue 1ermite Aue Processing tenga 9unciones mas de una %ersin de 9unciones como !ill()1 ima'e() $ text()1 cada una ace1ta di9erentes 1ar,metros. Por e8em1lo< !ill() 1uede tener uno< dos< tres o :asta cuatro 1ar,metros. !ada %ersin de !ill() con9igura el color de relleno de una 9igura< $a sea en escala de grises< grises con trans1arencia< 0EB o 0EB con trans1arencia< res1ecti%amente. Fn 1rograma 1uede< tam)in< tener dos 9unciones con el mismo nom)re $ el mismo n3mero de 1ar,metros< 1ero sus 1ar,metros son de ti1os de datos di9erentes. Por e8em1lo< :a$ tres %ersiones di9erentes de !ill() Aue ace1tan un solo 1ar,metro. ;a 1rimer %ersin utiliza un 1ar,metro ti1o int< 1ara escala de grises. ;a segunda %ersin utiliza uno del ti1o float< tam)in 1ara escala de grises. N la tercer %ersin ace1ta un
*.2
1ar,metro del ti1o color< 1ara con9igurar directamente desde un color. En el lengua8e de Processing< sera mu$ 9rustrante con9igurar un nom)re distinto solo 1ara o)tener el mismo resultado. El siguiente e8em1lo utiliza tres %ersiones distintas de dibu arZ()< 1ero 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 * =egresando 4alores En los e8em1los anteriores< la salida 1roducida 1or una 9uncin di)u8a una 9igura o una 9orma en la 1antalla. 2o o)stante< :a$ %eces Aue 1re9erimos Aue la 1ro1ia salida Aue se 1roduce sea un ti1o de dato. - esto se lo llama regresar un $alor. 5odas las 9unciones 1uede regresar un %alor< como un int o un !loat. =i la 9uncin no regresa ning3n %alor en 1articular< se utiliza la 9uncin es1ecial llamada ,oid @cu$o signi9icado es $ac@o< es decir< la 9uncin regresa un %alor %acoC. El ti1o de dato Aue regresa la 9uncin se declara a la izAuierda del nom)re de la misma. ;a 1ala)ra return es usada 1ara salir de la 9uncin $ regresar a la 1osicin de la cual 9ue llamada. =i una 9uncin regresar, un %alor< se utiliza return 1ara indicar Aue %alor se de)e de%ol%er. ;a accin de utilizar return es usualmente usada en la 3ltima lnea de la 9uncin< 1uesto Aue ine%ita)lemente saldr, de la 9uncin una %ez usada. Por lo general< con las 9unciones de Processing< solemos utilizar 9unciones Aue de%uel%en %alores. Por e8em1lo< random() de%uel%e un %alor ti1o !loat< $ la 9uncin color() de%uel%e un %alor ti1o color. =i la 9uncin %a a de%ol%er un %alor< de)e llamarse dentro de una %aria)le
!loat d < random(/, 6//); ellipse(3/, 3/, d, d);
-dem,s< de)emos ser cuidadosos con el ti1o de dato Aue estamos utilizando 1ara guardar el %alor
Ignacio Buioli | Jaime Prez Marn *.3
int d < random(/, 6//); ellipse(3/, 3/, d, d);
//->>?>Q random() re'resa un ,alor tipo !loat
=i consultamos la re9erencia de cada 9uncin< 1odemos tener una idea de Aue clase de dato mane8a cada 9uncin en 1articular. El 1ro)lema ocurre cuando utilizamos 9unciones de usuario. Para escri)ir nuestras 1ro1ias 9unciones< sim1lemente reem1lazaremos el ti1o de datos ,oid 1or el ti1o de datos Aue 1retendemos de%ol%er. 2o :a$ Aue ol%idar incluir la 1ala)raOcla%e return dentro< de 1re9erencia en la 3ltima lnea. El siguiente e8em1lo muestra una manera mu$ sim1le de escri)ir una 9uncin Aue de%uel%e datos
,oid setup() R si(e(6//, 6//); !loat ! < a,era'e(62#/, :#/); 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
*.4
&nidad 20
,or(as' Par1(etros * =ecursin

;os 1rogramas 1ro%een de :erramientas mnimas 1ara la e61loracin $ la )3sAueda de sistemas con com1ortamientos 1articulares. Fna de estas o1ciones es recurrir al uso de 9unciones. !uando una 9igura es di)u8ada a 1artir de los 1ar,metros Aue reci)e< se dice Aue esa 9orma esta parametri3ada. -dem,s< una 9uncin 1uede contener en s misma una lnea de cdigo Aue utilice la misma 9uncin dentro de s misma. Est, tcnica es conocida como recursi*n. -,or(as Para(etri2adas ;a 9uncin ho a() @%ista anteriormenteC es un claro e8em1lo de una 9orma 1arametrizada. 'e1endiendo los 1ar,metros Aue reci)a< 1roduce un 9orma di9erente. ;a 9orma est, condicionada a sus 1ar,metros
;as cartas -rs Magna creadas 1or 5atsu$a =aito< muestra un e8em1lo de un sistema de im,genes modulares. 2ue%e im,genes di%idas en dos
Fna de las cartas 9rontales es usada en com)inacin con una de las traseras 1ara crear resultados ines1erados
Fn sim1le 1rograma Aue 1uede em1learse 1ara generar dic:os resultados 1odra ser el siguiente
*./
si(e(62/, 6//); int !rentre < int(random(6, 6/)); //$eleccionar una carta del !rente int atras < int(random(6, 6/)); //$eleccionar una carta de atr"s ABma'e im'Hrente < loadBma'e(!rente 4 W!# p'W); ABma'e im'1tras < loadBma'e(atras 4 Wb# p'W); ima'e(im'Hrente, /, /); ima'e(im'1tras, :/, /);
El sistema de -rs Magna nos 1ermite crear< sin em)argo< un n3mero 9inito de com)inaciones. 7tra 9orma de crear 9ormas 1arametrizadas es 1or incluir %alores de entrada a tra%s de alg3n dis1ositi%o. Este es uno de los m,s grandes a%ances de crear %isual con cdigo. Fna sim1le 9uncin arco()< creada usando be(ierMertex()< 1uede generar cam)ios continuos modulares 1or cam)iar un sim1le 1ar,metro. El 1ar,metro 1ara la 9uncin arco() es un n3mero decimal @9loatC< as Aue 1ueden generarse %ariaciones sumamente 1eAueGas.
!loat c < 23#/; //1l cambiar los ,alores de c ,oid setup() R //cambia la cur,atura si(e(6//, 6//); smooth(); no@oop(); S ,oid draN() R arco(c); S ,oid arco(!loat cur,atura) R !loat ; < 7/#/; stro)eIei'ht(:); noHill(); be'in$hape(); ,ertex(63#/, ;); be(ierMertex(63#/, ;5cur,atura, 0/#/, 33#/, 3/#/, 33#/); be(ierMertex(K/#/, 33#/, D3#/, ;5cur,atura, D3#/, ;); end$hape(); S
En un sistema 1arametrizado< como la 9uncin arco !< el %alor de un 1ar,metro 1uede a9ectar a mas de una %aria)le. Esto es llamado coupling @1are8asC. =i cam)iamos un 1oco el cdigo dentro de la 9uncin arco !< el %alor de entrada cur$atura 1uede control el grosor de la lnea< adem,s de la cur%a.
,oid arco(!loat cur,atura) R !loat ; < 7/#/; !loat sN < (:3#/ 5 cur,atura) / .#/; stro)eIei'ht(sN); noHill(); be'in$hape(); ,ertex(63#/, ;); be(ierMertex(63#/, ;5cur,atura, 0/#/, 33#/, 3/#/, 33#/); be(ierMertex(K/#/, 33#/, D3#/, ;5cur,atura, D3#/, ;); end$hape(); S
Esto se trata tan solo de un e8em1lo mu$ sencillo. El mismo 1ar,metro 1uede utilizarse 1ara cam)iar as1ectos como la %isualizacin< la rotacin o la escala. El siguiente 1rograma es 1rue)a de ello
Ignacio Buioli | Jaime Prez Marn *."
int x < 2/; //*oordenada Z int u < 6.; //&nidades !loat a < 5/#62; //dn'ulo ,oid setup() R si(e(6//, 6//); stro)e(/, 630); smooth(); no@oop(); S ,oid draN() R bac)'round(2/.); tra(o(x, u, a); S ,oid tra(o(int xpos, int unidad, !loat an'ulo) R pushCatrix(); translate(xpos, /); !or (int i < unidad; i 8 /; i55) R //*uenta >e'resi,a stro)eIei'ht(i); line(/, /, /, D); translate(/, D); rotate(an'ulo); S popCatrix(); S
-=ecursin Fn e8em1lo 1r,ctico de algo recurrente es situarse entre dos es1e8os $ %er el Kin9initoL. En trminos del 1rograma< la recursin se 1roduce cuando una 9uncin 1uede llamarse a s misma si tener ninguna clase de )loAueo. Para e%itar Aue se llama a s misma eternamente< es necesario agregar una salida. El siguiente 1rograma genera el mismo resultado de dos maneras distintas. Fna es 1or un ciclo H?> $ la otra 1or recursin.
int x < 3; !or (int num < 63; num 8< /; num 5< 6) R line(x, 2/, x, D/); x 4< 3; S ,oid setup() R 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 e8em1lo de recursin consume muc:os m,s recursos $ 1uede em1eorar el rendimiento de nuestro 1rograma. Para c,lculos mu$ sim1les< una estructura .?< es una gran solucin. 2o o)stante< la recursin a)re un a)anico de 1osi)ilidades )astante interesantes. ;os siguientes e8em1los utilizan una 9uncin llamada dibu arT()< 1ara as mostrar los di9erentes e9ectos de la recursin
*.+
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() 1uede :acerse una recursin si se llama a los elementos del )loAue nue%amente. =im1lemente se necesitar, agregar una %aria)le num Aue 1ermita aumentar o decrecer la cantidad de %eces Aue se llama a dic:a 9uncin
int x < 3/; //*oordenada Z del centro int ; < 6//; //*oordenada V de 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< 1uede ser %isualizada de di%ersas maneras. El siguiente 1rograma di)u8ar un crculo en cada nodo $ elimina las uniones.
int x < :0; //*oordenada Z int r < D3; //>adio de Bnicio int n < :; //NEmero de recursiones ,oid setup() R si(e(6//, 6//); no$tro)e(); smooth(); no@oop(); S ,oid draN() R dibu ar*irculo(x, r, n); S ,oid dibu ar*irculo(int x, int radius,
int
num)
*.4
!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 1eAueGa modi9icacin a las %aria)les 1roducen di9erentes resultados en la %isualizacin. =i a cada crculo se le agregara una %alor aleatorio 1ara marcar la 1osicin< el resultado sera una imagen con una mezcla eAuili)rada entre orden $ desorden. En el siguiente e8em1lo< en cada recursin< la escala de los crculos decrece< la distancia con el crculo anterior tam)in< $ aumenta su ni%el de oscuridad. -l cam)iar el n3mero utilizado con el random$eed()< la com1osicin %ara.
int x < :0; //*oordenada Z int ; < 3/; //*oordenada V int r < D/; //>adio de Bnicio int n < K; //NEmero de recursiones int rs < 62; //Malor para random$eed ,oid setup() R si(e(6//, 6//); no$tro)e(); smooth(); no@oop(); random$eed(rs); S ,oid draN() R 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
*.&
&nidad 21
4alores de Entrada' 5ouse

mouseX, mouseY, pmouseX, pmouseY, mousePressed, mouseButton cursor(), noCursor()
;a 1antalla del ordenador es tan solo un 1uente entre nuestro cuer1o 9sico $ una cantidad a)ismal de circuitos elctricos Aue :a)itan dentro de una com1utadora. !ontrolamos los elementos de la 1antalla a tra%s de K1rtesisL 9sicas< tales como 1antallas t,ctiles< tracH)alls o 8o$sticHs. =in em)argo< el m,s com3n de todos estos dis1ositi%os 1osi)lemente sea el mouse @ratnC. El mouse de los ordenadores data de 9inales de *&".< cuando 'ouglas Engel)art lo 1resent como un dis1ositi%o del o2O;ine =$stem @2;=C< uno de los 1rimeros sistemas de ordenadores con %isualizacin de %ideo. El mouse 9ue incluido como conce1to en >ero6 Palo -lto 0esearc: !enter @P-0!C< 1ero no 9ue :asta *&44 Aue la -11le Macintos: lo con%irti en catalizador de su actual uso. El diseGo del mouse :a tenido di%ersas modi9icaciones a tra%s de los aGos. 2o o)stante< su 9orma de uso sigue siendo la mismo. =e encarga de cam)iar en 1antalla la 1osicin >ON del cursor. -#atos del 5ouse En Processing< las %aria)les Aue nos 1ermiten o)tener datos del mouse son mouseZ $ mouseV @ntese el uso de ma$3sculas en la > $ en la NC tomando como re9erencia la esAuina su1erior izAuierda como e8e .<.. Para %er los %alores actuales del mouse en la consola< se recurre a un sim1le 1rograma
,oid draN() R !rame>ate(62); println(mouseZ 4 W F W 4 mouseV); S
!uando un 1rograma inicia< el %alor de mouseZ $ mouseV es .. =i el cursor se mue%e dentro de la %entana de re1resentacin< el %alor cam)ia a la actual 1osicin del mismo. =i el cursor se encuentra a la izAuierda< el %alor de mouseZ ser, . $ comenzar, a incrementar a medida Aue este se mue%e :acia la derec:a. En cam)io< si el cursor esta arri)a< el %alor de mouseV ser, . $ comenzar, a aumentar a medida Aue este se mue%e :acia a)a8o. =i mouseZ $ mouseV se encuentran en un 1rograma donde no e6iste una estructura draN() o est, acti%ada la 9uncin no@oop() en el setup()< los %alores de am)os ser,n siem1re .. Eeneralmente< la 1osicin del mouse es utilizada 1ara controlar la 1osicin de algunos elementos de 1antalla. ;o interesante se 1roduce cuando e6isten di9erentes relaciones entre unos elementos $ otros a )ase de conseguir datos de entrada 1or la 1osicin del mouse. Para in%ertir los %alores del mouse< sim1lemente :a$ Aue restarle a mouseZ el anc:o de 1antalla @NidthC $ a mouseV el alto de 1antalla @hei'htC.
// &n circulo si'ue al cursor ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); S ,oid draN() R bac)'round(62:); ellipse(mouseZ, mouseV, 00, 00); S
**.
//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 im1rimen como %alor la 1osicin del mouse 1re%ia al cuadro Aue se esta e8ecutando. =i el mouse no se mue%e< el %alor siem1re ser, el mismo. =in em)argo< si el mouse se mue%e r,1idamente< lo %alores 1ueden oscilar entre di%ersos 1ar,metros. Para %er esta di9erencia< se 1uede e8ecutar un sim1le 1rograma Aue alterne los mo%imientos lentos $ r,1idos del mouse
,oid draN() R !rame>ate(62); println(pmouseZ 5 mouseZ); S
***
-l di)u8ar una lnea desde la anterior 1osicin del mouse :asta la 1osicin actual< se re%ela la %elocidad $ la direccin del trazado. !uando el mouse est, Auieto< si di)u8a un 1unto. 2o o)stante< al mo%er el mouse< se di)u8an largas lneas.
// 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 1ueden utilizarse 1ara controla la escala< 1osicin $ rotacin de los elementos del 1rograma. Por e8em1lo< 1ueden em1learse 8unto a la 9uncin translate().
// &tili(ando translate() para mo,er la !i'ura ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); S ,oid draN() R bac)'round(62:); translate(mouseZ, mouseV); ellipse(/, /, 00, 00); S
-ntes de utilizar los %alores o)tenidos 1or mouseZ $ mouseV< :a$ Aue 1ensar 1rimero en la clase de 1ar,metros Aue ace1tan dic:as 9unciones de trans9ormacin. Por e8em1lo< la 9uncin rotate() solo ace1ta %alores en radianes. Para :acer Aue una 9igura rote en 3". grados< es necesario con%ertir los %alores de mouseZ en %alores de ... a 2[. En el siguiente e8em1lo< se utiliza la 9uncin map() 1ara con%ertir dic:os %alores. El %alor o)tenido es utilizado en la 9uncin rotate().
// &tili(ando rotate() para rotar la !i'ura ,oid setup() R si(e(6//, 6//); stro)eIei'ht(D); smooth(); S ,oid draN() R bac)'round(2/.); !loat an'le < map(mouseZ, /, Nidth, /, TI?YAB); translate(3/, 3/); rotate(an'le); line(/, /, ./, /); S
**2
'e la misma 9orma< se 1uede utilizar una estructura BH 1ara reconocer indi%idualmente di9erentes sectores de la 1antalla
// @a posicin del cursor selecciona una mitad de la pantalla ,oid setup() R si(e(6//, 6//); no$tro)e(); !ill(/); S ,oid draN() R bac)'round(2/.); i! (mouseZ 9 3/) R rect(/, /, 3/, 6//); //B(Guierda S else R rect(3/, /, 3/, 6//); //Derecha S S // @a posicin del cursor selecciona la i(Guierda, derecha o //el centro de la pantalla ,oid setup() R si(e(6//, 6//); no$tro)e(); !ill(/); S ,oid draN() R bac)'round(2/.); i! (mouseZ 9 00) R rect(/, /, 00, 6//); //B(Guierda S else i! ((mouseZ 8< 00) UU (mouseZ 9< ::)) R rect(00, /, 00, 6//); //Cedio S else R rect(::, /, 00, 6//); //Derecha S S
// @a posicin del cursor selecciona un cuadrante de la //pantalla ,oid setup() R si(e(6//, 6//); no$tro)e(); !ill(/); S ,oid draN() R bac)'round(2/.); i! ((mouseZ 9< 3/) UU (mouseV 9< 3/)) R rect(/, /, 3/, 3/); //1rriba5B(Guierda S else i! ((mouseZ 9< 3/) UU (mouseV 8 3/)) R rect(/, 3/, 3/, 3/); //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
**3
// @a posicin del cursor selecciona un "rea rectan'ular ,oid setup() R si(e(6//, 6//); no$tro)e(); !ill(/); S ,oid draN() R bac)'round(2/.); i! ((mouseZ 8 ./) UU (mouseZ 9 D/) UU (mouseV 8 2/) UU (mouseV 9 D/)) R !ill(233); S else R !ill(/); S rect(./, 2/, ./, :/); S
-0otones del 5ouse ;os dis1ositi%os de entrada de las com1utadora< 1or lo general< 1oseen entre 2 $ 3 )otones< $ Processing 1uede detectarlos. ;a deteccin de la 1osicin del mouse< sumado a los )otones< 1ermiten utilizar al mouse como un im1ortante dis1ositi%o de entrada en un 1rograma interacti%o. ;a %aria)le mouseAressed de%uel%e un %alor true cuando un )otn del mouse es o1rimido< 1or el contrario de%uel%e un !alse. -dem,s< 1ermite detectar Aue )otn 9ue o1rimido a tra%s de la %aria)le mouse=utton< 1udiendo ser su %alor @-HT @izAuierdoC< >BX\T @derec:oC $ *-NT-> @centroC< de1endiendo el )otn Aue se desee detectar. Estas %aria)les 1ueden utilizarse inde1endientes o en com)inacin
// -l cuadrado cambia a blanco cuando el botn es presionado ,oid setup() R si(e(6//, 6//); S ,oid draN() R bac)'round(2/.); i! (mouseAressed << true) R !ill(233); //=lanco S else R !ill(/); //Ne'ro S rect(23, 23, 3/, 3/); S // -l cuadro se ,uel,e ne'ro cuando se oprime el botn //i(Guierdo ; blanco cuando se oprime el derecho, ; 'ris //cuando no se oprime nin'uno# ,oid setup() R si(e(6//, 6//); S ,oid draN() R i! (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
**4
S rect(23, 23, 3/, 3/); S
2ota -l utilizar so9t?are Aue detecte dis1ositi%os de entrada< se suele correr el riesgo de Aue el usuario no 1osea el dis1ositi%o indicado @es1ecialmente si se 1lanea su)ir el 1ro$ecto a la ?e)C. Por e8em1lo< e6isten usuarios Aue 1oseen un dis1ositi%o de mouse con dos )otones $ otros Aue tienen tres )otones. Es im1ortante tener esto en mente a la :ora de 1rogramar con dis1ositi%os de entrada. -Icono del $ursor El cursor 1uede ser ocultado con la 9uncin no*ursor()< $ del mismo modo 1uede reem1lazarse 1or la 9uncin cursor(). !uando la 9uncin no*ursor() se est, e8ecutando< el cursor se encuentra totalmente oculta< sin em)argo< la 1osicin 1uede conseguirse con mouseZ $ mouseV.
// 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, com1letamente oculto :asta Aue se llame a la 9uncin cursor()
// -sconde el cursor hasta Gue se oprima el botn del mouse ,oid setup() R si(e(6//, 6//); no*ursor(); S ,oid draN() R bac)'round(2/.); i! (mouseAressed << true) R cursor(); S S
-dem,s< la 9uncin cursor() ace1ta determinados 1ar,metros Aue 1ermiten cam)iar el cursor determinado 1or de9ecto 1or otro di9erente. ;os 1ar,metros autoOdescri1ti%os son 1>>?I @9lec:aC< *>?$$ @cruzC< \1ND @manoC< C?M- @mo%erC< T-ZT @te6toC $ I1BT @es1eraC.
// 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 **/
line(mouseZ, /, mouseZ, hei'ht); line(/, mouseV, hei'ht, mouseV); S
;as im,genes Aue se muestren como cursor son las Aue est,n instaladas 1or de9ecto en el ordenador< $ %aran entre sistemas o1erati%os.
**"
&nidad 22
#i-ujo' ,or(as Est1ticas

El :ec:o de di)u8ar im1lica trasladar las 1erce1ciones indi%iduales $ la imaginacin en 9ormas %isuales de re1resentacin. ;as di9erencias entre los di)u8os de las 1ersonas demuestran Aue cada K manoL $ cada mente es 3nica. ;os di)u8os %an desde las redes mec,nicas de =ol ;eIitt< 1asando 1or las lneas l3cidas de Paul Xlee< la 9iguracin a)stracta de Mariano #errante< las 9iguraciones crom,ticas de >ul =olar< $ muc:o m,s all,. Es in9initamente a)arcador el uni%erso Aue en%uel%e al di)u8o. El di)u8o 1or com1utadora se inicia a 1lantear en la dcada de *&".. I%an =ut:erland :a)a creado en *&"3< el so9t?are de &ketchpad @ta)la de di)u8oC 1ara su disertacin de P:'. El =Hetc:1ad se con%irti en el antecesor de 1rogramas como el -utocad< el -do)e Illustrator o el InHsca1e. -Derra(ientas Si(+les Fna 9orma mu$ sencilla de di)u8ar con Processing es no incluir la 9uncin bac)'round() dentro del )loAue draN(). Esta omisin 1ermite acumular 1i6eles cuadro a cuadro.
//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
**+
tan sim1le como una estructura H?>< es 1osi)le di)u8ar lineas mas com1le8as con 1oca cantidad de cdigo.
,oid setup() R si(e(6//, 6//); S ,oid draN() R !or (int i < /; i 9 3/; i 4< 2) R point(mouseZ4i, mouseV4i); S S ,oid setup() R si(e(6//, 6//); S ,oid draN() R !or (int i < 56.; i 9< 6.; i 4< 2) R point(mouseZ4i, mouseV); S S ,oid setup() R si(e(6//, 6//); no$tro)e(); !ill(233, ./); bac)'round(/); S ,oid draN() R 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(1genes 'e la misma 9orma Aue se em1lean las 9iguras 1reOdiseGadas de Processing como :erramientas de di)u8o< las im,genes Aue nosotros mismos cargamos 1ueden ser em1leadas 1ara la misma la)or.
// 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
**4
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
**&
&nidad 23
4alores de Entrada' 6eclado

)e;Aressed, )e;, )e;*ode
;os teclados son com3nmente utilizados como dis1ositi%os de entrada de caracteres 1ara com1oner documentos de te6to< Email< mensa8era instant,nea< $ relacionados. =in em)argo< el 1otencial de un teclado de com1utadora %a muc:o m,s all, Aue su uso com3n. ;a e61ansin de la m,Auina de escri)ir al teclado 1ermiti utilizar este mismo como medio 1ara e8ecutar 1rogramas< mo%erse entre a1licaciones $ na%egar en 3' en los di%ersos %ideoO8uegos. Es 1osi)le ignorar la im1resin de caracteres $ concentrarse solo en el ritmo en el Aue se o1rimen las teclas. 'e esta 9orma< 1odremos crear un 1rograma Aue o)tenga como %alor de entrada la %elocidad con la Aue se escri)e< $ utilizar dic:os %alores 1ara controlar la %elocidad de un e%ento. En los 3ltimos aGos< el teclado :a sido re%alorizado 1or otra clase de dis1ositi%os Aue no res1onden al estilo de escritura DIE05N. Mtodos de tamaGo m,s 1eAueGo< como el teclado numrico de los tel9onos @a 1esar de Aue dic:a inter9az :alla 9allado en la industria $ a:ora los tel9onos m%iles utilicen teclado ti1o DIE05NC. Por otro lado< el reconocimiento de %oz est, a%anzando 9uertemente< $ se 1roclama como una alternati%a 9utura a la escritura 1or medio del teclado. -#atos del 6eclado Processing 1uede registrar la 3ltima tecla 1resionada 1or un dis1ositi%o de teclado. Por lo tanto< la %aria)le Aue se em1lea es denominada )e;Aressed1 $ de%uel%e un %alor de ti1o boolean. 'ic:o %alor ser, true solo cuando una tecla :alla sido 1resionada< de lo contrario ser, !alse. Mientras la tecla es 1resionada< este %alor se mantendr, true< sin em)argo< se con%ertir, en un !alse cuando la tecla sea li)erada.
// 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
*2.
;a %aria)le )e; es del ti1o char1 1ermite almacenar un car,cter< el 3ltimo 1resionado. ;a %aria)le )e; solo almacenar, un %alor cada %ez. 'e esta manera< 1odemos crear un 1rograma Aue muestre te6to utilizando la %aria)le )e; $ la 9uncin text().
AHont !ont; ,oid setup() R si(e(6//, 6//); !uente < loadHont(WThesisCono@i'ht5K2#,lNW); textHont(!uente); S ,oid draN() R bac)'round(/); text()e;, 2D, K3); S
;a %aria)le )e;< suele em1learse 1ara detectar cual 9ue la 3ltima tecla o1rimida. El siguiente e8em1lo usa la e61resin relacional )e; << ^1^. El em1leo de las comillas sim1les @ ^ ^C $ no de las comillas do)les @ C se de)e a Aue las comillas do)le se inter1retan como %alores del ti1o $trin'< $ )e; solo de%uel%e %alores del ti1o char. Por lo tanto< si utiliz,ramos comillas do)les nos 1roducira un error. El e%ento se 1roducir, cuando se o1rima la - ma$3scula 3nicamente.
,oid setup() R si(e(6//, 6//); smooth(); stro)eIei'ht(.); S ,oid draN() R bac)'round(2/.); // $i ^1^ es presionada, 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 1roducir, un e%ento< es 1resionada< 1ero se 1uede correr el riesgo de Aue el usuario tenga acti%ada la ma$3scula. Por ende< %amos a recurrir a com1ro)ar am)as teclas 1ara un mismo e%ento. Para esto< utilizaremos la e61resin relacional TT @oC.
i! (()e;Aressed << true) UU (()e; << â^) TT ()e; << ^1^))) R
Na Aue cada tecla tiene un %alor numrico asignado @-=!IIC< el %alor de una )e; 1uede utilizarse como %aria)le de control.
int x < /; ,oid setup() R si(e(6//, 6//); S ,oid draN() R i! ()e;Aressed << true) R
*2*
x < )e; 5 02; rect(x, 56, 2/, 6/6); S S
!loat an'le < /; ,oid setup() R si(e(6//, 6//); smooth(); stro)eIei'ht(D); S ,oid draN() R bac)'round(2/.); i! ()e;Aressed << true) R i! (()e; 8< 02) UU ()e; 9< 62:)) R // $i es una tecla al!anum%rica, // con,ertir este ,alor en un "n'ulo an'le < map()e;, 02, 62:, /, TI?YAB); S S arc(3/, 3/, ::, ::, an'le5AB/:, an'le4AB/:); S
-6eclas $odificadas -dem,s de leer letras numricas< caracteres< $ sm)olos< Processing 1uede leer %alores de otras letras tales como -lt< !ontrol< =:i9t< BarraOEs1aciadora< Enter< 0eturn< Esca1e $ la )arra de )orrar. ;a %aria)le )e;*ode almacena constantes encargadas de administrar esa in9ormacin. =e em1lea con la e61resin )e;*ode << *?D-D1 donde la constante 1uede ser 1@T1 *?NT>?@1 $\BHT1 &A @arri)aC< D?IN @a)a8oC< @-HT @izAuierdaC< $ >BX\T @derec:aC. E6isten caracteres Aue no son al9anumricos< como =1*e$A1*-1 T1=1 -NT->1 >-T&>N1 -$*< $ D-@-T-1 $ sin em)argo no se los considera caracteres codi9icados. Esto se de)e a Aue su im1lementacin es mu$ %aria)le de1endiendo la 1lata9orma en la Aue se realicen. =e %er, m,s adelante.
int ; < 03; ,oid setup() R si(e(6//, 6//); S ,oid draN() R bac)'round(2/.); line(6/, 3/, 7/, 3/); i! ()e; << *?D-D) R i! ()e;*ode << &A) R ; < 2/; S else i! ()e;*ode << D?IN) R ; < 3/; S S else R ; < 03; S rect(23, ;, 3/, 0/); S
*22
&nidad 28
4alores de Entrada' Eventos

mouseAressed(), mouse>eleased(), mouseCo,ed(), mouseDra''ed() )e;Aressed(), )e;>eleased() loop(), redraN()
;as 9unciones 1ueden llamar e%entos Aue alteran el normal 9lu8o del 1rograma cuando una accin como un )otn o una tecla es o1rimida. Por lo tanto< un e%ento de una interru1cin del 9lu8o normal del 1rograma. Fna tecla o1rimida< o la 1osicin del mouse< es almacenada :asta Aue el )loAue draN() termin de e8ecutarse. En esos casos< se 1uede 1roducir un distur)io en el modo de di)u8ar. El cdigo dentro de un e%ento se e8ecuta una %ez< cuando el e%ento ocurre. Por e8em1lo< si se utilizara un e%ento Aue detecta el 1resionar un )otn del mouse< las acciones ocurrir,n solo una %ez :asta Aue el )otn sea li)erado $ 1resionado nue%amente. Esto 1ermite Aue los datos Aue mane8en los e%entos del mouse o el teclado sean ledos inde1endientemente de lo Aue est ocurriendo en el )loAue 1rinci1al. -Eventos del 5ouse ;os e%entos del mouse son mouseAressed()< mouse>eleased()< mouseCo,ed()< $ mouseDra''ed():
mouseAressed() mouse>eleased() mouseCo,ed() mouseDra''ed()
El cdigo dentro se e8ecuta cuando un )otn del mouse es o1rimido. 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 o1rimido
;a 9uncin mouseAressed() se e8ecuta de 9orma di9erente a la %aria)le mouseAressed. El %alor de la %aria)le mouseAressed es un true :asta Aue el )otn sea li)erado. En cam)io< el cdigo dentro de un )loAue mouseAressed() se e8ecuta cuando el )otn del mouse es o1rimido. En el siguiente e8em1lo se 1uede %er como el 9ondo del 1rograma cam)ia gradualmente su ni%el de gris a medida Aue un )otn del mouse es o1rimido.
!loat 'ris < /; ,oid setup() R si(e(6//, 6//); S ,oid draN() R bac)'round('ris); S ,oid mouseAressed() R 'ris 4< 2/; S
En el siguiente e8em1lo se e8ecuta lo mismo Aue el e8em1lo anterior< con la di9erencia Aue lo Aue controla el ni%el de gris es el e%ento de li)erar el )otn del mouse. ;a di9erencia 1uede a1reciarse manteniendo a1retado el )otn del mouse 1or un largo tiem1o $ as ad%ertir Aue el 9ondo se altera cuando dic:o )otn es li)erado.
!loat 'ra; < /; ,oid setup() R si(e(6//, 6//); S ,oid draN() R bac)'round('ra;); S
*23
,oid mouse>eleased() R 'ra; 4< 2/; S
-ntes de di)u8ar dentro de estas 9unciones< es im1ortante 1ensar en el 9lu8o del 1rograma. Por e8em1lo< :a$ crculos Aue son di)u8ados dentro de mouseAressed()1 $ luego dentro del )loAue draN() $a Aue retiramos la 9uncin bac)'round(). =in em)argo< si estu%iese bac)'round() declarado< los elementos solo a1areceran un sim1le cuadro en 1antalla $ luego de8aran de %erse.
,oid setup() R si(e(6//, 6//); !ill(/, 6/2); S ,oid draN() R S // =loGue draN() ,aco, mantiene al ,oid mouseAressed() R //pro'rama 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 1osicin en el cursor. El cdigo dentro de mouseCo,ed() se e8ecuta al 9inal de cada cuadro cuando la 1osicin del mouse cam)ia $ no es 1resionado ning3n )otn. En cam)io< el cdigo dentro de mouseDra''ed() se e8ecuta cuando la 1osicin del cursor es alterada a la %ez Aue es o1rimido el )otn del mouse.
int dra'Z, dra'V, mo,eZ, mo,eV; ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); S ,oid draN() R bac)'round(2/.); !ill(/); ellipse(dra'Z, dra'V, 00, 00); //*rculo Ne'ro !ill(630); ellipse(mo,eZ, mo,eV, 00, 00); //*rculo Xris S ,oid mouseCo,ed() R //Cue,e el crculo 'ris mo,eZ < mouseZ; mo,eV < mouseV; S ,oid mouseDra''ed() R //Cue,e el crculo ne'ro dra'Z < mouseZ; dra'V < mouseV; S
-Eventos del 6eclado !ada tecla 1resionada es registrada $ 1osee dos clases de e%entos< )e;Aressed() $ )e;>eleased()
)e;Aressed() )e;>eleased()
El cdigo dentro de este )loAue se e8ecuta cuando un tecla es 1resionada El cdigo dentro de este )loAue se e8ecuta cuando un tecla es li)erada
!ada %ez Aue una tecla es 1resionada 1odemos registrar el e%ento $ relacionarlo a una serie de acciones. 'e esta 9orma< 1odemos usar )e;Aressed() 1ara controlar %alores numricos $ as utilizarlos 1ara< 1or e8em1lo< cam)iar la 1osicin de un rect,ngulo.
*24
,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 e8em1lo< se di)u8a una 5 cuando la tecla 5 se o1rime< $ desa1arece 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 e8em1los tra)a8an con )e;Aressed() 1ara leer $ analizar los %alores de entrada 1or el teclado com)in,ndolos con datos del ti1o $trin'.
// &n 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);
*2/
S S else i! (textIidth(letras4)e;) 9 Nidth)R letras < letras4)e;; S S // *ompara los ,alores de entrada del teclado // sea ne'ro o 'ris ; cambia el !ondo de acuerdo al ,alor# // Aresionar -nter o >eturn para acti,ar los ,alores de //entrada# AHont !uente; $trin' letras < WW; int bac) < 6/2; ,oid setup() R si(e(6//, 6//); !uente < loadHont(W*onsolas52.#,lNW); textHont(!uente); text1li'n(*-NT->); S ,oid draN() R bac)'round(bac)); text(letras, 3/, 3/); S ,oid )e;Aressed() R i! (()e; << -NT->) TT ()e; << >-T&>N)) R letras < letras#to@oNer*ase(); println(letras); //Bmprime en la consola //el ,alor de entrada i! (letras#eGuals(Wne'roW)) R bac) < /; S else i! (letras#eGuals(W'risW)) R bac) < 2/.; S letras < WW; // @impia la ,ariable S else i! (()e; 8 06) UU ()e; Q< *?D-D)) R //$i la tecla es al!anum%rica, la a're'a al $trin' letras < letras 4 )e;; S S
-$ontrolando el ,lujo ;os 1rogramas utilizan el )loAue draN() 1ara di)u8ar cuadro a cuadro las acciones Aue se 1retenden tan r,1ido como sea 1osi)le. !on la 9uncin !rame>ate()< es 1osi)le limitar la cantidad de cuadros Aue e8ecuta una accin cada segundo< $ la 9uncin no@oop() es utilizada 1ara :acer Aue el )loAue draN() de8e de e8ecutarse constantemente. ;as 9unciones adicionales< loop() $ redraN()< 1ro%een de mas o1ciones cuando se utilizan e%entos del mouse $ el teclado. 'e este modo< se 1odr, e8ecutar un 1rograma Aue se encuentre con no@oop() $ utilizar la 9uncin loop() solo cuando se reAuiera. Esto sir%e 1ara a:orrar una gran cantidad de recursos @es1ecialmente si se 1iensa utilizar el 1ro$ecto en la ?e)C. El siguiente e8em1lo e8ecuta un )loAue draN() 1or dos segundos cada %ez Aue el )otn del mouse es o1rimido. Pasado el tiem1o< el 1rograma se 1one en 1ausa.
int !rame < /; ,oid setup() R si(e(6//, 6//); !rame>ate(0/); S ,oid draN() R
*2"
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 $ des1us detiene su e8ecucin. Esto es mu$ 3til si nuestro 1rograma no necesita ser actualizado continuamente. - continuacin< se 1resenta un e8em1lo donde el )loAue draN() se e8ecuta una %ez cuando se o1rime el )otn del mouse
,oid setup() R si(e(6//, 6//); no@oop(); S ,oid draN() R bac)'round(2/.); line(mouseZ, /, mouseZ, 6//); S ,oid mouseAressed() R redraN(); // - ecuta el cdi'o en el draN() una ,e( S
*2+
&nidad 2<
4alores de Entrada' 5ouse II

constrain(), dist(), abs(), atan2()
;a 1osicin del cursor es un 1unto en la %entana de re1resentacin Aue se actualiza en cada cuadro. Este 1unto 1uede ser analizado $ modi9icado en relacin a otros elementos 1ara 1roducir nue%os %alores. Es 1osi)le contraer los %alores del mouse en un rango es1ec9ico< calcula la distancia entre su 1osicin $ otro elemento< inter1olar entre dos %alores< determinar su %elocidad< $ calcular el ,ngulo del mouse en relacin a otra 1osicin. -=estringir ;a 9uncin constrain() 1ermite limitar un n3mero en un determinado rango. 0eci)e tres 1ar,metros
constrain(,alor, min, max)
El 1ar,metro $alor es el n3mero a limitar< el 1ar,metro min determina el %alor mnimo del rango< $ el 1ar,metro ma( determina el m,6imo %alor del rango. =i el $alor es menor o igual al 1ar,metro min1 entonces el $alor eAui%ale a min. 0egresa< entonces el %alor de ma( si el $alor es ma$or o igual a ma(.
int x < constrain(03, 6/, 7/); 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 1odemos determinar el rango de %alores 1or el Aue se %a a mo%er el cursor. Por e8em1lo< un ,rea.
// @imita la posicin del cursor en un "rea ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); S ,oid draN() R bac)'round(/); // @imita mx entre 03 ; :3 !loat mx < constrain(mouseZ, 03, :3); // @imita m; entre ./ ; :/ !loat m; < constrain(mouseV, ./, :/); !ill(6/2); rect(2/, 23, :/, 3/); !ill(233); ellipse(mx, m;, 0/, 0/); S
-#istancia ;a 9uncin dist() calcula la distancia entre dos coordenadas. Esta 9uncin 1uede utilizarse 1ara calcular la distancia entre la 1osicin del cursor $ un 1unto en la 1antalla. 0eci)e cuatro 1ar,metros
dist(x6, ;6, x2, ;2)
;os 1ar,metros (4 $ y4 determinan el 1rimer 1unto< mientras Aue (5 $ y5 determinan el segundo 1unto. ;a distancia entre am)os es calculado como un n3mero de ti1o decimal @ !loatC.
*24
!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 1or dist() 1uede utilizarse 1ara 1ara cam)iar las 1ro1iedades de una 9igura
//@a distancia entre el centro de la ,entana de representacin //; el cursor determinan el tama+o del crculo# ,oid setup() R si(e(6//, 6//); smooth(); S ,oid draN() R bac)'round(/); !loat d < dist(Nidth/2, hei'ht/2, mouseZ, mouseV); ellipse(Nidth/2, hei'ht/2, d*2, d*2); S
// 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 Inter1olacin es una tcnica de animacin< Aue 1ermite generar mo%imiento entre dos 1untos. El :ec:o de mo%er una 9raccin de la distancia total 1or cuadro< 1ermite generar desacelariones o incluso aceleraciones en la 9orma Aue se mue%e una 9igura. El siguiente diagrama muestra lo Aue ocurre cuanto un 1unto se mue%e siem1re la mitad entre su actual localizacin $ su 1r6ima localizacin
*2&
!uadro* !uadro2 !uadro3 !uadro4 !uadro/ !uadro" !uadro+
$o(ien2o
3-jetivo
!omo la 9igura disminu$e su %elocidad al acercarse al o)8eti%o< la 9igura )a8a. En el siguiente e8em1lo< la %aria)le x es la 1osicin actual del crculo< $ la %aria)le ob eti,oZ es el o)8eti%o al cual se 1retende llegar.
!loat x < /#/; !loat interp < /#/3; //NEmeros de /#/ ; 6#/ ,oid setup() R si(e(6//, 6//); smooth(); S ,oid draN() R bac)'round(/); !loat ob eti,oZ < mouseZ; x 4< (ob eti,oZ 5 x) * interp; ellipse(mouseZ, 0/, ./, ./); ellipse(x, K/, ./, ./); S
Para a1licar el mismo 1rinci1io a la 1osicin en 6 $ en $ a la %ez< ser, necesario calcular la distancia entre am)as 1osiciones. En el siguiente e8em1lo el 1eAueGo crculo KsigueL al cursor. Mientras Aue el crculo grande se 1osiciona en 1antalla 1or medio de un c,lculo de inter1olacin.
!loat x < /; !loat ; < /; !loat interp < /#/3; //NEmeros del /#/ al 6#/ ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); S ,oid draN() R bac)'round(/); !loat 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 e8em1lo introduce la 9uncin abs() 1ara conseguir el %alor a)soluto de un n3mero. Es necesario< $a Aue los %alores utilizados en al inter1olacin 1ueden ser negati%os o 1ositi%os< de1endiendo de la 1osicin en la Aue se encuentren con res1ecto al o)8eti%o. Fna estructura BH es utilizada 1ara actualizar la 1osicin< solo si est, no tiene los mismos %alores Aue el o)8eti%o.
*3.
!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
-4elocidad =e 1uede calcular la %elocidad del cursor 1or com1arar su actual 1osicin con la anterior. Puede conseguirse 9,cilmente utilizando la 9uncin dist() $ los %alores de mouseZ1 mouseV1 pmouseZ< $ pmouseV como 1ar,metros. El siguiente e8em1lo calcula la %elocidad del mouse $ la utiliza como %alor de de tamaGo de una eli1se.
,oid setup() R si(e(6//, 6//); no$tro)e(); smooth(); S ,oid draN() R bac)'round(/); !loat ,elocidad< dist(mouseZ, mouseV, pmouseZ, pmouseV); !loat diametro < ,elocidad * 0#/; ellipse(3/, 3/, diametro, diametro); S
El anterior e8em1lo muestra una res1uesta instant,nea de la %elocidad del mouse. ;os n3meros Aue 1roducen son e6tremos $ 1ueden ir desde cero a enormes %alores de un cuadro al otro. ;a tcnica de inter1olacin 1odra utilizarse 1ara aumentar o disminuir gradualmente una 1ro1iedad de un o)8eto< utilizando los %alores de %elocidad del mouse.
!loat ,elocidad < /#/; !loat interp < /#/3; // NEmeros del /#/ al 6#/ ,oid setup() R si(e(6//, 6//); no$tro)e(); smooth(); S ,oid draN() R bac)'round(/); !loat ob eti,o < dist(mouseZ, mouseV, pmouseZ, pmouseV); ,elocidad 4< (ob eti,o 5 ,elocidad) * interp; rect(/, 00, ob eti,o, 6K);
*3*
rect(/, 3/, ,elocidad, 6K);
-3rientacin ;a 9uncin atan2() es usada 1ara calcular el ,ngulo desde un 1unto a la coordenada de origen (/,/). 0eci)e dos 1ar,metros
atan2(;, x)
El 1ar,metro y es la coordenada de $ de donde se encuentra el ,ngulo< mientras Aue el 1ar,metro ( es la coordenada en 6 de dic:o 1unto. ;os %alores del ,ngulo son regresado en radianes< en un rango de [ a O[. Es im1ortante destacar Aue el orden de los 1ar,metros 6 e $ est,n in%ertidos en este caso< con res1ecto a las 9unciones Aue :emos %isto.
//-l "n'ulo incrementa a medida Gue se el mouse se mue,e de la esGuina //superior derecha a la esGuina in!erior i(Guierda ,oid setup() R si(e(6//, 6//); !rame>ate(63); !ill(/); S ,oid draN() R !loat an'le < atan2(mouseV, mouseZ); !loat de' < de'rees(an'le); println(de'); bac)'round(2/.); ellipse(mouseZ, mouseV, D, D); rotate(an'le); line(/, /, 63/, /); S
El cdigo se e61lica con las siguientes im,genes
Para calcular el atan2() relati%o a otro 1unto en lugar del (/,/)< de)e restarle dic:a coordenada a los 1ar,metros ; $ x. Para esto< lo ideal es utilizar la 9uncin translate() con atan2() 1ara controlar la rotacin< 8unto con pushCatrix() $ popCatrix() 1ara controlar la 9igura.
*32
//>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
*33
&nidad 2>
4alores de Entrada' 6ie(+o * ,ec7as

second(), minute(), hour(), millis(), da;(), month(), ;ear()
;os seres :umanos 1oseemos una relati%a 1erce1cin del tiem1o< 1ero las m,Auinas mantienen una idea 9i8a $ regular del tiem1o. En tiem1os 1asados< se utiliza)an relo8es de sol $ de agua 1ara 1oder tener una 9orma correcta de %isualizar el tiem1o. Jo$ en da las 1ersonas recurren a los relo8es digitales< un relo8 numrico graduado en doce :oras< con minutos $ segundos. ;a 1osi)ilidad de Aue un 1rograma sea ca1az de leer el actual tiem1o $ 9ec:as< a)re la 1osi)ilidad a un ,rea interesante. 'arle la 1osi)ilidad a un 1rograma de de1ender del tiem1o< nos otorga 1oder :acer Aue este cam)ie de color cada da< o un relo8 digital Aue 1roduzca una animacin cada :ora. -Segundos, 5inutos, Doras Para em1ezar< Processing es ca1az de leer los datos del relo8 de la com1utadora. ;os segundos actuales son ledos con la 9uncin second()< la cual regresa un %alor entre . $ /&. ;os minutos actuales son ledos con la 9uncin minute()1 la cual regresa un %alor entre . $ /&. ;a :ora actual es leda 1or la 9uncin hour()1 la cual le%anta cualAuiera de las 24 :oras< regresa %alores entre . $ 23. En este sistema< la medianoc:e es .< el medioda es *2< las & .. a.m. es &< $ las / .. 1.m. es *+. =i se e8ecuta el siguiente 1rograma 1odr, %erse la :ora actual en la consola
int s < second(); 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()< 1odremos %er como el tiem1o se %a actualizando. El siguiente e8em1lo lee continuamente la :ora actual $ la muestra en la consola
int ultimo$e'undo < /; ,oid setup() R si(e(6//, 6//); S ,oid draN() R int s < second(); int m < minute(); int h < hour(); //$olo imprime una ,e(, cuando los se'undos cambian i! (s Q< ultimo$e'undo) R println(h 4 WFW 4 m 4 WFW 4 s); ultimo$e'undo < s; S S
-dem,s< se 1uede crear de 9orma mu$ sim1le un relo8 Aue muestre la :ora $ se %a$a actualizando al utilizar la 9uncin text(). ;a 9uncin n!() se utiliza 1ara se1arar a1ro1iadamente el es1acio de la izAuierda $ la derec:a del n3mero.
*34
AHont !uente; ,oid setup() R si(e(6//, 6//); !uente < loadHont(WAro52/#,lNW); textHont(!uente); S ,oid draN() R bac)'round(/); int s < second(); int m < minute(); int h < hour(); //@a !uncin n!() separa los nEmeros correctamente $trin' t < n!(h,2) 4 WFW 4 n!(m,2) 4 WFW 4 n!(s,2); text(t, 6/, 33); S
Ja$ muc:as 9ormas de e61resar el 1aso del tiem1o< $ no todas de)en estar ligadas a la 9orma de un relo8. En el siguiente e8em1lo< las lneas sim)olizan las :oras< los minutos $ los segundos. Para :acerlo sim1lemente se recurre a usar la 9uncin map() $ as con%ertir los %alores de . a /&< a un rango de . a *...
,oid setup() R si(e(6//, 6//); stro)e(233); S ,oid draN() R bac)'round(/); !loat s < map(second(), /, :/, /, 6//); !loat m < map(minute(), /, :/, /, 6//); !loat h < map(hour(), /, 2., /, 6//); line(s, /, s, 00); line(m, 0., m, ::); line(h, :K, h, 6//); S
-l tener los %alores normalizados< los mismos 1ueden utilizarse 1ara otra clase de 9actores. En este caso< se 1rogramar, un cl,sico relo8 de mano. El incon%eniente se 1roduce en la 9uncin hour()< $a Aue esta de%uel%e 3nicamente %alores de 24 :oras< $ reAuerimos %alores de *2 :oras. =in em)argo< 1odremos conseguir dic:a escala 1or sacar el P *2.
,oid setup() R si(e(6//, 6//); stro)e(233); S ,oid draN() R bac)'round(/); !ill(D/); no$tro)e(); //dn'ulos para sin() ; cos() inician a las 0 en punto; //la sustraccin de \1@HYAB hace Gue comiencen desde //arriba ellipse(3/, 3/, D/, D/); !loat s < map(second(), /, :/, /, TI?YAB) 5 \1@HYAB; !loat m < map(minute(), /, :/, /, TI?YAB) 5 \1@HYAB; !loat h < map(hour() P 62, /, 62, /, TI?YAB) 5 \1@HYAB; stro)e(233); line(3/, 3/, cos(s) * 0D 4 3/, sin(s) * 0D 4 3/);
*3/
line(3/, 3/, cos(m) * 0/ 4 3/, sin(m) * 0/ 4 3/); line(3/, 3/, cos(h) * 23 4 3/, sin(h) * 23 4 3/); S
!omo agregado a la lectura del relo8 del ordenador< Processing inclu$e una 9uncin Aue almacena el tiem1o desde Aue inici el 1rograma. Este tiem1o es almacenado en miliOsegundos< o sea< milsimas de segundos. 'os mil miliOsegundos son 2 segundos< 2.. miliOsegundos son .<2 segundos. Este n3mero 1uede ser o)tenido con la 9uncin millis() $ 1uede ser utilizado 1ara calcular el tiem1o transcurrido desde Aue inici el 1rograma.
//$e usa millis() para iniciar una lnea pasados 0 se'undos int x < /; ,oid setup() R si(e(6//, 6//); S ,oid draN() R i! (millis() 8 0///) R x44; S line(x, /, x, 6//); S
;a 9uncin millis() regresa un n3mero del ti1o int< 1ero es con%eniente con%ertirlo en un !loat 1ara 1oder utilizarlo directamente como segundos.
int x < /; ,oid setup() R si(e(6//, 6//); S ,oid draN() R !loat sec < millis() / 6///#/; i! (sec 8 0#/) R x44; S line(x, /, x, 6//); S
-,ec7a ;a in9ormacin de la 9ec:a es leda de manera similar a la del tiem1o. El da actual es ledo con la 9uncin da;()< la cual de%uel%e un %alor entre * $ 3*. El mes corriente es ledo con la 9uncin month()< la cual de%uel%e un %alor entre * $ *2< donde * es Enero< " es Junio $ *2 es 'iciem)re. El aGo actual es ledo con la 9uncin ;ear()< el cual regresa un %alor entero de cuatro dgitos< o sea< el aGo actual.
int d < da;(); 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 e8em1lo e%al3a si el da actual es el 1rimero del mes. En caso de ser cierto< im1rime en la consola el mensa8e KAien$enido a un nue$o BesL.
,oid draN() R int d < da;(); i! (d << 6) R //Malores de 6 a 06
*3"
S S
println(W=ien,enido a un nue,o Ces#W);
El siguiente e8em1lo se e8ecuta continuamente $ e%al3a si el da actual es el 1rimer da del aGo< o sea< -Go 2ue%o. En caso de Aue sea cierto< im1rime en la consola K Hoy es el primer d@a del A8oCL.
,oid draN() R int d < da;(); //Malores de 6 a 06 int m < month(); //Malores de 6 a 62 i! ((d << 6) UU (m << 6)) R println(W\o; es el primer da del 1+oQW); S S
*3+
&nidad 2?
5ovi(iento' :@neas * $urvas

Fna 1ro9unda com1resin del mo%imiento es sumamente 3til a la :ora de comunicar 1ara el )ailarn< el animador $ el director de cine. Duien 1ractica el arte de los nue%os medios 1uede em1lear el mo%imiento 1ara 1otenciar cualAuiera de sus tra)a8os< desde un sitio ?e) a un %ideoO8uego. El elemento 9undamental ser, el tiem1o< o< m,s 1recisamente< como los elementos cam)ian en el tiem1o. ;as im,genes est,ticas 1ueden e61resar la nocin de mo%imiento< un medio )asado en el tiem1o< como un %deo< un film1 $ el so9t?are 1ueden e61resar eso mismo de 9orma directa. ;a de9inicin de mo%imiento a tra%s de cdigo muestra el 1oder $ la 9le6i)ilidad del medio. -$ontrolando el 5ovi(ientos Para 1oner una 9igura en mo%imiento< siem1re necesitaremos de al menos una %aria)le Aue cam)ie al menos una de sus 1ro1iedades en cada cuadro Aue se e8ecuta la 9uncin draN(). En unidades 1re%ias< se :an 1resentado algunas 9ormas de generar mo%imientos. Para Aue la 9igura no de8e un rastro< necesitamos lim1iar la 1antalla antes de di)u8ar la 9igura actualizada. Para esto< 1ondremos la 9uncin bac)'round() al 1rinci1io de la estructura draN()< de esta 9orma estaremos lim1iando cada cuadro antes de di)u8ar en el. N 1or 3ltimo< tener en cuenta la utilizacin dela 9uncin !rame>ate() 1ara controlar la cantidad de cuadros 1or segundo Aue %a a 1rocesar el 1rograma @a ma$or cantidad< el mo%imiento ser, mas 9luido< 1ero se necesitar, de una ma$or ca1acidad en el ordenadorC.
!loat ; < 3/#/; !loat ,el < 6#/; !loat radio < 63#/; ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); 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 1ermite tam)in crear una serie de e9ectos %isuales mu$ interesantes. Fno de ellos< $ de sencilla 1rogramacin< es crear un desen9oAue mientras se mue%e la 9igura. Es una de las tantas alternati%as al utilizar bac)'round() al 1rinci1io del draN(). Ftilizando sim1lemente un rect,ngulo del tamaGo de la %entana de re1resentacin< 1odremos darle a dic:a 9igura cierta trans1arencia. =i el n3mero de al9a se acerca a 2//< el rastro desen9ocado ser, cada %ez menor :asta no distinguirse. =i este n3mero se acerca a .< dic:o desen9oAue ser, ma$or. Podemos< adem,s< crear una %aria)le direccion Aue controle la 1osicin de la 9igura. 'e esta 9orma< cuando la 9igura se e6ceda de la %entana de re1resentacin< esta %aria)le 1uede cam)iar a O* $ as in%ertir los %alores con los Aue se mue%e la 9igura. 'e esta 9orma< si direccion es *< ser, O*< $ si direccion es O*< ser, *. ;a 9igura resultante se encontrar, siem1re dentro de las dimensiones de la %entana de re1resentacin.
*34
!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 1osicin relati%a a los m,rgenes izAuierdo $ derec:o de la %entana de re1resentacin< reAuiere un segundo gru1o de %aria)les. El siguiente e8em1lo tra)a8a con el mismo 1rinci1io Aue los anteriores< solo Aue 9i8a un limite en todos los m,rgenes.
!loat x < 3/#/; //*oordenada Z !loat ; < 3/#/; //*oordenada V !loat radio < 63#/; //>adio del crculo !loat ,elZ < 6#/; //Melocidad del mo,imiento !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 1osi)le cam)iar las 1ro1iedades del 9ondo< color< relleno $ tamaGo< en lugar de solo la 1osicin de una 9igura. El siguiente e8em1lo modi9ica el tamaGo de unas eli1ses con la misma idea de cam)io de direccin del e8em1lo anterior.
*3&
!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 im1lcitos %istos en los e8em1los anteriores< 1odemos crear mo%imientos e61lcitos. Esta clase de mo%imientos reAuieren Aue se esta)lezca 1rimero una 1osicin de inicio $ la distancia del recorrido. -dem,s< necesitaremos esta)lecer el recorrido entre los cuadros. En el cdigo a continuacin< las %aria)les inicioZ e inicioV1 esta)lecen la 1osicin de 1artida. En contra 1arte< las %aria)les !inalZ $ !inalV corres1onden a la 1osicin de llegada. ;as %aria)les x e ; corres1onden a la 1osicin actual de la 9igura. ;a %aria)le step re1resenta el 1orcenta8e del cam)io Aue tendr, la 9igura< $ la %aria)le pct mantiene el %ia8e del 1orcenta8e total de la distancia recorrida. Por lo tanto< step $ pct de)en siem1re ser entre ... $ *... !uando el 1rograma se e8ecuta< step se incrementa $ as cam)ia la 1osicin de las %aria)les x e ;< ese %alor es ma$or a *..< el mo%imiento se detiene.
!loat inicioZ < 2/#/; //*oordenada inicial Z !loat inicioV < 6/#/; //*oordenada inicial V !loat !inalZ < K/#/; //*oordenada !inal Z !loat !inalV < D/#/; //*oordenada !inal V !loat distZ; //Distancia con el - e Z !loat distV; //Distancia con el - e V !loat x < /#/; //*oordenada Z actual !loat ; < /#/; //*oordenada V actual !loat step < /#/2;//Tama+o de cada mo,imiento (de /#/ a 6#/) !loat pct < /#/; //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(/, 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/);
*4.
;a tcnica de inter1olacin< introducida en unidades 1re%ias< 1uede ser un gran recurso 1ara los mo%imientos de animacin. El siguiente e8em1lo ada1ta el cdigo anterior $ agregar la tcnica de inter1olacin.
!loat x < 2/#/; //*oordenada Z inicial !loat ; < 6/#/; //*oordenada V inicial !loat 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
-5ovi(iento a lo largo de las $urvas En unidades anteriores< se detall 1articularmente el uso de cur%as sim1les con 9ormulas matem,ticas Aue Processing 1osee en su estructura. En lugar de di)u8ar la cur%a entera en un solo cuadro< es 1osi)le distri)uir este 1roceso en los 1asos 1ara llegar de un 1unto a otro. El siguiente cdigo es un sim1le agregado a los e8em1los anteriores< donde el tra$ecto en lugar de :acerse de 9orma recta< se utiliza un tra$ecto de cur%a.
!loat 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);
*4*
S !ill(233); ellipse(x, ;, 2/, 2/);
5odos los ti1os de cur%as %istos en las unidades 1re%ias 1ueden utilizarse 1ara escalar 9iguras o modi9icar su 1osicin. 5am)in< una %ez Aue el 1rograma e8ecuta un camino cur%o< 1uede calcular $ generar otro.
!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 1uede usarse 1ara controlar la %elocidad %isual de un elemento. ;os resultados Aue de%uel%en las 9unciones matem,ticas< no de)en usarse necesariamente en las dos dimensiones de la %entana de re1resentacin. =u1ongamos Aue omitimos la 1osicin en 6< de esta manera utilizaramos la coordenadaO$ como controlador de la %elocidad de la 9igura< a 1esar de Aue el tra$ecto sea una recta.
*42
El siguiente e8em1lo muestra como utilizar una cur%a como regulador de la %elocidad. ;a eli1se comienza mu$ lento< e inmediatamente comienza a acelerarse. ;a %aria)le e61onente es la encargada de regular la cur%a< 1or lo tanto< la %elocidad est, ligado ntimamente a ella. Por :acer clicH con el mouse se selecciona un nue%o 1unto.
!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
-5ovi(iento a trav!s de la 6ransfor(acin ;as 9unciones de trans9ormacin 1ueden usarse tam)in en mo%imiento 1or cam)iar los 1ar,metros Aue reci)en las 9unciones translate()1 rotate() $ scale(). -ntes de utilizar las 9unciones de
*43
trans9ormacin< es im1ortante tener conocimientos 1lenos en ellas< $ sa)er 1rinci1almente Aue estas cam)ian las 1ro1iedades del )loAue draN(). =i e8ecutamos la 9uncin translate(3, /)< todo lo Aue se inclu$a en el )loAue draN() comenzar, corrido / 1i6eles en el e8e 6. 2o solo eso< aumentar, de / en / en cada re1eticin. 'e la misma 9orma< si incluimos la 9uncin en el )loAue setup()< esta no tendr, e9ecto.
,oid setup() R si(e(6//, 6//); smooth(); no@oop(); translate(3/, /); //No sur'e e!ecto S ,oid draN() R bac)'round(/); ellipse(/, 3/, :/, :/); S !loat ; < 3/#/; !loat ,el < 6#/; !loat radio < 63#/; ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); 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()
*44
ellipse(77, 3/, radio, radio); ; < ; 4 ,el; i! (; 8 hei'ht4radio) R ; < 5radio; 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() 1ueden ser utilizadas 1ara generar mo%imientos< 1ero usarlas todas 8untas resulta intrincado. Para tener un ma$or control de dic:as 1ro1iedades se recomienda una 1ro9unda lectura de las unidades dedicadas a trans9ormaciones %istas anteriormente< $ recurrir al uso de pushCatrix() $ popCatrix().
*4/
&nidad 2A
5ovi(iento' 5ec1nicos * 3rg1nicos

;os 1rogramadores suelen determinar como Auieren Aue sus 1rogramas se mue%an. !osas como esas suelen transmitir $ comunicar di%ersas cosas< 1or lo tanto no es correcto li)rarlo al azar. =olemos clasi9icar a las cosas entre lo Aue 1osee una clase de mo%imiento $ lo Aue no lo 1osee. Jacemos distensiones entre lo animado $ lo inanimado. El mo%imiento en un 1rograma 1uede ser mas %enta8oso a3n< $a Aue 1odra intentarse :acer una 9iel co1ia a la realidad o ignorar es 1or com1leto. ;os 1rogramas :acen 1osi)le inconta)les ti1os de mo%imientos di9erentes< 1ero el 9oco est, 1uesto en dos de ellos los mec,nicos $ los org,nicos. -5ovi(iento 5ec1nico ;a 9uncin sin() suele usarse con muc:a 9recuencia a la :ora de 1roducir un mo%imiento elegante. Esto se de)e a su 9acilidad 1ara 1roducir aceleraciones $ desacelariones con un 3nico %alor. ;a onda seno< tomando los %alores de las dos dimensiones< 1roducir, un e9ecto un tanto e6traGo. =in em)argo< si tomamos 3nicamente los %alores de la coordenadaO$< solo conseguiramos los %alores de incremento $ decrecimiento. En las siguientes im,genes< la de la izAuierda re1resenta la e%olucin de la onda seno a lo largo de las dos coordenadas. En cam)io< la de la derec:a< omite las coordenadas del e8e 6< mostrando solo los 1untos Aue recorre el e8e $.
;os %alores de sin() son utilizados 1ara crear el mo%imiento de una 9igura en el siguiente e8em1lo. ;a %aria)le an'ulo incrementa constantemente $ 1roduce el cam)io en sin() en un rango de O* a *. ;os %alores son multi1licados 1or radio 1ara :acer Aue estos sean ma$ores. El resultado es asignado a la %aria)le ;o!!set< $ esta luego es usada 1ara determinar la 1osicin de la eli1se en la coordenadaO$.
!loat an'ulo < /#/; //dn'ulo 1ctual !loat ,el < /#6; //Melocidad del Co,imiento !loat radio < ./#/; //>an'o del Co,imiento ,oid setup() R si(e(6//, 6//); no$tro)e(); smooth(); S ,oid draN() R !ill(/, 62); 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
*4"
-gregando %alores de sin() $ cos() se 1roducir,n mo%imientos muc:o m,s com1le8os. En el siguiente e8em1lo< un 1eAueGo 1unto se mue%e de 9orma circular usando los %alores de sin() $ cos(). Fn gran 1unto utiliza los mismos %alores 1ero agrega unos nue%os %alores de sin() $ cos().
!loat an'ulo < /#/; //dn'ulo 1ctual !loat ,el < /#/3; //Melocidad del Co,imiento !loat radio < 0/#/; //>an'o del Co,imiento !loat sx < 2#/; !loat s; < 2#/; ,oid setup() R si(e(6//, 6//); no$tro)e(); smooth(); S ,oid draN() R !ill(/, .); 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 1osi)les %alores. El despla3amiento de fase de una seGal en relacin a otra es sencillamente un retraso en tiem1o e61resado en grados de ,ngulo< en el cual un crculo com1leto @3". gradosC es igual a un ciclo de la seGal. =i se des1laza el ,ngulo utilizado 1ara generar una animacin< la animacin resultante se encontrar, des9asada.
;os siguientes dos e8em1los cam)ian la coordenadaO6 $ el di,metro de los crculos 1ara demostrar el des1lazamiento de 9ase. En el 1rimer e8em1lo< cada crculo tiene el mismo mo%imiento :orizontal< 1ero des9asado en el tiem1o. En el segundo< cada crculo mantiene la misma 1osicin $ %aran su tamaGo< 1ero el rango de crecimiento est, des9asado en el tiem1o.
!loat an'ulo < /#/; !loat ,el < /#6; ,oid setup() R si(e(6//, 6//); no$tro)e(); smooth();
*4+
S ,oid draN() R bac)'round(/); an'ulo < an'ulo 4 ,el; ellipse(3/ 4 (sin(an'ulo 4 AB) * 3), 23, 0/, 0/); ellipse(3/ 4 (sin(an'ulo 4 \1@HYAB) * 3), 33, 0/, 0/); ellipse(3/ 4 (sin(an'ulo 4 L&1>T->YAB) * 3), D3, 0/, 0/); S !loat an'ulo < /#/; //dn'ulo Gue cambia !loat ,el < /#/3; //Melocidad de *recimiento ,oid setup() R si(e(6//, 6//); no$tro)e(); smooth(); !ill(233, 6D/); S ,oid draN() R bac)'round(/); circuloHase(/#/); circuloHase(L&1>T->YAB); circuloHase(\1@HYAB); an'ulo 4< ,el; S ,oid circuloHase(!loat !ase) R !loat diametro < :3 4 (sin(an'ulo 4 !ase) * .3); ellipse(3/, 3/, diametro, diametro); S
-5ovi(iento 3rg1nico Entre los e8em1los de mo%imientos org,nicos se inclu$en la cada de una :o8a< la caminata de un insecto< el %uelo de un a%e< una 1ersona res1irando< un ro Aue 9lu$e o la :umareda Aue su)e. Fno de los recursos con los Aue cuentan los 1rogramas es la utilizacin de %alores aleatorios.
!loat x < 3/#/; //*oordenada5Z !loat ; < D/#/; //*oordenada5V ,oid setup() R si(e(6//, 6//); random$eed(/); //Huer(a los mismos ,alores aleatorios bac)'round(/); stro)e(233); S ,oid draN() R x 4< random(52, 2); //1si'na una nue,a coordenada5x ; 4< random(52, 2); //1si'na una nue,a coordenada5; point(x, ;); S
;as 9unciones sin() $ cos() 1ueden utilizarse 1ara generar mo%imientos im1redeci)les al em1learse con la 9uncin random(). El siguiente e8em1lo 1resenta una lnea< $ en cada cuadro su direccin cam)ia entre 1eAueGos %alores< de O..3 a ..3.
!loat x < /#/; !loat ; < 3/#/; !loat an'ulo < /#/; !loat ,el < /#3; ,oid setup() R //*oordenada5Z //*oordenada5V //Direccin del Co,imiento //Melocidad del Co,imiento
*44
//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 e8em1lo es una %ersin animada de un e8em1lo %isto unidades anteriores. -Au la %aria)le an'ulo 1ara 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 1ara 1roducir mo%imientos org,nicos. Na Aue los n3meros regresados 1or noise() son 9,ciles de controlar< son mu$ 3tiles a la :ora de 1roducir irregularidades. El siguiente e8em1lo di)u8a dos lneas $ la 1antalla< $ la 1osicin de sus 1untas 9inales est, determinada 1or la 9uncin noise().
!loat inc6 < /#6; !loat n6 < /#/; !loat inc2 < /#/7; !loat n2 < /#/; ,oid setup() R si(e(6//, 6//); stro)e(233); stro)eIei'ht(2/);
*4&
smooth(); S ,oid draN() R bac)'round(/); !loat ;6 < (noise(n6) 5 /#3) * 0/#/; //De 563 a 63 !loat ;2 < (noise(n2) 5 /#3) * 0/#/; //De 563 a 63 line(/, 3/, ./, 3/ 4 ;6); line(6//, 3/, :/, 3/ 4 ;2); n6 4< inc6; n2 4< inc2; S
;a 9uncin noise() tam)in 1uede ser utilizada 1ara generar te6turas din,micas. En el siguiente e8em1lo< los 1rimeros dos 1ar,metros determinan una te6tura en dos dimensiones< $ el tercer 1ar,metro su incremento en cada cuadro.
!loat inc < /#/:; int densidad < .; !loat (noise < /#/; ,oid setup() R si(e(6//, 6//); no$tro)e(); S ,oid draN() R !loat xnoise < /#/; !loat ;noise < /#/; !or (int ; < /; ; 9 hei'ht; ; 4< densidad) R !or (int x < /; x 9 Nidth; x 4< densidad) R !loat n < noise(xnoise, ;noise, (noise) * 23:; !ill(n); rect(;, x, densidad, densidad); xnoise 4< inc; S xnoise < /; ;noise 4< inc; S (noise 4< inc; S
*/.
&nidad 2B
#atos' /rra*s
1rra;, à (arra; access), neN, 1rra;#len'th, append(), shorten(), expand(), arra;cop;()
El trmino array se re9iere a una estructura de gru1o o a la im1osicin de un n3mero. En 1rogramacin< un arra$ es un con8unto de datos almacenados )a8o el mismo nom)re. ;os arra$s 1ueden ser creados 1ara almacenar un determinado ti1o de datos< $ cada uno de sus elementos 1ueden ser almacenados $ ledos indi%idualmente. !inco %alores del ti1o entero @*&*&< *&4.< *&+/< *&+"< *&&.C 1ueden ser almacenados en un arra$ del ti1o entero @intC. Por e8em1lo< si llam,ramos al arra$ KdatesL< guardaramos los %alores en la siguiente secuencia
;a 1osicin en la Aue se encuentran los datos en un arra$ son numerados desde el n3mero cero. Esto muc:as %eces 1roduce errores< $a Aue 1or costum)re uno asocia la 1rimera 1osicin con el n3mero uno. El 1rimer elemento se encuentra en la 1osicin cero ].^< el segundo en la 1osicin uno ]*^< $ as. ;os arra$s 1uede utilizarse 1ara 1rogramar de un modo muc:o m,s sencillo. Mientras no sea necesario utilizarlos< 1ueden em1learse 1ara administrar estructuras. Por e8em1lo< esta)lecemos una serie de 1untos Aue ser,n almacenados en el arra$< los mismos ser,n utilizados 1ara di)u8ar una estrella.
El anterior e8em1lo demuestra los )ene9icios del em1leo de los arra$s. ;a estrella tiene *. %rtices< com1uesto de 2 1untos cada uno. =i utiliz,ramos %aria)les reAueriramos de 2. de ellas. En cam)io< con un arra$ 1or e8e< solo necesitaramos 2.
*/*
(aria)les =e1aradas
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$ 1or cada 1unto

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$ 1or 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 e8em1lo muestra la utilizacin de un arra$ en un 1rograma. ;os datos Aue almacena el arra$ son ledos con una estructura H?>. ;a sinta6is ser, discutida en las 1,ginas siguientes.
intà x < R 3/, :6, D0, :7, K6, 3/, 27, 06, 6K, 07 S; intà ; < R 6D, 0K, .0, :/, D2, K0, D2, :/, .0, 0K S; be'in$hape(); //@ee un elemento del arra; con cada ciclo del !or() !or (int i < /; i 9 x#len'th; i44) R ,ertex(xìa, ;ìa); S end$hape(*@?$-);
-&sando /rra*s ;os arra$s son declarados mu$ similar a otra clase de datos< 1ero se distinguen 1or la im1lementacin de corc:etes < ] $ ^. !uando un arra$ es declarado< el ti1o de datos Aue 1uede almacenar de)e ser es1eci9icado tam)in. Fna %ez Aue dic:o arra$ sea declarado $ su ti1o sea es1eci9icado< este de)e ser creado con la 1ala)raOcla%e neN. Es 1aso adicional se utiliza 1ara a:orrar es1acio en la memoria de la com1utadora. ;uego de Aue el arra$ es creado< $a est, listo 1ara Aue se le asignen %alores. E6isten< adem,s< di9erentes 9ormas de declarar< crear $ asignar. En los siguientes e8em1lo< se discuten las di9erentes maneras< siem1re asignando los %alores *&< 4.< +/< +"< $ &.. Particularmente notar la relacin entre los di9erentes mtodos $ la estructura setup().
intà data; ,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
*/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 e8em1los asumen Aue tra)a8aremos con los )loAues setup() $ draN(). =in em)argo< eso no es necesario< 1ueden usarse cualAuiera de los 3 mtodos anteriores sin dic:as estructuras.
intà data; 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 1aso de declarar< crear $ asignar 1ermite a un arra$ ser ledo. Para acceder al elemento de un arra$ es necesario usar el nom)re de la %aria)le seguido de los corc:etes< $ dentro de estos 3ltimos el n3mero de 1osicin del elemento.
intà data < R 67, ./, K3, K:, 7/ S; line(data`/a, /, data`/a, 6//); line(data`6a, /, data`6a, 6//); line(data`2a, /, data`2a, 6//); line(data`0a, /, data`0a, 6//); line(data`.a, /, data`.a, 6//);
0ecordar Aue el 1rimer elemento se encuentra en la 1osicin .. =i el 1rograma trata de acceder a un %alor Aue e6cede las dimensiones del arra$< el 1rograma se tendr, $ terminar, 1or de%ol%er un Array9nde(?ut?fAounds%(ception.
intà data < R 67, 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 1ro1iedad len'th almacena el n3mero de elementos en un arra$. =e 1uede acceder a esta 1ro1iedad con el nom)re del arra$ seguido de un 1unto $ dic:a 1ro1iedad. El siguiente e8em1lo demuestra como utilizarlo
*/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?> 1ara acceder a los elementos del arra$< es1ecialmente si es un arra$ con muc:os elementos
intà data < R 67, ./, K3, K:, 7/ S; !or (int i < /; i 9 data#len'th; i44) R line(dataìa, /, dataìa, 6//); S
Fna estructura H?> 1uede ser usada 1ara agregar datos a un arra$. Por e8em1lo< 1uede :acerse un calculo de %alores $ luego ser asignados como elementos de un arra$. El siguiente e8em1lo almacena los %alores de%ueltos 1or la 9uncin sin() en un arra$.
!loatà sineIa,e < neN !loat`Nidtha; !or (int i < /; i 9 Nidth; i44) R //1si'na ,alores al arra; de,ueltos de la !uncin sin() !loat r < map(i, /, Nidth, /, TI?YAB); sineIa,eìa < abs(sin(r)); S !or (int i < /; i 9 sineIa,e#len'th; i44) R //-stablece el contorno ledo del arra; stro)e(sineIa,eìa * 233); line(i, /, i, hei'ht); S
-lmacenar las coordenadas de muc:os elementos es otra 9orma de :acer un 1rograma m,s 9,cil de leer $ m,s mane8a)le. En el siguiente e8em1lo< el arra$ xà almacena la coordenadaO6< $ el arra$ ,elà almacena el rango corres1ondiente a la misma. Escri)ir este 1rograma sin la im1lementacin de arra$s reAuerira 24 %aria)les inde1endientes.
int num@ines < 62; !loatà x < neN !loat`num@inesa; !loatà ,el < neN !loat`num@inesa; !loat o!!set < D; //-stablece el espacio entre las lneas ,oid setup() R si(e(6//, 6//); smooth(); stro)eIei'ht(6/); !or (int i < /; i 9 num@ines; i44) R xìa < i; //-stablece posicin inicial ,elìa < /#6 4 (i / o!!set); //-stablece la ,elocidad inicial S S ,oid draN() R bac)'round(2/.); !or (int i < /; i 9 x#len'th; i44) R
*/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
-/l(acenando datos de 5ouse Fna im1lementacin 9recuente de los arra$s es el almacenamiento de los datos del mouse. ;as %aria)les pmouseZ $ pmouseV almacenan la 1osicin anterior a la actual del mouse. =in em)argo< no :a$ una manera de acceder a esos datos Aue no sea inmediatamente. !on cada cuadro Aue 1asa< mouseZ $ mouseV @$ a s mismo pmouseZ $ pmouseVC son reem1lazados 1or nue%os %alores< $ los antiguos %alores son descartados. !rear un arra$ es la me8or manera de no 1erder esos %alores $ utilizarlos 1ara algo. En el siguiente e8em1lo< los 3ltimos $ mas recientes *.. %alores de mouseV son almacenados $ mostrados en 1antalla como una lnea< de izAuierda a derec:a.
intà ;; ,oid setup() R si(e(6//, 6//); ; < neN int`Nidtha; S ,oid draN() R bac)'round(2/.); //Despla(a los ,alores a la derecha !or (int i < ;#len'th56; i 8 /; i55) R ;ìa < ;ì56a; S //1're'a nue,os ,alores al comien(o ;`/a < constrain(mouseV, /, hei'ht56); //Cuestra cada par de ,alores como una lnea !or (int i < 6; i 9 ;#len'th; i44) R line(i, ;ìa, i56, ;ì56a); S S
-1licando este mismo cdigo simult,neamente a mouseZ $ mouseV

int num < 3/; intà x < neN int`numa; intà ; < neN int`numa; ,oid setup() R si(e(6//, 6//); no$tro)e(); smooth(); !ill(233, 6/2); S ,oid draN() R bac)'round(/); //Despla(a los ,alores a la derecha !or (int i < num56; i 8 /; i55) R xìa < xì56a; ;ìa < ;ì56a;
*//
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 e8em1lo 1roduce los mismos resultados< 1ero utiliza un mtodo muc:o m,s 1timo. En lugar de ordenar los elementos del arra$ en cada 9otograma< el 1rograma escri)e los nue%os datos en la 1osicin siguiente del arra$. ;os elementos del arra$ 1ermanecen en la misma 1osicin una %ez Aue est,n escritos< 1ero se leen en un orden di9erente en cada 9otograma. ;a lectura comienza en el lugar de los elementos m,s antiguos $ contin3a :asta el 9inal del arra$. -l 9inal del arra$< el o1erador D se utiliza 1ara %ol%er de nue%o al 1rinci1io. Esta tcnica es es1ecialmente 3til con matrices mu$ grandes< 1ara e%itar la co1ia innecesaria de datos Aue 1ueden ralentizar el 1rograma.
int num < 3/; intà x < neN int`numa; intà ; < neN int`numa; int indexAosition < /; ,oid setup() R si(e(6//, 6//); no$tro)e(); smooth(); !ill(233, 6/2); S ,oid draN() R bac)'round(/); xìndexAositiona < mouseZ; ;ìndexAositiona < mouseV; //*iclo entre / ; el nEmero de elementos indexAosition < (indexAosition 4 6) P num; !or (int i < /; i 9 num; i44) R //-stablece la posicin del arra; a ser leda int pos < (indexAosition 4 i) P num; !loat radius < (num5i) / 2#/; ellipse(x`posa, ;`posa, radius, radius); S S
-,unciones del /rra* Processing 1ro%ee de un gru1o de 9unciones 1ara 9acilitar el tra)a8o con arra$s. En estas 1,ginas solo se e61lican cuatro de ellas< 1ero la in9ormacin com1leta $ detallada est, dis1oni)le en lnea< en """.processing.org#reference . ;a 9uncin append() e61ande un arra$ en un nue%o elemento< agrega los datos a la nue%a 1osicin $ regresa el nue%o arra$
$trin'à trees < R Wceni(aW, WrobleW S; append(trees, WmielW); //BN*?>>-*T?Q No cambia el arra; print(trees); //Bmprime Wceni(a robleW println(); trees < append(trees, WmielW); //1're'a miel al !inal
*/"
print(trees); //Bmprime Wceni(a roble mielW println(); //1're'a corte(a al !inal del arra; ; crea un nue,o arra; //para almacenar los cambios $trin'à moretrees < append(trees, WbeechW); print(moretrees); //Bmprime Wceni(a roble miel corte(aW
;a 9uncin shorten() ac:ica un arra$ en un elemento al remo%er el 3ltimo de ellos $ regresar el arra$ disminuido
$trin'à trees < R Wa,ellanaW, WcocoW, Whi'oWS; trees < shorten(trees); //>emue,e el Eltimo elemento del 1rra; print(trees); //Bmprime a,ellana coco println(); trees < shorten(trees); //>emue,e el Eltimo elemento del 1rra; print(trees); //Bmprime a,ellana
;a 9uncin expand() incrementa el tamaGo de un arra$. Puede e61andir el arra$ en un tamaGo es1ec9ico< o incluso do)lar su tamaGo. =i el arra$ necesita incluir una cantidad mu$ grande de nue%os elementos< es muc:o mas r,1ido $ e9iciente utilizar expand() en lugar de append():
intà x < neN int`6//a; //1rra; Gue almacena coordenadas de x int count; //1lmacena el nEmero de la posicin del arra; ,oid setup() R si(e(6//, 6//); S ,oid draN() R x`counta < mouseZ; //1si'na una nue,a coordenada5x al arra; count44; //Bncrementa el contador i! (count << x#len'th) R //$i el arra; est" completo x < expand(x); //doblar el tama+o del arra; println(x#len'th); //-scribir el nue,o tama+o en la consola S S
;os %alores de los arra$s no 1ueden ser co1iados con el o1erador 1orAue ellos son o)8etos. El mtodo cl,sico 1ara co1iar elementos de un arra$ es utilizando una 9uncin es1ecial 1ara co1iar el arra$ entero $ luego )uscar el elemento deseado con un ciclo H?>. ;a 9uncin arra;*op;() es la manera mas e9iciente 1ara co1iar un arra$. ;os datos son co1iados del arra$ utilizado como 1rimer 1ar,metro al arra$ utilizado como segundo 1ar,metro
$trin'à norte < R W?\W, WBNW, WCBW S; $trin'à sur < R WX1W, WH@W, WN*W S; arra;cop;(norte, sur); //*opia del arra; norte al arra; sur print(sur); //Bmprime W?\ BN CBW println(); $trin'à este < R WC1W, WNVW, W>BW S; $trin'à oeste < neN $trin'èast#len'tha; //*rea un nue,o arra; arra;cop;(este, oeste); //*opia del arra; este al arra; oeste print(Nest); //Bmprime WC1 NV irW
2ue%as 9unciones 1ueden ser escritas 1ara 1er9eccionar el tra)a8o en arra$< 1ero :a$ Aue ser consciente de Aue act3an di9erente si utilizan datos int o datos char. !uando un arra$ es usado como 1ar,metro de una 9uncin< la direccin del arra$ es trans9erida dentro de la 9uncin en lugar de los datos actuales. 2o se crea un nue%o arra$< $ los cam)ios :ec:os en la 9uncin a9ectan solo al arra$ usado como 1ar,metro
*/+
!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
-/rra*s 0idi(ensionales ;os datos 1ueden ser almacenados $ o)tenidos de arra$s con m,s de una dimensin. Fsando la ta)la al inicio de esta unidad< cam)iaremos el arra$ de una dimensin a dos dimensiones
;os arra$s en 2' son< esencialmente< una lista de arra$s en *'. Estos de)en ser declarados< luego creador $ recin des1us se 1ueden asignar %alores. ;a siguiente sinta6is con%ierte este arra$ a cdigo
intàà points < R R3/,6DS, R:6,0KS, RD0,.0S, R:7,:/S, RK6,D2S, R3/,K0S, R27,D2S, R06,:/S, R6K,.0S, R07,0KS S; println(points`.a`/a); //Bmprime K6 println(points`.a`6a); //Bmprime D2 println(points`.a`2a); //->>?>Q -ste elemento est" !uera del arra; println(points`/a`/a); //Bmprime 3/
*/4
println(points`7a`6a);
//Bmprime 0K
Este 1rograma muestra como utilizar todo esto en simult,neo

intàà points < R R3/,6DS, R:6,0KS, RD0,.0S, R:7,:/S, RK6,D2S, R3/,K0S, R27,D2S, R06,:/S, R6K,.0S, R07,0KS S; ,oid setup() R si(e(6//, 6//); !ill(/); smooth(); S ,oid draN() R bac)'round(2/.); translate(mouseZ 5 3/, mouseV O 3/); be'in$hape(); !or (int i < /; i 9 points#len'th; i44) R ,ertex(pointsìa`/a, pointsìa`6a); S end$hape(); S
Es 1osi)le continuar $ :acer arra$s en 3' o 4' 1or so)reOe61lotar este recurso. =in em)argo< no es recomenda)le $a Aue los arra$s multidimensionales suelen ser sumamente con9usos. En casos en los Aue se reAuiera usar< se recomienda im1lementar arra$s en *' o 2'< no m,s Aue eso.
*/&
&nidad 30
I(agen' /ni(acin
;a animacin se 1roduce cuando una serie de im,genes< cada una ligeramente di9erente< se 1resentan en una sucesin r,1ida. Fn medio di%erso< con un siglo de :istoria< la animacin :a 1rogresado desde los e61erimentos iniciales de Iinsor Mc!a$ a las inno%aciones comerciales $ realista de las 1rimeras 1roducciones de Ialt 'isne$ =tudio< con 1elculas e61erimentales 1or animadores como ;otte 0einiger $ I:itne$ James a mediados del siglo >>. El alto %olumen de los e9ectos es1eciales de animacin en 1elculas del ti1o li$e+action< $ la a%alanc:a de 1elculas in9antiles de di)u8os animados< est,n cam)iando el 1a1el de la animacin en la cultura 1o1ular. -I(1genes Secuenciales -ntes de Aue una serie de im,genes sea 1resentada como una secuencia< de)emos cargarlas. ;a %aria)le del ti1o imagen de)e ser declarada 9uera del )loAue setup() $ draN()< $ luego sus %alores de)en ser asignados en el setup(). ;as siguientes im,genes 1ertenecen al usuario Eriance de 'e%iant-rt @???.eriance.de%iantart.comC
N luego el cdigo los di)u8a de manera secuencial en orden numrico

int numHrames < D; //NEmero de cuadros por animar int !rame < /; //*uadro para mostrar al inicio ABma'eà ima'es < neN ABma'e`numHramesa; //1rra; de Bm"'enes ,oid setup() R si(e(6//, 63:); !rame>ate(6/); //6/ cuadros por se'undo, en este caso (m"ximo 0/) ima'es`/a < loadBma'e(Wani5///#'i!W); ima'es`6a < loadBma'e(Wani5//6#'i!W); ima'es`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 e8em1lo muestra una alternati%a al cdigo anterior< utilizando una estructura H?> 1ara o1timizar el 1roceso. Esas lneas de cdigo 1ueden cargar entre * $ &&& im,genes 1or cam)iar el %alor de la %aria)le numHrame. ;a 9uncin n!() es usada 1ara dar 9ormato al nom)re de la imagen a cargar. El o1erador P es usado 1ara controlar el ciclo
*".
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 1ueden mostrarse en un orden aleatorio< lo cual agrega cierto inters al 1rograma. ;o 9undamental es reem1lazar el tiem1o 1or inter%alos irregulares< en un orden aleatorio con tiem1o aleatorio.
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 1ero inde1endientemente del mo%imiento 1rinci1al< se de)e esta)lecer un tem1oralizador $ a%anzar al siguiente cuadro solo cuando el %alor del tem1oralizador aumente como la %aria)le 1rede9inida. En el siguiente e8em1lo< la animacin Aue ocurre en la mitad su1erior es controlada 1or la 9uncin !rame>ate(). ;a animacin en la mitad in9erior es actualizada solo dos %eces 1or segundo.
int numHrames < D; //NEmero de cuadros para animar int topHrame < /; //-l cuadro Gue se muestra arriba int bottomHrame < /; //-l cuadro Gue se muestra aba o ABma'eà ima'es < neN ABma'e`numHramesa; int lastTime < /; ,oid setup() R si(e(6//, 6//); !rame>ate(0/);
Ignacio Buioli | Jaime Prez Marn *"*
!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(1genes en 5ovi(iento Mo%er una imagen< en lugar de 1resentar una secuencia< es otro en9oAue de la animacin de im,genes. ;as mismas tcnicas 1ara la creacin de mo%imientos :an sido $a 1resentadas en unidades anteriores. El e8em1lo siguiente mue%e una imagen de izAuierda a derec:a< %ol%iendo a la izAuierda cuando se est 9uera del )orde de la 1antalla
ABma'e im'; !loat x; ,oid setup() R si(e(6//, 6//); im' < loadBma'e(Wmo,5//6#'i!W); S ,oid draN() R bac)'round(233); x 4< /#3; i! (x 8 Nidth) R x < 5Nidth; S ima'e(im', x, /); S
;as 9unciones de trans9ormacin tam)in 1ueden a1licarse a las im,genes. Estas 1ueden ser trasladadas< rotadas $ escaladas< 1ara 1roducir la ilusin de mo%imiento en el tiem1o. En el siguiente e8em1lo< las imagen gira alrededor del centro de la %entana de re1resentacin
ABma'e im'; !loat an'ulo; ,oid setup() R si(e(6//, 6//); 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 1ueden ser animadas 1or cam)iar sus 1ro1iedades de di)u8os. En este e8em1lo< la o1acidad de la imagen oscila 1roduciendo trans1arencia.
*"2
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
*"3
&nidad 31
I(agen' P@%eles
'et(), set()
En la 1rimer unidad Aue trata el tema de im,genes< se de9ine a una imagen como una cuadrcula rectangular de 16eles en la Aue cada elemento es un n3mero Aue es1eci9ica un color. 'e)ido a Aue la 1antalla en s es una imagen< los 16eles indi%iduales se de9inen tam)in como n3meros. Por lo tanto< los %alores de color de los 16eles indi%iduales se 1ueden leer $ cam)iar. -:e*endo P@%eles !uando un 1rograma de Processing se e8ecuta< lo 1rimero Aue inicia es la %entana de re1resentacin< esta)lecida con los %alores Aue se inclu$en en si(e(). El 1rograma gana el control de dic:a ,rea $ esta)lece el color de cada 16el. ;a 9uncin 'et() 1uede leer los datos de cualAuier 16el de la 1antalla. Ja$ tres %ersiones de dic:a 9uncin< una 1ara cada uso
'et() 'et(x, ;) 'et(x, ;, ancho, alto)
=i 'et() es usado sin 1ar,metros< este :ar, una im1resin com1leta de 1antalla< $ la regresar, como una ABma'e. ;a %ersin con dos 1ar,metros regresa el color de un 16el 1articular< localizado en la 1osicin 6 e $< res1ecti%amente. Fn ,rea rectangular es regresada si se utilizan los 1ar,metros 1ara ancho $ alto. =i 'et() se utiliza sin 1ar,metros< la ca1tura Aue de%uel%e de)e ser guardada en una %aria)le ABma'e. ;uego< dic:a ca1tura 1uede utilizarse como una imagen cualAuiera.
stro)eIei'ht(D); line(/, /, Nidth, hei'ht); line(/, hei'ht, Nidth, /); ABma'e cross < 'et(); //?btiene una captura entera ima'e(cross, /, 3/);//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);
*"4
;a 9uncin 'et() o)tiene los 16eles actuales mostrados en 1antalla. Eso Auiere decir Aue no solo 1uede ser una ca1tura de 9ormas del 1rograma< sino tam)in de una imagen Aue est cargada.
ABma'e medusa; medusa < loadBma'e(Wmedusa# p'W); ima'e(medusa, /, /); ABma'e crop < 'et(); //?btiene una captura entera ima'e(crop, /, 3/); //Dibu a la ima'en en la nue,a posicin
!uando es usado con los 1ar,metros x e ;< la 9uncin 'et() regresa un %alor Aue de)e ser asignado a una %aria)le del ti1o color. Ese %alor 1uede ser utilizado 1ara esta)lecer el color de )orde o de relleno de una 9igura. En el siguiente e8em1lo< el color o)tenido es usado como relleno de un rect,ngulo
ABma'e medusa; 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 1or el mouse 1ueden ser usados como 1ar,metros de 'et(). Esto le 1ermite al cursor seleccionar colores de la %entana de re1resentacin
ABma'e medusa; ,oid setup() R si(e(6//, 6//); no$tro)e(); 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() 1uede ser utilizada con un ciclo H?> 1ara :aca 1oder identi9icar %arios colores o un gru1o de 16eles.
ABma'e medusa; int ; < /; ,oid setup() R si(e(6//, 6//); 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);
*"/
line(i43/, /, i43/, 6//); S stro)e(233); line(/, ;, .7, ;); S
!ada Aima'e tiene su 1ro1ia 9uncin 'et() 1ara conseguir 16eles de la imagen. Esto 1ermite a los 16eles ser o)tenidos de la imagen< inde1endientemente de los 16eles Aue se muestran en 1antalla. Na Aue ABma'e es un o)8eto< se 1uede acceder a su 9uncin 'et() con el o1erador del 1unto< como se muestra a continuacin
ABma'e medusa; 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 P@%eles ;os 16eles en la %entana de 1resentacin de Processing 1ueden ser escritos directamente con la 9uncin set(). Ja$ dos %ersiones de esta 9uncin< am)as con tres 1ar,metros
set(x, ;, color) set(x, ;, ima'en)
!uando el tercer 1ar,metros es un color< set() cam)ia el color de un 16el de la %entana de re1resentacin. !uando el tercer 1ar,metro es una imagen< set() escri)e una imagen en la 1osicin de x e ;.
color ne'ro < color(/); set(2/, D/, ne'ro); set(2/, D6, ne'ro); set(2/, D2, ne'ro); set(2/, D0, ne'ro); !or (int i < /; i 9 33; i44) R !or (int < /; 9 33; 44) R color c < color((i4 ) * 6#D); set(0/4i, 2/4 , c); S S
;a 9uncin set() 1uede escri)ir una imagen 1ara mostrar en la %entana de re1resentacin. Fsar set() es muc:o m,s %eloz Aue utilizar ima'e()< $a Aue los 16eles son co1iados directamente. =in em)argo< las im,genes di)u8adas con set() no 1ueden ser escaladas ni 1intadas< $ no son a9ectadas 1or las 9unciones de trans9ormacin.
ABma'e medusa; ,oid setup() R si(e(6//, 6//); medusa < loadBma'e(Wmedusa# p'W); S ,oid draN() R
*""
int x < constrain(mouseZ, /, 3/); set(x, /, medusa); S
!ada %aria)le del ti1o ABma'e tiene su 1ro1ia 9uncin set()< 1ara escri)ir los 16eles directamente a la imagen. Esto 1ermite a los 16eles ser escritos en una imagen inde1endientemente de los 16eles Aue se muestran en la %entana de re1resentacin. Na Aue ABma'e es una imagen< la 9uncin set() se e8ecuta con el nom)re de la imagen $ el o1erador de 1unto.
ABma'e medusa; 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/, /);
*"+
&nidad 32
6i+ograf@a' 5ovi(iento
- 1esar del 1otencial 1ara el ti1o de cintica en el cine< la ti1ogra9a animada no comenz :asta la dcada de *&/.< con el ttulo de la 1elcula del tra)a8o de =aul Bass< Binder Maurice< $ Pa)lo #erro. Estos diseGadores $ sus com1aGeros< lograron e9ectos de calidad mu$ alta con sus secuencias de ttulos cinticos en 1elculas como North by North"est @*&/&C< Dr. No @*&"2C< $ Aullitt @*&"4C. Entonces< se e61lor el 1oder e%ocador de la cintica en 9orma de las letras 1ara esta)lecer un estado de ,nimo $ e61resar ni%eles adicionales de signi9icado en relacin con el lengua8e escrito. En los aGos siguientes el diseGo de ttulos de 1elcula :a madurado $ :a sido aumentado 1or la ti1ogra9a e61erimental 1ara la tele%isin $ el Internet. -Pala-ras en 5ovi(iento Para Aue la ti1ogra9a se mue%a< es necesario Aue el 1rograma se e8ecute continuamente. Por lo tanto< es necesario utilizar una estructura draN().Fsar la ti1ogra9a con draN() reAuiere tres 1asos. Primero< la %aria)le AHont de)e ser declarada 9uera de los )loAues setup() $ draN(). ;uego< la 9uente de)e ser cargada $ esta)lecida en el )loAue setup(). #inalmente< la 9uente 1uede ser usada en el )loAue draN() a tra%s de la 9uncin text(). El siguiente e8em1lo utiliza una 9uente llamada Xai5i. Para 1ro)ar dic:o e8em1lo es necesario crear tu 1ro1ia 9uente con la :erramienta K 0reate .ontL $ luego cam)iar el nom)re del 1ar,metro de loadHont() 1or el indicado
AHont !ont; $trin' s < WAeaW; ,oid setup() R si(e(6//, 6//); !ont < loadHont(WeaiTi5.D#,lNW); textHont(!ont); !ill(/); S ,oid draN() R bac)'round(2/.); text(s, 22, :/); S
Para 1onerla en mo%imiento< sim1lemente di)u8aremos un cam)io de 1osicin en cada cuadro. ;as 1ala)ras 1ueden mo%erse en un orden en un orden regular si sus %alores son cam)iados en cada cuadro< $ tam)in 1uede mo%erse sin un orden a1arente 1or reci)ir %alores aleatorios.
AHont !ont; !loat x6 < /; !loat x2 < 6//; ,oid setup() R si(e(6//, 6//); !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//;
*"4
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 ti1ogra9a no necesita mo%erse en orden 1ara cam)iar en el tiem1o. Muc:os de los 1ar,metros de trans9ormaciones< como la o1acidad< 1uede utilizarse en el te6to. Es 1osi)le cam)iando el %alor de una %aria)le en el draN().
AHont !ont; int opacidad < /; int direccion < 6; ,oid setup() R si(e(6//, 6//); !ont < loadHont(WeaiTi52D#,lNW); textHont(!ont); S ,oid draN() R bac)'round(2/.); opacidad 4< 2 * direccion; i! (( opacidad 9 /) TT ( opacidad 8 233)) R direccion < 5direccion; S !ill(/, opacidad); text(W!undidoW, ., :/); S
-l a1licar las 9unciones de translate()1 rotate() $ scale() tam)in 1ueden 1roducirse mo%imientos
AHont !ont; $trin' s < WM->TBX?W; !loat an'ulo < /#/; ,oid setup() R si(e(6//, 6//); !ont < loadHont(WeaiTi5.D#,lNW); textHont(!ont, 2.); !ill(/); S ,oid draN() R bac)'round(2/.); an'ulo 4< /#/2; pushCatrix();
*"&
translate(00, 3/); scale((cos(an'ulo/.#/) 4 6#2) * 2#/); rotate(an'ulo); text(s, /, /); popCatrix();
7tra tcnica de re1resentacin< llamada 1resentacin r,1ida de %isualizacin serial @0=(PC< muestra 1ala)ras en la %entana de 9orma secuencial $ 1ro%ee distintas 9ormas de 1ensar como leerlo.
AHont !ont; $trin'à palabras < R WTresW, W'olpesW, W;W, WestasW, W!ueraW, W WS; int cualAalabra < /; ,oid setup() R si(e(6//, 6//); !ont < loadHont(WeaiTi52D#,lNW); textHont(!ont); text1li'n(*-NT->); !rame>ate(.); S ,oid draN() R bac)'round(2/.); cualAalabra44; i! (cualAalabra << palabras#len'th) R cualAalabra < /; S text(palabras`cualAalabraa, Nidth/2, 33); S
-:etras en 5ovi(iento Indi%idualmente< las letras o9recen ma$or 9le6i)ilidad a la :ora de animar Aue las 1ala)ras. !onstruir 1ala)ras letra 1or letra< $ darle un mo%imiento indi%idual a cada una de ellas< 1uede con%ertirse en una tarea mu$ ardua. 5ra)a8ar de esta manera reAuiere m,s 1aciencia $ dedicacin Aue 1rogramas de otras caractersticas< 1ero los resultados son altamente satis9actorios.
//-l tama+o de cada letra oscila su tama+o //de i(Guierda a derecha AHont !ont; $trin' s < W1>-1W; !loat an'ulo < /#/; ,oid setup() R si(e(6//, 6//); !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
*+.
//*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
*+*
&nidad 33
6i+ograf@a' =es+uesta
Muc:as 1ersonas 1asan :oras al da escri)iendo cartas en las com1utadoras< 1ero esta accin se %e mu$ limitada. PDu caractersticas se 1odra agregar a un editor de te6to 1ara Aue sea m,s sensi)le a la mecangra9aQ Por e8em1lo< la %elocidad de la escritura 1odra disminuir el tamaGo de las letras< o una larga 1ausa en la escritura 1odra aGadir muc:os es1acios< imitando as una 1ausa de una 1ersona mientras :a)la. PDu 1asa si el teclado 1uede registrar la di9icultad con Aue una 1ersona escri)e @la 9orma de Auien toca una nota sua%e del 1iano< cuando se 1ulsa una tecla con sua%idadC $ autom,ticamente 1uede asignar atri)utos como la cursi$a para las e(presar sua$idad $ negrita +ara e%+resas fuer2aQ Estas analogas se sugieren cmo conser%adoras del so9t?are actual Aue trata a la ti1ogra9a $ mecanogra9a. -Pala-ras res+onsivas - los elementos ti1ogr,9icos se le 1ueden asignar los com1ortamientos Aue de9inen una 1ersonalidad en relacin con el mouse o el teclado. Fna 1ala)ra 1uede e61resar la agresin mo%indose r,1idamente :acia el cursor< o uno Aue se ale8a 1oco a 1oco 1uede e61resar timidez.
//@a palabra We,itarW se 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
*+2
-:etras res+onsivas =e1arar una 1ala)ra en las letras Aue lo com1onen crea m,s o1ciones 1ara determinar su res1uesta a la del mouse o el teclado. ;as letras inde1endientes tienen la ca1acidad de res1onder de una manera di9erente $ contri)u$en a la res1uesta total de la 1ala)ra. ;os dos e8em1los siguientes muestran esta tcnica. El mtodo to*har1rra;() se utiliza 1ara e6traer los caracteres indi%iduales de una %aria)le $trin'. El mtodo char1t() es una 9orma alternati%a 1ara aislar las letras indi%iduales dentro de un $trin'.
//@a posicin hori(ontal del mouse determina la rotacin //del "n'ulo# -l "n'ulo aumenta con cada letra, lo Gue //permite hacer una cur,a tipo'r"!ica# $trin' palabra < WHlexibilidadW; AHont !; charà letras; ,oid setup() R si(e(6//, 6//); ! < loadHont(WeaiTi56:#,lNW); textHont(!); 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., :/);
*+3
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
*+4
&nidad 38
$olor' $o(+onentes
red(), blue(), 'reen(), alpha(), hue(), saturation(), bri'htness()
;os colores son almacenados en el so9t?are como n3meros. !ada color se de9ine 1or los elementos Aue lo com1onen. !uando el color es de9inido 1or los %alores 0EB< :a$ tres n3meros Aue almacenan los com1onentes de ro8o< %erde $ azul< $ un cuarto n3mero o1cional Aue almacena un %alor de trans1arencia. !uando se tra)a8a con los %alores J=B< los tres n3meros almacenan el tono< saturacin< $ los %alores de )rillo $ un cuarto indica la trans1arencia. El color %isi)le es una com)inacin de estos com1onentes. El a8uste de las 1ro1iedades de colores indi%iduales en 9orma aislada de los dem,s es una tcnica 3til 1ara cam)iar din,micamente un %alor de un solo color o la 1aleta entera de un 1rograma. -E%tra*endo $olor En Processing< una %aria)le del ti1o color sim1lemente almacena un %alor indi%idual de un com1onente del color. Este %alor com)ina los com1onentes ro8o< %erde< azul $ al9a. 5cnicamente< este %alor es un int @enteroC $ 1uede utilizarse din,micamente como se :a %isto en unidades anteriores. ;a %aria)le color almacena %alores entre . $ 2// Aue luego 1uede utilizarse como com1onentes de color. ;a siguiente ta)la muestra una a)straccin de lo dic:o ro'o
$erde a3ul alfa color
;as 9unciones red()< 'reen() $ blue()1 son usadas 1ara leer los com1onentes de color. ;a 9uncin red() e6trae el com1onente ro8o. ;a 9uncin 'reen() e6trae el com1onente %erde. ;a 9uncin blue() e6trae el com1onente azul.
color c6 < color(/, 62:, 233); !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 com1onente al9a de un color. 0ecordar agregar un cuarto %alor a color()< de lo contrario< al9a ser, siem1re 2// 1or de9ecto.
*+/
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() 1ero en el modo J=B de color. 0es1ecti%amente< e6traen en el %alor de tono< saturacin $ )rillo. 0ecordar cam)iar de modo color a modo J=B antes de utilizar dic:as 9unciones. =in em)argo< :a$ %eces Aue se desea o)tener alguno de esos %alores en el modo 1or de9ecto< $ esto es 1osi)le en Processing.
colorCode(\$=, 0:/, 6//, 6//); 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 1or dic:as 9unciones son todos %alores del ti1o !loat @decimalC< 1or lo tanto dar, un error si se trata de asignar a una %aria)le ti1o int. =iem1re 1ueden utilizarse las 9unciones de con%ersin si se lo desea.
color c < color(66D, 22, 2.); 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 1ara leer 16eles indi%idualmente en la 1antalla. En el siguiente e8em1lo< la 9uncin 'et() es utilizada 1ara acceder al color actual de donde se encuentra la 1osicin del cursor.
//-stablece el color de las lneas cuando el //*omponente 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/);
*+"
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() 1ueden ser utilizadas de di9erentes maneras. Por e8em1lo< los %alores Aue de%uel%en 1ueden utilizarse 1ara controlar el mo%imiento de las 9ormas $ 9iguras. En el siguiente e8em1lo< se utiliza el %alor de )rillo de una imagen 1ara controlar la %elocidad de 4.. 1untos en 1antalla.
int num < .//; !loatà x < neN !loat`numa; !loatà ; < neN !loat`numa; ABma'e im'; ,oid setup() R si(e(6//, 6//); im' < loadBma'e(Wmedusa# p'W); !or (int i < /; i 9 num; i44) R xìa < random(Nidth); ;ìa < random(hei'ht); S stro)e(233); S ,oid draN() R bac)'round(/); !or (int i < /; i 9 num; i44) R color c < im'#'et(int(xìa), int(;ìa)); !loat b < bri'htness(c) / 233#/; !loat ,el < poN(b, 2) 4 /#/3; xìa 4< ,el; i! (xìa 8 Nidth) R xìa < /; ;ìa < random(hei'ht); S point(xìa, ;ìa); S S
*++
-Paletas de color #in1(ico Fno de los conce1tos m,s im1ortantes en el tra)a8o con el color es la relati%idad. !uando un color se coloca al lado de otro< am)os 1arecen cam)iar. =i el color tiene el mismo as1ecto en una $u6ta1osicin< a menudo de)en ser di9erentes @de9inidos con di9erentes n3merosC. Esto es im1ortante 1ara considerar cuando se tra)a8a con el color en el so9t?are< $a Aue los elementos son a menudo el mo%imiento $ el cam)io de colores. Por e8em1lo< la colocacin de estos cinco colores...
'
...en di9erente orden< cam)ia su a1ariencia
-B!'E
!-'BE
En el siguiente e8em1lo< los colores almacenados en una %aria)le oli,a $ 'ris siem1re son los mismos< mientras Aue los %alores de amarillo $ naran a se cam)ian din,micamente en relacin a la 1osicin mouseV.
color oli,a, 'ris; ,oid setup() R si(e(6//, 6//); colorCode(\$=, 0:/, 6//, 6//, 6//); no$tro)e(); smooth(); oli,a < color(K3, :6, 37); 'ris < color(0/, 6K, .2); S ,oid draN() R !loat ; < mouseV / !loat(hei'ht); bac)'round('ris); !ill(oli,a); Guad(K/ 4 ;*:, /, 6//, /, 6//, 6//, 0/ 5 ;*:, 6//); color amarillo < color(.D 4 ;*2/, 6//, DD 5 ;*2/); !ill(amarillo); ellipse(3/, .3 4 ;*6/, :/, :/); color naran a < color(27, 6//, D0 5 ;*6/); !ill(naran a); ellipse(3., .2 4 ;*6:, 2., 2.); S
Fna )uena tcnica 1ara crear 1aletas de colores es utilizando im,genes $ e6traer sus colores con la 9uncin 'et(). 'e1endiendo de los o)8eti%os< se 1uede cargar una imagen 9otogr,9ica o una Aue se :a construido 16el 1or 16el. Fna imagen de cualAuier dimensin 1uede ser cargada $ usado como una 1aleta de colores. -
*+4
%eces es con%eniente utilizar 1ocos 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 1osi)ilidades. Fna %ez Aue los colores se encuentran en un arra$< 1ueden ser 9,cilmente reorganizados o cam)iados. En el siguiente e8em1lo< los %alores de color de la imagen se cargan de 9orma secuencial en un arra$ $ luego son reordenados de acuerdo con su )rillo. Fna 9uncin< Aue llamaremos tipo*olor()1 toma una %ariedad de colores como entrada< las 1one en orden de oscuro a claro< $ luego regresa los colores ordenados. Na Aue cuenta de . a 2//< 1one todos los colores con el %alor actual del arra$ sin ordenar el nue%o arra$.
ABma'e im'; colorà ima'e*olors; ,oid setup() R si(e(6//, 6//); !rame>ate(/#3); smooth(); noHill(); im' < loadBma'e(Wcolores# p'W); ima'e*olors < neN colorìm'#Nidth*im'#hei'hta; !or (int ; < /; ; 9 im'#hei'ht; ;44) R !or (int x < /; x 9 im'#Nidth; x44) R ima'e*olors`;*im'#hei'ht 4 xa < im'#'et(x, ;);
*+&
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);
*4.
&nidad 3<
I(agen' ,iltro, 5e2cla, $o+ia, 51scara

!ilter(), blend(), blend*olor(), cop;(), mas)()
;as im,genes digitales tienen el 1otencial nota)le 1ara ser 9,cilmente reOcon9iguradas $ com)inarse con otras im,genes. El so9t?are a:ora simula un 1roceso de o1eraciones de consumo Aue antes eran la 1reocu1acin de un cuarto oscuro con luz $ Aumica. !ada 16el de una imagen digital es un con8unto de n3meros Aue se 1ueden agregar o multi1licar. -lgunos de estos c,lculos se )asan en la aritmtica $ otros utilizan las matem,ticas m,s com1le8as de 1rocesamiento de seGales< 1ero los resultados %isuales son lo m,s im1ortantes. ;os 1rogramas de so9t?are tales como el E2F Image Mani1ulation Program @EIMPC $ -do)e P:otos:o1< :an :ec:o 1osi)le la realizacin de muc:os de los c,lculos m,s comunes $ 3tiles< sin 1ensar en las matem,ticas detr,s de los e9ectos. Estos 1rogramas 1ermiten a los usuarios realizar 9,cilmente las o1eraciones tcnicas< tales como la con%ersin de im,genes de colores 0EB a escala de grises< aumentando el contraste de una imagen< 1roduciendo un )alance de color u otra clase de a8ustes. Fn 9iltro 1uede desen9ocar una imagen< imitar la solarizacin< o simular los e9ectos de acuarela. ;as acciones de 9iltrado de 9iccin< mezcla< $ la co1ia se 1uede controlar 9,cilmente con el cdigo 1ara 1roducir cam)ios nota)les. Estas tcnicas 1ueden ser demasiado lenta 1ara su uso en animacin en tiem1o real. -,iltrando * 5e2clando Processing 1ro%ee de 9unciones 1ara 9iltrar $ mezclar im,genes mostradas en la %entana de re1resentacin. Estas o1eran 1or alterar los 16eles de una imagen o utilizar como 1ar,metro dos de estas. ;a 9uncin !ilter() 1osee dos %ersiones
!ilter(modo) !ilter(modo, ni,el)
E6isten oc:o o1ciones di9erentes 1ara modo T\>-$\?@D1 X>1V1 BNM->T1 A?$T->Bb-1 =@&>1 ?A1L&-1 ->?D-< o DB@1T-. -lgunos de estos modos reAuieren Aue se les esta)lezca un ni$el. El siguiente e8em1lo a1lica el 9iltro T\>-$\?@D a una imagen< con un ni%el de /#K.
ABma'e im' < loadBma'e(Wmedusa# p'W); ima'e(im', /, /); !ilter(T\>-$\?@D, /#K);
;a 9uncin !ilter() a9ecta solo a lo Aue $a :a sido di)u8ado. Por e8em1lo< si un 1rograma di)u8a dos lneas< $ un desen9oAue es creado luego de Aue una lnea es di)u8ada< a9ectar, 3nicamente a la 1rimera.
smooth(); stro)eIei'ht(3); noHill(); line(/, 0/, 6//, :/); !ilter(=@&>, 0); line(/, 3/, 6//, D/);
-l cam)iar el 1ar,metro de ni,el en cada cuadro se 1uede 1roducir mo%imiento. Para esto< :aremos uso de un )loAue draN() Aue actualice el ni%el de desen9oAue de un 9iltro.
*4*
!loat !u((; < /#/; ,oid setup() R si(e(6//, 6//); smooth(); stro)eIei'ht(3); noHill(); S ,oid draN() R bac)'round(2/.); i! (!u((; 9 6:#/) R !u((; 4< /#/3; S line(/, 0/, 6//, :/); !ilter(=@&>, !u((;); line(/, 3/, 6//, D/); S
!ualAuier %aria)le ABma'e tam)in 1osee su 1ro1io mtodo !ilter(). Esto 1ermite tra)a8ar con las im,genes de 9orma indi%idual. Para esto< utilizamos el o1erador 1unto.
ABma'e im' < loadBma'e(Wmedusa# p'W); ima'e(im', /, /); im'#!ilter(BNM->T); ima'e(im', 3/, /);
;a 9uncin blend() mezcla los 16eles de di9erentes maneras< de1endiendo la clase de 1ar,metros Aue reci)a. 5iene dos %ersiones di9erentes
blend(x, ;, ancho, alto, dx, d;, dancho, dalto, modo) blend(im', x, ;, ancho, alto, dx, d;, dancho, dalto, modo)
El 1ar,metro modo 1uede ser =@-ND1 1DD 1 $&=T>1*T1 D1>e-$T1 @BX\T-$T1 DBHH->-N*-1 -Z*@&$B?N1 C&@TBA@V1 $*>--N1 ?M->@1V1 \1>DY@BX\T1 $?HTY@BX\T1 D?DX-< $ =&>N. ;os 1ar,metros x e ; corres1onden a las coordenadas 6 e $ de la u)icacin a co1iar. ;os 1ar,metros ancho $ alto< esta)lecen en tamaGo del ,rea a co1iar. ;os 1ar,metros dx $ d; son la coordenada 6 e $ de destino. ;os 1ar,metros dancho $ dalto< esta)lecen el tamaGo del ,rea de destino. Para mezclar dos im,genes< lo idea es utilizar la segunda como 1ar,metro de im'. En el siguiente e8em1lo se muestra la utilizacin de blend() en modo 1DD.
bac)'round(/); stro)e(630); stro)eIei'ht(2.); smooth(); line(.., /, 2., D/); line(/, 2., D/, ..); blend(/, /, 6//, 6//, 6:, /, 6//, 6//, 1DD);
5am)in se 1ueden mezclar im,genes im1ortadas a la %entana de re1resentacin 1or utilizar la segunda %ersin de la 9uncin blend(). El siguiente e8em1lo utiliza como modo a D1>e-$T.
*42
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< 1odemos 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 1ara mezclar los colores indi%idualmente.

blend*olor(c6, c2, modo)
;os 1ar,metros c6 $ c2< son los %alores 1ara crear un nue%o color cuando estos se mezclen 8untos. ;a o1cin de modo es lo mismo Aue en la 9uncin blend().
color '6 < color(6/2); //Xris medio color '2 < color(36); //Xris oscuro color '0 < blend*olor('6, '2, C&@TBA@V); //*rea Ne'ro no$tro)e(); !ill('6); rect(3/, /, 3/, 6//); //>ect"n'ulo de la Derecha !ill('2); rect(2/, 23, 0/, 3/); //>ect"n'ulo de la B(Guierda !ill('0); rect(3/, 23, 2/, 3/); //>ect"n'ulo superpuesto
-$o+iando P@%eles ;a 9uncin cop;() 1osee dos %ersiones< $ cada una de ellas una gran cantidad de 1ar,metros
cop;(x, ;, ancho, alto, dx, d;, dancho, dalto) cop;(srcBm', x, ;, ancho, alto, dx, d;, dancho, dalto)
;a %ersin de cop;() con oc:o 1ar,metros< co1ia los 16eles de una regin de la %entana de re1resentacin< $ los 1ega en otra regin. ;a %ersin con nue%e 1ar,metros co1ia toda o una 1orcin de una imagen< es1eci9icada con srcBm'< $ la 1ega en una regin de la %entana de re1resentacin. =i el recurso $ el destino son de di9erentes tamaGos< los 16eles son autom,ticamente escalados 1ara alcanzar el anc:o $ el alto de destino. ;os otros 1ar,metros son los mismos Aue se descri)ieron 1re%iamente en la 9uncin blend(). ;a 9uncin cop;() di9iere de las 9unciones 'et() $ set()< %istas anteriormente< $a Aue esta 1uede o)tener 16eles $ resta)lecerles una 1osicin.
ABma'e im' < loadBma'e(Wmedusa# p'W); ima'e(im', /, /); cop;(/, /, 6//, 3/, /, 3/, 6//, 3/);
*43
ABma'e im'6, im'2; ,oid setup() R si(e(6//, 6//); im'6 < loadBma'e(WbosGue# p'W); im'2 < loadBma'e(Wpuerto# p'W); S ,oid draN() R bac)'round(233); ima'e(im'6, /, /); int m; < constrain(mouseV, /, :K); cop;(im'2, /, m;, 6//, 00, /, m;, 6//, 00); S
;a %aria)les ABma'e tam)in 1osee un mtodo cop;(). Puede utilizarse 1ara co1iar 1orciones de la misma imagen< o de una imagen a otra.
ABma'e im' < loadBma'e(Wtorre# p'W); im'#cop;(3/, /, 3/, 6//, /, /, 3/, 6//); ima'e(im', /, /);
-En(ascarando El mtodo mas)() de la clase ABma'e esta)lece el %alor de trans1arencia de una imagen )as,ndose en otra imagen. ;a imagen m,scara de)e contener solo %alores en escala de grises< $ de)e ser del mismo tamaGo de la imagen a enmascarar. =i la imagen no es escala de grises< 1uede con%ertirse con la 9uncin !ilter(). ;as ,reas mas claras muestran la imagen< mientras Aue las mas oscuras la cu)ren. El siguiente e8em1lo utiliza la 9uncin mas)() con las siguientes im,genes
puerto# p'
mascara# p'
;a imagen resultante $ el cdigo 1ara 1roducirla

bac)'round(233); ABma'e im' < loadBma'e(Wpuerto# p'W); ABma'e mas)Bm' < loadBma'e(Wmascara# p'W); im'#mas)(mas)Bm'); ima'e(im', /, /);
*44
/+!ndice ,iltros
*4/
&nidad 3>
I(agen' Procesa(iento de I(agen

pixelsà, loadAixels(), updateAixels(), createBma'e()
El 1rocesamiento de im,genes es un trmino mu$ am1lio $ general 1ara re9erirse a la mani1ulacin $ modi9icacin de las mismas< o en su de9ecto< 1roducir un resultado esttico o me8orar la comunicacin. Programas como EIMP o -do)e P:otos:o1 1ro%ee al usuario de :erramientas 1ara mani1ular im,genes< inclu$endo cam)ios de contraste o desen9oAue. En Processing< cada imagen es almacenada co(o un arra* de una di(ensin de colores. !uando imagen es mostrada en 1antalla< cada elemento del arra$ es di)u8ado como un 16el. Por lo tanto< al multi1licar el anc:o 1or el alto de la imagen se 1uede determinar el n3mero de 16eles em1leados. =i una imagen es de *.. 16eles de anc:o 1or *.. 16eles de alto< el arra$ contendr, *.... elementos. = una imagen es de 2.. 16eles de anc:o 1or 2 16eles de alto< el arra$ tendr, 4.. elementos. ;a 1rimera 1osicin del arra$ es el 1rimer 16el de la esAuina su1erior izAuierda< $ la 3ltima es el 3ltimo 16el de la esAuina in9erior derec:a. -P@%eles El arra$ pixelsà almacena el %alor de color de cada 16el. ;a 9uncin loadAixels() de)e ser llamada antes de pixelsà. ;uego de Aue los 16eles son ledos o modi9icados< ellos de)en actualizarse mediante la 9uncin updateAixels(). !omo be'in$hape() $ end$hape()< loadAixels() $ updateAixels()< siem1re est,n 8untas.
,oid setup() R si(e(6//, 6//); S ,oid draN() R !loat 'ra; < map(second(), /, 37, /, 233); color c < color('ra;); int index < !rame*ount P (Nidth*hei'ht); loadAixels(); pixelsìndexa < c; updateAixels(); S
;as 9unciones loadAixels() $ updateAixels() aseguran Aue el arra$ pixelsà est listo 1ara ser modi9icado $ actualizado. Ja$ Aue asegurarse< adem,s< Aue est declarado en torno a cualAuier )loAue< $ solo utilizarlo cuando sea necesario< 1uesto su so)reutilizacin 1uede entor1ecer el 1rograma $ :acerlo lento. ;eer $ escri)ir datos directamente con pixelsà es un mtodo distinto Aue :acerlo con las 9unciones de 'et() $ set(). ;a coordenadaO6 $ la coordenadaO$ 1ueden ser ma1eadas a una 1osicin corres1ondiente del arra$< 1or multi1licar el %alor de $ 1or el anc:o de la %entana de re1resentacin< $ sumarle a este el %alor de x. Para calcular< entonces< cualAuier 1osicin de 16eles en el arra$< de)e utilizarse la siguiente ecuacin
(;*Nidth)4x //-stas tres lneas de cdi'o eGui,alen aF set(23, 3/, color(/)) loadAixels(); pixels`3/*Nidth 4 23a < color(/); updateAixels();
Para con%ertir los %alores en la direccin o1uesta< de)e di%idirse la 1osicin de los 16eles en el arra$ 1or el anc:o de la %entana de re1resentacin< 1ara o)tener la coordenadaO$< $ o)tener el mdulo de la 1osicin $ el
Ignacio Buioli | Jaime Prez Marn *4"
anc:o de la %entana de re1resentacin< 1ara o)tener la coordenadaO6.

//-stas tres lneas de cdi'o eGui,alen aF pixels`3/K3a < color(/) int ; < 3/K3 / Nidth; int x < 3/K3 P Nidth; set(x, ;, color(/));
En 1rogramas Aue reAuieren mani1ular una gran cantidad de 16eles< la im1lementacin de pixelsà es muc:o m,s r,1ida Aue la de 'et() $ set(). ;os siguientes e8em1los :an sido mostrados al e61licarse 'et() $ set() en unidades anteriores. 2o o)stante< aAu se im1lementan con pixelsà 1ara demostrar la %elocidad con la Aue o1era el 1rograma.
,oid setup() R si(e(6//, 6//); S ,oid draN() R //*ontrae para no exceder el lmite del arra; int mx < constrain(mouseZ, /, 77); int m; < constrain(mouseV, /, 77); loadAixels(); pixels`m;*Nidth 4 mxa < color(/); updateAixels(); S
ABma'e arch; ,oid setup() R si(e(6//, 6//); no$tro)e(); arch < loadBma'e(Warch# p'W); S ,oid draN() R bac)'round(arch); //*ontrae para no exceder el lmite del arra; 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 1ro1io arra$ pi(elsEF< al cual se 1uede acceder con el o1erador 1unto. Esto :ace 1osi)le mostrar una imagen mientras se modi9ican los 16eles en otra imagen.
ABma'e arch; ,oid setup() R si(e(6//, 6//); arch < loadBma'e(Wpuerto# p'W); S ,oid draN() R bac)'round(2/.); int mx < constrain(mouseZ, /, 77); int m; < constrain(mouseV, /, 77); arch#loadAixels(); arch#pixels`m;*Nidth 4 mxa < color(/);
*4+
arch#updateAixels(); ima'e(arch, 3/, /); S
-l im1lementar el arra$ pixelsà1 en lugar de la 9uncin ima'e() 1ara mostrar una imagen en 1antalla< este arra$ 1ro%ee de m,s control de la mencionada imagen. =im1les o1eraciones matem,ticas o 1eAueGos c,lculos< sumado a un ciclo H?>< re%ela el %erdadero 1otencial de pixelsà como arra$.
ABma'e arch < loadBma'e(Wpuerto# p'W); int count < arch#Nidth * arch#hei'ht; arch#loadAixels(); loadAixels(); !or (int i < /; i 9 count; i 4< 2) R pixelsìa < arch#pixelsìa; S updateAixels(); 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 P@%el ;as 9unciones red()< 'reen() $ blue() son utilizadas 1ara leer %alores indi%iduales de los 16eles. Estos %alores 1ueden ser modi9icados $ de%ueltos al arra$ pxelsà. En el siguiente e8em1lo< se muestra como in%ertir los %alores de color de una imagen.
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 pxeles !loat r < 233 5 red(p); //Codi!icar ,alor ro o !loat ' < 233 5 'reen(p); //Codi!icar ,alor de ,erde !loat b < 233 5 blue(p); //Codi!icar ,alor de a(ul pixelsìa < color(r, ', b); //1si'nar ,alor modi!icado
*44
S updateAixels();
;os %alores del teclado $ el mouse 1ueden ser utilizados en la manera en la Aue el arra$ pixelsà modi9ica mientras el 1rograma se est, e8ecutando. En el siguiente e8em1lo< una imagen es con%ertida a escala de grises al incrementar sus com1onentes. Estos %alores son incrementados con mouseZ< :aciendo la imagen mas luminosa.
ABma'e arch; ,oid setup() R si(e(6//, 6//); 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< 1ero tam)in mu$ lentas. !uando se reAuiere Aue se modi9iAue de 9orma indi%idual cientos o miles de %eces mientras se e8ecuta el 1rograma< se recomienda utilizar una tcnica conocida como bit+shifting. -$onvolucin 7tra 9orma de modi9icar las im,genes es cam)iar el %alor de cada 16el en relacin a sus 16eles %ecinos. Fna matri6 de n3meros< llamada Hernel de con%olucin< es a1licada a cada 16el de la 1antalla. -1licando el Hernel a cada 16el es llamado 1roceso de con%olucin. Este ti1o de 1roceso matem,tico es tan e9iciente Aue o1era en 1rogramas de 1roduccin gr,9ica mu$ 1otentes como el -do)e P:otos:o1. !omo un e8em1lo< tomaremos un 16el de una imagen a la Aue le a1licaremos el Hernel. El 16el o1era como centro de los 16eles Aue se encuentran a su alrededor. !ada 16el es multi1licado 1or el Hernel $< luego estos %alores se suman entre s. El resultado es un 16el con un nue%o %alor de color< 1roducto de a1licar el Hernel
;a 1rimer e61resin creada al a1licar el Hernel es la siguiente
*4&
(233 * /#666) 4 (22: * /#666) 4 (630 * /#666) 4 (22: * /#666) 4 (630 * /#666) 4 ( / * /#666) 4 (630 * /#666) 4 ( / * /#666) 4 ( / * /#666)
=im1li9icado como
2D#0/3 4 23#/D: 4 6:#7D0 4 23#/D: 4 6:#7D0 4 /#/// 4 6:#7D0 4 /#/// 4 /#///
Esto da como resultado *2&<42". Pasado a entero es *2&< $ luego es con%ertido a %alor de grises 1ara el 16el. Para realizar una con%olucin en la imagen com1leta< es necesario a1licar el Hernel en cada uno de los 16eles. Es sa)ido Aue un 1ro)lema im1ortante son los 16eles de las aristas o los )ordes< donde algunos de los 16eles Aue los rodean esca1an de la %entana de re1resentacin. En estos casos< el 1rograma sim1lemente los ignora $ a1lica el Hernel al resto de los %alores. ;os 1atrones Aue se utilizan en los Hernel crean di%ersos 9iltros 1ara a1licar a la imagen. =i todos los %alores del Hernel son 1ositi%os< crea lo Aue suele denominarse un 9iltro 1asaO)a8os. Fn 9iltro 1asaO)a8os< remue%e ,reas donde :a$ una e6trema di9erencia en los %alores ad$acentes de los 16eles. -l a1licarlo en una imagen com1leta< crea una es1ecie de desen9oAue. Ftilizar< en el Hernel< una mezcla de %alores 1ositi%os $ negati%os crea un 9iltro 1asaOaltos. Fn 9iltro 1asaOaltos< remue%e ,reas donde :a$ mu$ 1oca di9erencia en los %alores ad$acentes de los 16eles. Esto 1roduce una clase de en9oAue. El siguiente e8em1lo< demuestra como usar una matri6 Hernel de 3 6 3< 1ara trans9ormar una imagen. =i se modi9ican los %alores del arra$ )ernelàà< se o)tendr,n distintos resultados. ;a 9uncin createBma'e() crea un 16el %aco. 'ic:a 9uncin reAuiere tres 1ar,metros< 1ara asignar el anc:o< el alto $ el 9ormato de la imagen. El 9ormato 1uede ser >X= @color com1letoC o 1>X= @color com1leto con al9aC. 2o es necesario utilizar loadAixels() inmediatamente des1us de utilizar createBma'e().
!loatàà )ernel < R R 56, /, 6 S, R 52, /, 2 S, R 56, /, 6 S S; si(e(6//, 6//); ABma'e im' < loadBma'e(Wpuerto# p'W); //*ar'a de la ima'en ori'inal im'#loadAixels(); //*rea una ima'en opaca con el mismo tama+o Gue la ori'inal ABma'e ed'eBm' < createBma'e(im'#Nidth, im'#hei'ht, >X=); //=ucle para recorrer cada pxel !or (int ; < 6; ; 9 im'#hei'ht56; ;44) R//B'nora los bordes de arriba ; de 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(); 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< 1ueden utilizarse 1ara muc:as otras cosas Aue solo mostrar colores. ;os siguientes e8em1los muestran di%ersas 9ormas de utilizar los datos de pixelsà.
//*on,ierte cada ,alor de pxel en di"metros de un crculo ABma'e arch; int index; ,oid setup() R si(e(6//, 6//); smooth(); !ill(/); arch < 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
*&*
//*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
*&2
/+!ndice $onvolucin
*&3
&nidad 3?
#atos de Salida' I(1genes

sa,e(), sa,eHrame()
;a 1antalla de una com1utadora muestra una imagen en la 1antalla muc:as %eces 1or segundo. ;a ma$ora de los sistemas o1erati%os 1ermiten o)tener una ca1tura de la 1antalla mientras se est, e8ecutando el sistema. =i se utiliza una Macintos:< de)e o1rimirse !omandoO=:i9tO3. En caso de usarse Iindo?s< de)e o1rimirse el )otn Im1resin de Pantalla @Im1r Pant Pet =isC. Esta imagen es guardada en 1orta1a1eles< 1or lo tanto en cualAuier editor de im,genes 1uede usarse la 9uncin Pegar @!ontrol_(C 1ara %er la corres1ondiente ca1tura. E6isten< adem,s< so9t?are Aue 9acilitan el almacenamiento de estas im1resiones. Incluso< lo interesante< es Aue 1ermiten almacenarlas en 9orma de secuencia< cuadroOaOcuadro. 'e)e considerarse Aue 3. cuadros 1or segundo< tan solo 3. segundos de secuencia necesitan almacenar &.. cuadros. =i se utiliza en la ?e)< 1odra :acerse mu$ lenta la descarga de la animacin secuencial. ;as o1ciones m,s comunes suelen ser tcnicas de degrado de calidad de la imagen< 1ara una m,s r,1ida %isualizacin en la ?e). -Cuardando I(1genes ;a 9uncin sa,e() es em1leada 1ara guardar una imagen del 1rograma. 0eAuiere tan solo un 1ar,metro< un $trin' Aue se con%ierte en el nom)re de la imagen.
sa,e(nombredearchi,o)
;as im,genes 1ueden ser almacenadas en una gran %ariedad de 9ormatos< de1endiendo de la e6tensin utilizada en el 1ar,metro. Por e8em1lo< si el 1ar,metro nombredearchi,o es mi1rchi,o#ti!< ser, una imagen de 9ormato 5I##R en cam)io< si es mi1rchi,o#t'a< ser, una imagen de 9ormato 5-0E-. =i ninguna e6tensin es incluida< se almacenar, como 9ormato 5I## 1or de9ecto< $ el #ti! ser, aGadido al nom)re. Ja$ Aue asegurarse de 1oner el nom)re entre comillas 1ara di9erenciar al 1ar,metro como un $trin'. ;a imagen ser, guardada en la actual car1eta del sHetc:.
line(/, /, Nidth, hei'ht); line(Nidth, /, /, hei'ht); //Xuarda un archi,o TBHH llamado x#ti! en la actual carpeta del s)etch sa,e(Wx#ti!W);
=olo los elementos di)u8ados antes de la declaracin de sa,e() son guardados como una imagen. En el siguiente e8em1lo< solo la 1rimer lnea es guardada en linea#ti!.
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() a1arece dentro de un )loAue draN()< la imagen ser, almacenada cada %ez Aue el )ucle se e8ecute. Esto Auiere decir Aue se estar, guardando constantemente la imagen mostrada en 1antalla. Esto< como es sa)ido< no solo no es correcto sino Aue adem,s entor1ece el 9uncionamiento del 1rograma. 'e entre las soluciones m,s sim1les Aue se 1ueden em1lear< se encuentra utilizar la 9uncin sa,e() en un e%ento. ;o m,s com3n es en un e%ento de mouseAressed() o )e;Aressed().
*&4
,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(1genes Secuenciales ;a 9uncin sa,eHrame() almacena una secuencia numerada de im,genes.
sa,eHrame() sa,eHrame(Wnombredearchi,o5]]]]#extW)
=i sa,eHrame() se utiliza sin 1ar,metro< las im,genes son guardadas como screen5////#ti!1 screen5///6#ti!1 screen5///2#ti!< etc. El com1onente nombredearchi,o5 1uede ser cam)iado 1or cualAuier nom)re se desee< $ la e6tensin ext 1uede ser cam)iada 1or cualAuier e6tensin de imagen. ;os ]]]] es la 1orcin Aue es1eci9ica los dgitos con los Aue se guardan las im,genes. =i se utiliza ]]]]< ese %alor es reem1lazado 1or el %alor Aue en ese momento tiene !rame*ount. Por e8em1lo< el cuadro n3mero *2+ es llamado nombredearchi,o5/62K#ti!< $ el *+23 es nombredearchi,o56K20#ti!. =i se agrega un ] e6tra< so1ortar, *.... o m,s.
//Xuarda los primeros 3/ cuadros !loat x < 00; !loat numHrames < 3/; ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); S ,oid draN() R bac)'round(/); x 4< random(52, 2); ellipse(x, 3/, ./, ./); i! (!rame*ount 9< numHrames) R sa,eHrame(Wcirculos5]]]]#ti!W); S S
Fsando sa,eHrame() dentro de una estructura BH se le otorga mas control al 1rograma. Por e8em1lo< si se desea guardar 2.. cuadros luego de o1rimir el )otn del mouse.
//Xuarda 2. cuadros, de x56///#ti! a x56/20#ti! ,oid draN() R bac)'round(2/.); 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
*&/
bac)'round(2/.); line(mouseZ, mouseV, pmouseZ, pmouseV); i! ((!rame*ount P 3) << /) R sa,eHrame(Wx5]]]]#ti!W); S
*&"
&nidad 3A
#atos de Salida' E%+ortar /rc7ivos

n!(), sa,e$trin's(), ArintIriter, createIriter(), ArintIriter#!lush(), ArintIriter#close(), exit()
;os arc:i%os digitales en los ordenadores no son tangi)les< como sus :omnimos de 1a1el< $ no se acumulan en los ga)inetes durante aGos acumulando 1ol%o. Fn arc:i%o digital es una secuencia de )$tes en una u)icacin en el disco del ordenador. - 1esar de la di%ersidad de los contenidos almacenados en arc:i%os digitales< el material de cada uno es el mismo O una secuencia de *s $ .s. !asi todas las tareas realizadas con com1utadoras im1lica tra)a8ar con los arc:i%os. Por e8em1lo< antes de Aue un documento de te6to se escri)e< el editor de te6to de)e leer el arc:i%o $ un nue%o arc:i%o de)e ser creado 1ara almacenar el contenido. !uando la in9ormacin se guarda< se le da un nom)re 1ara la 9utura recu1eracin del mismo. 5odos los arc:i%os del so9t?are tienen un 9ormato< un con%enio de orden de los datos< 1ara Aue las a1licaciones de so9t?are se1an cmo inter1retarlos cuando los leen de la memoria. -lgunos 9ormatos comunes inclu$en 5>5 1ara arc:i%os de te6to sin 9ormato< MP3 1ara almacenar sonido $ E>E 1ara los 1rogramas e8ecuta)les en Iindo?s. #ormatos comunes 1ara los datos de las im,genes son JPEE $ EI# $ 9ormatos comunes 1ara los documentos de te6to son '7! $ 05#. ;a 9ormato >M; se :a 1o1ularizado en los 3ltimos aGos como un 9ormato de datos de uso general Aue 1uede ser e6tendido 1ara sostener los ti1os es1ec9icos de datos en un 9ormato 9,cil de leer arc:i%o. -,or(ateando #atos E6isten caracteres 1articulares Aue no 1oseen una %isualizacin directa. ;os mas comunes son el es1acio tabular $ la nue$a l@nea. Estos caracteres 1ueden re1resentarse con ft $ fn< res1ecti%amente.
//Bmprime Wespacio tabularW println(WespaciofttabularW); //Bmprime cada palabra lue'o de fn en una nue,a lnea //linea6 //linea2 //linea0 println(Wlinea6fnlinea2fnlinea0W);
;os datos< tam)in< 1ueden ser 9ormateados con 9unciones como n!(). Ja$ dos %ersiones de dic:a 9uncin
n!(intMalor, di'itos) n!(!loatMalor, i(Guierdo, derecho)
El intMalor es un %alor ti1o int a ser 9ormateado< $ los d'itos es la cantidad total de dgitos Aue de)e 1roducir el 9ormato. Por otro lado< en la segunda %ersin< el !loatMalor es el %alor ti1o !loat a ser 9ormateado. El 1ar,metro i(Guierdo esta)lece la cantidad de dgitos a la izAuierda del decimal< mientras Aue el derecho esta)lece la cantidad total de dgitos a la derec:a.
println(n!(2//, 6/)); 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 /rc7ivos Euardar arc:i%os es una 9orma mu$ 3til de 1oder mostrar datos de determinado ti1o una %ez Aue el 1rograma
Ignacio Buioli | Jaime Prez Marn *&+
se detu%o. ;a 9uncin sa,e$trin's() escri)e un arra$ de $trin's a un arc:i%o. El arc:i%o es almacenado en la car1eta del sHetc:. =e 1uede acceder a esta sim1lemente utilizando la :erramienta K=:o? =Hetc: #olderL en el men3 K=Hetc:L. En adicin< la 9uncin exit() se utiliza 1ara detener el 1rograma.
intà x < neN int`/a; intà ; < neN int`/a; ,oid setup() R si(e(6//, 6//); S ,oid draN() R bac)'round(2/.); stro)e(/); noHill(); be'in$hape(); !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 1ro%ee de otra 9orma de e61ortar arc:i%os. En lugar de escri)ir el arc:i%o com1letamente una %ez< como en sa,e$trin's()< el mtodo createIriter() a)re un arc:i%o 1ara escri)irlo $ 1ermite su escritura mientras se e8ecuta el 1rograma. Para 1oder conseguir Aue el arc:i%o se guarde correctamente< es necesario %alerse del mtodo !lush()< 1ara escri)ir cualAuier clase de dato al arc:i%o. El mtodo close() es igualmente necesario 1ara 9inalizar la escritura de manera correcta.
ArintIriter output; ,oid setup() R si(e(6//, 6//); //*rea un nue,o archi,o en el directorio del s)etch output < createIriter(Wposiciones#txtW); !rame>ate(62); S ,oid draN() R i! (mouseAressed) R 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
*&4
,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 e8em1lo es una %ariacin del anterior< 1ero utiliza las teclas Enter $ Barra de Es1acio 1ara controlar la escritura de datos $ cuando el arc:i%o es cerrado
AHont !ont; $trin' letras < WW; ArintIriter output; ,oid setup() R si(e(6//, 6//); !ill(/); !ont < loadHont(W-ure)a52.#,lNW); textHont(!ont); //*rea un nue,o archi,o en el directorio del s)etch output < createIriter(Wpalabras#txtW); S ,oid draN() R bac)'round(2/.); text(letras, 3, 3/); S ,oid )e;Aressed() R i! ()e; << ^ ^) R //=arra de -spacio presionada output#println(letras); //-scribe datos en palabras#txt letras < WW; //@impia el $trin'e letras S else R letras < letras 4 )e;; S i! ()e; << -NT->) R output#!lush(); //-scribe los datos output#close(); //Hinali(a el archi,o exit(); //Detiene el pro'rama S S
*&&
&nidad 3B
Estructuras' 3-jetos
class, ?b ect
;as %aria)les $ las 9unciones son los )loAues constructores de la 1rogramacin. #recuentemente< muc:as 9unciones son utilizadas 8untas 1ara relacionar %aria)les. ;a 1rogramacin orientada a o)8etos< la cual es 1osi)le con Processing< utiliza o)8etos $ clases como )loAues constructores. Fna clase de9ine un gru1o de mtodos @9uncionesC $ de cam1os @%aria)lesC. Fn o)8eto es sim1lemente una instancia de la clase. ;os cam1os de un o)8eto son< generalmente< accesi)les solo %a sus 1ro1ios mtodos< lo cual 1ermite ocultar su com1le8idad del 1rograma general. =imilar a lo Aue ocurre al mane8ar< un conductor no %e los 1rocesos de ingeniera Aue ocurren en el motor< 1ero si 1uede %er la %elocidad a la Aue %a en el %elocmetro. El mismo ti1o de a)straccin es utilizada en la 1rogramacin orientada a o)8etos @P77C. -Progra(acin 3rientada a 3-jetos Fn 1rograma modular se com1one de mdulos de cdigo< encargados de una tarea es1ec9ica. ;as %aria)les son la 9orma m,s ),sica en 1ensar en reutilizar elementos en un 1rograma. Permiten Aue un %alor 1ueda a1arecer la cantidad de %eces Aue sea necesario $ Aue sea cam)iado. ;as 9unciones a)straen una tarea es1ec9ica $ 1ermiten a los )loAues de cdigo se reutilizados. Eeneralmente< uno est, conectado con lo Aue la 9uncin :ace< $ no como ella 9unciona. ;a 1rogramacin orientada a o)8etos e6tiende la modularidad de utilizar %aria)les $ escri)ir 9unciones 1or relacionarlas entre ellas< al ser agru1adas 8untas. Es 1osi)le :acer una analoga entre los o)8etos del so9t?are $ los artefactos reales. Para o)tener una %isin del mundo como 1eAueGos 1rogramas orientados a o)8etos< se 1resenta la siguiente lista
;o(-re $a(+os 5!todos ;o(-re $a(+os 5!todos ;o(-re $a(+os 5!todos ;o(-re $a(+os 5!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 e8em1lo de la Can(ana< se re%elan 1osi)ilidades mas interesantes de la 1rogramacin orientada a o)8etos. Para :acer un 1rograma Aue simule la %ida de una manzana< el mtodo crecer() 1osi)lemente reci)a %alores de entrada de tem1eratura $ :umedad. El mtodo crecer() 1uede incrementar el cam1o peso del o)8eto< )as,ndose en esos %alores de entrada. El mtodo caer() se encontrara re%isando constantemente el cam1o peso< $ cuando este 1ase cierto lmite< la manzana caer, a la tierra. El mtodo pudrir() comenzar, a 9uncionar una %ez Aue la manzana llegue al suelo. Este mtodo 1odra :acer decrecer el cam1o peso $ cam)iar el color de la manzana. !omo Aueda dic:o en la introduccin< los o)8etos son creados con las clases $ las clases son un con8unto de mtodos $ cam1os. ;os o)8etos de una clase de)en tener un nom)re 1ro1io< al igual Aue una %aria)le. Por e8em1lo< dos o)8etos llamados !u i $ 'olden 1ertenecen a la clase Can(ana.
Ignacio Buioli | Jaime Prez Marn 2..
;o(-re $a(+os ;o(-re $a(+os
!u i colorF red pesoF :#2 'olden colorF ;elloN pesoF D#.
'os 1o1ulares estilos de re1resentacin de clases son las ta)las $ un diagrama circular ins1irado en la )iologa de una clula. !ada estilo de re1resentacin muestra el nom)re de la clase< los cam1os $ los mtodos. Es mu$ 3til de9inir las caractersticas de cada clase en alguno de estos diagramas antes de comenzar con el cdigo en s. Ban3ana color peso crecer ! caer ! pudrir ! clase Manzana fu'i red G.5 crecer ! caer ! pudrir ! o)8eto 9u8i golden yello" H.I crecer ! caer ! pudrir ! o)8eto golden
El diagrama circular adAuiere m,s )ien un conce1to de encapsulaci*n< la idea de Aue los cam1os de un o)8eto no de)eran ser accedidos desde a9uera. ;os mtodos de un o)8eto act3an como un buffer entre el cdigo 9uera de la clase $ los datos contenidos.
clase Manzana
o)8eto 9u8i
o)8eto golden
;os cam1os $ mtodos de un o)8etos son accesi)les a tra%s del o1erador punto< un per@odo. Para o)tener el calor de color del o)8eto !u i< la sinta6is corres1ondiente ser, !u i#color. Para e8ecutar el mtodo crecer() dentro de o)8eto 'olden< :a)r, Aue escri)ir 'olden#crecer(). -&sando $lases * 3-jetos 'e9inir una clase es crear tu 1ro1io ti1o de datos. Pero no como los ti1os de datos 1rimiti%os tales como int< !loat o boolean< sino m,s )ien como los ti1o $trin'< ABma'e $ AHont< 1or dic:a razn siem1re se escri)en con letra ca1ital @1rimera letra en ma$3sculasC. !uando se crea una clase< lo 1rimero es 1ensar cuidadosamente el cdigo Aue lle%ar, dentro< $ no 1rogramar a la ligera. ;o com3n es :acer 1rimero una lista de %aria)les reAueridas @las cuales 1asaran a llamarse cam1osC< $ determinar Aue ti1o de datos ser,n. En el 1rimero de los e8em1los Aue se %er,n a continuacin< un circulo es 1osicionado en la 1antalla< 1ero el cdigo es escrito de una 9orma distinta a como se %ena %iendo @es escrito en un ,m)ito de 1aradigma orientado a o)8etosC. Es necesario dos cam1os Aue almacenen la 1osicin del crculo< $ un tercer cam1o Aue
2.*
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 1uede ser un nom)re sim)lico de lo Aue se est di)u8ando en 1antalla< o un nom)re de las con%enciones de %aria)les. =in em)argo< siem1re< de)en ser escritos con la letra ca1ital. Esto a$uda al 1rograma a se1arar clases como $trin' o ABma'e de los ti1os 1rimiti%os como int o boolean. El nom)re de la clase 1ara el siguiente e8em1lo ser, Aunto< 1uesto Aue *irculo no :u)iese sido 1ertinente al caso @$a Aue se esta di)u8ando un 1untoC. En 1rinci1io< se dis1ondr, del 1rograma escrito como 1rogramacin estructurada< $a Aue siem1re es recomenda)le escri)irlo as $ luego con%ertirlo en un o)8eto
!loat x < 00; !loat ; < 3/; !loat diametro < 0/; ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); S ,oid draN() R bac)'round(/); ellipse(x, ;, diametro, diametro); S
Para :acer a este cdigo m,s 3til $ genrico< es necesario Aue la eli1se tenga su 1ro1ia clase. 'e esta 9orma< antes del )loAue setup()1 la 1rimer lnea de cdigo crea al o)8eto pt de la clase Aunto. El o)8eto pt es construido dentro del setup(). ;uego< usando el o1erador 1unto< se le asignan los %alores a la eli1se dentro del draN().
Aunto pt; //Declara el 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
2.2
-:ora $a est, lista la clase Aunto. -3n as< toda%a no est, siendo im1lementada de manera 3til. En el siguiente e8em1lo< se le agregar, un mtodo a la clase Aunto @es aAu donde la 1rogramacin orientada a o)8etos comienza a tomar %enta8aC. El mtodo mostrar() es aGadido a la clase Aunto. Para aGadir mtodos< necesario seguir la siguiente sinta6is
,oid displa;()
'i)u8a el crculo 1ara mostrar en la %entana
En la 3ltima lnea del cdigo de la clase< se coloca el mtodo mostrar()< el cual 9unciona como el o1erador 1unto anteriormente %isto. 'entro del mtodo< se coloca la 9uncin Aue di)u8a el crculo. Es e%idente notar Aue a:ora los 1ar,metros se escri)en sin el o1erador 1unto< esto es 1orAue la 9uncin ellipse() se encuentra dentro de la clase Aunto< 1or lo Aue no es necesario :acer una concatenacin.
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 e8em1lo introduce un 1aso en la 1rogramacin de o)8etos llamado constructor. Fn constructor es un )loAue de cdigo Aue es acti%ado cuando el o)8eto es creado. El constructor siem1re lle%a el mismo nom)re Aue la clase< $ es generalmente utilizado 1ara asignar %alores a los cam1os del o)8eto @si no e6iste el constructor< el %alor de los cam1os ser, ceroC. El constructor es otro ti1o de mtodo< solamente Aue no es 1recedido 1or el ,oid< 1uesto Aue no de)e de%ol%er ninguna clase de dato. !uando el o)8eto pt es creado< los 1ar,metros 33< /. $ 3. son asignados a las %aria)les xpos< ;pos $ dia< res1ecti%amente con el constructor. !on dic:o )loAue< los %alores son asignados a los cam1os del o)8eto< x< ; $ diametro. Para Aue los cam1os sean accesi)les con cada mtodo del o)8eto< ellos de)en ser declarados 9uera del constructor.
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(/);
2.3
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 1uede ser e6tendida 1or agregar m,s mtodos Aue me8oren su utilizacin en la escena. El siguiente e8em1lo e6tiende la 9uncionalidad de la clase 1or aGadir mo%imiento constante de arri)a a a)a8o. Para esto es necesario determinar dos nue%os cam1os. Fn cam1o Aue regule la %elocidad $ otro la direccin del o)8eto. ;os llamaremos ,el $ dir< res1ecti%amente< 1ara Aue sean cortos $ 9igurati%os. 'e esta 9orma< ,el ser, de ti1o !loat 1ara tener un ma$or rango de %elocidad< $ dir un int $a Aue solo necesitamos dos %alores.
!loat ,el 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 1osicin del o)8eto en cada cuadro. ;a direccin tam)in tiene Aue cam)iar al llegar a los )ordes de la %entana de re1resentacin. -dem,s< :a$ Aue considerar el ti1o de %alor a regresar. !omo en este caso no se necesita regresar ning3n %alor< se ante1one la 1ala)ra cla%e ,oid.
,oid mo,er()
-ctualiza la 1osicin del crculo
El cdigo dentro de los mtodos mo,er() $ mostrar() 1odra incluirse en tan solo un mtodo. Pero< 1or cuestiones de claridad< en estos e8em1los se 1re9iere se1ararlos.
class Aunto R !loat x, ;; !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
2.4
,oid mostrar() R ellipse(x, ;, diametro, diametro); S
Para guardar es1acio $ mantenerse en9ocado en el 1rograma en s< los e8em1los Aue se muestran en el 1resente manual no %uel%en a mostrar el cdigo de la clase Aunto< $ sim1lemente 1one un comentario como //Bnsertar clase Aunto. !uando usted %ea un comentario como ese< co1ie $ 1egue el cdigo de la clase corres1ondiente en lugar del comentario. El siguiente e8em1lo muestra el resultado de utilizar una clase con un o)8eto en mo%imiento
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 1one el 9oco en el resultado $ no en los detalles de e8ecucin. ;os o)8etos de)en construirse con el 1ro1sito de ser reutilizados. ;uego de Aue un com1le8o 1rograma es escrito $ codi9icado como un o)8eto< 1uede ser utilizado 1osteriormente como :erramienta 1ara construir un nue%o 1rograma. Por e8em1lo< las 9unciones $ las clases Aue %ienen incluidas en Processing< son utilizadas en cualAuier 1rograma de autor como sim1les :erramientas. !omo con los ti1os de %aria)les< los o)8etos adicionales son aGadidos al 1rograma 1or declarar m,s nom)res. En el siguiente e8em1lo se utilizan tres o)8etos< nom)rados pt61 pt21 pt0< $ cada uno tiene sus 1ro1ios mtodos.
Aunto pt6, pt2, pt0; //Declara ,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
2./
0esulta mu$ com1le8o resumir los conce1tos ),sicos $ la correcta sinta6is de la 1rogramacin orientada a o)8etos en tan solo un e8em1lo. Por lo tanto< se aGade una nue%a clase llamada Hue$o< 1ara com1ararla con la clase Punto. ;a clase Hue$o se crea con la necesidad de 1oder mostrar una 9igura con 9orma de :ue%o< Aue se tam)alea de izAuierda a derec:a. ;a construccin inicia con la declaracin de los cam1os $ los mtodos necesarios 1ara la creacin de la clase
!loat x !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 com1ensacin de izAuierda a derec:a =e utiliza 1ara 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() 1ara com1ro)ar Aue 9unciona. ;a 9uncin scale() es aGadida a mostrar() 1ara decrecer el tamaGo del o)8eto. !uando se com1rue)e Aue la 1rimer 1arte del 1rograma est, 9uncionando a la 1er9eccin< el mtodo rotate() $ el cam1o ladeo son aGadidos 1ara cam)iar el ,ngulo del o)8eto. #inalmente< el cdigo es escrito 1ara Aue el o)8eto se mue%a. El cam1o an'ulo se utiliza 1ara calcular la inclinacin. 'e esta 9orma< el mtodo tambalear() es aGadido 1ara incrementar el ,ngulo $ calcular< de este modo< el ladeo mismo. ;a 9uncin cos() se agrega 1ara acelerar o 9renar el tam)aleo de lado a lado. ;uego de muc:as 1rue)as< la clase \ue,o 9inal se muestra de la siguiente manera
class \ue,o !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./);
2."
S S
be(ierMertex(5./, 5:3, 523, 56//, /, 56//); end$hape(); popCatrix();
;a clase \ue,o se inclu$e en el 1rograma de la misma 9orma Aue la clase Aunto. Fn o)8eto de ti1o \ue,o< llamado humpt;< es creado 9uera del setup() $ del draN(). 'entro del setup()< el o)8eto humpt; es construido. 'entro del draN()< las 9unciones tambalear() $ mostrar() son e8ecutadas< causando la actualizacin del o)8eto.
\ue,o humpt;; //Declara el 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
-/rra* de 3-jetos 5ra)a8ar con arra$ de o)8etos es similar a tra)a8ar con arra$ de otro ti1o de datos. !omo todos los arra$< un arra$ de o)8etos se distingue 1or lle%ar corc:etes à. !omo cada elemento del arra$ es un o)8eto< cada elemento del arra$ de)e ser declarado antes de ser accedido. ;os 1asos ),sicos 1ara tra)a8ar con un arra$ de o)8etos son los siguientes
4+ Declarar el array 5+ 0rear el array 6+ 0rear cada ob'eto en el array
Estos 1asos son trasladados en el siguiente cdigo

int numAuntos < :; //Declarar ; crear el 1rra; Auntoà puntos < neN Aunto`numAuntosa; ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); !or (int i < /; i 9 puntos#len'th; i44) R !loat x < 6/ 4 i*6:; !loat rate < /#3 4 i*/#/3; //*rea cada ob eto puntosìa < neN Aunto(x, 3/, 6:, rate); S S ,oid draN() R !ill(/, 62); rect(/, /, Nidth, hei'ht); !ill(233);
2.+
!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 1resenta como otro e8em1lo de arra$ de o)8etos. Esta clase de9ine un crculo Aue a1arece cuando se :ace clicH con el mouse< $ crece :asta un anc:o de 4.. 16eles< luego de esto de8a de mostrarse. !uando esta clase es aGadida< un nue%o anillo a1arece cada %ez Aue el )otn del mouse es o1rimido. Estos son los cam1os $ los mtodos 1ara :acer esta clase 1osi)le
!loat x !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 1rograma como una sim1le clase. Esta clase no tiene constructor 1uesto Aue sus %alores no se esta)lecen :asta Aue se e8ecuta el mtodo inicio() es llamado desde el 1rograma.
class 1nilloR !loat 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 1rograma< el arra$ anillosà es creado 1ara sostener cincuenta o)8etos de clase 1nillo. El es1acio en memoria del arra$ anillosà $ de los o)8etos de clase 1nillo de)e ser siem1re almacenado en el )loAue setup(). !uando el )otn del mouse es o1rimido 1or 1rimera %ez< las %aria)les de 1osicin del o)8eto 1nillo se esta)lecen como la actual 1osicin del cursor. ;a %aria)le de control anillo1ctual< es incrementada de a uno 1or %ez< as la 1r6ima %ez los )loAues
Ignacio Buioli | Jaime Prez Marn 2.4
draN()< crecer() $ mostrar() ser,n e8ecutados 1or el 1rimer elemento de 1nillo. !ada %ez Aue el
)otn del mouse es 1resionado< un nue%o anillo se muestra en 1antalla. !uando el lmite de elementos es alcanzado< el 1rograma salta al inicio de los mismos $ asignas las 1rimeras 1osiciones.
1nilloà anillos; //Declara el arra; int num1nillos < 3/; int anillo1ctual < /; ,oid setup() R si(e(6//, 6//); smooth(); anillos < neN 1nillo`num1nillosa; //*rea el arra; !or (int i < /; i 9 num1nillos; i44) R anillosìa < neN 1nillo(); //*rea cada 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 1rogramacin modular< estos 1ueden usarse de muc:as maneras $ com)inarse de in9initas 9ormas< de1endiendo las necesidades de cada 1ro$ecto. Esta es una de las cosas m,s e6citantes de 1rogramar con o)8etos. -5.lti+les /rc7ivos ;os 1rogramas escritos :asta el momento se escri)an como un solo gran con8unto de cdigo. Na Aue esta clase de 1rogramas 1ueden con%ertirse en largos 1aAuetes de cdigo< un sim1le arc:i%o se con%ierte en un gran 1ro)lema. !uando un 1rograma se con%ierte en una con%ergencia de cientos o miles de lneas< es con%eniente Aue e6ista una 1osi)ilidad de se1arar sus 1artes en mdulos. Processing 1ermite mane8ar gran cantidad de arc:i%os< $ cada sHetc: 1uede estar com1uesto 1or gran cantidad de sHetc:s< Aue son mostrados en 9orma de 1estaGas.
2.&
2*.
En la esAuina su1erior derec:a< se encuentra un )otn con el icono de una 9lec:a Aue a1unta< 8ustamente< :acia la derec:a. =e trata del un su)Omen3 destinado a el mane8o de 1estaGas en Processing. -l o1rimir dic:o )otn< se des1legar, una lengMeta con unas 1ocas o1ciones. ;a o1cin Ne" ,ab @2ue%a PestaGaC nos 1ermite< 8ustamente< crear una nue%a 1estaGa 1ara 1oder tra)a8ar con cdigo modular. -l o1rimir la misma< se nos dar, la o1cin de 1onerle un nom)re. =uele ser recomenda)le Aue el nom)re tenga un sentido al contenido del cdigo $ no sea un sim1le acto azaroso. 'e esta 9orma< si el cdigo contiene la clase Punto< es con%eniente Aue la 1estaGa se llame KPuntoL. - continuacin se le da al )otn ?J< $ acto seguido tendremos la nue%a 1estaGa lista 1ara comenzar a aGadirle el cdigo Aue necesitemos. ;a 1estaGa se guardar, como un sHetc: a 1arte dentro de la car1eta de 1roduccin. -dem,s< el men3 de las 1estaGas 1ermite otras o1eraciones mu$ 3tiles. ;a 1osi)ilidad de 0enom)rar una 1estaGa con la o1cin <enameR o de Eliminarla con la o1cin Delete. -gregado a esto< 1ara cuando se tiene una gran cantidad de 1estaGas< se encuentra la o1cin Pre$ious ,ab @PestaGa -nteriorC $ Ne(t ,ab @PestaGa =iguienteC< las cuales nos 1ueden ser mu$ 3tilesR o directamente nos a1arece una lista con el nom)re de las 1estaGas Aue estamos tra)a8ando< )asta con solo o1rimir en la deseada.
2**
&nidad 80
#i-ujos' ,or(as $in!ticas

;as tcnicas de animacin e61erimental de di)u8o< 1intura< $ calado en cine< son todos 1redecesores de so9t?are )asados en di)u8os cinticos. ;a inmediatez $ la 9rescura de los cortos 9lmicos< tales como el Hen Hop de 2orman Mc;aren @*&42C< .ree <adicals de ;en ;$e @*&/+C< $ ,he Garden of %arthly Delights de =tan BraH:age @*&4*C se de)e a las e6traordinarias cualidades del gesto 9sico< Aue el so9t?are< muc:o des1us< :izo m,s accesi)le. ;as :erramientas de so9t?are 1ara animacin am1lan< a3n m,s< las tcnicas de cine< 1ermitiendo al artista editar $ animar los elementos de 9orma continua des1us de Aue :an sido ela)orado. En *&&*< =cott =ni))e =Hetc: dio mo%imiento con so9t?are a las tcnicas e61loradas 1or Mc;aren< ;$e< $ BraH:age. ;a a1licacin traduce el mo%imiento de la mano< al de los elementos %isuales en la 1antalla. !ada gesto crea una 9orma Aue se mue%e en un )ucle de un segundo. ;as animaciones resultantes 1ueden ser ca1as 1ara crear una o)ra de reminiscencias com1le8idad es1acial $ tem1oral< del estilo de 7sHar #isc:inger. =ni))e< am1liando este conce1to con el tel9ono de mo%imiento @*&&/C< 1ermiti a la gente tra)a8ar simult,neamente en un es1acio de di)u8o com1artido a tra%s de Internet. -Derra(ientas /ctivas Muc:as :erramientas creadas con so9t?are 1ueden cam)iar su 9orma mientras se encuentran en 1roceso de di)u8o. Por com1arar los %alores de mouseZ $ mouseV con sus %alores 1re%ios< 1odemos determinar la direccin $ la %elocidad con la Aue se :acen los trazados. En el siguiente e8em1lo< la di9erencia entre la actual $ la anterior 1osicin del cursor< determina el tamaGo de una eli1se Aue es di)u8ada en 1antalla.
,oid setup() R si(e(6//, 6//); smooth(); S ,oid draN() R !loat s < dist(mouseZ, mouseV, pmouseZ, pmouseV) 4 6; no$tro)e(); !ill(/, 6/2); ellipse(mouseZ, mouseV, s, s); stro)e(233); point(mouseZ, mouseV); S
;os instrumentos de di)u8os con so9t?are 1ueden< adem,s< seguir un ritmo o ser ar)itrario 1or reglas inde1endientes del di)u8o manual. Esta es una 9orma de controlar el di)u8o< m,s all, de las caractersticas inde1endientes de cada uno. En los e8em1los Aue siguen< el di)u8o solo o)edece el 1unto de origen $ de cierre dado 1or autor< lo Aue ocurre en medio es incontrola)le 1or este 3ltimo.
int an'le < /; ,oid setup() R si(e(6//, 6//); smooth(); no$tro)e(); !ill(/, 6/2); S ,oid draN() R //Dibu a solo cuando el mouse es presionado i! (mouseAressed << true) R an'le 4< 6/; !loat ,al < cos(radians(an'le)) * :#/;
2*2
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 /ctivos ;os elementos de di)u8o indi%iduales< con su corres1ondiente cuidado< 1ueden 1roducir di)u8os con o sin %alores de entrada 1roducidos 1or un usuario. Estos di)u8os acti%os 1odran traducirse como un gato o un ma1ac:e Aue cae en un )ote de 1intura< $ de8a sus :uellas 1or todas 1artes< sin Aue nosotros 1odamos controlarlo. !reado 1or una serie de acciones 1redeterminadas< el di)u8o acti%o 1uede ser 1arcialmente o totalmente autnomo.
!loat x6, ;6, x2, ;2; ,oid setup() R si(e(6//, 6//); smooth(); x6 < Nidth / .#/; ;6 < x6; x2 < Nidth 5 x6; ;2 < x2; S ,oid draN() R bac)'round(2/.);
2*3
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 tiem1o< $a Aue cada lnea sigue a %agar de su 1osicin original. En el siguiente e8em1lo< el cdigo anterior 9ue modi9icado 1ara crear la clase Cue,e@inea. Duinientos de estos o)8etos Cue,e@inea llenan la %entana de re1resentacin. !uando las lneas se di)u8an en 1rimera instancia< %i)ran< 1ero mantienen su 9orma. !on el tiem1o< la imagen se degrada en un caos< $a Aue cada lnea %aga tra%s de la su1er9icie de la %entana.
int num@ineas < 3//; Cue,e@ineaà lines < neN Cue,e@inea`num@ineasa; int linea1ctual < /; ,oid setup() R si(e(6//, 6//); smooth(); !rame>ate(0/); !or (int i < /; i 9 num@ineas; i44) R linesìa < neN Cue,e@inea(); S S ,oid draN() R bac)'round(2/.); !or (int i < /; i 9 linea1ctual; i44) R linesìa#mostrar(); S S ,oid mouseDra''ed() R lines`linea1ctuala#setAosicion(mouseZ, mouseV, pmouseZ, pmouseV); i! (linea1ctual 9 num@ineas 5 6) R linea1ctual44; S S class Cue,e@inea R !loat x6, ;6, x2, ;2; ,oid setAosicion(int x, int ;, int px, int p;) R x6 < x; ;6 < ;; x2 < px; ;2 < p;; S ,oid mostrar() R x6 4< random(5/#6, /#6); ;6 4< random(5/#6, /#6); x2 4< random(5/#6, /#6); ;2 4< random(5/#6, /#6); line(x6, ;6, x2, ;2); S S
El siguiente e8em1lo enseGa una sim1le :erramienta de animacin Aue muestra un ciclo continuo de *2 im,genes. !ada imagen es mostrada 1or *.. milisegundos 1ara crear la animacin. Mientras cada imagen es creada< es 1osi)le di)u8ar en la misma 1or 1resionar $ mo%er el mouse.
2*4
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
2*/
&nidad 81
E%tensin' 5odos
!omo 1arte de una im1lementacin m,s ele%ada del so9t?are< se comienzan a incluir los Modos ]a 1artir de Processing *./^. Esta 9uncionalidad alterna las 9ormas de 1rogramar o de mostrar el resultado de los 1rogramas e8ecut,ndose. 'esde la inter9az< se 1ro%ee de un sim1le )otn en la esAuina su1erior derec:a
-l o1rimirlo se nos des1legar, una 1eAueGa lengMeta con o1ciones 1ara alternar entre los distintos modos @1ueden llegar a e6istir m,s modos en las nue%as %ersiones Aue en las antiguas< siem1re es con%eniente consultar la re9erenciaC. Por de9ecto< el )otn $< 1or lo tanto< el modo< se encuentra en K Ka$aL @llamado K&tandardL en %ersiones 1re%ias a la 2..C. 5am)in e6iste la 1osi)ilidad de aGadir modos< de la misma 9orma Aue uno aGade li)reras @li)rar$C o :erramientas @toolC. Para esto solo :a$ Aue o1rimir en el )otn $< a continuacin< la o1cin K-dd Mode...L. El 1rograma se encargar, de )uscar los modos dis1oni)les 1ara su sencilla descarga. Esta 3ltima o1cin solo es 1osi)le a 1artir de la %ersin 2... -Fava =e trata del modo de tra)a8o Aue se encuentra 1or de9ecto en nuestro 1rograma. -l iniciar el so9t?are 1or 1rimera %ez< $ si este no tu%o ning3n incon%eniente< de)era encontrarse en el modo K=tandardL. 'ic:o modo< tra)a8a con el motor de Ja%a 1ara la 1reO%isualizacin $ la e61ortacin del sHetc:. Esto Auiere decir Aue e61ortar, el sHetc: en un Ja%a -11let. Est, 1ensado 1ara la creacin de a1licaciones de escritorio. =iem1re se recomienda Aue se tra)a8e en este modo< m,s all, de Aue luego Auiera 1asarse a otro. Esto se de)e a la 9acilidad $ la 1recisin @1uesto Processing es 1rinci1almente 1ensado 1ara Ja%aC. ;uego de esto< ser, cuestin de 1asar de modo $ ada1tar lo Aue no 9uncione de manera 1tima. En este modo no se 1ueden e61ortar los -11lets 1ara ?e)< solo 1ara a1licaciones de escritorio. En %ersiones anteriores a la 2..< el modo Ja%a era conocido como Standard. -/ndroid El modo de tra)a8o K-ndroidL consiste en< como )ien indica su nom)re< crear a1licaciones $ 1rogramas 1ara dis1ositi%os -ndroid @=istema 71erati%o 1ara m%iles distri)uido 1or EoogleC. 2o o)stante< 1ara tra)a8ar en -ndroid es condicin Aue se encuentre instalado en el ordenador el ='X de -ndroid. Este se encuentra dis1oni)le de manera gratuita en :tt1 BBde%elo1er.android.comBsdH $ admite sistemas ;inu6< Macintos: $ Iindo?s. =in em)argo< la 9orma de tra)a8o no es e6actamente la misma< 1or lo Aue 1odra :a)er incon%enientes o incom1ati)ilidades en las a1licaciones. Fn e8em1lo com3n es Aue algunas galera no 9uncionen correctamente o sim1lemente se desesta)ilicen. 'ado algunos cam)ios realizados 1or Eoogle< las %ersiones *./.6 de Processing 1remiten em1lear el modo -ndroid. =e recomienda descargar %ersiones a 1artir de la 2.. si se desea desarrollar 1ara estos sistemas. Es un modo 1ensado ),sicamente 1ara 1rogramadores en sistemas m%iles. =e de)e consultar< adem,s< la %ersin de Processing en relacin al ='X $ en relacin a la 3ltima %ersin de -ndroid @es 1osi)le Aue Processing no so1orte las m,s modernas< sin em)argo< estas no se distri)u$en al 13)lico en generalC. -nte cualAuier incon%eniente< consultar la re9erencia en el sitio ?e) :tt1 BB?iHi.1rocessing.orgB?B-ndroid. -Favascri+t !on la creacin de la li)rera 1ara Ja%ascri1t llamada Processing.8s< nace la 1osi)ilidad de traducir los sHetc:s en o)8eto de !an%as @tag de J5M;/ Aue 1ermite di)u8ar con Ja%ascri1tC. - 1artir de la %ersin 2..< se inclu$e
Ignacio Buioli | Jaime Prez Marn 2*"
el modo Ja%ascri1t< el cual 1ermite 1rogramar en el entorno de Processing $ 1ro)ar el cdigo directamente en el na%egador 1redeterminado @el cual de)e so1ortar !an%as< se recomienda la 3ltima %ersin de Mozilla #ire9o6C. -dem,s de esto< al e61ortar el sHetc:< se crear, el -11let en su %ersin ?e) @Ja%ascri1tC< listo 1ara usar en cualAuier sitio J5M;. 'e)e tenerse en cuenta Aue e6iste la 1osi)ilidad de Aue algunas 9unciones no se encuentren del todo so1ortadas en el modo Ja%ascri1t< o 9uncionen de una manera distinta. -nte cualAuier incon%eniente< consultar la re9erencia en el sitio ?e) :tt1 BB1rocessing8s.orgBre9erenceB. - 1esar de Aue las sinta6is de am)os entornos deri%an del lengua8e de !B!__< el tra)a8o 1or detr,s no es 1recisamente el mismo. Por lo tanto< :a$ Aue tener cierto cuidado a la :ora de 1rogramar< $a Aue algunas estructuras 1ueden no com1ortarse como uno lo es1era. Mas all, de eso< e6isten ciertos comandos es1eciales dedicados ntimamente al tra)a8o en el modo Ja%ascri1t. El comando gp s< 1ermite la insercin de directi%os Aue solo leer, el modo Ja%asctri1t @la li)rera Processing.8sC. Por ende< de)e ser incluido en un comentario $ arri)a de todo del sHetc:.
/* 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 sim1le 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 1ara controlar el 9lu8o del sHetc: $ 1re1ararlo 1ara la ?e). Fna de las utilidades Aue 1osee es la 1recarga de ciertos elementos< 1or e8em1lo< las im,genes. El directi%o preload es utilizado 1ara cargar las im,genes mientras se carga el sHetc:. ;a im,genes de)en encontrarse en la car1eta KdataL $ ser cargadas a tra%s de la 9uncin loadBma'e() o reGuestBma'e()
/* 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 1recarga de las 9uentes de te6to< Aue 3ltimamente co)ran un im1ulso im1ortante en los sitios ?e). Para esto se utiliza el directi%o !ont< el cual se utiliza con la 9uncin createHont(). ;a carga es realizada a tra%s de la regla g!ont5!ace de !==.
/* gp s !ont<W1rial#tt!W; */ ,oid setup()R si(e(2//,2//); no@oop(); textHont(createHont(W1rialW,02)); S ,oid draN()R
2*+
bac)'round(233); $trin' t < WA# sW; !loat tN < textIidth(t); !ill(/); text(t, (Nidth5tN)/2, (hei'ht402)/2);
Na Aue los sHetc: realizados en el modo Ja%ascri1t est,n destinados a la ?e)< se encuentran 1ermanentemente e8ecut,ndose. Muc:as %eces< en sHetc: com1le8os< esto 1uede ocu1ar muc:a ca1acidad del ordenador @es1ecialmente en ordenadores m,s antiguosC. Por lo tanto< se encuentra dis1oni)le el directi%o pause?n=lur. El mismo 1uede reci)ir solo dos %alores< true o !alse. =i el %alor es true< cuando el usuario no tenga la %entana donde se encuentra el sHetc: 1uesta Ken 9ocoL< el mismo ser, K1ausadoL. =i es !alse< este continuar, e8ecut,ndose @esta o1cin es 1or de9ectoC
/* gp s pause?n=lur<WtrueW; */
Por otra 1arte< tam)in e6iste un directi%o Aue controla los e%entos del teclado. El directi%o 'lobalee;-,ents 1ermite controlar si las teclas ser,n :a)ilitadas 1ara el sHetc: constantemente< incluso mientras na%ega 1or el mismo sitio< o si se 1re9iere solo :a)ilitarla 1ara cuando el usuario est, en 9oco. 0eci)e solo dos %alores< true o !alse. =i el %alor es true< los e%entos del teclado ser,n :a)ilitados 1or mas Aue no se est en 9oco en el sHetc:. En cam)io< si es !alse< ser, des:a)ilitado @esta o1cin es 1or de9ectoC
/* gp s 'lobalee;-,ents<WtrueW; */
'e1endiendo de la con9iguracin 1or de9ecto del na%egador< los elementos de !an%as 1ueden o no tener a1licada la condicin de sua%izado en los )ordes. Para eso se utiliza el directo crisp. Este directi%o 1ermite o)ligar a Aue esto si se cum1la en la re1resentacin de line()< el trian'le()< $ el rect() 1rimiti%as de di)u8o. Esto 1ermite lneas sua%es $ lim1ias. Por otro lado< es mu$ 1osi)le Aue su em1leo necesite un incremento del tra)a8o del !PF. 0eci)e solo dos %alores< true o !alse
/* gp s crisp<WtrueW; */
;os directi%os son 3tiles $ est,n en constante e61ansin. Para e%itar con9usiones $ %er algunos e8em1los de su 9uncionamiento< consultar la re9erencia :tt1 BB1rocessing8s.orgBre9erenceB. -E%+eri(ental El modo E61erimental nace con la 9usin de dos 1ro$ectos realizados 1or !ase$ 0eas $ Ben #r$. !onsiste en una es1ecializacin del so9t?are orientado a 1rogramadores con una demanda m,s 1recisa en la 1roduccin de 1rogramas. Entre otras cuestiones< 1osee una consola de errores< un de)ugger $ di%ersas :erramientas Aue lo acom1aGan @como un ins1ector de %aria)lesC. Este modo a3n se encuentra en 1roceso de 1rue)as $ 1uede ser mu$ inesta)le.
2*4
2*&
&nidad 82
E%tensin' ,iguras 3#
si(e(), A2D, A0D, J1M12D, ?A-NX@, rotateZ(), rotateV(), rotateb(), li'hts(), camera(), texture(), box(), sphere(), be'in>aN(), end>aN()
El so9t?are Processing admite la 1osi)ilidad de crear a1licaciones $ 1rogramas Aue :agan su render en tres dimensiones. 2o o)stante< no se recomienda Aue los 1rogramadores a)orden esta tem,tica de entrada< $ traten de generar soluciones en dos dimensiones. Por cuestiones Aue conlle%an a la creacin de un manual sim1le< no a)ordaremos en la e61licacin de gr,9icos 3' @$a Aue la e6tensin sera de otro li)roC. -3n as< %emos con%eniente e61licar la )ase 1ara sem)rar en el lector una semilla de curiosidad. -,or(a 3# ;as 9ormas 3' son 1osicionadas en una %entana de re1resentacin con 3 coordenadas. En construcciones 2'< estas coordenadas son la coordenadaO6 $ la coordenadaO$< en 3' se suma la coordenadaOz. Processing usa< como coordenada de origen< el (/, /, /) en la esAuina su1erior izAuierda< $ mientras las coordenadas 6 e $ aumentan< la coordenadaOz %a decreciendo.
;as 9iguras son di)u8adas agregando la tercer coordenadaOz al sistema de coordenadas. En estos casos< las 9unciones point()1 line() $ ,ertex() 9uncionan e6actamente igual en un entorno 3' Aue uno 2'< solo :a$ Aue agregar una tercer coordenada. =in em)argo< mientras las 9unciones translate() $ scale() 9uncionan de la misma manera< la 9uncin rotate() su9re un cam)io. =e utiliza una 9uncin de rotacin 1ara cada coordenada. Entonces< conseguimos las 9unciones rotateZ()1 rotateV() $ rotateb(). !ada uno rota alrededor del e8e con el cual es nom)rado. 5am)in< las 9unciones pushCatrix() $ popCatrix() 9uncionan de la misma 9orma Aue en un entorno 2'. =a)iendo esto< :a$ Aue entender un 1unto cla%e en el tra)a8o 3'. -ntes de comenzar a incluir sinta6is con una tercer coordenada< es necesario decirle a Processing Aue motor render necesita utilizar @en este caso< uno 3'C. Processing 1osee< en 1rinci1io< cuatro di9erentes motores de render
J1M12D A2D A0D
Motor 1or de9ecto de Processing 1ara render en 2'.
Motor 1ara render 2' muc:o m,s r,1ido Aue J-(-2'< 1ero de menos calidad. Motor 1ara render 3'. Motor 1ara render 3' con aceleracin de Jard?are< )asado en 71enE;.
22.
?A-NX@
En %ersiones anteriores a la 2..< los modos A2D $ A0D 9unciona)an inde1endientes. =in em)argo< a 1artir de la 2..< estos modos 9uncionan con la ingeniera de 71enE;. Esto 1roduce Aue sean mas e9icientes< 1ero tam)in Aue consuman un 1oco m,s de recursos. Por lo tanto< e6isten dos motores de render 1ara 3' el A0D $ el ?A-NX@. Para esta)lecerlos como el motor de nuestra a1licacin< sim1lemente :a$ Aue incluir dic:a constante como un tercer 1ar,metro de la 9uncin si(e(). Por e8em1lo
si(e(://, ://, A0D);
=uele recomendarse tra)a8ar con A0D $a Aue es el motor m,s com1ati)le con el so9t?are $ no reAuiere de li)reras e6ternas. 2o o)stante< 1ara tra)a8os de ma$or com1le8idad $ ela)oracin< a %eces se o1ta 1or utilizar el motor ?A-NX@. En %ersiones anteriores a la 2..< reAuiere Aue se inclu$a en el sHetc: la li)rera Aue 1ermite el 9uncionamiento de motor 71enE;. ;a siguiente lnea de cdigo de)e ir arri)a de todo en le 1rograma
import processin'#open'l#*;
Para %ersiones 1osteriores a la 2..< la li)rera :a sido eliminada $ el motor 71enE; 9ue incluido en el n3cleo del so9t?are. Por lo tanto< no es necesario im1ortar la li)rera. ;uego 1uede :acerse el llamado corres1ondiente a la 9uncin si(e()
si(e(://, ://, ?A-NX@);
- 1artir de esta declaracin< es 1osi)le di)u8ar en 3'. Incluso es 1osi)le tener un resultado de salida de un com1onente 3' a tra%s de las 9unciones be'in>aN() $ end>aN(). ;os com1onentes de salida 1ara 3' reAuieren un 9ormato es1ec9ico @$a Aue luego 1ueden usarse en 1rogramas de modelado 3'C. #ormatos como '># $ 7BJ de)en ser reconocidos a tra%s de una li)rera dedicada. @m,s in9ormacin en :tt1 BB1rocessing.orgBre9erenceBli)rariesB C -$1(ara 5odos los modelos se com1onen< ),sicamente< de una 9igura en una escena $ una c,mara Aue lo o)ser%a. Processing< 1or lo tanto< o9rece un ma1eo e61lcito de una c,mara analgica< a tra%s de 71enE;. En internet e6iste un gran n3mero de documentacin acerca de 71enE;< distri)uido de manera gratuita. ;a c,mara en Processing 1uede ser de9inida 1or unos 1ocos 1ar,metros en cuestin la distancia 9ocal< $ la le8ana $ la cercana de los 1lanos. ;a c,mara contiene el KPlano de ImagenL< una ca1tura K)idimensionalL< de lo Aue se o)ser%a.
El render reAuiere tres trans9ormaciones. ;a 1rimera de ellas es llamada trans9ormacin de $ista. Esta trans9ormacin 1osiciona $ orienta a la c,mara en el mundo. -l esta)lecerse una trans9ormacin de %ista @e61resada como una matri6 de 4 6 4C< de manera im1lcita de9ine Aue el K1unto 9ocalL es el origen. En Processing< una 9orma sencilla de esta)lecer la trans9ormacin %ista es con la 9uncin camera(). Por encima
22*
de la trans9ormacin de %ista se encuentra la trans9ormacin de modelo. Fsualmente< estas son multi1licadas una con la otra $< de ese modo< consideradas como la trans9ormacin del modelo+$ista. ;a 1osicin de la trans9ormacin de modelo en la escena es relati%o a la c,mara. #inalmente< se 1lantea la trans9ormacin de proyecci*n< la cual se )asa en las caractersticas internas de la c,mara. -5ateriales * :u2 ;uego de Aue las 9ormas est,n generadas $ trans9ormadas< es mu$ com3n Aue estas se con%iertan en una imagen est,tica o en una animacin. En tra)a8o de un render 3' es< 1rinci1almente< el modelado matem,tico< $ la e9iciente com1utacin en la interaccin entre luz $ su1er9icie. El modelo de <ay+tracing @5razado con ra$osC $ tras tcnicas a%anzadas son las mas ),sicas %ariantes en el render. <ay+tracing modela a 1artir de ra$os de luz< emergentes de una 9uente lumnica Aue re)ota so)re las su1er9icies de los o)8etos< :asta Aue gol1ea a la escena com1leta. -l ser un c,lculo matem,tico< muc:as %eces tiene 1ro)lemas en re1roducir 9enmenos naturales< como el Ksangrado del colorL< cuando un color se re9le8a so)re otra su1er9icie. =uele solucionarse con tcnicas como el modelo de \iluminacin glo)al\< Aue se a1lica< no slo 1or la luz Aue %iene directamente de las 9uentes de luz 1rede9inidas< sino tam)in la luz re9le8ada de las su1er9icies regulares en una escena. E6isten tres mtodos Aue de render Aue no reAuieren c,lculos de luz "ireframe @alam)reC< hidden+line @linea ocultaC $ flat+shaded @1lano som)readoC
El ?ire9rame es el mtodo mas sim1le 1ara crear un render. Este sim1lemente muestra las lneas de los contornos de los 1olgonos en su color ),sico. Esta arc:i%ado en Processing 1or di)u8ar con una 9uncin stro)e() @contornoC $ sin un !ill() @rellenoC. El siguiente en com1le8idad es :iddenOline. En este modelo solo los contornos son di)u8ados< 1ero se ocultan aAuellos Aue son enmascarados 1or su1er9icies. Processing no tiene una 9orma de generar esto directamente< no o)stante< se o)tiene el mismo resultado usando una 9uncin stro)e() $ una !ill() cu$o color sea el mismo Aue el del 9ondo. El 3ltimo modelo< 9latOs:aded< se genera de 9orma similar< solo Aue la 9uncin !ill() 1osee un color distinto Aue el del 9ondo. ;a simulacin de luces $ su1er9icies< de manera correcta< 1roducen un resultado m,s realista. ;a 1rimer 9uncin lumnica Aue nos a1orta Processing es la 9uncin ambient@i'ht(). =e trata de una simulacin de luz am)iente. Esta 9uncin interact3a con el am)iente de color del 1rograma< el cual se esta)lece con la 9uncin ambient(). 'ic:a 9uncin tra)a8a 1or conseguir los 1ar,metros de !ill() $ stro)e(). ;a 9uncin li'ht$pecular() esta)lece el color es1ecular 1ara las luces. ;a calidad es1ecular del color interact3a con la calidad es1ecular del material a tra%s de la 9uncin specular(). ;a 9uncin specular() esta)lece el color de los materiales< los cuales esta)lecen el color de las luces. 5am)in se 1resentan 9unciones de luces de ma$or com1le8idad. Entre ellas< point@i'ht()< la cual crea una luz 1untual< directional@i'ht()< la cual crea una luz direccional< $ spot@i'ht() Aue crea una es1ecie de luz Kc:is1eanteL< como una gota. 0eci)en distintos 1ar,metros 1orAue cada luz es 3nica. 5odas las luces de)en ser reseteadas al 9inal del )loAue draN()< 1uesto Aue necesitan ser reOcalculadas. ;a te6tura de los materiales son un elemento im1ortante en el realismo de la escena 3'. Processing 1ermite Aue las im,genes sean ma1eadas a las caras de los o)8etos. ;a te6tura se de9orma del mismo modo Aue el o)8eto se de9orma. Para conseguir un ma1eo< es necesario Aue la cara o)tenga las coordenadas 2' de la te6tura.
222
;as te6turas son ma1eadas a las 9ormas geomtricas con una %ersin de la 9uncin ,ertex() con dos 1ar,metros adicionales< conocido como u $ ,. Estos 1ar,metros son las coordenadaO6 $ la coordenadaO$ de la te6tura a ser ma1eada. -dem,s< es necesario esta)lecer la te6tura a utilizar con la 9uncin texture(). !omo la imagen esta cargada en el )loAue setup()< no es reOcalculada en cada ciclo del )loAue draN(). -Eje(+los
E8em1lo * 'i)u8ando en 3' @5rans9ormacinC
//>otar un rect"n'ulo alrededor de su 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
E8em1lo 2 '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 ;
223
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
E8em1lo 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 < /;
224
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();
E8em1lo 4 E61ortar 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#/
E8em1lo / Im1ortar un arc:i%o 7BJ

//Bmportar ; mostrar un archi,o ?=J
22/
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
E8em1lo " !ontrol de la !,mara

//@a c"mara se mue,e en relacin al mouse obser,ando el mismo punto ,oid setup() R si(e(.//, .//, A0D); !ill(2/.); S ,oid draN() R li'hts(); bac)'round(/); //*ambia la altura de la c"mara con mouseV camera(0/#/, mouseV, 22/#/, //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
E8em1lo + Material
//Mara la re!lexin especular del material //con la posicin en Z del mouse ,oid setup() R si(e(.//, .//, A0D); no$tro)e(); colorCode(>X=, 6); !ill(/#.); S ,oid draN() R
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
E8em1lo 4 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
E8em1lo & Ma1eo de la 5e6tura

//*ar'ar una ima'en ; mapearla en un cilindro ; en un paralelo'ramo int tube>es < 02; !loatà tubeZ < neN !loat`tube>esa; !loatà tubeV < neN !loat`tube>esa; ABma'e im'; ,oid setup() R si(e(.//, .//, A0D); im' < loadBma'e(Wberlin56# p'W); !loat an'le < 2K/#/ / tube>es; !or (int i < /; i 9 tube>es; i44) R tubeZìa < cos(radians(i * an'le)); tubeVìa < sin(radians(i * an'le)); S no$tro)e(); S ,oid draN() R bac)'round(/);
22+
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
224
&nidad 83
E%tensin' G5:
ZC@, loadZC@(),'et*hild*ount(), 'et*hild(), 'et*hildren(), 'et*ontent() 'etBnt(), 'etHloat(), 'et$trin'(), 'etName()
El lengua8e de >M; es un lengua8e de maAuetado< desarrollado 1or la I3! 1ara el intercam)io de in9ormacin. =i )ien es mu$ utilizado en internet< no solo se utiliza en ese am)iente. =e encuentra 1resente en los 0== de los )logs $ otros sitios. Por su 9le6i)ilidad en la creacin de etiAuetas @tagsC< es mu$ sencillo le%antar su contenido $ seleccionar Aue Auiere le%antarse. Por e8em1lo< se 1uede seleccionar la lectura solo del ttulo de un documento< o del contenido general. -3-jeto G5: - 1artir de la %ersin 2..< el o)8eto ZC@ 1asa a 9ormar 1arte de los o)8etos 1reesta)lecidos de Processing. ;a clase ZC@ se declara como cualAuier o)8eto. Para asignar un documento< se utiliza la 9uncin loadZC@(). Esta con%iene Aue se encuentre en el )loAue setup().
ZC@ xml; xml < loadZC@(sitio#xml);
;os documentos >M; de)en encontrarse en la car1eta data. 2o o)stante< es 1osi)le le%antar documentos >M; directamente desde la ?e). -,unciones de G5: Para tener mas control so)re el o)8eto >M;< el so9t?are Processing o9rece una gran %ariedad de 9unciones. En estos casos< las 9unciones m,s cl,sicas son las Aue sir%en 1ara tener control so)re los hi'os de un documento. =uelen utilizarse las siguientes 9unciones
'et*hild*ount() 'et*hild() 'et*hildren() 'et*ontent()
0egresa el n3mero de :i8os de un documento 0egresa solo un :i8o 0egresa todos los :i8os de un documento como un -rra$ 0egresa el contenido de un elemento
En orden de a1licar esto< a continuacin se 1resenta un e8em1lo donde se crea un sim1le lector de 0==. El lector le%anta una F0; donde se encuentra un >M;< 1or lo tanto no es necesario tener el documento en la car1eta data. ;uego< sim1lemente im1rime los 3ltimos ttulos de las noticias en la consola @el sHetc: se mostrar, %acoC
//*ar'ar ZC@ $trin' url < WhttpF//processin'#or'/updates#xmlW; ZC@ rss < loadZC@(url); //*onse'uir el ttulo de cada elemento ZC@à titleZC@-lements < rss#'et*hildren(Wchannel/item/titleW); !or (int i < /; i 9 titleZC@-lements#len'th; i44) R $trin' title < titleZC@-lementsìa#'et*ontent(); println(i 4 WF W 4 title); S
E6isten< adem,s< otras 9unciones un 1oco m,s dedicadas. Estas sir%en 1ara de%ol%er di%ersos %alores de los atri)utos del documento
22&
'etBnt() 'etHloat() 'et$trin'() 'etName()
0egresa un atri)uto entero de un elemento 0egresa un atri)uto decimal de un elemento 0egresa un atri)uto =tring de un elemento 0egresa el nom)re de un elemento
-3tras 4ersiones 7curre una con9usin al momento de declarar el o)8eto >M;. En %ersiones anteriores a la 2..< Processing utiliza)a un elemento >M; Aue deri%a)a de una li)rera. En %ersiones anteriores a la *./.*< la li)rera de)a incluirse. Es recomenda)le actualizarse a la 3ltima %ersin< es1ecialmente 1or la gran cantidad de %enta8as Aue o9rece utilizar el o)8eto >M; $ no el elemento. Para el e8em1lo anterior del lector de 0==< en %ersiones anteriores a la 2.. de)era 9uncionar as
//C%todo para anterior a 2#/ //*ar'ar ZC@ $trin' url < WhttpF//processin'#or'/updates#xmlW; ZC@-lement rss < neN ZC@-lement(this, url); //*onse'uir el ttulo de cada elemento ZC@-lementà titleZC@-lements < rss#'et*hildren(Wchannel/item/titleW); !or (int i < /; i 9 titleZC@-lements#len'th; i44) R $trin' title < titleZC@-lementsìa#'et*ontent(); println(i 4 WF W 4 title); S
23.
/+artados' #ocu(entacin
-/+artado 1' Derra(ientas El so9t?are de Processing 1ermite la im1lementacin de Jerramientas @5oolsC 1ara 9acilitar el tra)a8o al usuario. -lgunas de estas %ienen instaladas en el 1ro1io 1rograma< $ 1uede accederse a ellas desde el men3 ,ools. Por de9ecto< se inclu$en +Auto .ormat Auto+.ormato!: Intenta 9ormatear el cdigo 1ara :acer un layout @diseGoC m,s legi)le $ :umano. =e aGaden o eliminan es1acios $ saltos de lneas 1ara :acer un cdigo mas Klim1ioL. Para acceder r,1idamente 1uede utilizarse su ata8o en Iindo?s 0ontrol L ,. +Archi$e &kecth Archi$ar &kecth!: -rc:i%a una co1ia del sHetc: en un documento .3ip. ;a co1ia se almacena en el mismo directorio Aue el sHetc:. +0olor &elector &elector de 0olor!: =im1le inter9az 1ara seleccionar colores en 0EB< J=B o :e6adecimal. +0reate .ont 0rear .uente!: !on%ierte las 9uentes de te6to en el arc:i%o de 9uentes Aue utiliza Processing 1ara tra)a8ar $ lo aGade al directorio del sHetc:. =e a)re un cuadro de di,logo Aue le dan o1ciones 1ara con9igurar el ti1o de letra< su tamaGo< si se trata de antiOaliasing< $ si todos los caracteres de)en ser generados. +.i( %ncoding M <eload Arreglar 0odificaci*n y <ecargar!: ;os sHetc:s Aue contienen caracteres Aue no son cdigo -=!II $ 9ueron guardados en Processing .*4. o %ersiones anteriores< 1osi)lemente se %ean mu$ e6traGos cuando son a)iertos. !aracteres como diresis< o 8a1oneses. -l ser a)iertos en una nue%a %ersin< la :erramienta los mostrar, como en las %ersiones antiguas< $ al momento de guardar el sHetc: nue%amente< lo codi9icar, con la nue%a codi9icacin F5#O4. -dem,s< e6isten :erramientas creadas 1or usuarios Aue contri)u$en al 1rograma. Estas 1ueden descargarse de 9orma li)re $ gratuita desde el sitio de :erramientas de Processing @:tt1 BB1rocessing.orgBre9erenceBtoolsBC. ;as :erramientas de contri)ucin de)en ser descargardas 1or se1arado $ colocadas dentro de la car1eta \5ools\ del 1rograma Processing @1ara encontrar la u)icacin de Processing en el ordenador< a)ra la %entana de Pre9erencias de la a1licacin de Processing $ )usAue \=Hetc:)ooH location\ en la 1arte su1eriorC. =e de)e co1iar la car1eta de la :erramienta descargada dentro de la car1eta K5oolsL. Es 1osi)le Aue se necesite crear la car1eta K5oolsL si es la 1rimer :erramienta Aue se instala. En las %ersiones 1osteriores a la 2..< e6iste una o1cin dentro del men3 K5oolsL< la o1cin K-dd 5ools...L @-Gadir JerramientasC. - 1artir de esta o1cin< Processing )usca nue%as :erramientas aun no instaladas $ las 1resenta en un entorno amiga)le 1ara su instalacin. ;uego de esto solo :a$ Aue seleccionar la :erramienta deseada $ a1retar el )otn KInstallL. -/+artado 2' :i-rer@as Para 1roducciones Aue reAuieren muc:o desarrollo< a %eces es necesario im1lementar ;i)reras @;i)rariesC Aue 1otencien nuestros 1rogramas. 2o se trata de muc:o mas Aue una gran cantidad de cdigo. Para insertar alguna li)rera de las Aue %ienen 1or de9ecto< se de)e dirigir al men3 K &ketch/ $ luego a K9mport Library.../. -Au mismo a1arecer,n las li)reras dis1oni)les Aue %ienen instaladas 1or de9ecto en Processing +Video: Inter9az de la li)rera E=(ideo 1ara utilizar una c,mara< re1roduccin de 1elculas $ creacin< tam)in< de las mismas. ;os usuarios de linu6 de)er,n instalar el gstreamer 1ara utilizar esta li)rera. En %ersiones anteriores a la 2..< la inter9az era del DuicHtime de -11le. +Arduino: Permite control directo de una 1laca -rduino a tra%s de Processing. +Net"ork: En%a $ reci)e datos %a Internet a tra%s de la creacin de sim1les !lientes $ =er%idores. +Binim: Ftiliza la Ja%a=ound -PI 1ara 1ro%eer una 9,cil uso como li)rera de sonido. Fn sim1le -PI Aue 1ro%ee un gran mane8o $ 9le6i)ilidad al usuario Aue desea im1lementar sonido.
23*
+Netscape.Ka$ascript: Mtodos de comunicacin entre Ja%ascri1t $ Ja%a -11lets e61ortados de Processing. +&erial: =o1orte 1ara el en%o de data entre Processing $ un :ard?are e6terno< %a comunicacin serializada @0=O232C. +PD. %(port: Eenera arc:i%os P'# +DN. %(port: ;neas $ tri,ngulos en los modos de render AD0 o ?A-NX@< 1ueden ser e61ortados como un arc:i%o '>#. !on las actualizaciones< e6isten li)reras Aue :an sido trasladadas a la )ase de datos $ reem1lazadas 1or 9unciones o automatizaciones. Estas son +0andy &VG 9mport: Esta )i)lioteca se :a trasladado a la )ase de cdigo de Processing en la %ersin *4&. Para la carga de gr,9icos =(E< se recomienda utilizar las 9unciones Ashape()< load$hape() $ shape(). +NBL 9mport: Esta )i)lioteca se :a trasladado a la )ase de cdigo de Processing en la %ersin *4&. Para cargar datos >M;< se recomienda utilizar la clase NBL $ la 9uncin loadZC@(). En %ersiones anteriores a la 2..< se de)er, utilizar el elemento ZC@-lement. +?penGL: =o1orte 1ara e61ortar sHetc: con aceleracin en gr,9icos a tra%s de 71enE;. Ftiliza la li)rera J7E;. - 1artir de la %ersin 2.. :a de8ado de e6istir como li)rera 1ara encontrarse en el n3cleo del so9t?are. Por lo tanto< solo es necesario llamar a la li)rera en %ersiones anteriores a la 2... !a)e destacar Aue cada li)rera tiene una documentacin corres1ondiente con la cual se entiende su im1lementacin $ correcta sinta6is. ;a misma se encuentra en la re9erencia del sitio @:tt1 BB1rocessing.orgBre9erenceBli)rariesBC. En dic:o sitio< adem,s< 1odremos encontrar uno de los 1untos 9uertes de Processing< las li)reras creadas 1or usuarios contri)uidores. Ja$ a dis1osicin m,s de *.. li)reras< todas con un atracti%o di9erente. ;as li)reras de contri)ucin de)en ser descargadas 1or se1arado $ colocadas dentro de la car1eta K;i)rariesL de tu 1rograma de Processing @1ara encontrar la u)icacin de Processing en el ordenador< a)ra la %entana de Pre9erencias de la a1licacin de Processing $ )usAue \=Hetc:)ooH location\ en la 1arte su1eriorC. =i todo es correcto< la li)rera de)era a1arecer en el men3 K=Hetc:L< KIm1ort ;i)rar$...L. En las %ersiones 1osteriores a la 2..< e6iste una o1cin dentro del men3 K=Hetc:L< KIm1ort ;i)rar$...L< la o1cin K-dd ;i)rar$...L @-Gadir ;i)reraC. - 1artir de esta o1cin< Processing )usca nue%as li)reras aun no instaladas $ las 1resenta en un entorno amiga)le 1ara su instalacin. ;uego de esto solo :a$ Aue seleccionar la li)rera deseada $ a1retar el )otn KInstallL. -/+artado 3' Processing9js -l incluirse la tag !an%as como un estandar de J5M;/ @ 9can,as89/can,as8C los 1rogramadores ?e) son ca1aces de Kdi)u8arL en internet con Ja%ascri1t. ;o cierto es Aue no se tard demasiado en notar Aue las sinta6is de !an%as es mu$ similar a la de Processing. Jo:n 0esig @luego es desarrollado 1or #lorian JenettC crea una li)rera Aue KtraduceL un sHetc: @.1deC de Processing al Ja%ascri1t necesario 1ara Aue 9uncione en !an%as. 'e esta 9orma< insertar un o)8eto !an%as en la ?e) es muc:o mas 1r,ctico $ e9iciente Aue un Ja%a -11let. Para comenzar a im1lementarlo< solo :a$ Aue dirigirse a :tt1 BB1rocessing8s.org $ descargar la ultima %ersin de la li)rera< la cual tiene so1orte 1ara todos los na%egadores ?e) modernos. ;uego de esto< solo es necesario tener un loGuesea#html $ un loGuesea#pde @Aue ser, el 1ro1io sHetc:C. 'e manera sim1le< en el 9head8 de tu loGuesea#html< se linHea la li)rera de la siguiente manera
9script src<Wprocessin'# sW89/script8
=iem1re uno asegur,ndose Aue el src sea el directorio correcto. Posteriormente< en el ObodyP< se crea una etiAueta de !an%as de la siguiente manera
232
9can,as data5processin'5sources<WloGuesea#pdeW89/can,as8
Fna %ez colocado esto< el sHetc: de Processing de)era estar 9uncionando sin ning3n 1ro)lema como un o)8eto de !an%as. Es 1osi)le Aue algunas 9unciones de Processing no 9uncionen correctamente o directamente no 9uncionen al 1asarlas a !an%as @se est, constantemente tra)a8ando en elloC. -nte cualAuier duda< lo ideal es consultar la re9erencia de Processing.8s http://processingjs.org/reference/. -/+artado 8' Hiring Iiring es un entorno de 1rogramacin de cdigo li)re 1ara microcontroladores. Permite la escritura de 1rogramas multi1lata9orma 1ara controlar di%ersos dis1ositi%os conectados a una am1lia gama de ta)leros de microcontrolador $ as crear todo ti1o de cdigos creati%os< o)8etos interacti%os< es1acios o e61eriencias 9sicas. El entorno est, cuidadosamente creado 1ensando en diseGadores $ artistas< $ as 9omentar una comunidad donde los 1rinci1iantes< a tra%s de e61ertos de todo el mundo< com1artan las ideas< conocimientos $ su e61eriencia colecti%a. M,s in9ormacin en :tt1 BB?iring.org.coB -/+artado <' /rduino -rduino es una 1lata9orma de cdigo a)ierto )asada en 1rototi1os de electrnica 9le6i)le $ 9,cil de usar mediante :ard?are $ so9t?are. Est, 1ensado 1ara los artistas< diseGadores< a9icionados $ cualAuier 1ersona interesada en la creacin de o)8etos o entornos interacti%os. El microcontrolador de la 1laca se 1rograma utilizando el lengua8e de 1rogramacin de -rduino @)asado en IiringC $ el entorno de desarrollo -rduino @)asado en ProcessingC. M,s in9ormacin en :tt1 BBarduino.ccB -/+artado >' ,rit2ing #ritzing es una iniciati%a de cdigo a)ierto 1ara a1o$ar a diseGadores< artistas< in%estigadores $ a9icionados a tra)a8ar de manera creati%a con la electrnica interacti%a. Basado en Processing $ -rduino. =e trata del desarrollo de una :erramienta Aue 1ermite a los usuarios documentar sus 1rototi1os< com1artirlos con los dem,s< enseGar la electrnica en un saln de clases< $ crear un diseGo 1ara la 9a)ricacin de P!B 1ro9esional. M,s in9ormacin en :tt1 BB9ritzing.orgB -/+artado ?' Das $anvas -lgunos 1ro$ectos Aue deri%an al comenzar a im1lementarse li)reras como Processing.8s< 1retenden utilizar Processing en la ?e) a tra%s de !an%as. =ea el caso del sitio Jas !an%as< uno de los m,s 1otentes. -l ingresar al sitio :tt1 BB:ascan%as.com se nos 1resenta una inter9az sencilla Aue nos 1ermite escri)ir cdigo de Processing directamente en el na%egador de nuestro ordenador< $ autom,ticamente dic:o cdigo es le%antado con PJP $ %isualizado en 9orma de !an%as. =olo con tener una cuenta en Jas !an%as @a tra%s de 71enI'C se 1uede :acer un sHetc:< o)tener una F0; del mismo< com1artirlo dentro de dic:o sitio< $ conseguir el recurso listo 1ara incluir como o)8eto de !an%as en cualAuier ?e).
233

Processing Un Lenguaje Al Alcance de Todos

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Processing Un Lenguaje Al Alcance de Todos

Cargado por

Copyright:

Formatos disponibles

Processing,

un lenguaje al alcance de todos

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 eli1se en la %entana de re1resentacin

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

5ate(1ticas' ,unciones /rit(!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 o1eraciones 1osi)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

/+!ndice de Estructura I,, E:SE * E:SE-I,

Ignacio Buioli | Jaime Prez Marn

!digo utilizando un #70

"O =ale de la estructura $ contin3a e8ecutando el resto del 1rograma

!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

/+!ndice de Estructura ,3=

//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());