versión interactiva en:
http://facundoferrero.com.ar/presentacion/Visualizaciones JS
fuentes de la presentacion en:
https://github.com/FerreroFacundo/presentacion
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. SVG
Soportado por todos los navegadores principales
Bastante intuitivo para gráficas básicas
Poco amigable para manipulación de código
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
0
2000 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;
19. Canvas 2D
se define un tag CANVAS html en el dom
altamente ligado a JS
muchas 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)
21. <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;
};
22. 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 y
vi 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 )
23. 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 ais
vi 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 )
24. 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 h
vi 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]
25. Canvas "3D"/WebGL
Basado en OpenGL
Accede directamente a GPU
Sintaxis poco familiar y conceptos específicos de cálculos de matrices orientados a transformaciones
28. 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
29. 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 xeietl
g =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";
}
}
30. 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
}
31.
32. 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
35. 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
36. 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;
}
40. Three.js
genera sencillamente contextos de 2d y webgl
los usa transparentemente, son intercambiables
explicita conceptos ímplícitos en webGL propios del modelado en 3D (render, cámara, escena,iluminación, etc)
41. 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;
48. 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 ;
}
}
49. Map:
World
Africa
Asia
Australia
Europe 27
Europe
South America
USA States
Walls
Axes
Borders
Geo Location
Cities
Use WebGL™
Floor
Depth:
Enable
Variable
Time: 742
50. 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 lo
So:
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
eis
Otos
pin:
Mrs
ak
S y e Cylinder
tl:
S a k d No
tce: