7/4/13

Tutorial de Processing para mentes Macromedia

UntutorialoriginalmentedestinadoaestudiantesdelITP,suplementarioalmaterialdelcurso "IntroductiontoComputationalMedia","ProgrammingforNonProgrammers",y"CodeandMe" Idiomas:Espaol,English,Japanese,Korean ProfessordelTaller JoshNimoy contacto:jn429[at]nyu[dot]edu pginaweb TraduccinalJapanesade HironobuFujiyoshiandAyako Takabatake contacto:hf[at]cs[dot]chubu[dot] ac[dot]jp TraduccinalCoreanode KooChulLee contacto:kclee[at]phya[dot]snu [dot]ac[dot]kr TraduccinalEspaolde GeraldKogleryAngelaPrecht contacto:geraldo[at]yuri[dot]at CreadoresdelSoftware Processingesunproyecto abiertoiniciadoporBenFryy CaseyReas

Descripcin Processingesuncontextoparaexplorarelespacioconceptualemergentequenosentreganlosmedios electrnicos.Esunentornoparaaprenderlosfundamentosdelaprogramacininformticadentrodel contextodelasarteselectrnicasyesunblocdenotaselectrnicasparadesarrollarideas. www.processing.org ElentornodeProcessingeselmsfcilcompiladordeJava/entornodeprogramacinmultimediay grficoconocidoporelhombre.Elsistemapuedeserusadoparaproducirpiezasquearrancan localmente,comotambinAppletsdejavaincrustadosenlaweb.Deliberadamente,elprogramaest diseadoparahacerunpuenteentrelaprogramacingrficaeducacional,yeljava"real".Processing puedeserutilizadocomoruedadeentrenamiento,peronotieneporqusereso. ElpropsitodeestemanualesintroduciralosusuariosdeFlashMacromediayDirectoralentornode Processingatravsdelacomparacinyelcontrastedelossistemas.Lateoradicequeel conocimientoadquiridoatravsdelasherramientasdeMacromediapuedeserfcilmentetransferido, reduciendolacantidaddeclasesnecesarias.Seasumequetienesunconocimientobsicodealguno delosproductosdeMacromedia.Haciaelfinaldeestemanualdeberassercapazdeproducirtus propiaspiezasdeProcessing(Java). ndice Introduccin ObtenerelsoftwaredeProcessing Unpaseoporlainterfaz Manipulacindemediosabajonivel Estructurasintctica Grfica2Desttica Tiempoymovimiento Ratn&teclado Presentacin/Exportar Dibujararchivosdeimagen Formas3D Pxeles Tipografa Elfuturo Introduccin Actualmente,enclasesinteractivasdediseodigital,elvehculoeducativodominantehasidoFlasho Director.Losestudiantesestnempezandoarealizartrabajosgeomtricamentedinmicosy algortmicamentemscomplejosinfluenciadosportrabajosrealizadosenentornosdiferentesalos suyos.EnITP,atestigunexperimentoenunaclase(claro,quedesdeentoncesestnusando Processing).EnmediodelaenseanzadeDirectorLingo,unintensivodeunasemanaala programacinenJavaintroducealosalumnosaunlenguajediferenteaLingoconlaesperanzaque adquieranunavisinmsdiversadedistintossistemasdeprogramacin.Selesentregunaplantilla yellossimplementecambiaronelcdigo.Luegodeunasemanadeconfusinalgunosdelos estudiantesquedaronconunasensacindevaco,anhelandosabermsdeJava.Nohubomanerade

go.yuri.at/p5/tutorial/

1/16

7/4/13

estudiantesquedaronconunasensacindevaco,anhelandosabermsdeJava.Nohubomanerade explicarlesqueuncursodeJavapromedioenunaescuela,frecuentementetetienetrabajandoenuna consoladetextoyquetienepocoonadaderelacincongrficadeAppletsalmenosqueseaun cursoespecficamenteenfocadoparaenseareso.Enlaleccinsiguiente,esperohacerunpuente sobreestehuecoacadmicoconlaayudadelentornodeProcessing.Noestpensadocomoun reemplazoaaquelloscursosdeJavasinounsuplementoquesepreocupadelalogstica,sin profundizarenlosmaticessintcticos.Adems,ProcessingyJavanosonpresentadoscomoel siguienteniveldespusdeMacromedia,tampococomounsistemadenivelinferior.Sonsimplemente unaalternativacapazdehacercosasdemododistinto.SiactualmenteasistesauncursodeJava,es posiblequeusesProcessingentustrabajos,dependiendodelaflexibilidaddetuprofesor.Este manualesunamezclaentremiredaccineimgenesyotrasencontradasenelsitiodeProcessing quemantienenCaseyReasyBenFry.Tefamiliarizarsconestosnombresenlamedidaquetehagas usuariodeProcessing.

Tutorial de Processing para mentes Macromedia

Obtenerel softwarede Processingeslibre(librecomolacervezagratis,librecomolalibertaddeexpresin,librecomoun Processingpaslibre)ytodavaendesarollo.Seguirsiendolibreinclusodespusdeserterminado.Este softwareestactualmenteenlafaseBETA.Loserroresestnsiendoreparadosyotrosaspectosestn siendoagregados.Paradescargarteelprogramadeinstalacindemultiplataforma,puedesmandarun emailalosdesarrolladoresparaunirtealacomunidaddetesteo.EnlapginadeProcessing,pincha Downloadparamsinstrucciones.Ademshayunfluidosistemademensajesentrelostesteadores. Esaltamenterecomendablequetecreesunaidentificacindeentrada(login)paratimismo.La comunidadquesehacreadoasualrededoreslamejormaneraderecibirayudaencualquiermateria, deotrosmiembrosdelacomunidaddetesteo,delosmismosautoresydeotrosempollones informticoscomoelautordeesteartculo.Esimportantesealarqueestacomunidadenlneaayuda adesarrollarProcessingatravsdeladiscusindeaspectosenlosforos.EnlapginadeProcessing pincha Discourse .TantolapginadeProcessingcomoelsoftwareestnconstantementesiendo actualizados.Verevisandopornuevasactualizacionesyversionesdelsoftware.Justamenteahoraes unmomentomuyemocionante! Unpaseopor lainterfazLasiguienteimagenfuesacadadewww.processing.org.Paraverlaencontextopincha Reference y luego Environment .

Probablementeestspensando:Jo,qusimpleestainterfaz.Cmopuedesertanpotentecomo DirectoroFlash?Ambos,DirectoryFlash,poseentodotipodeinterfasesdeimportacinyedicin demedios,basadosenfuncionescomunesdemultimediacomercial.EnProcessingtodoestosehace ousandootroprogramaoprogramandoenJava.Porejemplo,FlashtienesupropiominiIlustrator, mientrasDirectorvieneconsupropiominiPhotoshop.Enconsecuencia,unlargotrozodeltrabajo realizadoenambosprogramashaasemejadolasrestriccionesdesuseditoresintegrados.En Processing(yenJava),tuproveestupropialistadegrficasvectorialesoarchivosGIF,ylos interpretasusandoprogramacin.Ereslibreparausartuspropiasformasyestructuras,usandoel lenguajeparacontrolarlospxelesenlapantallamsdirectamente.Paraaquellosquegustande experimentarydeseanproducirnuevasformasdemaneraindependienteodelantedelstatusquoy susherramientasdeautomatizacin,Processingpuedesermsconveniente. Aquhayunaintroduccindeseisbotonesdelcostadoizquierdodelaventana.

Elbotnde reproducir(play)eselmismoqueenDirectoryFlash.Cliqualo paravertucdigoejecutadocomounprograma. Elbotnde parar(stop)eselmismoqueenDirectoroFlash.Cliqualopara detenertuprograma.

go.yuri.at/p5/tutorial/

2/16

7/4/13
detenertuprograma.

Tutorial de Processing para mentes Macromedia

Creaun nuevo(new)archivo.Processinglosllamasketches(bosquejos).los puedesllamartambinApplets,programasopiezasinteractivas.DirectoryFlash losllamanmovies( pelculas). Abre (open)unsketchpreexistente.Unmenaparecerypodrselegirdentro detupropiacoleccin,guardadaenlacarpetaespecialdeProcessingquete ensearmsadelante.Tambinpuedeselegirdentrodeunaampliagamade ejemplosdesketchesrealizadosporfamososdiseadores/artistasdenuevos medios,paraaprenderdeellosyusarloscomocdigodereferencia. Guarda (save)ensketchactualdentrodelacarpetadesketchesdeProcessing. Siquieresdarleunnombredistintoveteaguardarcomo(saveas)enelmende archivo( File). Exporta (export)elsketchalacarpetadesketchdeProcessing,estavezcomo unAppletdejava,completoconsupropioarchivohtml.Estapropiedadser tratadaconmsprofundidadmsadelante.

ParamayorymsdetalladainformacinacercadelentornodeProcessing,verlareferenciade EntornodeProcessing.

Manipulacin demediosa EnDirector,unoimportaocreamediosdentrodeunreparto,luegoloarrastrahaciaunescenario bajoniveldondeexistircomounactor.EnFlash,unotambinimportaocreamediosdentrodeunalibreray luegolosinstanciacomoclipsdepelculasaunescenariosimilar.EnProcessing(yenJava)esta importacindemediasestrealizadaencdigo,demanerasimilarcomotrabajaHTML. Adicionalmente,cualquiermediopersonalizadoquetuinventas(sistemadevectores,datosDNA, muestrasdecoloresdeunapelcula)todospuedenserinsertadoscomopartedelcdigoJava.De hecho,noestsrestringidoatenercualquierimagenexternaosonidossiquieresmantenertodoen unarchivoordenado,porqueelpxeldetuimagentambinpuedeconvertirseparaserpartedetu cdigo,ylosdatosdesonidostambinpuedenseralmacenadoscomounlargoarraydedatos.El beneficiodeunalibreraorepartoesparatenermayorcontrolsobreelformato,paraahorrarespacio eneldisco/memoria,ytambinparaagregarcaractersticasapuntables&cliqueableshaciaun metafricosistemadearchivocomn.Elbeneficiodelactorodelapelculaesqueunobjetovisibley tangiblepuedeestarenlapantallayserunamanerafcilparaquelagentecreebotones,video juegos,caracteres,elementosindividualesgrficosyotroselementosvisualesycontrolablesde espaciopositivo.Detodasmaneras,creandogruposdecooperacindeelementosyobjetosqueno sonnideespacionegativonipositivo,estametforasehaconvertidoencargaparaalgunos.En Processing,estacomplicadacapanoexistehaysoloteclado,ratnyunaseriedeeventosen conjuncinconrutinasbsicasdedibujo.Unoseocupaderedibujarlaescenarepetidasvecespara introducircambiosytiempo.Enestamateria,esturesponsabilidadelescribirtupropiosistemade actoropelcula,peronotelorequerirn.Inventaotrametforaquesermstilparaticomo artista.Tambincontribuirsparadiversificarconprofundidadlaestticadeaquellostrabajosen cualesusualmentevemoslainfluenciadeMacromedia. Enlassiguientesseccionesdeestagua,introducirmtodospararenderizarlaimagineraala pantalla.Luegointroducirunaanimacin.Finalmente,temostrarecomoagregaranimacinconel ratn,tecladoyelpuertoserial.Estossonlospilaresbsicosparacualquiercosaquequierashacer conlasherramientasdemayornivel.SerscapazdehacerlosenJavasitefocalizasenconstruirlos tumismo. Estructura ParalosqueusanFlashMXestoesunrepaso.LosiguentesellamaStatementsCommentsenlos sintcticaejemplos. //Statements&Comments //byREAS //Statementsaretheelementsthatmakeupprograms. //The""isusedtoendstatements.Itiscalledthe"statementterminator." //Commentsareusedformakingnotestohelppeoplebetterunderstandprograms. //Acommentbeginswithtwoforwardslashes("//"). //Created1September2002 //The sizefunctionisastatementthattellsthecomputer //howlargetomakethewindow. //Eachfunctionstatementhaszeroormoreparameters. //Parametersaredatapassedintothemethod //andusedasvaluesforspecifyingwhatthecomputerwilldo. size (200,200)

go.yuri.at/p5/tutorial/

3/16

7/4/13

Tutorial de Processing para mentes Macromedia

//Thebackgroundfunctionisastatementthattellsthecomputer //whichcolortomakethebackgroundofthewindow background(102) YlasvariablesdeJavasoncomoacontinuacin:

intx=0 println(x) x=x+1 println(x) x=x+1 println(x)

Pinchareproducir(play)yves eso:

0 1 2 3

PersonasqueusenFlash:Nohaynadacomovar.Paramayorinformacindevariables,consultarla guaoficialdelenguajeJava. Aquestlapartedelavariables. Quocurreconifthen? inta=1 intb=2 if(a==b){ println("same") }else{ println("different") } Pinchareproducir(play)yves eso: different

LascosassonunpocodiferentesaLingosihayquecomparar.Elprogramadorusaunslo=para asignaraunavariableunvalor.Unousa==(dobleigual)cuandointentadeterminarquesiun nmeroesigualaotronmeroono.Noigualanoesms<>,ahoraes!=ylosdemsson losmismos("<",">",">=",y"<=").Parainformacinencondicionales,consultealaautoridad. Yrepetirbucles?

for(inti=0i<5i++){ println(i) }

Pinchareproducir(play)yves eso:

0 1 2 3 4

UsuariosdeLingo,estoeslosmismosquerepeatwithi=0to4.Dentrodeestosparntesishaytres declaracionesseparadaspordospuntoycoma.Laprimeradeclaracincreaunavariabletemporal.La segundadeclaracinespecificalacondicinquepermitealbuclecontinuarsurepeticin.Apenasino esmsmenorque5,elbuclesedetendr.Laterceradeclaracintedarlaposibilidadde incrementaricomodesees.i++eslaabreviacindei=i+1.Sunpodrcontartemsacercade losbucles. Mientraslosbuclessonsimilaresalaestructuradeunifthen. while(6!=2){ println("muhuhaha!") }

Noejecutesesteprograma!

:)

Siestscuriosodesabermsdelasintaxisdecontroldeflujos,aquhayunlinkdelmanualde lenguajedeJava.Lapartedecontroldeflujos. Memeterenfuncionesenunmomento.Entregoestsinstruccionesbsicasdesintaxisnoparaser cuidadososinoparaquecomprendaslasinstruccionesquevienenacontinuacin. Paraunamayorintroduccinalasestructuras,miralaComparacindeLenguajeProcessingylos EjemplosdeEstructuradeProcessing.

Dibujo2D esttico

size(200,100)

go.yuri.at/p5/tutorial/

4/16

7/4/13
background(0,0,0) stroke(255,0,0) point(50,50) stroke(0,255,0) point(100,50) stroke(0,0,255) point(150,50)

Tutorial de Processing para mentes Macromedia

Arranqueestecdigoy obtendrslasiguiente imagen.Estaeslagran ventananegracontres pxelesdecoloresrojo, verdeyazul.

Permtenosdescomponerestecdigolneaporlnea.

Primeroquenadaconvienesaberquelapantallaesungrficode pxeles,cadaunoregistradoparaunanicacoordenada(X,Y).Elorigen (0,0)estenlaesquinaizquierdaarribadelrectngulo.AlsumaraY,te mueveshaciaabajo.AlsumaraX,temuevesaladerecha.Esparecido ajugareljuegodetablero, CombateNaval.Notienediferenciaa DirectoroFlash.

size(200,100) Nombrandolafuncindetamao( size ),permiteeltamaodellienzoa200pxelesdealtura,100 pxelesdeancho.Sinodefinesestoalinicioquedardeterminadocomo100x100. background(0,0,0) Llamandolafuncindefondo( background)tepermitecambiarelcolordetodoellienzo.En Directorestoeselcolordelescenario.EnFlash,estoeselcolordefondodeldocumento.0,0,0 significanegro.Sinuncallamasnegroalfondo,quedarpredeterminadocomogris. stroke(255,0,0) Llamarlafuncindetrazo( stroke )tepermitecambiarelcolordeldibujoactualdetalmaneraque cadacomandodecolorllamadoluegoserdibujadousandoesecolor.255,0,0significarojo.Sinunca llamastrazoenProcessing,pordefinicinsernegro. point(50,50) Llamarlafuncindepunto( point )fijarelpixelen50,50alcolordellienzoactual.Enestecaso, rojo. stroke(0,255,0) point(100,50) Estecdigohaceunpuntoverdeenelcentro. stroke(0,0,255) point(150,50) Estecdigodibujaelpuntoazulaladerecha. Comopuedesver,estoessimilara draw()enLingo,oaquellosmtodosdedibujoenActionScript. Tcontrolaslapantallacomosifueraunlienzoqueentiendeciertasoperacionesdedibujos. Permtenosdesarrollarformasmscomplejas.

background(0,0,0) stroke(255,255,255) line(0,0,60,40) stroke(255,255,0) line(30,50,100,100)

Aquestoydibujandodoslneas.La primerablancaylasegunda, amarilla. Enlalneadefunciones,losdos primerosparmetrossonlasprimeras coordenadasylosltimosdos parmetrossonlassegundas coordenadasx,y.Lalneasedibuja desdelaprimeracoordenadaala segunda.

Aquhayunasformasprefabricadas.

go.yuri.at/p5/tutorial/

5/16

7/4/13

Tutorial de Processing para mentes Macromedia

size(150,100) quad(61,60,94,60,99,83,81,90) rect(10,10,60,60) ellipse(80,10,60,60) triangle(12,50,120,15,125,60)

triangle (tringulo)dibujarunpolgonodetrespuntas.Tieneseisparmetros.Parmetros1y2son losprimerascoordenadasX,Y.Parmetros3y4sonlassegundascoordenadasX,Y.Losparmetros5 y6sonlastercerascoordenadasX,Y. triangle(x1,y1,x2,y2,x3,y3) quad(cuadrado)dibujarunpolgonode4puntas.Laestructuradelosparmetrosessimilaralas deltringulo,peroestavezuncuartopardeparmetrosseagreganparaespecificarunacuarta coordenadaX,Y. quad(x1,y1,x2,y2,x3,y3,x4,y4) rectdibujarunrectngulo.Elprimerysegundoparmetroespecificarnlaposicin,mientrasqueel terceroyelcuartoloharnconlaalturayelancho. rect(x,y,width,height) ellipse dibujarunvalo.Susparmetrostrabajandelamismamaneraquelosderect. ellipse(x,y,width,height) Ahoramodificarelprogramaparamostrartealgonuevo.Elnuevocdigo estmarcado.

size(150,100) fill(#CC6600) stroke(#FFFFFF) quad(61,60,94,60,99,83,81,90) rect(10,10,60,60) ellipse(80,10,60,60) triangle(12,50,120,15,125,60)

(Notaaqui,queestoyespecificandocoloresdeunamaneradiferentequeantesestavezenestilo HTML) Fill(llenar)seintroducecomounprimodeltrazo.Fillesloquehacequeelpolgonoverde,mientras queeltrazoesloquehacequelosbordesseanrojos.Losparmetrosdefillespecificanelcolor, comoeltrazo.Estpredeterminadocomoblanco.Peroqupasasinoquieresllenar?

size(150,100) noFill() stroke(#FFFFFF) quad(61,60,94,60,99,83,81,90) rect(10,10,60,60) ellipse(80,10,60,60) triangle(12,50,120,15,125,60)

Ahorapuedesverelcuadradodebajodelvaloporqueslolostrazoshansidodibujados.Demanera similar,existeun noStroke (notrazo),quedeshabilitalosbordesdeserdibujados.Parahabilitarel trazooelllenarunavezmsdebesllamareltrazooelllenarespecificandouncolor. Dibujarconcurvasesligeramentemscomplicadoquedibujandoconlineasrectas.Especificandouna curvarequiereproveerinformacinnovisualqueayudeadefinirlaseveridadydireccindela curvatura.Processingproveeambosmtodos,curve()(curva)ylacurvadebezier().

go.yuri.at/p5/tutorial/

6/16

7/4/13

curvatura.Processingproveeambosmtodos,curve()(curva)ylacurvadebezier().

Tutorial de Processing para mentes Macromedia

curve(84,91,68,19,21,17,32,100)

curve(10,26,83,24,83,61,25,65)

stroke(255,102,0) line(85,20,10,10) line(90,90,15,80) stroke(0,0,0) bezier(85,20,10,10,90,90,15,80)

stroke(255,102,0) line(30,20,80,5) line(80,75,30,75) stroke(0,0,0) bezier(30,20,80,5,80,75,30,75)

curve(x1,y1,x2,y2,x3,y3,x4,y4) bezier(x1,y1,x2,y2,x3,y3,x4,y4) Paralafuncinde curve(),elprimerysegundoparmetroespecificaelpuntodelacurvaylosdos ltimosparmetrosespecificanelsegundopuntodelacurva.Losparmetrosdeenmedioestablecen lospuntosparadefinirlaformadelacurva. Paralafuncin bezier(),losprimerosdosparmetrosespecificanelprimerpuntodelacurvaylos dosltimosparmetrosespecificanelltimopunto.Losparmetrosdeenmediootorganelcontexto paradefinirlaformadelacurva. Enlosejemplosde bezier()dearriba,laslineasnaranjasrevelanlospuntosdecontrolescondidos delascurvas. ApesarqueProcessingotorgaestosprimitivosrpidos,ereslibreparaconstruirtuspropiasformas. Usandolosmtodosde beginShape()yel endShape()sonlallaveparacrearformasms complicadas. beginShape()empiezaregistrandovrticesparaunaformay endShape()termina eseregistro.Elcomando beginShape()requiereunparmetroparadecirlequtipodeformapara creardesdelosvrticesotorgados.Losparmetrosdisponiblespara beginShape()sonLINES, LINE_STRIP,LINE_LOOP,TRIANGLES,TRIANGLE_STRIP,QUADS,QUAD_STRIP,yPOLYGON. Luegodedarelcomando beginShape(),unaseriedecomandos vertex()(vrtices)debenseguir. Paradejardedibujarlaforma,usaelcomando endShape().Loscomandos vertex()condos parametrosespecificanlaposicin2Dyloscomandos vertex()contresparmetrosespecificanla posicinen3D.Cadaformaserdelineadaconsucorrespondientecolordetrazoyllenadaconel colordellenado(verlaseccindeColorparamsinformacin. AquhayalgunosejemplosdeProcessing.org beginShape(LINE_LOOP) vertex(30,20) vertex(85,20) vertex(85,75) vertex(30,75) endShape()

go.yuri.at/p5/tutorial/

beginShape(TRIANGLES)

7/16

7/4/13
beginShape(TRIANGLES) vertex(30,75) vertex(40,20) vertex(50,75) vertex(60,20) vertex(70,75) vertex(80,20) vertex(90,75) endShape()

Tutorial de Processing para mentes Macromedia

beginShape(TRIANGLE_STRIP) vertex(30,75) vertex(40,20) vertex(50,75) vertex(60,20) vertex(70,75) vertex(80,20) vertex(90,75) endShape()

noFill() beginShape(TRIANGLE_STRIP) vertex(30,75) vertex(40,20) vertex(50,75) vertex(60,20) vertex(70,75) vertex(80,20) vertex(90,75) endShape() noStroke() fill(153,153,153) beginShape(TRIANGLE_STRIP) vertex(30,75) vertex(40,20) vertex(50,75) vertex(60,20) vertex(70,75) vertex(80,20) vertex(90,75) endShape()

noStroke() fill(102) beginShape(POLYGON) vertex(38,23) vertex(46,23) vertex(46,31) vertex(54,31) vertex(54,38) vertex(61,38) vertex(61,46) vertex(69,46) vertex(69,54) vertex(61,54) vertex(61,61) vertex(54,61) vertex(54,69) vertex(46,69) vertex(46,77) vertex(38,77) endShape()

go.yuri.at/p5/tutorial/

8/16

7/4/13
beginShape(LINE_STRIP) curveVertex(84,91) curveVertex(68,19) curveVertex(21,17) curveVertex(32,100) endShape()

Tutorial de Processing para mentes Macromedia

beginShape(LINE_STRIP) curveVertex(84,91) curveVertex(84,91) curveVertex(68,19) curveVertex(21,17) curveVertex(32,100) curveVertex(32,100) endShape()

beginShape(LINE_STRIP) vertex(30,20) bezierVertex(80,0,80,75,30,75) endShape()

Paramsdetalladainformacinacercadevectoresdedibujos,verlosejemplos FormdeProcessing, lareferenciadeformasdeProcessing. Haymuchomsparadibujareinterpretarenlapantalla,peroyoslotehedadolasrutinasde dibujo2Dparaaspodercubriranimacineinteractividad.Luegovolveremosalosotrosmtodosde dibujo.

Tiempoy movimientoEnDirectorhayunmarcador.Teasignanunacabezalectoraymtodostweeningparaactores.Cosas comoelvdeo,incrustacionesdeFlash,QTVRsysonidoparecenanimarensupropioespaciotiempo. Sitrabajasenalgomsqueunaanimacindinmicapuedesutilizarunfotogramaycdigoen respuestaaunevento ExitFrame o PrepareFrame .EnFlash,tedanunalineadetiempoyun soportedetweeningmscomplejoqueenDirector.Aquellosqueeligentrabajarcompletamenteen ActionScriptcomnmenteusandosmarcosunoparaajustaryparallamarunmarcoderepeticiny otropararepetirparasiempre.Actionscripttambintepermiteresponderencdigoconun onClipEvent(enterFrame).Processingnotienelneadetiempo,marcadoromtodosdetweening, amenosquedecidasestructurartucdigoas.ComoLingoyActionscript,Processingtepermite responderauneventodeprogresindefotogramascontupropiarutinadedibujo.Hastaahoratehe mostradoelcdigodeProcessingen ModoBsico,queesparaimgenesestticas.Esunlistade elementosvisuales.Processingtienetresmodosdeoperacin:bsico,estndaryavanzado. Modo JavaesJavaconvencional,sinlasruedasdeentrenamiento.Paracomenzarcontiempoy movimientoiremosa ModoContinuo.Sihasestadopinchandolosenlacesdeestetexto,debes habervistounoodosprogramasenmodoestndarProcessing.Aquhayunejemplosimple: intx=0 voidsetup(){ noStroke() } voiddraw(){ background(190) rect(x,0,5,100) x=x+1 } Enesteejemplo,unrectnguloblanco semuevedeizquierdaaderechaslo unavez. UnGIFanimadomuestraeste movimientoaladerecha.

Unaseccin setup()opcionalarrancacunadoelprogramaempieza.Laseccindebucle draw() arrancaparasiemprehastaqueterminaelprograma.EnLingo setup()essimilaral beginSprite o startMovie y draw()essimilara ExitFrame o PrepareFrame .EnFlash,setup()essimilaral primermarcodeanimacinquesloseejecutaunavez,luegollamaalbucle. setup()y draw() sonambas funciones.Tambinpuedesescribirtuspropiasfuncionesparaorganizaciny encapsulacindecomplejidad.Paramayorinformacinsobrecomoescribirfuncionespersonalizadas enJava,miraeltutorialdelenguajedeJavaImplementingMethodssection. UnavezquehayasescritolaprimerafuncinenProcessing,eseprogramacambiarautomticamente almodoestndar.Cualquierdeclaracinfueradesufuncinquenoseavariabledeiniciono funcionarmscuandopresionesplay.Puedesmoverestecdigohaciasetup()odraw().Siquieres

go.yuri.at/p5/tutorial/

9/16

7/4/13

Tutorial de Processing para mentes Macromedia

funcionarmscuandopresionesplay.Puedesmoverestecdigohaciasetup()odraw().Siquieres queunavariableseaglobal(significandoqueconservasuvalorfueradelalcancedelasfunciones) entoncesdeclaralaalcomienzodelprograma,fueradeambosdraw()ysetup().Enelejemplo arriba,lavariablexfuedeclaradaglobal. EnProcessing,lafuncinde framerate (n)sepuedeutilizarpararetrasaroparaacelerarelbosquejo entero,peroesciertamenteposiblemovercosasendiferentesvelocidadessimplementevariandola cantidadqueincrementas,ousandofloatsysolamenteagregandounafraccinaellos.Paraun controlmsalargoplazoyatiempomsexacto,Processingdaelaccesocompletoalamedidas occidentaldetiempo. year()//aoactual,p.ej.2002,2003,etc. month()//mesactual,de1..12 day()//dadelmes,de1..31 hour()//horaactual,de0..23 minute()//minutoactual,de0..59 second()//segundoactual,de0..59 Unafuncinespecialllamada millis()devuelveelnmerodemilisegundos(milesdeunsegundo) desdecomenzarelapplet.Estoescomnmenteusadoparasecuenciasanimadastemporizadas. millis()//nmerodemilisegundosdesdeelcomienzodelapplet. Tambinesposiblehacerquetuappletesperealusarlafuncinedemora(delay).Usarestafuncin puedeajustarefectivamentelostempos(framerates). delay(40)//haceunasiestade40milisegundos voiddraw(){ print( month()+"/") print( day()+"/") print( year()+"") print( hour()+":") print( minute()+":") println( second()) } Aquhayunejemploen elqueeltiempoactual ylafechason constantemente escritasalasiguiente reaalfinaldela ventanadeProcessing.

Estonoesunejemplomuybonitoperoesfcildeentender.Paraejemplosdetiempomsbonitos(y complejos)miraMilliseconds,deREAS.Paramsejemplosdemovimientoanimado,vase losejemplos MotiondeProcessing. Ratn& tecladoElaccesoalratnyeltecladosonsimilaresalmodoquelohacenFlashyDirector.EnLingo,el ratnesdireccionablecon themouseLoc, themouseH,y themouseV .Ademshaytambin manejadoresdesucesoderatncomo onmouseDown.EnFlash,hay onClipEvent(mouseDown), etc.EnProcessing,lafuncin mousePressed()sellamacadavezqueelratnespresionadoyel mtodo mouseReleased()esllamadocadavezqueelratnesliberadoodejadodepresionar.Lo quedebeshaceresagregarlafuncinatucdigo,ascomoen draw(). voiddraw(){ background(190) rect( mouseX 5, mouseY5,10,10) } voidmousePressed(){ fill(0) } voidmouseReleased(){ fill(255) }

Enestesencilloejemplo, uncuadradoesdibujado pordondeelratnvaya. Siaprietaselratnel cuadradosetornarnegro.

Paramsinformacinderatn,miralareferenciadelratondeProcessing,ynoteolvidesderevisar estosejemplos Mouse deProcessing. LaentradadeltecladoesigualaFlashyDirector. voiddraw(){ if( keyPressed){ fill(102,0,0) }else{ fill(204,102,0) } rect(30,20,55,55) }

Enestesimpleejemploel cuadradocambiaarojo oscurosicualquiertecla estsiendopresionada.No haynecesidadderedibujar defondo!

Laentradadeltecladotambinpuedeserdistribuidacomouneventhandlingfunction.

go.yuri.at/p5/tutorial/

10/16

7/4/13
intx=50 inty=50 voiddraw(){ background(190) rect(x,y,10,10) } voidkeyPressed(){ if( key =='w'|| key =='W'){ y }elseif( key =='s'|| key =='S'){ y++ }elseif( key =='a'|| key =='A'){ x }elseif( key =='d'|| key =='D'){ x++ } }

Tutorial de Processing para mentes Macromedia

Enesteejemplo,lasteclas deltecladomovernel cuadradoalrededor.

Paramayorinformacindeentradadeteclado,miralareferenciadeltecladodeProcessing,yno olvidesderevisarestosejemplos KeyboarddeProcessing. Presentacin /Exportar

EnFlashyDirector,haycontrolesenlasteclasefuncionesenel menquepuedenseleccionarseparaarrancartuprograma,deun modoqueusatodalapantallaycubretodolosornamentospresentes enunsistemaoperativo.Lamodalidaddepantallacompletaesmuy tilparalainstalacinypresentacin.EnProcessing,puedesescogeren elmen Sketch>Present ,opuedesapretarCtrl+P( +Penun Mac).Ademsintentaapretarelbotndeplaymientraspresionas SHIFT.Lapantallacompletairagrisoscuroyverstucreacinenel medio.Paravolveralosnormal,presionasESC.Sinofuncionahayun botndedeteneralaesquinafinalizquierda.

CualquierprogramadeProcessingpuedeserpublicadocomounappletdeJava.Primero asegratequeelbosquejo(sketch)estsalvado,luegoescoge File>Export ,opresionaCtrl+E (opresionaelbotndeexportar).VerselreademensajesdeProcessingdiciendo"Exporting..." porunmomentoyluegodir"DoneExporting."Paratenerlosarchivosdelaweb,entraala carpeta debosquejosdeProcessing.Buscalacarpetaconelnombredetubosquejoybrela.Enesacarpeta versotrallamada applet .Estacarpetapuedesersubidaalaweb.Recomiendoaltamenteeditarel index.htmlpredeterminadoquesegeneradesdeProcessing.Debesmantenertodoslosarchivos relativosalHTMLenestacarpetaapplet,yaqueestnrelacionadasdeunmodoqueningunaotro medioHTMLestrelacionado. sketches/ your_sketch_name / applet/ your_sketch_name .java your_sketch_name .class your_sketch_name .jar index.html save()andsaveFrame() Sinecesitasexportarformatosnointeractivos,esposiblehacerarchivos.tifdelaventanade Processingusandolafuncin saveFrame()(guardarfotograma).Ubicandoestemtodoalfinaldel bucle draw()guardarlaimagenenlapantalla.Si saveFrame()esllamadonumerosasveces, crearunasecuenciadeimgenescomolasiguiente:screen0001,screen0002,screen0003,etc. Usando save()(guardar)tepermitirelegirunnombredearchivo.Essimpleimportarestas imgenesalQuicktimeyotroprogramadevdeoparahacerunadocumentacinanimadadeun programadeProcessing.AunqueProcessingtieneincorporadoestafcilfuncindeguardarimgenes, tambinesposibleexportarotrosformatosconunpocomsdetrabajo.Porejemplo,aquhayun programadeProcessingqueexportaaAdobeIllustrator. Dibujar archivosde PonerunaimagendentrodeunbosquejodeProcessingessimple.Processingacepta.gif,.jpg,.tga,y imagen.png(amenosquequierashacertrabajoextra).Puedesponerlaimagendentrodetubosquejo usandoelsistemadearchivosyunpardelneasdecdigo.Primeroguardaelbosquejo.Luego puedesencontrarelarchivodelbosquejochequeandoenlacarpetadebosquejosdefinidaenlas preferencias( File>Preferences).Allencontrarsunacarpetallamada sketches(librode bosquejos).Allprobablementeencontrarslacarpetaconelmismonombrequetubosquejo.Dentro encontrarsotracarpetallamada data .Aqueslacarpetadondedebesubicartuarchivodeimagen paraunProcessingmsfcil.Aqu,otramaneradedecirlo:

go.yuri.at/p5/tutorial/

11/16

7/4/13

Tutorial de Processing para mentes Macromedia

paraunProcessingmsfcil.Aqu,otramaneradedecirlo: sketches/ your_sketch_name / data/ your_imagefile.gif Asumamosquetengounbosquejollamado image_example_1yquierodibujarlasiguienteimagen llamada twombly.jpg,undibujodeCyTwombly:

Loguardarenunacarpetaapropiada: Sketchbooklocation/sketches/ image_example_1/ data/ twombly.jpg Ysqueestoylistoparaagregarelcdigo.

size(150,150) PImageb=loadImage("twombly.jpg") image(b,0,0,150,150)

go.yuri.at/p5/tutorial/

12/16

7/4/13

Tutorial de Processing para mentes Macromedia

PImage esunobjetoquemantendrtuarchivocargadohastaquelodibujes. beselnombreque escoj. image()esloquedibujalaimagenalapantalla. image(PImage,x,y,width,height) Tambinpuedeselegirelomitirelanchoyaltoylaimagensedibujaraescalanormal. Importararchivosnosonelnicocamino,tambinfuncionanlosURLs. Paramayorinformacindeimgenes,consultaelmanualdeProcessing.Aquestlaparteexplicando cargandoymostrandoimagenes.Construiratravsdeesteconocimiento,tambinesposible mostrarimagessequenciales(videofootage).Paramsinformacinmiralosejemplos Image de Processing. Formas 3D Hahabidomuchapreocupacinyquejasporintroducir3Da entornosde2D.EnFlash,muchasherramientasdeterceraspartes hansidodesarrolladas.EnDirector,unactorgrficode3Dvectorial seintrodujorecientemente.Elsistemaestancomplejoquemuchos handesistidoinclusodeaprenderlo. EnProcessing,3Dslosignificadefinirunrendering3Dyagregar unaejez.

vertex(x,y,z) line(x1,y1,z1,x2,y2,z2) bezierVertex(x,y,z) curveVertex(x,y,z)

box(size) box(width,height,depth) sphere(size) Processingactualmentetienetres modosderendering.Sinoespecificamosningnmodoenla funcinsize()comohechoentodoslosejemploshastaahorausamoselelrenderingdeJava2D. Parausarfuncionesde3Dhacefaltaespecificarelrenderingdelasiguientemanera: size(100,100,P3D)//P3Ddefineelmododerenderingpara3D Estemodotambindasoporteatodaslasfuncionesde2Dyademssuponesermsrpidaqueel rendering2D.AdemsexisteotromododerenderingllamadoOpenGL.Msinformacinsobreellos modosderenderingencuentrasenestapginadeProcessing.

size(100,100,P3D) translate(58,48,0) rotateY(0.5) box(40)

size(100,100,P3D) noFill()

go.yuri.at/p5/tutorial/

13/16

7/4/13

noFill() translate(58,48,0) rotateY(0.5) box(40)

Tutorial de Processing para mentes Macromedia

size(100,100,P3D) lights() translate(58,48,0) rotateY(0.5) box(40)

size(100,100,P3D) noStroke() lights() translate(58,48,0) rotateY(0.5) box(40)

size(100,100,P3D) noStroke() lights() translate(58,48,0) sphere(28)

Nteseque box (caja)y sphere (esfera)notepidenqueespecifiquescoordenadas.Enestos ejemplos,esnecesariousar translate y rotate .Tambinhay scale ,yunpardefuncionesllamadas pushy popquetepermitenmarcartustrasladosenunamodamuyorganizada.Paramayor informacinverlareferenciadetransformacionesdeProcessingylosejemplos Transform de Processing.Sinoteimportanestastransformaciones,siemprehayunasolucin. Nteseelusode lights()y noLights().Usarlucesrenderizarnlaforma3Ddeunmodoque sugerirsombreado.Paramsinformacin,miralareferenciadeluzesdeProcessing. "Qu?Estoespara3D?" Sicreesqueestonoessuficiente3Dparapermitirtehacercosasinteresantes,entoncesmiralas cosasquehanhechoenlaexposicindeProcessing.Yestoessloelcomienzo.

Pxeles ElcontrolsobrelospxelesestactualmentelejosdeFlash. SetPixely GetPixelrecinhansido aadidosaFlashyDirector(yunconocidoartistainteractivo,amantedeDirectorhaadoptadoel apododeSetPixel).EstudiantesdelITPvanauncursodictadoporDannyRozinllamadoElMundo PxelporPxel,(TheWorldPixelbyPixel),ycontinanprogramandoenCporqueeslanicamanera suficientementerpidaparaalcanzarlasmetasconceptuales(SiendoActionscript,LingoyMAXlas nicasalternativas).EscomnentreestosestudiantesdeITPprepararseparaelcursodeDanny's yendoauncursoC.TrabajarenpxelesdeProcessingesconsiderablementemsrpidoqueenLingo, ymuchomenoscomplejo.AunqueJavanosecomparaalavelocidaddeC,prontolosestudiantesde DannypodrnexplorarlaposibilidadusandoProcessingparaacelerarlacurvadeaprendizaje. get(x,y)//Returnsaninteger set(x,y,color) pixels[index]//Arraycontainingthedisplaywindow

intwidth=100 intheight=100 PImageb//declarevariable"b"oftypePImage b=loadImage("basel.gif") image(b,0,0) for(inti=30i<(width15)i++){ for(intj=20j<(height25)j++){ colorhere=get(30,j) set(i,j,here) } }

go.yuri.at/p5/tutorial/

14/16

7/4/13

Tutorial de Processing para mentes Macromedia

Controlandolospxeles,tambinpuedesimplementartuspropiasrutinasdedibujo.Porejemplo,aqu haytransparencia.Escribirelrestodelastintas(inks)deDirectornoserduro.Aquhayunafuncin delneadepuntos(dottedline). ParamsinformacindepxelesmiralaPreferenciadeimagenesdeProcessingylosejemplos Image deProcessing.

Tipografa Elsistemaderenderizadodetipografausaunformatodearchivodecarcterespecficode Processing.Loscreadoresdelsoftwarehanincluidountipodefuncindeimportacindetipodeletra enelmenparaayudarte,yademshandotadoalprogramadordeProcessingconunagamadetipos deletraparaescoger.Pinchaaquparaverlostiposactuales.Estasfuentesestnalmacenadascomo imgenesbitmap.Aquhayunejemplomuysencilloderenderizartextoalbosquejo.Arrancaeste programayesperaequivocarte.

size(200,100) background(#FFFFFF) fill(#000000) PFontf=loadFont("BodoniItalic.vlw") textFont(f,50) text("handglove",14,60)

Ossaldrunerrordiciendoquenopuedeencontrar BodoniItalic.vlw.Estoesporquenohas importandoanlafuenteatucarpetadedata.(laseccindeimagendeestemanualtienems informacindelacarpetadedata).Usalafuncindecreacindefuentesdelmenu Tools>Create Font... paracopiarfisicamenteelarchivodefuentesatucarpetadata.Ahoraelprogramaarrancar bienluegodehaberhechoeso. PFontf=loadFont("BodoniItalic.vlw" )cargaesafuentedentrodelavariablef. textFont(f,size)determinalafuenteactualysutamaoantesdedibujareltexto. text("handglove",x,y)renderizaeltextoenellugar. Esteejemploincorporarotacin,yunsimplebucle for.

size(200,100) noStroke() PFontf=loadFont("Univers66.vlw") textFont(f,50) fill(#FFFFFF) ellipse(50,55,150,150) fill(#CC6600) for(inti=0i<20i++){ rotateZ(0.2) text("dizzy",90,0) }

Sinoteinteresaestoporquenotevaelrollodetipografahayunmodomssimplificado.Si necesitasalgocomouncampodeentradadetextoestilqueescribastupropio.Muchoswidgetsde usuariosdeinterfacesnosondifcilesdeagregaralproyectosipiensasdeelloscomoejercicios pequeos,modulareseinteractivosmsquealgoqueelsistemaoperativoproveerexclusivamente. Loqueganaseselcontrolltimosobreeldiseo.Paramsreinvencionesdeinterfasesvernaculares miralosejemplos GUIdeProcessing. Miralosfantsticosejemplos Typography deProcessing.Processingvienedeungrupodegente preocupadaporlaestticaylacomputacin.Nuevasformasdetipografaesunadelascosasquepor lasqueesteMITMediaLabresearchgroupesfamoso.

go.yuri.at/p5/tutorial/

Elfuturo Processingesuntrabajomuynuevoycontinuosujetoaconstantesactualizaciones.Unanueva entregapuedeserfcilmenteinstaladaenellugardelaviejaypuedesmantenertucarpetade sketchesajustandolaspreferenciasdeProcessing.Altraducirestedocumento,Processingestensu versinBETA0115.ProcessingensusiniciossellamProce55ingasquenotesorprendassi

15/16

7/4/13

Tutorial de Processing para mentes Macromedia

versinBETA0115.ProcessingensusiniciossellamProce55ingasquenotesorprendassi encuentrasdocumentosbajoestenombre.Desdelaversin0085ProcessingestaenestadoBETA. Todavatieneerroresporcorregiryasuntospendientesantesquesalgalaversin1.0,hastaentonces vanamantenerestesistemadenombramientoconloscuatrodgitos. AdiferenciaconFlashyDirector,queestnescritosmayormenteenC,Processingfueescritoen Java,elmismolenguajeenelqueselepidealosusuariosqueprogramen.Graciasalapopularidad deJavapodemosreutilizarfcilmenteprogramasenestelenguaje.Haymuchaslibreras especialmenteadaptadas,algunasdeellasestnincorporadasenProcessing: Videoparareproducir Quicktimesyincorporarcmarasweb, Serialparacomunicarsecondispositivosconectadasalpuerto serial, Net paramandaryrecibirdatosporInternetusandoclientesyservidores,ademsdelas libraras OpenGL, PDF , DXF y JavaScript .Ademshaylibrerascomo Sonia paracrearsonidos, proMidiparamandaryrecibirdatosmidiymuchosotrosparacomunicarteconservicioswebcomo Google,del.icio.us,flickrentreotros. Contodoestoenmente,esperoencuentrenqueProcessingestilensumaalasherramientasde Macromediaqueestsaprendiendo.Porfavor,publicacualquierejemplodeProcessingparaque podamosaprenderdetuexploracinynoteolvidesdeserpartedelacomunidadonline.Feliz creacin!

JoshNimoy segraduenel InteractiveTelecommunications ProgramdelaNewYork University'sTischSchoolofthe Arts.Creayexhibeobras digitalesrelacionadascon interactividad,naturalezay sistemastipogrficos experimentales.Tambindicta clasesenDesignandMedia ArtsenlaUCLASchoolofArts andArchitecture,especializado enculturasdigitalesy tecnologas.Joshhasido investigadorvisitanteenelMIT MediaLaboratoryen1999enel AestheticsandComputation Group,lideradoporJohn Maeda,dondetrabajconBen FryyCaseyReas. website

BenFry sedoctorenel AestheticsandComputation GroupenelMITMedia Laboratorydondeinvestig mtodosdevisualizacinde grandescantidadesdedatos dinmicos.Sutrabajoactual estadivididoentreconsultasy lavisualizacindedatos genticosparaEricLanderen elEli&EdythBroadInstitute deMIT&Harvard. website

CaseyReassegraduen MediaArtsandSciencesenel MITMediaLaboratorydonde fuemiembrodelAesteticsand ComputationGroupdeJohn Maeda.Despusfueprofesor fundadordelInteractionDesign InstituteIvreaenItalia. Actualmenteejercecomo profesorasistenteenel departamentodeDesign& MediaArtsenUCLA.Ensus clasesprocuraentregarbases paralareflexinde ordenadoreseinternet,como unmediodeexploraciny definirunaestructurapara crearunasntesisavanzadade cultura,tecnologayesttica. website

ltimaactualizacin30deMayo,2006

go.yuri.at/p5/tutorial/

16/16