80211ac Wifi for Dummies

8/17/2019 80211ac Wifi for Dummies

1/85

Livre blanc

#HTML5 #CANVAS

.COMMENT CREER

UN MOTEUR D’AFFICHAGE 2D

EN HTML5

Nicolas LEGRAND, formateur MEDIAB!"

ublication collaborative $ur %oo&le'

Si vou$ $ou(aite) nou$ faire *art +une am-lioration ou collaborer . la r-+action +e cet o*enboo/,

utili$e) la fonction 0Comment$1 +i$*onible en (aut . +roite +e cette fen2tre"

1

http://www.mediabox.fr/formations-html-css.htmlhttps://docs.google.com/document/d/1Ye1Ow72rHtskR3Lf_FdOPl4MsqWAl-rEsnt0K3QO05M/edithttps://docs.google.com/document/d/1Ye1Ow72rHtskR3Lf_FdOPl4MsqWAl-rEsnt0K3QO05M/edithttp://www.mediabox.fr/formations-html-css.html


2/85

SOMMAIRE

3 Petit rappel

4ava$cri*t Ecma$cri*t

HTML5 et canva$

3 Dessiner avec canvas

6ic(ier +e ba$eCr-er un canva$De$$iner +e$ *rimitive$ 7li&ne$, cercle$, carr-$8Al*(a, $cale, rotation et tran$lationCumul +e$ tran$formation$, $auve&ar+e et re$tauration

+u conte9te"

3 Dessiner une image

C(ar&er une ima&e 7ou te9ture8De$$iner une te9ture"M-t(o+e$ +e +e$$in avanc-e$"De$$iner . traver$ un ma$:ue"

3 Structure de base du moteur 2D

La en 4ava$cri*t, le *rotot;*a&eH-rita&e et or+re + A$$et$Loa+er et A$$et$Mana&er?e&rou*er toute$ le$ te9ture$ en une $eule, la cla$$e

Te9tureAtla$

3 Les bases de l'afchage

Structure arbore$cente et Di$*la;Li$tLe *oint +e +-*art > La cla$$e Di$*la;b@ectEnn +e$ te9ture$ > La cla$$e Bitma*b@et$ imbri:u-$ > La cla$$e Di$*la;b@ectContainer?acine +e la Di$*la;Li$t > cla$$e Sta&e

3 anipuler les ob!ets "

trans#ormations $ calculs

matricielsLe *robl=me +e$ tran$formation$ imbri:u-e$"Le$ matrice$, *our:uoi faire Comment utili$er le$ matrice$ Combiner le$ tran$formation$ +


3/85

?a*i+e Hi$tori:ue

avascript $ cmascript

JavaScript 7abr-&- 4S8 e$t un lan&a&e +e *ro&rammation +e $cri*t$

*rinci*alement utili$- +an$ le$ *a&e$ eb interactive$ mai$ au$$i ct-

$erveurF" C


4/85

*ro&rammeur +e r-ali$er +u contenu interactif +e t;*e @eu vi+-o, c(at ebcam,

mani*ulation +e vi+-o, conne9ion . un $erveur +e $oc/et$ etc""" 4u$:u


5/85

De$$iner avec canva$

-ichier de base

Nou$ allon$ commencer *ar cr-er un c(ier +e ba$e *our notre a**lication $ur la ba$e +u mo+=le $uivant >

-ichier inde.html

WDCTXE (tmlY

(tml lan&ZenY(ea+Y

meta c(ar$etZutfGY

titleYUtitleY

$cri*t t;*eZte9tU@ava$cri*t $rcZ$am*le"@$YU$cri*tY

$t;le t;*eZte9tUc$$Y

canva$

bor+er> J*9 $oli+ blac/[

bac/&roun+Gcolor> blac/[

\

U$t;leY

U(ea+Y

bo+;YWGG La bali$e canva$ :ue nou$ utili$eron$ +an$ le c(ier $am*le"@$GGY

canva$ i+Ztoma(a/ i+t(Z1OO1 (ei&(tZ1OO1YUcanva$Y

Ubo+;Y

U(tmlY

-ichier sample.!s

U] oint +


6/85

Le c(ier in+e9"(tml e$t un c(ier (tml5 $im*le, le$ $eul$ -lement$ notable$ $ont>

` L


7/85

return &etCanva$78"&etConte9t7J+8[

\

Voil., . *r-$ent nou$ avon$ tout le$ outil$ n-c-$$aire$ *our *ouvoir +e$$iner +an$ notre canva$"

7


8/85

Dessiner des primitives ( lignes0 cercles0 carrés... )

HTML5 embar:ue toute une AI +-+i-e au +e$$in, ce :ui *ermet au9 +-velo**eur$ +e cr-er +u

contenu J+ $an$ avoir $;$t-mati:uement recour$ . +e$ ima&e$" A l


9/85

u et 3: re*r-$entent le$ coor+onn-e$ +u centre +e mon arc, radius le ra;on 7 en *i9el$ 8 +e mon arc,

start8ngle et end8ngle le$ an&le$ +e +-*art et +


10/85

conte9t"llSt;le Z blue[

conte9t"ll?ect7 JO, JO, FOO, FOO 8[

conte9t"ll78[

conte9t"be&inat(78[

conte9t"llSt;le Z &reen[

conte9t"moveTo7FOO,FOO8[

conte9t"arc7FOO, FOO, 5O, $tartAn&le, en+An&le, fal$e8[

conte9t"lineTo7FOO,FOO8[

conte9t"ll78[

Maintenant :ue nou$ $avon$ comment +e$$iner +e$ *rimitive$, nou$ allon$ a**ren+re . le$ tran$former,

com*ren+re *ar l. :ue nou$ allon$ c(an&er leur a**li:uer un c(an&ement +

UU *our +-nir la tran$*arence . 5O

conte9t"global8lpha 4 O"5[

La valeur +e la *ro*ri-t- global8lpha +u conte9te $e $itue tou@our$ entre O et F, $i, comme +an$ l


11/85

conte9t"be&inat(78[

conte9t"llSt;le Z &reen[

conte9t"arc7FOO, FOO, 5O, $tartAn&le, en+An&le, fal$e8[

conte9t"ll78[

n a*erRoit bien le carr- en tran$*arence +erri=re le cercle, e$$a;e) +e @ouer un *eu avec le$ valeur$ +e l


12/85

emple"

var conte9t Z &etConte9t78[

conte9t"tran$late7 dQ, QJ 8[

conte9t"$cale7 J, J 8[

conte9t"be&inat(78[

conte9t"llSt;le Z re+[

conte9t"ll?ect7 O, O, FOO, FOO 8[

conte9t"ll78[

Ain$i, nou$ obtenon$ , carr' !% 0&& pi1%ls +e ct-$ mai$ +ont l-'c)%ll% %st !% 2, an$i vi$uellement, @


13/85



conte9t"rotate7 KQ ] to?a+ian$ 8[

conte9t"be&inat(78[



conte9t"ll78[

Note) :ue toute$ le$ rotation$ $


UU ici on a**li:ue une tran$lation AVANT le $cale



conte9t"be&inat(78[conte9t"llSt;le Z re+[


conte9t"ll78[


UU ici on a**li:ue une tran$lation A?ES le $cale



conte9t"be&inat(78[



conte9t"ll78[

n *eut voir :ue le r-$ultat obtenu . l


14/85

l


15/85

conte9t"rotate7 O ] 7 Mat("I U FO 8 8[

conte9t"be&inat(78[

conte9t"llSt;le Z &reenconte9t"ll?ect7 O, O, FOO, FOO 8[

conte9t"ll78[

conte9t"re$tore78[ UU re$taure la J=me $auve&ar+e

conte9t"be&inat(78[

conte9t"llSt;le Z blue

conte9t"ll?ect7 O, O, 5O, 5O 8[

conte9t"ll78[

conte9t"re$tore78[ UU re$taure la F=re $auve&ar+e

conte9t"be&inat(78[

conte9t"llSt;le Z *ur*le


conte9t"ll78[

Voil., le$ ba$e$ +e$ tran$formation$ et +u +e$$in avec canva$ $ont *o$-e$, nou$ venon$ +e clotPrer ce *remier

c(a*itre"

15


16/85

Dessiner une image

Nou$ allon$ maintenant *a$$er au +e$$in +

in+e9"(tml

WDCTXE (tmlY

(tml lan&ZenY

(ea+Y

meta c(ar$etZutfGY

titleYUtitleY

$cri*t t;*eZte9tU@ava$cri*t $rcZ$am*le"@$YU$cri*tY

$t;le t;*eZte9tUc$$Y

canva$

^



\

U$t;leY

U(ea+Ybo+;Y

canva$ i+Ztoma(a/ i+t(ZOO (ei&(tZOOYUcanva$Y

im& $rcZ*er$oF"*n& i+Z*er$oFUY

Ubo+;Y

U(tmlY

$am*le"@$

U]

] ?etourne une r-f-rence . l


17/85

return +ocument"&etElementB;I+7toma(a/8[

\

U]

] ?etourne le conte9te +


18/85

` M't)o!%s !% !%ssi avac'%s

A l


19/85

conte9t"$ave78[ UU $auve&ar+e F

conte9t"+raIma&e7te9ture,JO,O,FOO,FOO,O,O,JOO,JOO8[

conte9t"re$tore78[

\

Ici, on +e$$ine uni:uement ,% portio +e l


20/85

` D%ssi%r trav%rs , +as (tt*>UU"(tml5canva$tutorial$"comUa+vance+U(tml5Gcanva$G&lobalGcom*o$iteGo*eration$G

tutorialU 8

Comment inter*r-ter ce &ra*(i:ue

En *remier lieu il faut :ue @e vou$ +onne le co+e $ource :ui va avec>

conte9t"be&inat(78[

conte9t"llSt;le Z blue[

conte9t"ll?ect7O,O,55,558[

conte9t"ll78[

conte9t"&lobalCom*o$ite*eration Z $ourceGin[

20

http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/


21/85

conte9t"be&inat(78[


conte9t"arc75O,5O,K5,O,J ] Mat("I,fal$e8[

conte9t"ll78[

Il $


22/85

Structure de base du moteur` La ?OO % Javascript7 l% protot=pa$%

Le 4avaScri*t e$t un lan&a&e orient- ob@et *ar *rotot;*e, il ne +onne +onc *a$ la *o$$ibilit- +e cr-er ce :ue l


23/85


24/85

return null[

\[

Toma(a/" in(erit$ Z function7 ob@ 8

^ var c(il+ Z null[

var ance$tor Z null[

var $u*erarent Z Toma(a/" &etarentCla$$7ob@ance$tor8[

if 7 $u*erarent WZ null 8

Toma(a/" in(erit$7$u*erarent8[

c(il+ Z Toma(a/" cla$$e$ob@c(il+[

ance$tor Z Toma(a/" cla$$e$ob@ance$tor[

if 7 c(il+ WZ null ance$tor WZ null 8

^

ance$tor Z ne ance$tor78[

for7 var *ro* in ance$tor 8

^

if 7 Wc(il+"*rotot;*e*ro* 8

^

c(il+"*rotot;*e*ro* Z ance$tor*ro*[

\

\

\

\[

Et enn, il nou$ faut une m-t(o+e *our +-marrer tout Ra >

Toma(a/"run Z function78

^

var ob@ Z null[

var i Z O[

var ma9 Z Toma(a/" e9ten+$"len&t([

for 7i Z O[ i ma9[ i'' 8

^

Toma(a/" in(erit$7 Toma(a/" e9ten+$i 8[

\

\

` L%s Na+%spac%s

24


25/85

Dan$ le +omaine +e la *ro&rammation orient-e ob@et un a+%spac% e$t comme $on nom li%7 ce :ui fait :ue la *remi=re librairie $era en *artie inutili$able"

?o,r r'so,!r% c% pro3l8+%7 o ,tilis% l%s a+%spac%s, le *robl=me c


26/85

26


27/85

Gestion des médias ( ou assets )

Fote "

Précédemment0 nous avons convenu Hue nous utiliserions le mot teture pour désigner une image0 car cela

correspond I un vocabulaire tr%s utilisé dans le !eu vidéo. Pour les besoins de ce chapitre0 nous allons coder une

classe nommée +eture dont l'une des propriétés sera une image.

Par soucis de clarté nous allons donc réutiliser le mot image pour parler d'une image0 le mot teture désignera

dorénavant un ob!et de t3pe +eture.

` Itro!,ctio a,1 sprit%s)%%ts

Nou$ commenReron$ ce c(a*itre avec une intro+uction . la notion +e sprit%s)%%t"

U% sprit%s)%%t %st ,% i+a$%


28/85

c)i%rs, cela lui +eman+e . c(a:ue foi$ un tem*$ +


29/85


30/85

sampleC.html

WDCTXE (tmlY

(tml lan&ZenY

(ea+Y

meta c(ar$etZutfGY

meta nameZvie*ort contentZi+t(Z+eviceGi+t(, initialG$caleZF"O, u$erG

$calableZOYtitleYUtitleY

$cri*t t;*eZte9tU@ava$cri*t $rcZtoma(a/UToma(a/"@$YU$cri*tY

$cri*t t;*eZte9tU@ava$cri*t $rcZtoma(a/Uutil$UA$$et$Loa+er"@$YU$cri*tY

$cri*t t;*eZte9tU@ava$cri*t $rcZ$am*leF"@$YU$cri*tY

$t;le t;*eZte9tY

canva$

^



\

U$t;leY

U(ea+Y

bo+;Y

canva$ i+Ztoma(a/YUcanva$Y

Ubo+;Y

U(tmlY

sampleC.!s

U] oint +


31/85

in+o"onloa+ Z init[

Nou$ avon$ le co+e $ource +e K c(ier$>

` le c(ier $am*leF"(tml, :ui embar:ue le$ c(ier$ Toma(a/"@$, $am*leF"@$ et A$$et$Loa+er"@$

` le c(ier A$$et$Loa+er"@$ :ui contient le co+e +e notre cla$$e` le c(ier $am*leF"@$ :ui $e contente +


32/85

A$$et$Mana&er"*rotot;*e"&etData Z function78

^

return t(i$" +ata[

\[

A$$et$Mana&er"*rotot;*e"&etDataB;Alia$ Z function7alia$8

^

if 7 t(i$" +ataalia$ 8

return t(i$" +ataalia$[

return null[

\[

A$$et$Mana&er"*rotot;*e"a++Ima&e Z function7ima&e, alia$8

^

t(i$" +ataalia$ Z ima&e[

\[

Voil., maintenant nou$ +i$*o$on$ +


33/85

Et bien tout $im*lement *arce :ue cette cla$$e Te9ture contien+ra +e$ information$ :ui nou$ $eron$ bien utile$ *lu$

tar+, comme le nom +e la te9ture, l


34/85

te9ture"rect Z O,O,KJ,JJ[ l


35/85

Nou$ re*arleron$ +e l


36/85

Te9tureAtla$"*rotot;*e"removeTe9ture Z function7 name 8

^

var te9ture Z t(i$"&etTe9tureB;Name7name8[

if 7 te9ture ZZ null 8

return[

var in+e9 Z t(i$" te9ture$"in+e9f 7te9ture8[

t(i$" te9ture$"$*lice7in+e9,F8[

\[

Mo+ion$ maintenant le co+e notre c(ier $am*leF"@$

function onCom*lete78

^

var +ata Z A$$et$Loa+er"&etIn$tance78"&etData78[

var canva$ Z +ocument"&etElementB;I+7


37/85

O,

O,

FOO,

FOO 8[

te9ture Z atla$"&etTe9tureB;Name7te9tureJ8[

UU *ui$ la +eu9i=me

conte9t"+raIma&e7 te9ture"+ata,

te9ture"rectO,

te9ture"rectF,

te9ture"rectJ,

te9ture"rectK,

FFO,

O,

FOO,

FOO 8[

UU en &ro$, nou$ avon$ +e$$in- le$ +eu9 moiti-$ +e l


38/85

A$$et$Mana&er"&etIn$tance Z function78

^

if 7 A$$et$Mana&er" in$tance ZZ null 8

A$$et$Mana&er" in$tance Z ne A$$et$Mana&er78[

return A$$et$Mana&er" in$tance[

\[

A$$et$Mana&er"*rotot;*e" ima&e$ Z null[

A$$et$Mana&er"*rotot;*e" atla$e$ Z null[

A$$et$Mana&er"*rotot;*e" te9ture$ Z null[

UU ima&e$

A$$et$Mana&er"*rotot;*e"&etIma&e$ Z function78

^

return t(i$" ima&e$[

\[

A$$et$Mana&er"*rotot;*e"&etIma&eB;Alia$ Z function7alia$8

^

if 7 t(i$" ima&e$alia$ 8

return t(i$" ima&e$alia$[

return null[

\[

A$$et$Mana&er"*rotot;*e"a++Ima&e Z function7ima&e, alia$8

^

t(i$" ima&e$alia$ Z ima&e[

\[

UUatla$e$

A$$et$Mana&er"*rotot;*e"a++Atla$ Z function7atla$, alia$8

^

t(i$" atla$e$alia$ Z atla$[

\[

A$$et$Mana&er"*rotot;*e"&etAtla$e$ Z function78^

return t(i$" atla$e$[

\[

A$$et$Mana&er"*rotot;*e"&etAtla$B;Alia$ Z function7alia$8

^

if 7 t(i$" atla$e$alia$ 8

return t(i$" atla$e$alia$[

38


39/85

return null[

\[

UUte9ture$

A$$et$Mana&er"*rotot;*e"a++Te9ture Z function7te9ture, alia$8^

t(i$" te9ture$alia$ Z te9ture[

\[

A$$et$Mana&er"*rotot;*e"&etTe9ture$ Z function78

^

return t(i$" te9ture$[

\[

A$$et$Mana&er"*rotot;*e"&etTe9tureB;Alia$ Z function7alia$8

^

if 7 t(i$" te9ture$alia$ 8

return t(i$" te9ture$alia$[

return null[

\[

Maintenant :ue nou$ $avon$ comment &-rer le$ a$$et$, nou$ allon$ a**ren+re . cr-er une $tructure *our le$

mani*uler"

39


40/85

Les bases de l'affichage

` Str,ct,r% ar3or%sc%t% %t Displa=List

CommenRon$ *ar intro+uire la notion +e Di$*la;Li$t, :u


41/85

our en revenir . notre Di$*la;Li$t, $a $tructure $era $imilaire, R.+ :ue nou$ *artiron$ +


42/85

Di$*la;b@ect"*rotot;*e"9 Z O[

Di$*la;b@ect"*rotot;*e"; Z O[

Di$*la;b@ect"*rotot;*e"$cale! Z F[

Di$*la;b@ect"*rotot;*e"$caleX Z F[

Di$*la;b@ect"*rotot;*e"i+t( Z O[

Di$*la;b@ect"*rotot;*e"(ei&(t Z O[

Di$*la;b@ect"*rotot;*e"rotation Z O[Di$*la;b@ect"*rotot;*e"al*(a Z F[

Di$*la;b@ect" to?a+ian$ Z Mat("I U FO[

Di$*la;b@ect"*rotot;*e"ren+er Z function7 conte9t 8

^

conte9t"$ave78[ UU +


43/85

Nou$ allon$ . *r-$ent ac(er +e$ te9ture$, *our cela nou$ allon$ co+er une cla$$e :ue nou$ nommeron$ Bitma*,

cette cla$$e (-ritera +e la cla$$e Di$*la;b@ect, ce :ui fait :u


44/85

for7 var alia$ in +ata 8

^

A$$et$Mana&er"&etIn$tance78"a++Ima&e7+ataalia$,alia$8[

\

UU on cr-e un nouvel atla$

var atla$ Z ne Te9tureAtla$78[

UU on lui a$$ocie une ima&e :ui $era celle *arta&-e *ar toute$ le$ te9ture$ $toc/-e en $on

$ein

atla$"+ata Z A$$et$Mana&er"&etIn$tance78"&etIma&eB;Alia$7&roun+8[

UU on cr-e +eu9 te9ture$ +i-rente$, *ortant un nom +i-rent, a;ant c(acune la m2me ima&e

UU mai$ *a$ le$ m2me$ *ortion$ +


45/85

Di$*la;b@ectContainer"*rotot;*e" con$truct Z function78

^

t(i$"c(il+ren Z ne Arra;78[

\[

Di$*la;b@ectContainer"*rotot;*e"a++C(il+ Z function7c(il+8

^

if 7 c(il+"*arent 8

^

c(il+"*arent"removeC(il+7c(il+8[

\

c(il+"*arent Z t(i$[

t(i$"c(il+ren"*u$(7c(il+8[

\[

Di$*la;b@ectContainer"*rotot;*e"&etC(il+At Z function 7in+e98

^

return t(i$"c(il+renin+e9[\[

Di$*la;b@ectContainer"*rotot;*e"&etC(il+B;Name Z function7name8

^

var c(il+ren Z t(i$"c(il+ren[

var i Z c(il+ren"len&t([

(ile7 GGi Y GF 8

^

if 7 c(il+reni"name ZZ name 8

return c(il+reni[

\

return null[

\[

Di$*la;b@ectContainer"*rotot;*e"a++C(il+At Z function7c(il+, in+e98

^


var tabF Z t(i$"c(il+ren"$lice7O,in+e98[

var tabJ Z t(i$"c(il+ren"$lice7in+e98[

t(i$"c(il+ren Z tabF"concat7c(il+8"concat7tabJ8[

c(il+"*arent Z t(i$[\[

Di$*la;b@ectContainer"*rotot;*e"removeC(il+At Z function7in+e98

^

var c(il+ Z t(i$"c(il+renin+e9[

if 7 c(il+ 8

c(il+"*arent Z null[

t(i$"c(il+ren"$*lice7in+e9,F8[

45


46/85

\[

Di$*la;b@ectContainer"*rotot;*e"removeC(il+ Z function7c(il+8

^

var in+e9 Z t(i$"c(il+ren"in+e9f 7c(il+8[

if 7 in+e9 Y GF 8



\[

Di$*la;b@ectContainer"*rotot;*e"+ra Z function7 conte9t 8

^


var i Z O[

var ma9 Z c(il+ren"len&t([

var c(il+ Z null[

for7 [ i ma9[ i'' 8

^

c(il+ Z c(il+reni[

c(il+"ren+er7conte9t8[

\

\[

Comme vou$ *ouve) le con$tater, cette cla$$e (-rite +e Di$*la;b@ect, elle *o$$=+e +onc le$ *ro*ri-t-$ et le$

m-t(o+e$ +

$am*leF"@$

46


47/85

U] oint +


48/85

container"a++C(il+7bm*8[

UU et on a**elle la m-t(o+e ren+er +u Di$*la;b@ectContainer

container"ren+er7conte9t8[

\

Comme vou$ *ouve) le con$tater, le$ +eu9 enfant$, +e$ ob@et$ +e t;*e Bitma*, $ont tout le$ +eu9 +e$$in-$ . l


49/85

\878[

t(i$" con$truct78[

\

Toma(a/"re&i$terCla$$7 Sta&e, Sta&e 8[ Toma(a/"e9ten+7 Sta&e, Di$*la;b@ectContainer 8[

Sta&e" in$tance Z null[

Sta&e"&etIn$tance Z function78

^

if 7 Sta&e" in$tance ZZ null 8

Sta&e" in$tance Z ne Sta&e78[

return Sta&e" in$tance[

\[

Sta&e"*rotot;*e" la$tTime Z O[

Sta&e"*rotot;*e" frameCount Z O[

Sta&e"*rotot;*e" f*$ Z O[

Sta&e"*rotot;*e" canva$ Z null[

Sta&e"*rotot;*e" conte9t Z null[

Sta&e"*rotot;*e" +ebu& Z fal$e[

Sta&e"*rotot;*e"init Z function7canva$8

^

t(i$" canva$ Z canva$[

t(i$" conte9t Z canva$"&etConte9t7J+8[

t(i$" enter6rame78[

\[

Sta&e"*rotot;*e" enter6rame Z function78

^

var curTime Z ne Date78"&etTime78[

var $co*e Z t(i$[

t(i$" frameCount''[

if 7 curTime G t(i$" la$tTime YZ FOOO 8

^

t(i$" f*$ Z t(i$" frameCount[

t(i$" frameCount Z O[

t(i$" la$tTime Z curTime[

\

t(i$" conte9t"clear?ect7O,O,t(i$" canva$"i+t(,t(i$" canva$"(ei&(t8[

t(i$" conte9t"$ave78[

49


50/85

t(i$"ren+er7t(i$" conte9t8[

t(i$" conte9t"re$tore78[

if 7 t(i$" +ebu& ZZ true 8

^

t(i$" conte9t"$ave78[

t(i$" conte9t"be&inat(78[

t(i$" conte9t"llSt;le Z blac/[

t(i$" conte9t"ll?ect7O,O,FOO,KO8[

t(i$" conte9t"ll78[

t(i$" conte9t"llSt;le Z re+[

t(i$" conte9t"font Z


51/85

Cette +erni=re e$t utili$- +e *r-f-rence . la m-t(o+e $etTimeout, en eet, le navi&ateur va la +-clenc(er +e luiG

m2me a*r=$ :ue toute$ o*-ration$ +e +e$$in $oient termin-e$, o*timi$ant ain$i l


52/85

bm*"(ei&(t Z dK[UU""" *ui$ la (auteur

Sta&e"&etIn$tance78"a++C(il+7bm*8[ UU on a@oute l


53/85

Manipuler les objets : transformations et calculs

matriciels.

Le problème des transformations imbriquées.

Le *robl=me +e$ tran$formation$ imbri:u-e$ e$t tr=$ $im*le, il faut :ue le$ tran$formation$ +

A+metton$ :ue +an$ le $c(-ma $uivant>

racine"9 Z O

enfant F"9 Z FO

enfant K"9 Z O

enfant d"9 Z FO

enfant 5"9 Z JO

53


54/85

Si l


55/85

Ce :ui e$t &-nial c


56/85

UU *ublic *ro*ertie$>

U]]

] o$ition 7O, O8 in a K9K ane tran$formation matri9"

] *ro*ert; a

] t;*e Number

]]U

Matri9JD"*rotot;*e"a Z F[

U]]

] o$ition 7O, F8 in a K9K ane tran$formation matri9"

] *ro*ert; b

] t;*e Number

]]U

Matri9JD"*rotot;*e"b Z O[

U]]

] o$ition 7F, O8 in a K9K ane tran$formation matri9"

] *ro*ert; c ] t;*e Number

]]U

Matri9JD"*rotot;*e"c Z O[

U]]

] o$ition 7F, F8 in a K9K ane tran$formation matri9"

] *ro*ert; +

] t;*e Number

]]U

Matri9JD"*rotot;*e"+ Z F[

U]] ] o$ition 7J, O8 in a K9K ane tran$formation matri9"

] *ro*ert; t9

] t;*e Number

]]U

Matri9JD"*rotot;*e"t9 Z O[

U]]

] o$ition 7J, F8 in a K9K ane tran$formation matri9"

] *ro*ert; t;

] t;*e Number

]]U

Matri9JD"*rotot;*e"t; Z O[

UU con$tructor>

U]]

] Initiali)ation met(o+" Can al$o be u$e+ to reinitiali)e t(e in$tance"

] met(o+ initiali)e

] *aram ^Number\ aZF S*ecie$ t(e a *ro*ert; for t(e ne matri9"

56


57/85

] *aram ^Number\ bZO S*ecie$ t(e b *ro*ert; for t(e ne matri9"

] *aram ^Number\ cZO S*ecie$ t(e c *ro*ert; for t(e ne matri9"

] *aram ^Number\ +ZF S*ecie$ t(e + *ro*ert; for t(e ne matri9"

] *aram ^Number\ t9ZO S*ecie$ t(e t9 *ro*ert; for t(e ne matri9"

] *aram ^Number\ t;ZO S*ecie$ t(e t; *ro*ert; for t(e ne matri9"

] return ^Matri9JD\ T(i$ in$tance" $eful for c(ainin& met(o+ call$"

]UMatri9JD"*rotot;*e"initiali)e Z function7a, b, c, +, t9, t;8 ^

t(i$"a Z 7a ZZ null8 F > a[

t(i$"b Z b O[

t(i$"c Z c O[

t(i$"+ Z 7+ ZZ null8 F > +[

t(i$"t9 Z t9 O[

t(i$"t; Z t; O[

return t(i$[

\[

UU *ublic met(o+$>

U]] ] Concatenate$ t(e $*ecie+ matri9 *ro*ertie$ it( t(i$ matri9" All *arameter$ are re:uire+"

] met(o+ *re*en+

] *aram ^Number\ a

] *aram ^Number\ b

] *aram ^Number\ c

] *aram ^Number\ +

] *aram ^Number\ t9

] *aram ^Number\ t;

] return ^Matri9JD\ T(i$ matri9" $eful for c(ainin& met(o+ call$"

]]U

Matri9JD"*rotot;*e"*re*en+ Z function7a, b, c, +, t9, t;8 ^

var t9F Z t(i$"t9[

if 7a WZ F b WZ O c WZ O + WZ F8 ^var aF Z t(i$"a[

var cF Z t(i$"c[

t(i$"a Z aF]a't(i$"b]c[

t(i$"b Z aF]b't(i$"b]+[

t(i$"c Z cF]a't(i$"+]c[

t(i$"+ Z cF]b't(i$"+]+[

\

t(i$"t9 Z t9F]a't(i$"t;]c't9[

t(i$"t; Z t9F]b't(i$"t;]+'t;[

return t(i$[

\[

U]]

] A**en+$ t(e $*ecie+ matri9 *ro*ertie$ it( t(i$ matri9" All *arameter$ are re:uire+"

] met(o+ a**en+

] *aram ^Number\ a

] *aram ^Number\ b

] *aram ^Number\ c

] *aram ^Number\ +

] *aram ^Number\ t9

57


58/85

] *aram ^Number\ t;


]]U

Matri9JD"*rotot;*e"a**en+ Z function7a, b, c, +, t9, t;8 ^

var aF Z t(i$"a[

var bF Z t(i$"b[

var cF Z t(i$"c[var +F Z t(i$"+[

t(i$"a Z a]aF'b]cF[

t(i$"b Z a]bF'b]+F[

t(i$"c Z c]aF'+]cF[

t(i$"+ Z c]bF'+]+F[

t(i$"t9 Z t9]aF't;]cF't(i$"t9[

t(i$"t; Z t9]bF't;]+F't(i$"t;[

return t(i$[

\[

U]] ] re*en+$ t(e $*ecie+ matri9 it( t(i$ matri9"

] met(o+ *re*en+Matri9

] *aram ^Matri9JD\ matri9


]]U

Matri9JD"*rotot;*e"*re*en+Matri9 Z function7matri98 ^

t(i$"*re*en+7matri9"a, matri9"b, matri9"c, matri9"+, matri9"t9, matri9"t;8[

return t(i$[

\[

U]]

] A**en+$ t(e $*ecie+ matri9 it( t(i$ matri9"

] met(o+ a**en+Matri9

] *aram ^Matri9JD\ matri9


]]U

Matri9JD"*rotot;*e"a**en+Matri9 Z function7matri98 ^

t(i$"a**en+7matri9"a, matri9"b, matri9"c, matri9"+, matri9"t9, matri9"t;8[

return t(i$[

\[

U]]

] %enerate$ matri9 *ro*ertie$ from t(e $*ecie+ +i$*la; ob@ect tran$form *ro*ertie$, an+

*re*en+$ t(em it( t(i$ matri9"

] 6or e9am*le, ;ou can u$e t(i$ to &enerate a matri9 from a +i$*la; ob@ect> var mt9 Z ne Matri9JD78[

] mt9"*re*en+Tran$form7o"9, o";, o"$cale!, o"$caleX, o"rotation8[

] met(o+ *re*en+Tran$form

] *aram ^Number\ 9

] *aram ^Number\ ;

] *aram ^Number\ $cale!

] *aram ^Number\ $caleX

] *aram ^Number\ rotation

58


59/85

] *aram ^Number\ $/e!

] *aram ^Number\ $/eX

] *aram ^Number\ re&! *tional"

] *aram ^Number\ re&X *tional"


]]U

Matri9JD"*rotot;*e"*re*en+Tran$form Z function79, ;, $cale!, $caleX, rotation, $/e!, $/eX, re&!, re&X8 ^

if 7rotationKO8 ^

var r Z rotation]Matri9JD"DE%T?AD[

var co$ Z Mat("co$7r8[

var $in Z Mat("$in7r8[

\ el$e ^

co$ Z F[

$in Z O[

\

if 7re&! re&X8 ^

UU a**en+ t(e re&i$tration o$et>t(i$"t9 GZ re&![ t(i$"t; GZ re&X[

\

if 7$/e! $/eX8 ^

UU TD> can t(i$ be combine+ into a $in&le *re*en+ o*eration

$/e! ]Z Matri9JD"DE%T?AD[

$/eX ]Z Matri9JD"DE%T?AD[

t(i$"*re*en+7co$]$cale!, $in]$cale!, G$in]$caleX, co$]$caleX, O, O8[

t(i$"*re*en+7Mat("co$7$/eX8, Mat("$in7$/eX8, GMat("$in7$/e!8,

Mat("co$7$/e!8, 9, ;8[

\ el$e ^

t(i$"*re*en+7co$]$cale!, $in]$cale!, G$in]$caleX, co$]$caleX, 9, ;8[

\

return t(i$[\[

U]]

] %enerate$ matri9 *ro*ertie$ from t(e $*ecie+ +i$*la; ob@ect tran$form *ro*ertie$, an+

a**en+$ t(em it( t(i$ matri9"

] 6or e9am*le, ;ou can u$e t(i$ to &enerate a matri9 from a +i$*la; ob@ect> var mt9 Z ne

Matri9JD78[

] mt9"a**en+Tran$form7o"9, o";, o"$cale!, o"$caleX, o"rotation8[

] met(o+ a**en+Tran$form

] *aram ^Number\ 9

] *aram ^Number\ ;

] *aram ^Number\ $cale! ] *aram ^Number\ $caleX

] *aram ^Number\ rotation

] *aram ^Number\ $/e!

] *aram ^Number\ $/eX

] *aram ^Number\ re&! *tional"

] *aram ^Number\ re&X *tional"


]]U

59


60/85

Matri9JD"*rotot;*e"a**en+Tran$form Z function79, ;, $cale!, $caleX, rotation, $/e!, $/eX,

re&!, re&X8 ^

if 7rotationKO8 ^

var r Z rotation]Matri9JD"DE%T?AD[

var co$ Z Mat("co$7r8[

var $in Z Mat("$in7r8[

\ el$e ^

co$ Z F[

$in Z O[

\

if 7$/e! $/eX8 ^

UU TD> can t(i$ be combine+ into a $in&le a**en+

$/e! ]Z Matri9JD"DE%T?AD[

$/eX ]Z Matri9JD"DE%T?AD[

t(i$"a**en+7Mat("co$7$/eX8, Mat("$in7$/eX8, GMat("$in7$/e!8,

Mat("co$7$/e!8, 9, ;8[

t(i$"a**en+7co$]$cale!, $in]$cale!, G$in]$caleX, co$]$caleX, O, O8[\ el$e ^

t(i$"a**en+7co$]$cale!, $in]$cale!, G$in]$caleX, co$]$caleX, 9, ;8[

\

if 7re&! re&X8 ^

UU *re*en+ t(e re&i$tration o$et>

t(i$"t9 GZ re&!]t(i$"a're&X]t(i$"c[

t(i$"t; GZ re&!]t(i$"b're&X]t(i$"+[

\

return t(i$[

\[

U]]

] A**lie$ a rotation tran$formation to t(e matri9"

] met(o+ rotate

] *aram ^Number\ an&le T(e an&le in ra+ian$" To u$e +e&ree$, multi*l; b;

co+eYMat("IUFOUco+eY"


]]U

Matri9JD"*rotot;*e"rotate Z function7an&le8 ^

var co$ Z Mat("co$7an&le8[

var $in Z Mat("$in7an&le8[

var aF Z t(i$"a[

var cF Z t(i$"c[var t9F Z t(i$"t9[

t(i$"a Z aF]co$Gt(i$"b]$in[

t(i$"b Z aF]$in't(i$"b]co$[

t(i$"c Z cF]co$Gt(i$"+]$in[

t(i$"+ Z cF]$in't(i$"+]co$[

t(i$"t9 Z t9F]co$Gt(i$"t;]$in[

60


61/85

t(i$"t; Z t9F]$in't(i$"t;]co$[

return t(i$[

\[

U]]

] A**lie$ a $/e tran$formation to t(e matri9"

] met(o+ $/e

] *aram ^Number\ $/e! T(e amount to $/e (ori)ontall; in +e&ree$"

] *aram ^Number\ $/eX T(e amount to $/e verticall; in +e&ree$"


]U

Matri9JD"*rotot;*e"$/e Z function7$/e!, $/eX8 ^

$/e! Z $/e!]Matri9JD"DE%T?AD[

$/eX Z $/eX]Matri9JD"DE%T?AD[

t(i$"a**en+7Mat("co$7$/eX8, Mat("$in7$/eX8, GMat("$in7$/e!8, Mat("co$7$/e!8,

O, O8[

return t(i$[

\[

U]]

] A**lie$ a $cale tran$formation to t(e matri9"

] met(o+ $cale

] *aram ^Number\ 9 T(e amount to $cale (ori)ontall;

] *aram ^Number\ ; T(e amount to $cale verticall;


]]U

Matri9JD"*rotot;*e"$cale Z function79, ;8 ^

t(i$"a ]Z 9[

t(i$"+ ]Z ;[

t(i$"c ]Z 9[

t(i$"b ]Z ;[

t(i$"t9 ]Z 9[t(i$"t; ]Z ;[

return t(i$[

\[

U]]

] Tran$late$ t(e matri9 on t(e 9 an+ ; a9e$"

] met(o+ tran$late

] *aram ^Number\ 9

] *aram ^Number\ ;


]]U

Matri9JD"*rotot;*e"tran$late Z function79, ;8 ^t(i$"t9 'Z 9[

t(i$"t; 'Z ;[

return t(i$[

\[

U]]

] Set$ t(e *ro*ertie$ of t(e matri9 to t(o$e of an i+entit; matri9 7one t(at a**lie$ a null

tran$formation8"

61


62/85

] met(o+ i+entit;


]]U

Matri9JD"*rotot;*e"i+entit; Z function78 ^

t(i$"a Z t(i$"+ Z F[

t(i$"b Z t(i$"c Z t(i$"t9 Z t(i$"t; Z O[

return t(i$[\[

U]]

] Invert$ t(e matri9, cau$in& it to *erform t(e o**o$ite tran$formation"

] met(o+ invert


]]U

Matri9JD"*rotot;*e"invert Z function78 ^

var aF Z t(i$"a[

var bF Z t(i$"b[

var cF Z t(i$"c[

var +F Z t(i$"+[var t9F Z t(i$"t9[

var n Z aF]+FGbF]cF[

t(i$"a Z +FUn[

t(i$"b Z GbFUn[

t(i$"c Z GcFUn[

t(i$"+ Z aFUn[

t(i$"t9 Z 7cF]t(i$"t;G+F]t9F8Un[

t(i$"t; Z G7aF]t(i$"t;GbF]t9F8Un[

return t(i$[

\[

U]]

] ?eturn$ true if t(e matri9 i$ an i+entit; matri9"

] met(o+

i$I+entit;

] return ^Boolean\

]]U

Matri9JD"*rotot;*e"i$I+entit; Z function78 ^

return t(i$"t9 ZZ O t(i$"t; ZZ O t(i$"a ZZ F t(i$"b ZZ O t(i$"c ZZ O

t(i$"+ ZZ F[

\[

U]]

] Tran$form$ a *oint accor+in& to t(i$ matri9" ] met(o+ tran$formoint

] *aram ^Number\ 9 T(e 9 com*onent of t(e *oint to tran$form"

] *aram ^Number\ ; T(e ; com*onent of t(e *oint to tran$form"

] *aram ^oint b@ect\ *t An ob@ect to co*; t(e re$ult into" If omitte+ a &eneric ob@ect

it( 9U; *ro*ertie$ ill be returne+"

] return ^oint\ T(i$ matri9" $eful for c(ainin& met(o+ call$"

]]U

Matri9JD"*rotot;*e"tran$formoint Z function79, ;, *t8 ^

62


63/85

*t Z *t^\[

*t"9 Z 9]t(i$"a';]t(i$"c't(i$"t9[

*t"; Z 9]t(i$"b';]t(i$"+'t(i$"t;[

return *t[

\[

U]]

] Decom*o$e$ t(e matri9 into tran$form *ro*ertie$ 79, ;, $cale!, $caleX, an+ rotation8" Note

t(at t(i$ t(e$e value$

] ma; not matc( t(e tran$form *ro*ertie$ ;ou u$e+ to &enerate t(e matri9, t(ou&( t(e; ill

*ro+uce t(e $ame vi$ual

] re$ult$"

] met(o+ +ecom*o$e

] *aram ^b@ect\ tar&et T(e ob@ect to a**l; t(e tran$form *ro*ertie$ to" If null, t(en a

ne ob@ect ill be returne+"


]U

Matri9JD"*rotot;*e"+ecom*o$e Z function7tar&et8 ^

if 7tar&et ZZ null8 ^ tar&et Z ^\[ \

tar&et"9 Z t(i$"t9[

tar&et"; Z t(i$"t;[

tar&et"$cale! Z Mat("$:rt7t(i$"a ] t(i$"a ' t(i$"b ] t(i$"b8[

tar&et"$caleX Z Mat("$:rt7t(i$"c ] t(i$"c ' t(i$"+ ] t(i$"+8[

var $/e! Z Mat("atanJ7Gt(i$"c, t(i$"+8[

var $/eX Z Mat("atanJ7t(i$"b, t(i$"a8[

if 7$/e! ZZ $/eX8 ^

tar&et"rotation Z $/eXUMatri9JD"DE%T?AD[

if 7t(i$"a O t(i$"+ YZ O8 ^tar&et"rotation 'Z 7tar&et"rotation Z O8 FO > GFO[

\

tar&et"$/e! Z tar&et"$/eX Z O[

\ el$e ^

tar&et"$/e! Z $/e!UMatri9JD"DE%T?AD[

tar&et"$/eX Z $/eXUMatri9JD"DE%T?AD[

\

return tar&et[

\[

U]]

] ?einitiali)e$ all matri9 *ro*ertie$ to t(o$e $*ecie+"

] met(o+ reinitiali)e ] *aram ^Number\ aZF S*ecie$ t(e a *ro*ert; for t(e ne matri9"

] *aram ^Number\ bZO S*ecie$ t(e b *ro*ert; for t(e ne matri9"

] *aram ^Number\ cZO S*ecie$ t(e c *ro*ert; for t(e ne matri9"

] *aram ^Number\ +ZF S*ecie$ t(e + *ro*ert; for t(e ne matri9"

] *aram ^Number\ t9ZO S*ecie$ t(e t9 *ro*ert; for t(e ne matri9"

] *aram ^Number\ t;ZO S*ecie$ t(e t; *ro*ert; for t(e ne matri9"


63


64/85

]U

Matri9JD"*rotot;*e"reinitiali)e Z function7a, b, c, +, t9, t;8 ^

t(i$"initiali)e7a,b,c,+,t9,t;8[

return t(i$[

\[

U]]

] Co*ie$ all *ro*ertie$ from t(e $*ecie+ matri9 to t(i$ matri9"

] met(o+ co*;

] *aram ^Matri9JD\ matri9 T(e matri9 to co*; *ro*ertie$ from"


]U

Matri9JD"*rotot;*e"co*; Z function7matri98 ^

return t(i$"reinitiali)e7matri9"a, matri9"b, matri9"c, matri9"+, matri9"t9, matri9"t;8[

\[

U]]

] ?eturn$ a clone of t(e Matri9JD in$tance"

] met(o+ clone ] return ^Matri9JD\ a clone of t(e Matri9JD in$tance"

]]U

Matri9JD"*rotot;*e"clone Z function78 ^

return 7ne Matri9JD788"co*;7t(i$8[

\[

U]]

] ?eturn$ a $trin& re*re$entation of t(i$ ob@ect"

] met(o+ toStrin&

] return ^Strin&\ a $trin& re*re$entation of t(e in$tance"

]]U

Matri9JD"*rotot;*e"toStrin& Z function78 ^

return Matri9JD 7aZ't(i$"a' bZ't(i$"b' cZ't(i$"c' +Z't(i$"+'

t9Z't(i$"t9' t;Z't(i$"t;'8[

\[

Matri9JD"i+entit; Z ne Matri9JD78[

Maintenant nou$ +i$*o$on$ +e notre *ro*re cla$$e *our mani*uler +e$ matrice$, voici $on

im*l-mentation au $ein +e la cla$$e Di$*la;b@ect"

UU nouvelle m-t(o+e ren+er


^

t(i$"u*+ate78[

if 7 t(i$"vi$ible ZZ fal$e 8

return[

var mat Z t(i$"matri9[

64


65/85

conte9t"$ave78[

conte9t"&lobalAl*(a Z t(i$"al*(a[

conte9t"tran$form7mat"a,mat"b,mat"c,mat"+,mat"t9,mat"t;8[

t(i$"+ra7conte9t8[

conte9t"re$tore78[

\[

UUM-t(o+e u*+ate, :ui nou$ *ermet +


66/85

Mo!8l% 'v'%+%ti%l %t !%si$ patt%r

Pourquoi utiliser des éénements ?

CommenRon$ +-@. *ar +-nir ce :ue nou$ enten+on$ *ar un -venement, +an$ notre moteur il $


67/85

EventDi$*atc(er"*rotot;*e"*arent Z null[

EventDi$*atc(er"*rotot;*e" li$tener$ Z null[

EventDi$*atc(er"*rotot;*e"a++EventLi$tener Z function7 t;*e, $co*e, callbac/, u$eCa*ture 8

^ t(i$" li$tener$ Z t(i$" li$tener$ ne Arra;78[

var ob@ Z ne b@ect78[

ob@"t;*e Z t;*e[

ob@"$co*e Z $co*e[

ob@"callbac/ Z callbac/[

ob@"u$eCa*ture Z u$eCa*ture[

t(i$" li$tener$"*u$(7ob@8[

\[

EventDi$*atc(er"*rotot;*e"(a$EventLi$tener Z function7t;*e8

^

if 7 t(i$" li$tener$ ZZ null 8

return fal$e[


var i Z t(i$" li$tener$"len&t([

(ile7 GGi Y GF 8

^

ob@ Z t(i$" li$tener$i[

if 7 ob@"t;*e ZZ t;*e 8

return true[

\

\[

EventDi$*atc(er"*rotot;*e"+i$*atc(Event Z function7 event 8^

t(i$" li$tener$ Z t(i$" li$tener$ ne Arra;78[


var i Z t(i$" li$tener$"len&t([

if 7 event"tar&et ZZ null 8

event"tar&et Z t(i$[

event"currentTar&et Z t(i$[

(ile7 GGi Y GF 8

^ ob@ Z t(i$" li$tener$i[

if 7 ob@"t;*e ZZ event"t;*e 8

^

if 7 event"tar&et WZ t(i$ ob@"u$eCa*ture ZZ fal$e 8

^

continue[

\

67


68/85

ob@"callbac/"a**l;7 ob@"$co*e, event 8[

\

\

if 7 event"bubble$ ZZ true t(i$"*arent WZ null t(i$"*arent"+i$*atc(Event 8^

t(i$"*arent"+i$*atc(Event7event8[

\

\[

EventDi$*atc(er"*rotot;*e"removeEventLi$tener Z function7 t;*e, $co*e, callbac/, u$eCa*ture 8

^

var li$tener Z t(i$"&etEventLi$tener7t;*e8[

(ile7 li$tener WZ null 8

^


var i Z t(i$" li$tener$"len&t([var arr Z ne Arra;78[

(ile7 GGi Y GF 8

^

ob@ Z t(i$" li$tener$i[

if 7 ob@"t;*e WZ li$tener"t;*e ob@"$co*e WZ $co*e ob@"callbac/ WZ callbac/

ob@"u$eCa*ture WZ u$eCa*ture 8

return arr"*u$(7ob@8[

\

t(i$" li$tener$ Z arr[

li$tener Z t(i$"&etEventLi$tener7t;*e8[\

\[

Event"@$

function Event7t;*e, bubble$, cancelable8

^

t(i$"t;*e Z t;*e[

t(i$"cancelable Z cancelable[

t(i$"bubble$ Z bubble$[

\

Toma(a/"re&i$terCla$$7 Event, Event 8[

Event"*rotot;*e"t;*e Z null[

Event"*rotot;*e"bubble$ Z fal$e[

Event"*rotot;*e"cancelable Z true[

Event"*rotot;*e"+ata Z null[

Event"*rotot;*e"tar&et Z null[

68


69/85

Event"*rotot;*e"currentTar&et Z null[

Event"*rotot;*e"$to*ro*a&ation Z function78

^

if 7 t(i$"cancelable ZZ true 8

t(i$"bubble$ Z fal$e[

\[

UUcon$tante$

Event"ADDED Z a++e+[

Event"ADDEDTSTA%E Z a++e+ToSta&e[

Event"ENTE?6?AME Z enter6rame[

Event"?EMVED Z remove+[

Event"?EMVED6?MSTA%E Z remove+6romSta&e[

Maintenant, nou$ *ouvon$ faire (-riter notre cla$$e Di$*la;b@ect +e la cla$$e EventDi$*atc(er, *ar con$-:uent

tout no$ Di$*la;b@ect $eront +-$ormai$ +e$ EventDi$*atc(er"

our ce faire, on +oit a@outer la li&ne $uivante . notre cla$$e Di$*la;b@ect

+omaha9 .etend( :Displa3Eb!ect:0 :ventDispatcher: )/

Comme vou$ *ouve) le con$tater, notre cla$$e Event *o$$=+e :uel:ue$ con$tante$ *r-+-nie$,

Event"ADDED *ar e9em*le" Cette con$tante +-nit le t;*e +e l


70/85

\[

Di$*la;b@ectContainer"*rotot;*e"removeC(il+At Z function7in+e98

^

var c(il+ Z t(i$"c(il+renin+e9[

if 7 c(il+ 8



c(il+"+i$*atc(Event7 ne Event7Event"?EMVED, true, true8 8[

\[

Di$*la;b@ectContainer"*rotot;*e"removeC(il+ Z function7c(il+8

^

var in+e9 Z t(i$"c(il+ren"in+e9f 7c(il+8[

if 7 in+e9 Y GF 8


c(il+"*arent Z null[c(il+"+i$*atc(Event7 ne Event7Event"?EMVED, true, true8 8[

\[

Voil., maintenant vou$ *ouve) +-clenc(er une action +=$ :u


71/85

ollisions et é!énements utilisateurs

Comment détecter les éénements souris ?

La +-tection +e$ -venement$ $ouri$ e$t in+i$*en$able +=$ l


72/85

"mplémentation d$une méthode hitTest sur un &ispla'(b#ect

Nou$ allon$ im*l-menter une m-t(o+e nomm-e (itTe$t $ur notre cla$$e Di$*la;b@ect, celleGci aura *our rle +e

nou$ +ire $i oui ou non le *oint :u


73/85

(ile7 current WZ null 8

^

current"u*+ate78[

mat"*re*en+Matri97current"matri9 8[

current Z current"*arent[

\

t(i$" concatene+Matri9 Z mat[

return t(i$" concatene+Matri9[

\[

Di$*la;b@ect"*rotot;*e"localTo%lobal Z function79,;8

^

var matri9 Z t(i$"&etConcatene+Matri978[

var *t Z matri9"tran$formoint79,;8[

return ne oint7*t"9,*t";8[

\[

Di$*la;b@ect"*rotot;*e"&lobalToLocal Z function79,;8

^

var matri9 Z t(i$"&etConcatene+Matri978"clone78"invert78[

var *t Z matri9"tran$formoint79,;8[

return ne oint7*t"9,*t";8[

\[

Di$*la;b@ect"*rotot;*e"(itTe$t Z function79,;8

^

if 7 t(i$"matri9 ZZ null 8

t(i$"u*+ate78[

var *tF Z t(i$"&lobalToLocal79,;8[

if 7 *tF"9 O *tF"9 Y t(i$"i+t( *tF"; O *tF"; Y t(i$"(ei&(t 8

return fal$e[

el$e

return true[

\[

Maintenant, nou$ *ouvon$ +-tecter $i oui ou non, un Di$*la;b@ect e$t cli:u- ou non encore fautGil +-terminer $i +e

Di$*la;b@ect ne $e $itue *a$ en +e$$ou$ +


74/85

Nou$ *ouvon$ *roc-+er ain$i *our tou$ le$ -venement$ $ouri$"

Voici le co+e . a@outer . la cla$$e Sta&e>

Sta&e"*rotot;*e"init Z function7canva$8

^

var $co*e Z t(i$[

var callbac/ Z function7event8^

$co*e" mou$eHan+ler7event8[

\[

t(i$" canva$ Z canva$[

t(i$" conte9t Z canva$"&etConte9t7J+8[

t(i$" canva$"a++EventLi$tener7clic/,callbac/8[

t(i$" canva$"a++EventLi$tener7mou$emove,callbac/8[

t(i$" canva$"a++EventLi$tener7mou$e+on,callbac/8[

t(i$" canva$"a++EventLi$tener7mou$eu*,callbac/8[

t(i$" enter6rame78[\[

Sta&e"*rotot;*e" mou$eHan+ler Z function7event8

^

var boun+$ Z t(i$" canva$"&etBoun+in&Client?ect78[

var 9 Z event"client! G boun+$"left[

var ; Z event"clientX G boun+$"to*[

var activeC(il+ Z t(i$" &etMou$eb@ectn+er79,;,t(i$8[

var mou$eEvent Z null[

var i Z O[

t(i$"mou$e! Z 9[

t(i$"mou$eX Z ;[

if 7 event"t;*e ZZ mou$emove t(i$" la$tActiveC(il+ WZ activeC(il+ 8

^

if 7 activeC(il+ WZ null 8

^

mou$eEvent Z Mou$eEvent"fromNativeMou$eEvent7event,true,true,9,;8[

mou$eEvent"t;*e Z Mou$eEvent"?LLVE?[

activeC(il+"+i$*atc(Event7mou$eEvent8[

\

if 7 t(i$" la$tActiveC(il+ WZ null 8

^mou$eEvent Z Mou$eEvent"fromNativeMou$eEvent7event,true,true,9,;8[

mou$eEvent"t;*e Z Mou$eEvent"?LLT[

t(i$" la$tActiveC(il+"+i$*atc(Event7mou$eEvent8[

\

\

el$e

^

74


75/85

if 7 activeC(il+ WZ null 8

^

mou$eEvent Z Mou$eEvent"fromNativeMou$eEvent7event,true,true,9,;8[

activeC(il+"+i$*atc(Event7mou$eEvent8[

\

\

t(i$" la$tActiveC(il+ Z activeC(il+[

\[

Sta&e"*rotot;*e" &etMou$eb@ectn+er Z function79,;,container8

^

var un+er Z null[

var c(il+ren Z container"c(il+ren[

var i Z c(il+ren"len&t([

var c(il+ Z null[

(ile7 GGi Y GF 8

^c(il+ Z c(il+reni[

if 7 c(il+"c(il+ren 8

^

un+er Z t(i$" &etMou$eb@ectn+er79,;,c(il+8[

if 7 un+er WZ null 8

return un+er[

\

el$e if 7 c(il+"mou$eEnable+ ZZ true c(il+"(itTe$t79,;8 ZZ true 8

^

return c(il+[

\\

return null[

\[

Et le co+e la cla$$e Mou$eEvent, :ui -ten+ notre cla$$e Event +e ba$e"

function Mou$eEvent78^\

Toma(a/"re&i$terCla$$7 Mou$eEvent, Mou$eEvent 8[

Toma(a/"e9ten+7 Mou$eEvent, Event 8[

function Mou$eEvent7t;*e, bubble$, cancelable8

^

t(i$"t;*e Z t;*e[

t(i$"cancelable Z cancelable[

t(i$"bubble$ Z bubble$[

75


76/85

\

Mou$eEvent"fromNativeMou$eEvent Z function7event,bubble$,cancelable,9,;8

^

var t;*e Z [

var m$event Z null[

$itc(7 event"t;*e 8

^

ca$e clic/> t;*e Z Mou$eEvent"CLIC [ brea/[

ca$e mou$emove> t;*e Z Mou$eEvent"MSEMVE[ brea/[

ca$e mou$eu*> t;*e Z Mou$eEvent"MSE[ brea/[

ca$e mou$e+on> t;*e Z Mou$eEvent"MSEDN[ brea/[

\

m$event Z ne Mou$eEvent7t;*e,bubble$,cancelable8[

m$event"$ta&e! Z 9[

m$event"$ta&eX Z ;[

return m$event[\[

Mou$eEvent"CLIC Z clic/[

Mou$eEvent"?LLVE? Z rollver[

Mou$eEvent"?LLT Z rollut[

Mou$eEvent"MSEMVE Z mou$eMove[

Mou$eEvent"MSEDN Z mou$e*[

Mou$eEvent"MSE Z mou$eDon[

Nou$ $omme$ +onc ca*able$ +e +i$*atc(er +e$ -v-nement$ $ouri$, @e vou$ lai$$e +-couvrir le$ +-tail$ +e

l


77/85

Les animations

Comment animer Nou$ avon$ +-@. abor+- bri=vement le $u@et en *arlant +e$ $*rite$(eet$, nou$ allon$ maintenanta**rofon+ir le $u@et" Le but e$t +


78/85

MovieCli*"*rotot;*e"*la; Z function78

^

Sta&e"&etIn$tance78"a++EventLi$tener7Event"ENTE?6?AME, t(i$,t(i$" enter6rameHan+ler8[

\[

MovieCli*"*rotot;*e"$to* Z function78

^

Sta&e"&etIn$tance78"removeEventLi$tener7Event"ENTE?6?AME,

t(i$,t(i$" enter6rameHan+ler8[

\[

Comme vou$ *ouve) le con$tater, nou$ +i$*o$on$>

` D


79/85

Les filtres

*ase des filtres aec la balise canas

A**li:uer un ltre e$t une o*-ration *lutt triviale avec canva$, en eet le$ -ta*e$ $ont a$$e) $im*le$ et *eu

nombreu$e$>

` n r-cu*=re le$ *i9el$ +u canva$ . l


80/85

Di$*la;b@ect"*rotot;*e" a**l;6ilter$ Z function78

^

var canva$ Z +ocument"createElement7canva$8[

var conte9t Z canva$"&etConte9t7J+8[

canva$"i+t( Z t(i$"i+t([

canva$"(ei&(t Z t(i$"(ei&(t[

t(i$"+ra7conte9t8[

var i Z O[

var ma9 Z t(i$"lter$"len&t([

var lter Z null[

for7 [ i ma9[ i'' 8

^

lter Z t(i$"lter$i[

lter"a**l;7canva$,conte9t8[

\

return canva$[\[


^

t(i$"u*+ate78[

if 7 t(i$"vi$ible ZZ fal$e 8

return[

var mat Z t(i$"matri9[

conte9t"$ave78[

conte9t"&lobalAl*(a Z t(i$"al*(a[conte9t"tran$form7mat"a,mat"b,mat"c,mat"+,mat"t9,mat"t;8[

if 7 t(i$"lter$ WZ null 8

^

UU on a**elle une nouvelle m-t(o+e a**l;6ilter$

var buer Z t(i$" a**l;6ilter$78[

conte9t"+raIma&e7canva$, O, O, buer"i+t(, buer"(ei&(t 8[

\

el$e

^

t(i$"+ra7conte9t8[

\

conte9t"re$tore78[

\[

80


81/85

Nou$ avon$ vu comment im*l-menter le co+e $ur la cla$$e Di$*la;b@ect mai$ $i vou$ faite$ bien attention, vou$

verre) :ue la m-t(o+e apppl3-ilters boucle $ur un tableau +


82/85

t(i$" conte9t Z conte9t[

t(i$"*roce$$78[

\[

Et en ca+eau, voici une cla$$e nomm-e %ra;Scale6ilter, :ui (-rite +e notre cla$$e i9el6ilter

cla$$e %ra;Scale6ilter>

function %ra;Scale6ilter78^\

Toma(a/"re&i$terCla$$7 %ra;Scale6ilter, %ra;Scale6ilter 8[

Toma(a/"e9ten+7 %ra;Scale6ilter, i9el6ilter 8[

%ra;Scale6ilter"*rotot;*e"*roce$$ Z function78

^

var *i9el$ Z t(i$"&eti9el$78[

var +ata Z *i9el$"+ata[

for 7var iZO[ i+ata"len&t([ i'Zd8

^var r Z +atai[

var & Z +atai'F[

var b Z +atai'J[

var v Z O"JFJ]r ' O"QF5J]& ' O"OQJJ]b[

+atai Z +atai'F Z +atai'J Z v[

\

t(i$"$eti9el$7*i9el$8[

\[

onclusion

Voil., nou$ avon$ *a$$-e en revue l


83/85

"os formations #$ML% #$ML&% SS an!as

Formation HTML & CSS, des bases à la maîtrise

Décou!re le programme d'initiation #$ML et SS et crée des sites internet au normes du *eb.

Formation HTML5 & CSS

Décou!re toutes les nou!eautés du #$ML& (nou!elles balises% microdonnées% meilleur référencement% !idéo et audio sans +lash%

...) et celles du SS, (sélecteurs% graphisme a!ancé% gestion des médias% transformations% animations% media -ueries% responsi!e

design% ...)

Formation HTML5 & Can!as

pprene / construire !otre propre moteur d'affichage / l'aide des toutes nou!elles fonctionnalités du #$ML& et de la balise

an!as.

Formation "es#onsi!e $eb Design

Maitriser le 0esponsi!e 1eb Design et prépare !os sites pour -u'ils soient !éritablement multiplateformes : iphone% ipad%

tablettes% t!% pc% mac

Formation %a!ascri#t & HTML5 D!elo##eur "'( ) *i!eau +

+ormation #$ML& : Maitrise le #$ML& et dé!eloppe des applications riches en html&% ja!ascript% css,. rée des *ebpp pour

terminau mobiles i2hone% ndroid etc.

Formation %a!ascri#t & HTML5 D!elo##eur "'( ) *i!eau

+ormation #$ML& : De!ene epert #$ML& et dé!eloppe des applications riches en html&% ja!ascript% css, a!ec la formation

perfectionnement #$ML&. rée des *ebpp pour terminau mobiles i2hone% ndroid% etc.

83

http://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Ch


84/85


85/85

Nicola$ Le&ran+

Documents

80211ac Wifi for Dummies