Your SlideShare is downloading. ×
0
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Visualizaciones gráficas con js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Visualizaciones gráficas con js

233

Published on

versión interactiva en: …

versión interactiva en:
http://facundoferrero.com.ar/presentacion/Visualizaciones JS

fuentes de la presentacion en:
https://github.com/FerreroFacundo/presentacion

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
233
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Visualizaciones en JS Abril 2013
  • 2. Propósito?Presentar clientside gráficas informativa y de media y alta complejidad y calidad Uso Representaciones estadísticas / matemáticas Animaciones complejas interactivas
  • 3. Técnicas empleadas SVG Canvas 2D Canvas "3D" (webgl)Plugins que hacen uso de estas tecnologías
  • 4. SVGSoportado por todos los navegadores principales Bastante intuitivo para gráficas básicas Poco amigable para manipulación de código
  • 5. EJEMPLO <v> sg<icec=10 c=5"r"0 srk=bak srk-it=2 fl=rd / crl x"0" y"0 =4" toe"lc" toewdh"" il"e" > <sg /v> Más ejemplos básicos
  • 6. Librerías / frameworks para SVG D3.js Colección de gráficas de todo tipo (barras, tortas, heatmaps, etc)Provee una interfaz similar a jquery, para reunir funcionalidad común a las gráficas Manual Introductorio Manual paso a paso
  • 7. 1,500 1,000 500 S&P 500 02000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 vrmri ={o:2,rgt 4,bto:2,lf:0, a agn tp 0 ih: 0 otm 0 et2} wdh=90-mri.ih -mri.et it 6 agnrgt agnlf, hih =10-mri.o -mri.otm egt 4 agntp agnbto, pre=d.iefra(% %".as; as 3tm.omt"b Y)pre / Sae.Nt teivre rnefrteysae bge i u! / cls oe h netd ag o h -cl: igr s p vrx=d.iesae) a 3tm.cl( .ag(0 wdh) rne[, it]; vry=d.cl.ier) a 3saelna( .ag(hih,0) rne[egt ]; / Ae / xs vrxxs=d.v.xs) a Ai 3sgai( .cl() saex .ikie-egt tcSz(hih) .ikudvd(re; tcSbiietu) vryxs=d.v.xs) a Ai 3sgai( .cl() saey .ik() tcs4 .ret"ih"; oin(rgt) / A ae gnrtr frtelgtfl. / n ra eeao, o h ih il vrae =d.v.ra) a ra 3sgae(
  • 8. .neplt(mntn" itroae"oooe) .(ucind {rtr xddt) } xfnto() eun (.ae; ) .0hih) y(egt .1fnto(){rtr ydpie;}; y(ucind eun (.rc) ) / Aln gnrtr frtedr srk. / ie eeao, o h ak toe vrln =d.v.ie) a ie 3sgln( .neplt(mntn" itroae"oooe) .(ucind {rtr xddt) } xfnto() eun (.ae; ) .(ucind {rtr ydpie;}; yfnto() eun (.rc) ) d.s(./aasok.s" fnto(aa { 3cv".dt/tcscv, ucindt) / Fle t oesmo;teSP50 / itr o n ybl h & 0. vrvle =dt.itrfnto(){ a aus aafle(ucind rtr dsmo = "& 50; eun .ybl = SP 0" }; ) / Predtsadnmes W asm vle aesre b dt. / as ae n ubr. e sue aus r otd y ae vle.oEc(ucind { ausfrahfnto() ddt =preddt) .ae as(.ae; dpie=+.rc; .rc dpie }; ) / Cmuetemnmmadmxmmdt,adtemxmmpie / opt h iiu n aiu ae n h aiu rc. xdmi(vle[]dt,vle[auslnt -1.ae) .oan[aus0.ae ausvle.egh ]dt]; ydmi(0 d.a(aus fnto(){rtr dpie }]; .oan[, 3mxvle, ucind eun .rc; )) / Ada SGeeetwt tedsrddmnin admri. / d n V lmn ih h eie iesos n agn vrsg=d.eet"oy)apn(sg) a v 3slc(bd".ped"v" .tr"it" wdh+mri.ih +mri.et at(wdh, it agnrgt agnlf) .tr"egt,hih +mri.o +mri.otm at(hih" egt agntp agnbto) .ped"" apn(g).tr"rnfr" "rnlt( +mri.et+""+mri.o +""; at(tasom, tasae" agnlf , agntp )) / Adteci pt. / d h lp ah sgapn(ciPt" v.ped"lpah) .tr"d,"lp) at(i" ci" .ped"et) apn(rc" .tr"it" wdh at(wdh, it) .tr"egt,hih) at(hih" egt; / Adteae pt. / d h ra ah sgapn(pt" v.ped"ah) .tr"ls" "ra) at(cas, ae" .tr"lppt" "r(ci)) at(ci-ah, ul#lp" .tr"" ae(aus) at(d, ravle); / Adtexai. / d h -xs sgapn(g) v.ped"" .tr"ls" " ai" at(cas, x xs) .tr"rnfr" "rnlt(, +hih +"" at(tasom, tasae0" egt )) .alxxs; cl(Ai) / Adteyai. / d h -xs sgapn(g) v.ped"" .tr"ls" " ai" at(cas, y xs) .tr"rnfr" "rnlt( +wdh+"0" at(tasom, tasae" it ,)) .alyxs; cl(Ai) / Adteln pt. / d h ie ah sgapn(pt" v.ped"ah) .tr"ls" "ie) at(cas, ln" .tr"lppt" "r(ci)) at(ci-ah, ul#lp" .tr"" ln(aus) at(d, ievle); / Adasallblfrtesmo nm. / d ml ae o h ybl ae sgapn(tx" v.ped"et) .tr"" wdh-6 at(x, it ) .tr"" hih -6 at(y, egt ) .tr"etaco" "n" at(tx-nhr, ed) .etvle[]smo) tx(aus0.ybl; / O cik udt texai. / n lc, pae h -xs sgo(cik,fnto( { v.n"lc" ucin) vrn=vle.egh-1 a auslnt , i=Mt.lo(ahrno( *n/2, ahforMt.adm) ) j=i+Mt.lo(ahrno( *n/2 +1 ahforMt.adm) ) ; xdmi(vle[]dt,vle[]dt]; .oan[ausi.ae ausj.ae) vrt=sgtasto(.uain70; a v.rniin)drto(5) tslc(..xs)cl(Ai) .eet"xai".alxxs;
  • 9. tslc(.ra)at(d,ae(aus) .eet"ae".tr"" ravle);tslc(.ie)at(d,ln(aus) .eet"ln".tr"" ievle); }; ) }; )
  • 10. Azimuthal Projection stereographicorigin.longitude: 0origin.latitude: 0scale: 240translate.x: 480translate.y: 250
  • 11. vrx =d.e.zmta(.cl(4)md(seegahc) a y 3goaiuhl)sae20.oe"trorpi", crl =d.e.raCrl(, ice 3gogetice) pt =d.e.ah)poeto(y, ah 3gopt(.rjcinx) sg=d.eet"oy)apn(sg) v 3slc(bd".ped"v";d.sn".dt/ol-onre.sn,fnto(olcin { 3jo(./aawrdcutisjo" ucincleto) sgslcAl"ah) v.eetl(pt" .aacleto.etrs dt(olcinfaue) .ne(.ped"ah) etr)apn(pt" .tr"" fnto(){rtr pt(iceci();} at(d, ucind eun ahcrl.lpd) ) .ped"il" apn(tte) .etfnto(){rtr dpoete.ae }; tx(ucind eun .rprisnm; ) }; ) fnto rfehdrto){ ucin ers(uain vrp=sgslcAl"ah) a v.eetl(pt"; i (uain p=ptasto(.uaindrto) f drto) .rniin)drto(uain; pat(d,fnto(){rtr pt(iceci();}; .tr"" ucind eun ahcrl.lpd) ) d.eet"lnsa" 3slc(#o pn) .etx.rgn)0) tx(yoii([]; d.eet"ltsa" 3slc(#a pn) .etx.rgn)1) tx(yoii([]; d.eet"saesa" 3slc(#cl pn) .etx.cl() tx(ysae); d.eet"tasaexsa" 3slc(#rnlt- pn) .etx.rnlt([]; tx(ytasae)0) d.eet"tasaeysa" 3slc(#rnlt- pn) .etx.rnlt([]; tx(ytasae)1) }
  • 12. 1.00.90.80.70.60.50.40.30.20.10.0 0. 0 0. 1 0. 2 0. 3 0. 4 0. 5 0. 6 0. 7 0. 8 0. 9 1. 0
  • 13. vrrno =d.admnra(5 .) a adm 3rno.oml., 1, dt =d.ag(0)mpfnto( {rtr [adm) rno(] }; aa 3rne80.a(ucin) eun rno(, adm); ) vrmri ={o:1,rgt 1,bto:2,lf:4} a agn tp 0 ih: 0 otm 0 et 0, wdh=90-mri.ih -mri.et it 6 agnrgt agnlf, hih =50-mri.o -mri.otm egt 0 agntp agnbto; vrx=d.cl.ier) a 3saelna( .ag(0 wdh) rne[, it]; vry=d.cl.ier) a 3saelna( .ag(hih,0) rne[egt ]; vrsg=d.eet"oy)apn(sg) a v 3slc(bd".ped"v" .tr"it" wdh+mri.ih +mri.et at(wdh, it agnrgt agnlf) .tr"egt,hih +mri.o +mri.otm at(hih" egt agntp agnbto) .ped"" apn(g) .tr"rnfr" "rnlt( +mri.et+""+mri.o +""; at(tasom, tasae" agnlf , agntp )) sgapn(g) v.ped"" .tr"ls" " ai" at(cas, x xs) .tr"rnfr" "rnlt(, +hih +"" at(tasom, tasae0" egt )) .ald.v.xs)saex.ret"otm); cl(3sgai(.cl()oin(bto") sgapn(g) v.ped"" .tr"ls" " ai" at(cas, y xs) .ald.v.xs)saey.ret"et); cl(3sgai(.cl()oin(lf") vrcrl =sgapn(g)slcAl"ice) a ice v.ped"".eetl(crl" .aadt) dt(aa .ne(.ped"ice) etr)apn(crl".tr"rnfr" fnto(){rtr "rnlt( +xd0)+""+yd1)+"" } at(tasom, ucind eun tasae" ([] , ([] ); ) .tr"" 35; at(r, .) sgapn(g) v.ped"" .tr"ls" "rs" at(cas, buh) .ald.v.rs(.()yy cl(3sgbuh)xx.() .n"rssat,buhtr) o(buhtr" rssat .n"rs" buhoe o(buh, rsmv) .n"rsed,buhn); o(buhn" rsed) fnto buhtr( { ucin rssat) sgcasd"eetn" tu) v.lse(slcig, re; } fnto buhoe){ ucin rsmv( vre=d.vn.agtetn(; a 3eettre.xet) crl.lse(slce" fnto(){ icecasd"eetd, ucind rtr e0[]< d0 & d0 < e1[] eun []0 = [] & [] = []0 & e0[]< d1 & d1 < e1[] & []1 = [] & [] = []1; }; ) } fnto buhn( { ucin rsed) sgcasd"eetn" !3eettre.mt() v.lse(slcig, d.vn.agtepy); }
  • 14. 1997 1996 1995 1994 1993
  • 15. vrmri ={o:1,rgt 2,bto:2,lf:1} a agn tp 9 ih: 0 otm 0 et 9, wdh=90-mri.ih -mri.et / wdh it 6 agnrgt agnlf, / it hih =16-mri.o -mri.otm / hih egt 3 agntp agnbto, / egt clSz =1;/ cl sz elie 7 / el ie vrdy=d.iefra(%", a a 3tm.omt"w) we =d.iefra(%", ek 3tm.omt"U) fra =d.iefra(%-m%"; omt 3tm.omt"Y%-d) vrclr=d.cl.unie) a oo 3saeqatl( .ag(3rne9.ees() rned.ag()rvre); vrsg=d.eet"cat)slcAl"v" a v 3slc(#hr".eetl(sg) .aad.ag(93 21) dt(3rne19, 01) .ne(.ped"v" etr)apn(sg) .tr"it" wdh+mri.ih +mri.et at(wdh, it agnrgt agnlf) .tr"egt,hih +mri.o +mri.otm at(hih" egt agntp agnbto) .tr"ls" "dln) at(cas, RYG" .ped"" apn(g).tr"rnfr" "rnlt( +(agnlf +(it -clSz *5)/2 +""+(agntp+(egt-clSz *7 /2 +""; at(tasom, tasae" mri.et wdh elie 3 ) , mri.o hih elie ) ) )) sgapn(tx" v.ped"et) .tr"rnfr" "rnlt(6"+clSz *35+"rtt(9)) at(tasom, tasae-, elie . )oae-0" .tr"etaco" "ide) at(tx-nhr, mdl" .etSrn) tx(tig; vrrc =sgslcAl"etdy) a et v.eetl(rc.a" .aafnto(){rtr d.iedy(e Dt(,0 1,nwDt( +1 0 1) } dt(ucind eun 3tm.asnw aed , ) e aed , , ); ) .ne(.ped"et) etr)apn(rc" .tr"ls" "a" at(cas, dy) .tr"it" clSz) at(wdh, elie .tr"egt,clSz) at(hih" elie .tr"" fnto(){rtr we()*clSz;} at(x, ucind eun ekd elie ) .tr"" fnto(){rtr dyd *clSz;} at(y, ucind eun a() elie ) .au(omt; dtmfra) rc.ped"il" etapn(tte) .etfnto(){rtr d }; tx(ucind eun ; ) sgslcAl"ahmnh) v.eetl(pt.ot" .aafnto(){rtr d.iemnh(e Dt(,0 1,nwDt( +1 0 1) } dt(ucind eun 3tm.otsnw aed , ) e aed , , ); ) .ne(.ped"ah) etr)apn(pt" .tr"ls" "ot" at(cas, mnh) .tr"" mnhah; at(d, otPt) d.s(vxcv,fnto(s){ 3cv"i.s" ucincv vrdt =d.et) a aa 3ns( .e(ucind {rtr dDt;} kyfnto() eun .ae ) .olpfnto(){rtr d0.pn } rlu(ucind eun []Oe; ) .a(s) mpcv; clrdmi(3vle(aa) oo.oand.ausdt); rc.itrfnto(){rtr di dt;} etfle(ucind eun n aa ) .tr"ls" fnto(){rtr "a q +clrdt[] +"9;} at(cas, ucind eun dy " oo(aad) -" ) .eet"il" slc(tte) .etfnto(){rtr d+" "+dt[] }; tx(ucind eun : aad; ) }; ) fnto mnhaht){ ucin otPt(0 vrt =nwDt(0gtuler) t.eMnh)+1 0, a 1 e aet.eFlYa(, 0gtot( , ) d =+a(0,w =+ekt) 0 dyt) 0 we(0, d =+a(1,w =+ekt) 1 dyt) 1 we(1; rtr ""+(0+1 *clSz +""+d *clSz eun M w ) elie , 0 elie +""+w *clSz +""+7*clSz H 0 elie V elie +""+w *clSz +""+(1+1 *clSz H 1 elie V d ) elie +""+(1+1 *clSz +""+0 H w ) elie V +""+(0+1 *clSz +"" H w ) elie Z; }
  • 16. analytics animate data display flexflare physics query scale util
  • 17. Canvas 2D se define un tag CANVAS html en el dom altamente ligado a JSmuchas primitivas similares a svg, pero con métodos más descriptivos (dibujar línea, rellenar, etc) otras funciones como aplicar matriz de transformación Dibujar imágenes existentes dentro del canvas Tratar el canvas como una imagen (por ej, recuperar el contenido dentro de un área)
  • 18. <AVShih=20x wdh"0p"i=cna1>/AVS CNA egt"0p" it=20x d"avs"<CNA>vrcna1=dcmn.eEeetyd"avs"; a avs ouetgtlmnBI(cna1) vrcxcna1gtotx(2"; a t=avs.eCnet"d) cxbgnah) t.eiPt(; cxmvT(01) t.oeo1,0; cxlnT(,9) t.ieo010; cxlnT(0,0) t.ieo2020; cxlnT(9,) t.ieo100; cxcoeah) t.lsPt(; cxsrkSye="f" t.toetl 00; cxsrk(; t.toe) cxflSye=f0; t.iltl "0" cxfl(; t.il)
  • 19. <AVShih=20x wdh"0p"sye"akrudwie i=cna1>/AVS CNA egt"0p" it=20x tl=bcgon:ht" d"avs"<CNA> vrcna2=dcmn.eEeetyd"avs"; a avs ouetgtlmnBI(cna2) vrcxcna2gtotx(2"; a t=avs.eCnet"d) vrig nwIae) a m= e mg(; igsc"mgso.n" m.r=iae/kpg; igola=ucin) m.nodfnto({ cxdaIaeig 1,1) t.rwmg(m, 0 0; };
  • 20. Principales métodos del contexto vi sv() od ae vi rsoe ) od etr( /Tasomcoe /rnfrains vi sae fotx foty od cl( la , la ) vi rtt(fotage od oae la nl) vi tasae fotx foty od rnlt( la , la ) vi tasomfotm1 fotm2fotm1 fotm2fotd,fotd) od rnfr(la 1, la 1,la 2, la 2,la x la yvi strnfr(la m1 fotm2fotm1 fotm2fotd,fotd) od eTasomfot 1, la 1,la 2, la 2,la x la y /Rcágls /etnuo vi ceretfotx foty fotw foth od laRc(la , la , la , la ) vi flRc(la x foty fotw foth od iletfot , la , la , la ) vi srkRc(la x foty fotw foth od toeetfot , la , la , la )
  • 21. Path (trazas) vi bgnah ) od eiPt( vi coeah ) od lsPt( vi fl() od il vi srk() od toe vi ci() od lp vi mvT(fotx foty od oeo la , la ) vi lnT(fotx foty od ieo la , la ) vi qartcuvT(la cx fotcyfotx foty) od udaiCreofot p, la p,la , la vi bzeCreofotc1,fotc1,la c2,fotc2,la x foty) od eiruvT(la px la pyfot px la pyfot , la vi acofotx,foty,la x,foty,fotrdu ) od rT(la 1 la 1fot 2 la 2 la aisvi acfotx foty fotrdu,la satnl,fotednl,ola atcokie) od r(la , la , la aisfot trAge la nAgeboen nilcws vi rc(fotx foty fotw foth od et la , la , la , la ) boeniPitnah fotx foty ola sonIPt( la , la )
  • 22. Manipulación a nivel de px IaeaacetIaeaa fots,fots) mgDt raemgDt( la w la h IaeaacetIaeaa Iaeaaiaeaa mgDt raemgDt( mgDt mgdt) IaeaagtmgDt(la s,fots,fots,fots) mgDt eIaeaafot x la y la w la hvi ptmgDt(mgDt iaeaafotd,fotd,Otoa]fotdry,fotdry,la dryit,fotdryegt od uIaeaaIaeaa mgdt,la x la y[pinl la itX la itYfot itWdh la itHih) /Iaeaaitraewdh /mgDt nefc it usge ln [edny nind og raol] hih usge ln [edny egt nind og raol] dt CnaPxlra [edny aa avsieAry raol] /CnaPxlra itrae /avsieAry nefc lnt usge ln [edny egh nind og raol]
  • 23. Canvas "3D"/WebGL Basado en OpenGL Accede directamente a GPUSintaxis poco familiar y conceptos específicos de cálculos de matrices orientados a transformaciones
  • 24. Conceptos
  • 25. Ejemplo de uso (MDN) <oyola=sat)> bd nod"tr(" <avsi=gcna"wdh"4"hih=40> cna d"lavs it=60 egt"8"Yu bosrdentapa t spotteHM5<avs eeet or rwe os per o upr h TL cna> lmn. <cna> /avs <bd> /oy
  • 26. Inicialización del contexto fnto sat){ ucin tr( vrcna =dcmn.eEeetyd"lavs) a avs ouetgtlmnBI(gcna"; iiWbLcna) nteG(avs; / Iiilz teG cnet / ntaie h L otx / Ol cniu i WbLi aalbeadwrig / ny otne f eG s vial n okn i (l { f g)g.laClr00 00 00 10;/ Stcerclrt bak flyoau lceroo(., ., ., .) / e la oo o lc, ul pqe g.nbeg.ET_ET; leal(lDPHTS) / Eal dphtsig / nbe et etn g.etFn(lLQA) ldphucg.EUL; / Na tig osuefrtig / er hns bcr a hns g.la(lCLRBFE_I|lDPHBFE_I) lcerg.OO_UFRBTg.ET_UFRBT; / Certeclra wl a tedphbfe. / la h oo s el s h et ufr } } fnto iiWbLcna){ ucin nteG(avs / Iiilz tegoa vral g t nl. / ntaie h lbl aibe l o ul g =nl; l ul ty{ r/ Tyt ga tesadr cnet I i fis flbc t eprmna. / r o rb h tnad otx. f t al, alak o xeietlg =cna.eCnet"eg" | cna.eCnet"xeietlwbl) l avsgtotx(wbl) | avsgtotx(eprmna-eg"; } cthe { ac() } / I w dnthv aG cnet gv u nw / f e o ae L otx, ie p o i (g){ f !l aet"nbet iiilz WbL Yu bosrmyntspoti.) lr(Ual o ntaie eG. or rwe a o upr t"; } }
  • 27. Shaders fnto iiSaes){ ucin nthdr( vrfamnSae =gthdrg,"hdrf"; a rgethdr eSae(l sae-s) vrvreSae =gthdrg,"hdrv"; a etxhdr eSae(l sae-s) / Cet tesae porm / rae h hdr rga vrsaePorm=g.raerga(; a hdrrga lcetPorm) g.tahhdrsaePorm vreSae) latcSae(hdrrga, etxhdr; g.tahhdrsaePorm famnSae) latcSae(hdrrga, rgethdr; g.ikrga(hdrrga) llnPormsaePorm; / I cetn tesae pormfie,aet / f raig h hdr rga ald lr i (g.ePormaaee(hdrrga,g.IKSAU) { f !lgtrgaPrmtrsaePorm lLN_TTS) aet"nbet iiilz tesae porm"; lr(Ual o ntaie h hdr rga.) } g.sPormsaePorm; luerga(hdrrga) vrePstoAtiue=g.eAtiLcto(hdrrga,"VrePsto"; etxoiintrbt lgttrboainsaePorm aetxoiin) g.nbeetxtrbra(etxoiintrbt) lealVreAtiAryvrePstoAtiue; }/Tegthdr)ruiefthsasae pormwt teseiidnm fo teDM rtrigtecmie sae pormt tecle,o nl i i cud b lae o cmie. /h eSae( otn ece hdr rga ih h pcfe ae rm h O, eunn h opld hdr rga o h alr r ul f t olnt e odd r opld fnto gthdrg,i){ ucin eSae(l d vrsaeSrp,teore crethl,sae; a hdrcit hSuc, urnCid hdr saeSrp =dcmn.eEeetydi) hdrcit ouetgtlmnBI(d; i (saeSrp){ f !hdrcit rtr nl; eun ul } teore="; hSuc " crethl =saeSrp.isCid urnCid hdrcitfrthl; wiecrethl){ hl(urnCid i (urnCidndTp = crethl.ETND){ f crethl.oeye = urnCidTX_OE teore+ crethl.etotn; hSuc = urnCidtxCnet } crethl =crethl.etiln; urnCid urnCidnxSbig } /Oc teeeetwt teseiidI i fud istx i ra it tevral teore /ne h lmn ih h pcfe D s on, t et s ed no h aibe hSuc i (hdrcittp = "-hdrxfamn" { f saeSrp.ye = xsae/-rget) sae =g.raehdrg.RGETSAE) hdr lcetSae(lFAMN_HDR; }es i (hdrcittp = "-hdrxvre" { le f saeSrp.ye = xsae/-etx) sae =g.raehdrg.ETXSAE) hdr lcetSae(lVRE_HDR; }es { le / Ukonsae tp / nnw hdr ye rtr nl; eun ul } g.hdroresae,teore; lsaeSuc(hdr hSuc) / Cmietesae porm / opl h hdr rga g.oplSae(hdr; lcmiehdrsae) / Sei i cmie scesul / e f t opld ucsfly i (g.eSaePrmtrsae,g.OPL_TTS){ f !lgthdraaee(hdr lCMIESAU) aet"nerrocre cmiigtesaes "+g.eSaeIfLgsae); lr(A ro curd opln h hdr: lgthdrnoo(hdr) rtr nl; eun ul } rtr sae; eun hdr }
  • 28. Definiendo los shaders (en el DOM) <citi=sae-s tp=xsae/-rget> srp d"hdrf" ye"-hdrxfamn" vi mi(od { od anvi) g_rgoo =vc(.,10 10 10; lFaClr e410 ., ., .) } <srp> /cit <citi=sae-s tp=xsae/-etx> srp d"hdrv" ye"-hdrxvre" atiuevc aetxoiin trbt e3 VrePsto; uiommt uVarx nfr a4 MMti; uiommt uMti; nfr a4 Parx vi mi(od { od anvi) g_oiin=uMti *uVarx*vc(VrePsto,10; lPsto Parx MMti e4aetxoiin .) } <srp> /cit
  • 29. Inicializando, creando un cuadrado y dibujando vrhrzset=400600 a oiApc 8./4.; fnto iiBfes){ ucin ntufr( surVrieBfe =g.raeufr) qaeetcsufr lcetBfe(; g.idufrg.RA_UFR surVrieBfe) lbnBfe(lARYBFE, qaeetcsufr; vrvrie =[ a etcs 10 10 00 ., ., ., -.,10 00 10 ., ., 10 -.,00 ., 10 ., -.,-.,00 10 10 . ]; g.ufraag.RA_UFR nwFot2ra(etcs,g.TTCDA) lbfeDt(lARYBFE, e la3Aryvrie) lSAI_RW; } fnto daSee){ ucin rwcn( g.la(lCLRBFE_I |g.ET_UFRBT; lcerg.OO_UFRBT lDPHBFE_I) prpciearx=mkPrpcie4,600400 01 100; esetvMti aeesetv(5 4./8., ., 0.) laIett(; oddniy) mTasae[00 00 -.]; vrnlt(-., ., 60) g.idufrg.RA_UFR surVrieBfe) lbnBfe(lARYBFE, qaeetcsufr; g.etxtrbone(etxoiintrbt,3 g.LA,fle 0 0; lvreAtiPitrvrePstoAtiue , lFOT as, , ) starxnfrs) eMtiUiom(; g.rwrasg.RAGESRP 0 4; ldaAry(lTINL_TI, , ) }
  • 30. Agregar un cubo al contexto vrvrie =[ a etcs / Fotfc / rn ae -.,-., 10 10 10 ., 10 -., 10 ., 10 ., 10 10 10 ., ., ., -., 10 10 10 ., ., / Bc fc / ak ae -.,-.,-., 10 10 10 -., 10 -., 10 ., 10 10 10 -., ., ., 10 10 -.,-., ., 10 10 / Tpfc / o ae -., 10 -., 10 ., 10 -., 10 10 10 ., ., 10 10 10 ., ., ., 10 10 -., ., ., 10 / Bto fc / otm ae -.,-.,-., 10 10 10 10 -.,-., ., 10 10 10 -., 10 ., 10 ., -.,-., 10 10 10 ., / Rgtfc / ih ae 10 -.,-., ., 10 10 10 10 -., ., ., 10 10 10 10 ., ., ., 10 -., 10 ., 10 ., / Lf fc / et ae -.,-.,-., 10 10 10 -.,-., 10 10 10 ., -., 10 10 10 ., ., -., 10 -. 10 ., 10 ]; vrclr =[ a oos [., 10 10 10, 10 ., ., .] / Fotfc:wie / rn ae ht [., 00 00 10, 10 ., ., .] / Bc fc:rd / ak ae e [., 10 00 10, 00 ., ., .] / Tpfc:gen / o ae re [., 00 10 10, 00 ., ., .] / Bto fc:bu / otm ae le [., 10 00 10, 10 ., ., .] / Rgtfc:ylo / ih ae elw [., 00 10 10 10 ., ., .] / Lf fc:prl / et ae upe ]; vrgnrtdoos=[; a eeaeClr ] fr(=;j6 j+ { o j0 <; +) vrc=clr[] a oosj; fr(a i0 i4 i+ { o vr =; <; +) gnrtdoos=gnrtdooscna() eeaeClr eeaeClr.octc; } } cbVrieClrufr=g.raeufr) ueetcsooBfe lcetBfe(; g.idufrg.RA_UFR cbVrieClrufr; lbnBfe(lARYBFE, ueetcsooBfe)g.ufraag.RA_UFR nwFot2ra(eeaeClr) g.TTCDA) lbfeDt(lARYBFE, e la3Arygnrtdoos, lSAI_RW; /Oc tevre ary aegnrtd w ne t bidteeeetary /ne h etx ras r eeae, e ed o ul h lmn ra. cbVrieIdxufr=g.raeufr) ueetcsneBfe lcetBfe(; g.idufrg.LMN_RA_UFR cbVrieIdxufr; lbnBfe(lEEETARYBFE, ueetcsneBfe) / Ti arydfnsec fc a totinls uigte / hs ra eie ah ae s w rage, sn h / idcsit tevre aryt seiyec tinl / nie no h etx ra o pcf ah rages / psto. / oiin vrcbVreIdcs=[ a ueetxnie 0 1 2 , , , 0 2 3 , , , / fot / rn 4 5 6 , , , 4 6 7 , , , / bc / ak
  • 31. 8 9 1, , , 0 8 1,1, / tp , 0 1 / o 1,1,1, 2 3 4 1,1,1, / bto 2 4 5 / otm 1,1,1, 6 7 8 1,1,1, / rgt 6 8 9 / ih 2,2,2, 0 1 2 2,2,2 0 2 3 / lf / et ] / Nwsn teeeetaryt G / o ed h lmn ra o L g.ufraag.LMN_RA_UFR lbfeDt(lEEETARYBFE, nwUn1ArycbVreIdcs,g.TTCDA) e it6ra(ueetxnie) lSAI_RW; fnto daSee){ ucin rwcn( / Certecna bfr w satdaigo i. / la h avs eoe e tr rwn n t g.la(lCLRBFE_I |g.ET_UFRBT; lcerg.OO_UFRBT lDPHBFE_I) / Etbihteprpciewt wihw wn t ve te / sals h esetv ih hc e at o iw h / see Orfedo ve i 4 dges wt awdhhih / cn. u il f iw s 5 ere, ih it/egt / rtoo 6040 adw ol wn t seojcsbten01uis / ai f 4:8, n e ny at o e bet ewe . nt / ad10uisaa fo tecmr. / n 0 nt wy rm h aea prpciearx=mkPrpcie4,600400 01 100; esetvMti aeesetv(5 4./8., ., 0.) / Sttedaigpsto t te"dniy pit wihi / e h rwn oiin o h iett" on, hc s / tecne o tesee / h etr f h cn. laIett(; oddniy) / Nwmv tedaigpsto abtt weew wn t sat / o oe h rwn oiin i o hr e at o tr / daigtecb. / rwn h ue mTasae[00 00 -.]; vrnlt(-., ., 60) / Sv tecretmti,te rtt bfr w da. / ae h urn arx hn oae eoe e rw mPsMti(; vuharx) mRtt(ueoain [,1 1) voaecbRtto, 1 , ]; mTasae[ueOfe,cbYfst cbZfst) vrnlt(cbXfst ueOfe, ueOfe]; / Da tecb b bnigtearybfe t tecb vrie / rw h ue y idn h ra ufr o h ues etcs / ary stigatiue,adpsigi t G. / ra, etn trbts n uhn t o L g.idufrg.RA_UFR cbVrieBfe) lbnBfe(lARYBFE, ueetcsufr;g.etxtrbone(etxoiintrbt,3 g.LA,fle 0 0; lvreAtiPitrvrePstoAtiue , lFOT as, , ) / Stteclr atiuefrtevrie. / e h oos trbt o h etcs g.idufrg.RA_UFR cbVrieClrufr; lbnBfe(lARYBFE, ueetcsooBfe)g.etxtrbone(etxooAtiue 4 g.LA,fle 0 0; lvreAtiPitrvreClrtrbt, , lFOT as, , ) / Da tecb. / rw h ue g.idufrg.LMN_RA_UFR cbVrieIdxufr; lbnBfe(lEEETARYBFE, ueetcsneBfe) starxnfrs) eMtiUiom(; g.rwlmnsg.RAGE,3,g.NINDSOT 0; ldaEeet(lTINLS 6 lUSGE_HR, ) / Rsoeteoiia mti / etr h rgnl arx mPparx) voMti(; / Udt tertto frtenx da,i i tm t d s. / pae h oain o h et rw f ts ie o o o vrcretie=(e Dt)gtie) a urnTm nw ae.eTm(; i (atuepaeie { f lsCbUdtTm) vrdla=cretie-lsCbUdtTm; a et urnTm atuepaeie cbRtto + (0*dla /10.; ueoain = 3 et) 000 /cbXfst+ xnVle*(3 *dla /10.) /ueOfe = Icau (0 et) 000; /cbYfst+ ynVle*(3 *dla /10.) /ueOfe = Icau (0 et) 000; /cbZfst+ znVle*(3 *dla /10.) /ueOfe = Icau (0 et) 000; /i (ahascbYfst >25 { *f Mt.b(ueOfe) .) xnVle=-Icau; Icau xnVle ynVle=-Icau; Icau ynVle znVle=-Icau; Icau znVle }/ * } lsCbUdtTm =cretie atuepaeie urnTm; }
  • 32. Frameworks que hacen uso de Canvas Three.js PhiloGL GLGE
  • 33. Three.js genera sencillamente contextos de 2d y webgl los usa transparentemente, son intercambiablesexplicita conceptos ímplícitos en webGL propios del modelado en 3D (render, cámara, escena,iluminación, etc)
  • 34. vrrne; a edr vrcnaWdh=50 a avsit 0; vrcnaHih =50 a avsegt 0; rne =nwTREWbLedrr) / tminspraCnaRnee( yDmedrr) edr e HE.eGRnee(; / abé oot avsedrr) oRnee( rne.eCerooHx0000,1; edrstlaClre(x000 ) rne.eSz(avsit,cnaHih) edrstiecnaWdh avsegt;/ l cmr d l ecn.L hmspet e FVa4 º e rtod apcoqeteee cna dnes dbjr e rne,ytminl dcmsqen s dbjnlsojtsqeetnamnsd 01oamsd 1 / a áaa e a sea e eo uso l O 5 , l ai e set u in l avs od e iuaá l edr abé e eio u o e iue o beo u sá eo e . á e vrcmr; a aaa cmr =nwTREPrpcieaea4,cnaWdh/cnaHih,01 10; aaa e HE.esetvCmr(5 avsit avsegt ., 0) ecn.d(aaa; seaadcmr) cmr.oiinst0 0 0; aaapsto.e(, , ) cmr.oktecn.oiin; aaaloA(seapsto) /Dfned u mtra pr ojtsaargral ecn /eiino n aeil aa beo gea a sea vrmtra =nwTREMsBscaeil{ a aeil e HE.ehaiMtra( clr0FFF, oo:xFFF sd:HE.obeie /e si e vsbedsecaqirágl ieTREDulSd /l kn s iil ed ulue nuo }; ) /Dfned goerad u ojt /eiino emti e n beo vrcardGoera=nwTREGoer(; a udaoemti e HE.emty) cardGoeravrie.uhnwTREVco3-., 10 00) udaoemti.etcsps(e HE.etr(10 ., .); cardGoeravrie.uhnwTREVco3 10 10 00) udaoemti.etcsps(e HE.etr( ., ., .); cardGoeravrie.uhnwTREVco3 10 -.,00) udaoemti.etcsps(e HE.etr( ., 10 .); cardGoeravrie.uhnwTREVco3-.,-.,00) udaoemti.etcsps(e HE.etr(10 10 .); cardGoerafcsps(e TREFc40 1 2 3) udaoemti.ae.uhnw HE.ae(, , , ); card.oiinst15 00 -.) udaopsto.e(., ., 70; ecn.d(udao; seaadcard) rne.edrecn,cmr) edrrne(sea aaa;
  • 35. Ejemplo del cubo con three vrcnanr a otie; vrcmr,see rnee; a aea cn, edrr vrcb,pae a ue ln; vrcbRtto =0 a ueoain ; vrwnoHlX=wno.neWdh/2 a idwaf idwinrit ; vrwnoHlY=wno.neHih /2 a idwaf idwinregt ; ii(; nt) aiae) nmt(; fnto ii( { ucin nt) cnanr=dcmn.raelmn(i) otie ouetcetEeet dv ; dcmn.oyapnCid cnanr) ouetbd.pedhl( otie ;cmr =nwTREPrpcieaea 7,wno.neWdh/wno.neHih,1 10 ) aea e HE.esetvCmr( 0 idwinrit idwinregt , 00 ; cmr.oiiny=10 aeapsto. 5; cmr.oiinz=50 aeapsto. 0; see=nwTRESee) cn e HE.cn(; / Cb / ue vrgoer =nwTRECbGoer(20 20 20) a emty e HE.ueemty 0, 0, 0 ; goer.ae[0]clrste(0fff ) emtyfcs .oo.eHx xfff ; goer.ae[1]clrste(0f00 ) emtyfcs .oo.eHx xf00 ; goer.ae[2]clrste(00f0 ) emtyfcs .oo.eHx x0f0 ; goer.ae[3]clrste(000f ) emtyfcs .oo.eHx x00f ; goer.ae[4]clrste(0ff0 ) emtyfcs .oo.eHx xff0 ; goer.ae[5]clrste(0f0f ) emtyfcs .oo.eHx xf0f ; vrmtra =nwTREMsBscaeil {vreClr:TREFcClr }) a aeil e HE.ehaiMtra( etxoos HE.aeoos ; cb =nwTREMs(goer,mtra ) ue e HE.eh emty aeil ; cb.oiiny=10 uepsto. 5; seead cb ) cn.d( ue ; rnee =nwTRECnaRnee(; edrr e HE.avsedrr) rnee.eSz(wno.neWdh wno.neHih ) edrrstie idwinrit, idwinregt ; cnanrapnCid rnee.oEeet) otie.pedhl( edrrdmlmn ; } fnto aiae){ ucin nmt( rqetnmtoFae aiae) eusAiainrm( nmt ; rne(; edr) } fnto rne( { ucin edr) cbRtto =1 /10.; ueoain 5 000 cb.oainy+ cbRtto; uertto. = ueoain cb.oainx+ cbRtto; uertto. = ueoain cb.oainz+ cbRtto; uertto. = ueoain rnee.edr see cmr ) edrrrne( cn, aea ; }
  • 36. Frameworks varios Google Charts js-sequence-diagramsTeeChart (versión para html5) MathBox.js
  • 37. TeeChartUse WebGL ™ Drag mouse and wheel to rotate, pan and zoom.
  • 38. vrtre Cat; a he, hr1 fnto da( { ucin rw) / Cet 3 WbLcnet / rae D eG otx: tre =nwTeTre"avs"; he e e.he(cna1) /Eape saos /xml, hdw: tresthwhdw(re; he.eSoSaostu) / Cet Cat / rae hr: Cat =nwTeCattre; hr1 e e.hr(he) / AdBrsre t Cat / d a eis o hr:Cat.dSre(e TeBr[,,,,],[Oe,"w" "he" "or,"ie ] ) hr1adeisnw e.a(53271 "n" To, Tre, Fu" Fv" ) ; Cat.il.et"eCatfrWbL(m" hr1ttetx=Tehr o eG t); Cat.otrtx=Md wt Trej" hr1foe.et"ae ih he.s; Cat.al.aksz=.; hr1wlsbc.ie02 Cat.al.etsz=0 hr1wlslf.ie1; Cat.al.otmsz=0 hr1wlsbto.ie1; Cat.al.akfra.rnprny02 hr1wlsbc.omttasaec=.; / VldwbL? / ai eG i (he.snbe(){ f treiEald) Cat.rw) hr1da(; aiae) nmt(; } es le { / So msae(eG ntaalbe : / hw esg WbL o vial) Dtco.dGteGMsae) eetradeWbLesg(; / DsbeWbLadueHM52 Cna: / ial eG n s TL D avs trestnbe(as,Cat) he.eEaldfle hr1; } / Lo / op fnto aiae){ ucin nmt( treudt(; he.pae) rqetnmtoFae aiae) eusAiainrm( nmt ; } }
  • 39. Map: World Africa Asia Australia Europe 27 Europe South America USA States Walls Axes Borders Geo Location Cities Use WebGL™ FloorDepth: Enable VariableTime: 742
  • 40. CatSye hr tl: Eal Trej WbL nbe he.s eG™ Ae ra Br a Lgt: ihs Bbl ube Abet min Cnl ade Lgt0 ih Dnt ou Lgt1 ih Hrz Br oi. a Lgt2 ih Ln ie GoMp e a Cmr: aea Pe i Prpcie esetv PitX on Y FV O: Plr oa Tx 3: et D Srae ufc So For hw loSo: hw MueTakal os rcBl Ae xs Gis rd Wrfae ierm Foe otr So Lgt hw ihs Lgn eed Saos hdw Tte il Full Screen Wls al So Sas hw tt FPS Sre 1 eis Sre 2 eisOtos pin: Mrs akS y e Cylinder tl:S a k d No tce:
  • 41. MathBox
  • 42. /* * *Bosrp otta */ Dmed.ed(ucin){ oRayrayfnto( Treo.rla( heBxpeod[ .saessipt.llhm ./hdr/npesgs.tl, ] fnto ( { , ucin ) / MtBxbiepae / aho olrlt vrmtbx=wno.aho =mtBx{ a aho idwmtbx aho( cmrCnrl:tu, aeaotos re cro: usr tu, re cnrlls: Treo.riCnrl, otoCas heBxObtotos eeeteie tu, lmnRsz: re flsre: ulcen tu, re sreso: cenht tu, re sas tt: fle as, sae cl: 1, }.tr(; )sat) / Vepr cmr/eu / iwot aeastp mtbx aho / Plrvepr / oa iwot .iwot{ vepr( tp:oa ye plr, rne [-,π,[3 6,[1 1] ag: [π ] -, ] -, ], sae [,1 1, cl: 1 , ] plr 0 oa: , }) .aea{ cmr( obt 4 ri: , pi τ4., h: /-8 tea 11 ht: ., }) .rniin30 tasto(0) / Sraefnto / ufc ucin .ufc( srae{ sae:tu, hdd re dmi:[-,π,[1 1] oan [π ] -, ], n [8 3] : 4, 2, epeso:sraeuc xrsin ufcFn, }) / Aiaevepr btenplradcrein / nmt iwot ewe oa n atsa mtbxwrd)lo(.okrRne(ucin( { aho.ol(.op)hoPeedrfnto ) vrt=+e Dt( *.03 a nw ae) 00;mtbxstiwot,{plr Mt.i()*. +. }; aho.e(vepr oa: ahsnt 5 5 ) }; ) }; ) }; ) / Abtayfnto (ucinisl) / rirr ucin fnto tef fnto sraeucx y { ucin ufcFn(, )rtr [,4+- +Mt.o(*)+Mt.o(*) y; eun x 1 ahcsx2 ahcsy5, ] }
  • 43. 21.5 10.5 0–0.5 –1 –1.5 1 –2 0.5 3 2 0 1 0 –1 –0.5 –2 –3
  • 44. /* * *Bosrp otta */ Dmed.ed(ucin){ oRayrayfnto( Treo.rla( heBxpeod[ .saessipt.llhm ./hdr/npesgs.tl, ] fnto ( { , ucin ) / MtBxbiepae / aho olrltvrmtbx=wno.aho =mtBx{ a aho idwmtbx aho( cmrCnrl:tu, aeaotos re cro: usr tu, re cnrlls: Treo.riCnrl, otoCas heBxObtotos eeeteie tu, lmnRsz: re flsre: ulcen tu, re sreso: cenht tu, re sas tt: fle as, sae cl: 1, }.tr(; )sat) / Vepr cmr/eu / iwot aeastp mtbx aho / Creinvepr / atsa iwot .iwot{ vepr( tp:atsa ye crein, rne [-,3,[2 2,[1 1] ag: [3 ] -, ] -, ], sae [,1 1, cl: 1 , ] }) .aea{ cmr( obt 35 ri: ., pi τ6 h: /, tea 03 ht: ., }) .rniin30 tasto(0) / Ae / xs .xs{ ai( i: d a, ai:0 xs , clr 0aaa, oo: x000 tcs 5 ik: , lnWdh 2 ieit: , sz:.5 ie 0, lbl:tu, aes re }) .xs{ ai( i: d b, ai:1 xs , clr 0aaa, oo: x000 tcs 5 ik: , lnWdh 2 ieit: , sz:.5 ie 0, zr:fle eo as, lbl:tu, aes re }) .xs{ ai( i: d c, ai:2 xs , clr 0aaa, oo: x000 tcs 5 ik: , lnWdh 2 ieit: , sz:.5 ie 0, zr:fle eo as, lbl:tu, aes re }) / Gi / rd .rd{ gi( ai:[,2, xs 0 ] clr 0ccc, oo: x000 lnWdh 1 ieit: , })
  • 45. / Mv ai / oe xs stieu(ucin( { eTmotfnto ) mtbxstc,{zr:tu }; aho.e(# eo re ) mtbxaiaea,{ aho.nmt(# ofe:[,0 -] fst 0 , 1, } {drto:10 }; , uain 50 ) mtbxaiaeb,{ aho.nmt(# ofe:[3 0 -] fst -, , 1, } {drto:10 }; , uain 50 ) mtbxaiaec,{ aho.nmt(# ofe:[3 0 0, fst -, , ] } {drto:10 }; , uain 50 ) } 30) , 00; / Mv ai +gi / oe xs rd stieu(ucin( { eTmotfnto ) mtbxstb,{lbl:fle arw fle}; aho.e(# aes as, ro: as ) mtbxai( aho.xs{ i: d d, ai:1 xs , ofe:[,0 -] fst 3 , 1, tcs 5 ik: , lnWdh 2 ieit: , clr 0aaa, oo: x000 lbl:tu, aes re arw fle ro: as, }; ) mtbxai( aho.xs{ i: d e, ai:1 xs , ofe:[3 0 1, fst -, , ] tcs 5 ik: , lnWdh 2 ieit: , arw fle ro: as, clr 0aaa, oo: x000 }; ) mtbxai( aho.xs{ i: d f, ai:1 xs , ofe:[,0 1, fst 3 , ] tcs 5 ik: , lnWdh 2 ieit: , arw fle ro: as, clr 0aaa, oo: x000 }; ) mtbxaiaerd,{ aho.nmt(gi ofe:[,-,0, fst 0 2 ] } {drto:10 }; , uain 50 ) mtbxgi( aho.rd{ ai:[,2, xs 0 ] tcs [,1, ik: 2 ] ofe:[,2 0, fst 0 , ] clr 0ccc, oo: x000 lnWdh 1 ieit: , }; )mtbxaiaeaea,{obt 7 pi τ58+. } {drto:20 }; aho.nmt(cmr ri: , h: */ 2 , uain 50 ) mtbxaiaea,{ aho.nmt(# ofe:[,-,-] fst 0 2 1, } {drto:10 }; , uain 50 ) mtbxaiaec,{ aho.nmt(# ofe:[3 -,0, fst -, 2 ] } {drto:10 }; , uain 50 ) mtbxvco( aho.etr{ n 2 : , dt:[0 0 0,[,1 1,[1 -,-] [,1 .], aa [, , ] 1 , ] -, 1 1, 0 , 5] }; ) } 60) , 00; }; ) }; )
  • 46. Preguntas?facundo.a.ferrero@accenture.com @facundo_ferrero

×