UNIVERZA V LJUBLJANI
PEDAGOSKA FAKULTETA
Studijski program: MATEMATIKA IN RACUNALNISTVO
APLIKACIJA ZA DELO Z GRAFI
DIPLOMSKO DELO
Mentor: Kandidat:doc. dr. Primoz Sparl Luka Jurkovic
Somentor:asist. Matej Zapusek
Ljubljana, december 2013
ii
Zahvala
Zahvaljujem se svojemu mentorju, doc. dr. Primozu Sparlu, za zaupanje
pri dodelitvi teme in za vse nasvete ter popravke pri nastajanju diplomskega
dela. Zahvalil bi se tudi somentorju, asist. Mateju Zapusku, ki me je usmerjal
med procesom izdelave aplikacije.
Spela, hvala ti za vse! Brez tebe morda ne bi diplomiral v tem casu. San-
dra, hvala za idejo, ki me je usmerila na pravo pot! Zahvaljujem se vsem
prijateljicam in prijateljem za spodbude in zaupanje. Posebej pa sem hvalezen
starsema in celi druzini, saj so oni tisti, ki so mi omogocili solanje in celoten
studij ter me vedno podpirali.
iii
Program dela
V okviru diplomskega dela ustvarite aplikacijo za delo z grafi. Aplikacija naj
ima osnovne funkcionalnosti kot so ustvarjanje in brisanje vozlisc in pove-
zav, premikanje vozlisc, izris razdaljne particije glede na izbrano vozlisce, izris
nekaterih standardnih druzin grafov kot so polni grafi, cikli in posploseni Pe-
tersenovi grafi. Omogoci naj tudi preverjanje ali je dani graf dvodelen, ali je
izbrana permutacija vozlisc grafa njegov avtomorfizem in ali je izbrano bar-
vanje vozlisc grafa dobro barvanje. Pri ustvarjanju aplikacije si pomagajte z
novostmi, ki jih prinasa novi standard oznacevalnega jezika za izdelavo spletnih
strani HyperText Markup Language 5 (HTML5).
Ljubljana, januar 2013
Mentor: doc. dr. Primoz Sparl
Somentor: asist. Matej Zapusek
iv
Povzetek
Novodobni spletni brskalniki uporabnikom ponujajo vse vec moznosti in inte-
griranih vsebin. S prihodnjimi standardi, kot je HyperText Markup Language
5 (HTML5), bomo tako uporabniki, kot razvijalci dobili nova orodja in ideje
za ustvarjanje. S tem napreduje tudi razvoj na tem podrocju, saj zivimo v
dobi spletnih in mobilnih aplikacij, ki se iz dneva v dan vse manj razlikujejo
od primerljivih namiznih. Zato smo se odlocili uporabiti novosti in funkcional-
nosti, ki jih prinasa HTML5, ter ustvariti aplikacijo za delo z grafi. Pri tem
smo se oprli na JavaScript knjiznico Paper.js in HTML5 novosti, kot je ele-
ment Canvas. Ustvarjena aplikacija omogoca konstrukcijo in nalaganje grafa
iz tekstovne datoteke ter manipulacijo, ob kateri se njegova struktura ohranja.
Ob tem ima uporabnik na voljo razlicna orodja, kot so: barvanje grafa, izris
razdaljne particije grafa, ustvarjanje novih vozlisc in povezav ipd., s katerimi
si lahko pomaga pri spoznavanju in raziskovanju osnovnih lastnosti teh mate-
maticnih struktur.
MSC klasifikacija (2010): 05C12, 68R10, 05C38
ACM klasifikacija :
• G.2 Diskretna matematika
G.2.2 Teorija grafov
• D.2 Programsko inzenirstvo
D.2.3 Orodja za kodiranje in tehnike
• K.3 Racunalnistvo in izobrazevanje
K.3.1 Uporaba racunalnika v izobrazevanju
v
Kljucne besede: HTML5, Canvas, File API, PaperScript, teorija grafov
vi
Abstract
Modern web browsers offer more and more options and integrated contents.
Both users and developers will get new tools and ideas for creation using future
standards, such as HyperText Markup Language 5 (HTML5). Consequently,
there is a continuous progress in this area, as we live in the world of mobile
applications, where the difference between these and comparable desktop ver-
sions is getting smaller and smaller. Because of these reasons we have decided
to create an application for working with graphs using HTML5 innovations
and functionalities. In doing so, we have relied on JavaScript library Paper.js
and HTML5 novelties, such as the Canvas element. The result of this work is
an application which allows construction of graphs and enables loading from a
text file as well as graph manipulations preserving the structure of the graph.
Furthermore, the user has a variety of tools available such as: graph coloring,
visualization of a distance partition, vertex and edge creation etc., which are
helpful for learning and exploring the basic features of these mathematical
structures.
MSC classification (2010): 05C12, 68R10, 05C38
ACM classification :
• G.2 Discrete Mathematics
G.2.2 Graph Theory
• D.2 Software Engineering
D.2.3 Coding Tools and Techniques
• K.3 Computer and Education
K.3.1 Use of Computer in Education
vii
Keywords: HTML5, Canvas, File API, PaperScript, graph theory
viii
Kazalo
1 Uvod 1
2 Teorija grafov 3
2.1 Osnove teorije grafov . . . . . . . . . . . . . . . . . . . . . . . . 4
2.2 Nekatere znane druzine grafov . . . . . . . . . . . . . . . . . . . 10
2.2.1 Poti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2.2 Polni graf . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2.3 Cikli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2.4 Posploseni Petersenovi grafi . . . . . . . . . . . . . . . . 11
2.2.5 Cirkulanti . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.3 Izomorfizmi in avtomorfizmi grafov . . . . . . . . . . . . . . . . 13
2.4 Obhodi v grafih . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.5 Barvanje grafov . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3 HTML5 in knjiznica Paper.js 19
3.1 HTML5 osnove . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.2 Novi strukturni elementi . . . . . . . . . . . . . . . . . . . . . . 20
3.3 Preostali novi elementi . . . . . . . . . . . . . . . . . . . . . . . 22
3.3.1 <video> in <audio> . . . . . . . . . . . . . . . . . . . . 23
3.3.2 Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
ix
x KAZALO
3.4 Novi API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.4.1 File API . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.5 Knjiznica Paper.js . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4 Razvoj aplikacije z0diak 29
4.1 Podatkovna struktura . . . . . . . . . . . . . . . . . . . . . . . . 31
4.2 Premikanje vozlisc in ohranjanje strukture . . . . . . . . . . . . 33
4.3 FileReader API in branje iz datoteke . . . . . . . . . . . . . . . 36
4.4 Blob in shranjevanje v datoteko . . . . . . . . . . . . . . . . . . 38
4.5 Preostale funkcije . . . . . . . . . . . . . . . . . . . . . . . . . . 39
5 Primeri uporabe aplikacije 45
6 Zakljucek 57
Slike
2.1 Primer enostavnega grafa. . . . . . . . . . . . . . . . . . . . . . 4
2.2 Graf in vsebovan podgraf. . . . . . . . . . . . . . . . . . . . . . 5
2.3 Primer regularnega grafa. . . . . . . . . . . . . . . . . . . . . . 6
2.4 Primer enostavnega sprehoda in poti. . . . . . . . . . . . . . . . 7
2.5 Primer nepovezanega grafa. . . . . . . . . . . . . . . . . . . . . 8
2.6 Primer dvodelnega grafa. . . . . . . . . . . . . . . . . . . . . . . 9
2.7 Razdaljna particija glede na vozlisce 2. . . . . . . . . . . . . . . 10
2.8 Primer poti P2 in P3. . . . . . . . . . . . . . . . . . . . . . . . . 10
2.9 Primera K12 in K6. . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.10 Primeri ciklov C3, C5 in C9. . . . . . . . . . . . . . . . . . . . . 11
2.11 Primera GPG(3, 1) in GPG(8, 2). . . . . . . . . . . . . . . . . . 12
2.12 Primera Circ(4, {1}) in Circ(7, {2, 3}). . . . . . . . . . . . . . . 12
2.13 Primer grafov Γ1 in Γ2. . . . . . . . . . . . . . . . . . . . . . . . 14
2.14 Primer iskanja obhodov. . . . . . . . . . . . . . . . . . . . . . . 15
2.15 Dobro barvanje GPG(4, 1) grafa. . . . . . . . . . . . . . . . . . 18
3.1 HTML5 logotip [11]. . . . . . . . . . . . . . . . . . . . . . . . . 20
3.2 Primer postavitve elementov [16]. . . . . . . . . . . . . . . . . . 22
3.3 Canvas HTML5 element. . . . . . . . . . . . . . . . . . . . . . . 23
3.4 Paper.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
xi
xii SLIKE
3.5 Nalaganje PaperScripta. . . . . . . . . . . . . . . . . . . . . . . 26
4.1 Logotip aplikacije. . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.2 Osnovna struktura. . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.3 Moznosti zadetka. . . . . . . . . . . . . . . . . . . . . . . . . . . 34
4.4 Pot miskinega kazalca. . . . . . . . . . . . . . . . . . . . . . . . 35
4.5 Notacija. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
4.6 Krozno izrisovanje. . . . . . . . . . . . . . . . . . . . . . . . . . 37
5.1 GPG(8, 3). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.2 Premiki vozlisc grafa GPG(8, 3). . . . . . . . . . . . . . . . . . . 47
5.3 Preverjanje avtomorfizma. . . . . . . . . . . . . . . . . . . . . . 47
5.4 GPG(7, 2). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.5 Premiki vozlisc grafa GPG(7, 2). . . . . . . . . . . . . . . . . . . 49
5.6 Izris razdaljne particije grafa GPG(7, 2). . . . . . . . . . . . . . 49
5.7 Primerjava razdaljnih particij grafa GPG(7, 2). . . . . . . . . . 50
5.8 Nalaganje grafa iz datoteke. . . . . . . . . . . . . . . . . . . . . 51
5.9 Folkmanov graf. . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
5.10 Primerjava razdaljnih particij Folkmanovega grafa. . . . . . . . 52
5.11 Konstrukcija obeh grafov. . . . . . . . . . . . . . . . . . . . . . 53
5.12 Preverjanje dvodelnosti. . . . . . . . . . . . . . . . . . . . . . . 53
5.13 Grotzschev graf. . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
5.14 Dobro barvanje s stirimi barvami. . . . . . . . . . . . . . . . . . 55
5.15 Poizkus barvanja s tremi barvami. . . . . . . . . . . . . . . . . . 55
Seznam uporabljenih kratic in
simbolov
HTML HyperText Markup Language
(jezik za oznacevanje spletnih besedil)
XML Extensible Markup Language
(razsirljiv oznacevalni jezik)
XHTML Extensible HyperText Markup Language
(oznacevalni jezik, podoben HTML, vendar usklajen s sintakso XML)
API Application programming interface
(vmesnik za programiranje aplikacij)
URL Uniform Resource Locator
(enolicni krajevnik vira)
SQL Structured Query Language
(povprasevalni jezik za delo s podatkovnimi bazami)
MIME Multipurpose Internet Mail Extension
xiii
xiv SLIKE
(vecnamenska razsiritev internetne poste)
GPG Generalized Petersen Graph
(posploseni Petersenov graf)
Poglavje 1
Uvod
Teorija grafov je zelo razgibana in privlacna matematicna veda, saj s svojo
klasicno upodobitvijo grafov privabi tako matematike, kot radovedneze, ki v
svet matematike sicer ne zatavajo velikokrat. Ze sama upodobitev Peterseno-
vega grafa ima svoj car, a je vendar le upodobitev, slika ali skica, ki je bolj
ali manj staticna. Tako se pri obravnavi teorije grafov velikokrat srecamo s
tezavo, kako si dani graf predstavljati, ga prikazati na razlicne nacine ter tako
odkriti kaksne njegove lastnosti, ki sicer niso povsem ocitne.
Kaze se torej potreba po aplikaciji, ki bi omogocala manipuliranje z grafi.
Pri tem se seveda njihova struktura ohranja, mi pa na ta nacin dobimo boljso
predstavo o samem grafu. Ideja za razvoj racunalniske aplikacije je na dlani.
Obstajajo ze bolj ali manj ustaljeni postopki in tehnologije, s pomocjo katerih
to lahko izvedemo. Vcasih pa je bolje izbrati svojo pot, neoznaceno in neusta-
ljeno. Pogosto se namrec izkaze, da na ta nacin nastanejo najbolj zanimivi in
izvirni izdelki.
Cilj tega diplomskega dela je bil torej razviti HTML5 aplikacijo za delo z grafi,
1
2 POGLAVJE 1. UVOD
ki bo temeljila na uporabi elementa Canvas, obenem pa bo delovala znotraj
brskalnika in za to ne bo potrebovala internetne povezave. Glede na to, da
HTML5 se ni uradno standardiziran, specificne literature pa primanjkuje, je
to dokaj drzna ideja, kar se je pokazalo tudi med razvojem aplikacije. Glavna
cilja diplomskega dela sta bila torej v resnici dva. Najprej prestudirati HTML5
in novosti, ki jih prinasa, nato pa z osvojenim znanjem razviti aplikacijo za delo
z grafi, ki bi zacetniku nudila pomoc pri spoznavanju in raziskovanju osnovnih
lastnosti teh matematicnih struktur.
Diplomsko delo zacnemo z uvodom v teorijo grafov, kjer spoznamo osnove teo-
rije grafov ter nekatere znane druzine grafov, kot so poti, polni grafi, dvodelni
grafi, cikli, posploseni Petersenovi grafi in cirkulanti. Nadaljujemo z izomor-
fizmi in avtomorfizmi grafov, obhodi v grafih in barvanjem grafov. V tretjem
poglavju predstavimo HTML5, njegove osnove in novosti, ki jih prinasa, ter
JavaScript knjiznico Paper.js.
Drugi del diplomskega dela je namenjen predstavitvi razvoja aplikacije in njeni
uporabi. V cetrtem poglavju tako opisemo osnovno podatkovno strukturo,
nato pa delovanje premikov, ki ohranjajo strukturo grafa in delovanje shra-
njevanja ter nalaganja grafov. Poglavje o razvoju koncamo s predstavitvijo
preostalih funkcij. V petem poglavju za konec prikazemo uporabnost aplika-
cije na razlicnih primerih.
Poglavje 2
Teorija grafov
Teorija grafov je matematicna veda, ki raziskuje znacilnosti grafov. Graf
je matematicna struktura ali kombinatoricni objekt, ki modelira neko rela-
cijo (obicajno gre za irefleksivno in simetricno relacijo) nad elementi izbrane
mnozice. Kljub temu, da sami zacetki segajo v 18. stoletje, ko je svicarski
matematik Leonhard Euler podal svojo resitev problema konigsberskih mo-
stov, gre za dokaj mlado vedo, ki je svoj pravi razvoj zacela sele ob koncu 20.
stoletja. Razlog za pospesen razvoj je bila nedvomno uporabnost na razlicnih
podrocjih, kot so kemija, genetika, racunalnistvo, fizika in se mnoga druga.
V tem poglavju bomo spoznali osnovne pojme teorije grafov, nekatere znane
druzine grafov, izomorfizme in avtomorfizme grafov, obhode v grafih ter bar-
vanje grafov. Vecina snovi tega poglavja je povzeta po [4] in [3]. Vse slike so
bile konstruirane v nasi aplikaciji.
3
4 POGLAVJE 2. TEORIJA GRAFOV
2.1 Osnove teorije grafov
Enostaven graf Γ je urejen par (V (Γ), E(Γ)), kjer je V (Γ) koncna neprazna
mnozica elementov, ki jih imenujemo vozlisca grafa Γ, E(Γ) pa je podmnozica
mnozice neurejenih parov razlicnih vozlisc. Elemente mnozice E(Γ) imenujemo
povezave grafa Γ. Kardinalnosti |V (Γ)| pravimo red grafa Γ.
Naj bo Γ graf in naj bosta u in v vozlisci tega grafa. Ce je e = {u, v} ∈ E(Γ),
pravimo, da sta u in v sosednji vozlisci, kar oznacimo z u ∼ v. Vozlisci u in
v sta tudi krajisci povezave e, za katero pravimo, da je incidencna z u in
v. Obicajno namesto {u, v} povezave oznacujemo kar z uv. V nasem primeru
je uv = vu, saj smo povezave definirali kot neurejene pare vozlisc. Taksnim
grafom recemo tudi neusmerjeni grafi, obstaja pa tudi pojem usmerjenega
grafa, kjer so povezave urejeni pari vozlisc in tako uv 6= vu. V tem diplom-
skem delu se bomo ukvarjali le z neusmerjenimi grafi.
Bralec bo opazil, da po nasi definiciji grafi nimajo veckratnih povezav (vec
povezav med istim parom vozlisc) ali zank (povezava, ki povezuje neko vo-
zlisce samo s seboj). Beseda graf bo v nadaljevanju vedno pomenila enostaven
graf. Pa si poglejmo primer enostavnega grafa. Graf Γ na sliki 2.1 je sestavljen
iz petih vozlisc in stirih povezav. Konkretno imamo V (Γ) = {1, 2, 3, 4, 5} in
E(Γ) = {12, 13, 14, 42, 43}.
Slika 2.1: Primer enostavnega grafa.
2.1. OSNOVE TEORIJE GRAFOV 5
Ceprav je graf abstrakten kombinatoricen objekt, ga torej v primeru dovolj
majhnega reda lahko upodobimo. To storimo tako, da vozlisca predstavimo
kot tocke v ravnini, povezave pa kot krivulje ali crte, ki povezujejo povezana
vozlisca. Taksne upodobitve so mozne, kadar je red grafa dovolj majhen. Pri
velikih in zapletenih grafih se velikokrat izkaze, da je dovolj, ce gledamo samo
del tega grafa. Tako si lahko prihranimo veliko dela in casa ter ze na podlagi
tega ugotovimo nekatere lastnosti celotnega grafa.
Imejmo grafa Γ = (V (Γ), E(Γ)) in Σ = (V (Σ), E(Σ)). Graf Σ je podgraf
grafa Γ, ce je V (Σ) podmnozica mnozice V (Γ) in E(Σ) podmnozica mnozice
E(Γ). Po definiciji je vsak podgraf spet graf in vsak graf je podgraf samega
sebe.
Slika 2.2: Graf in vsebovan podgraf.
Na sliki 2.2 vidimo graf Γ in njegov podraf Σ, za katerega je V (Σ) = {1, 2, 5}
in E(Σ) = {12, 25, 51}.
Uporaben je tudi izraz za stevilo povezav, ki so incidencne z nekim danim
6 POGLAVJE 2. TEORIJA GRAFOV
vozliscem. Nazoren primer iz vsakdanjika je recimo stevilo cest, ki se srecajo
na kriziscu. Nekatere funkcije, ki delujejo znotraj aplikacije, uporabljajo prav
ta podatek.
Stopnja vozlisca v v grafu Γ je stevilo povezav, ki imajo krajisce v vozliscu v.
Oznacimo jo z degΓ(v) ali kar deg(v). Minimalno stopnjo vozlisc v grafu Γ
oznacimo z δ(Γ), maksimalno stopnjo pa z ∆(Γ). Ce so vsa vozlisca grafa
Γ iste stopnje, recemo, da je graf Γ regularen. Omenimo se zaporedje sto-
penj grafa. To je nepadajoci zapis stopenj vozlisc grafa (narascajoci vrstni
red z dovoljenimi ponovitvami, kjer je to potrebno).
Slika 2.3: Primer regularnega grafa.
Na sliki 2.3 opazimo, da je deg(1) = 8. Preostala vozlisca so prav tako iste sto-
pnje, zato je graf regularen, njegovo zaporedje stopenj pa je (8, 8, 8, 8, 8, 8, 8, 8, 8).
Po drugi strani je zaporedje stopenj grafa s slike 2.1 (0, 2, 2, 3, 3).
Pri grafih nas vcasih zanima tudi to, kako priti iz enega vozlisca v drugo.
Nazoren primer je tisti iz sodobnih navigacijskih naprav. Vsa vecja naselja so
2.1. OSNOVE TEORIJE GRAFOV 7
v tem primeru vozlisca, povezave pa so ceste, ki jih povezujejo. Zanima nas,
kako najhitreje priti iz naselja X do naselja Y. Zanimiv zgled je tudi ugota-
vljanje toka med dvema elementoma v elektricnem vezju.
Naj bo Γ = (V (Γ), E(Γ)) graf in naj bosta u, v poljubni vozlisci tega grafa.
Zaporedju (v0, v1, v2, ..., vn) vozlisc grafa Γ, kjer je v0 = u in vn = v, pravimo
sprehod od vozlisca u do vozlisca v, ce za vsak i ∈ {0, 1, 2, ..., n − 1} velja
vivi+1 ∈ E(Γ). V tem primeru pravimo, da je ta sprehod dolzine n. Ce so vse
povezave sprehoda razlicne, govorimo o enostavnem sprehodu. Ce so v eno-
stavnem sprehodu razlicna tudi vsa vozlisca, potem govorimo o poti. Dolzini
najkrajse poti med vozliscema u in v (ce ta obstaja), pravimo razdalja med
u in v ter jo oznacimo z dΓ(u, v). Poglejmo si primer na sliki 2.4.
Slika 2.4: Primer enostavnega sprehoda in poti.
Na levem primeru je rdece obarvan enostaven sprehod (4, 3, 2, 1, 4, 2, 5), desni
primer pa prikazuje pot (3, 2, 1, 4, 5).
Sprehodi, ki se zacnejo in koncajo v istem vozliscu, imajo posebno poime-
8 POGLAVJE 2. TEORIJA GRAFOV
novanje. Sprehod (v0, v1, v2, ..., vn) imenujemo sklenjen sprehod ali obhod,
ce velja v0 = vn. Ce so vse povezave obhoda razlicne, potem ga poimenujemo
enostavni obhod ali enostavni sklenjen sprehod. Ce so v obhodu razlicna
tudi vsa vozlisca (z izjemo enakosti v0 = vn), potem ga poimenujemo cikel.
Na sliki 2.4 na primer najdemo cikla (1, 2, 3, 4, 5, 1) in (1, 2, 4, 5, 3, 1).
Zdaj lahko definiramo, kdaj je graf povezan. Graf Γ je povezan, ce med
poljubnim parom vozlisc obstaja pot. Nepovezan graf razpade na povezane
podgrafe ali komponente grafa. Maksimalni razdalji med dvema vozliscema
v povezanem grafu pravimo premer grafa Γ.
Slika 2.5: Primer nepovezanega grafa.
Na sliki 2.5 je primer nepovezanega grafa, ki je sestavljen iz treh povezanih
komponent.
V teoriji grafov se velikokrat srecamo tudi z vprasanjem, ali je dolocen graf
dvodelen. Naj bo Γ(V (Γ), E(Γ)) graf. Graf Γ je dvodelen, ce lahko mnozico
V (Γ) zapisemo kot disjunktno unijo A ∪ B = V (Γ) tako, da vsaka povezava
2.1. OSNOVE TEORIJE GRAFOV 9
grafa Γ povezuje eno vozlisce iz mnozice A z vozliscem iz mnozice B.
Slika 2.6: Primer dvodelnega grafa.
Na sliki 2.6 se nahaja primer dvodelnega grafa, ki je upodobljen na dva nacina.
Na desni upodobitvi smo premaknili vozlisca mnozice A na eno stran in vo-
zlisca mnozice B na drugo stran.
Vpeljimo tu se pojem razdaljne particije grafa glede na izbrano vozlisce. Naj bo
Γ povezan graf s premerom d in v ∈ V (Γ) poljubno vozlisce tega grafa. Druzini
mnozic N0(v), N1(v), N2(v), ..., Nd(v), kjer za poljubno celo stevilo 0 ≤ i ≤ d
velja Ni(v) = {u ∈ V (Γ) | d(v, u) = i}, ki tvori particijo mnozice V (Γ), pra-
vimo razdaljna particija grafa Γ glede na vozlisce v. Graf lahko predstavimo
tako, da narisemo vozlisca mnozic N0(v), N1(v) itd. v kolonah od leve proti
desni. Na sliki 2.7 si lahko ogledamo razdaljno particijo grafa s slike 2.6, kjer
smo za izhodisce izbrali vozlisce 2.
Ogledali smo si nekatere najosnovnejse pojme v teoriji grafov. Spoznali smo
pojem grafa, kaj ga sestavlja, kako ga upodobimo in kdaj je povezan. Spo-
10 POGLAVJE 2. TEORIJA GRAFOV
Slika 2.7: Razdaljna particija glede na vozlisce 2.
znali smo tudi pojme podgrafa, sprehoda, poti in cikla. Zdaj bomo spoznali
se nekatere znane druzine grafov.
2.2 Nekatere znane druzine grafov
2.2.1 Poti
Pot Pn je graf z mnozico vozlisc {1, 2, ..., n+ 1} in mnozico povezav {i(i+ 1) |
1 ≤ i ≤ n}. Torej gre za graf, ki je sestavljen iz ene same poti.
Slika 2.8: Primer poti P2 in P3.
2.2.2 Polni graf
Polni graf Kn je graf reda n, v katerem sta poljubni dve razlicni vozlisci
sosednji.
2.2. NEKATERE ZNANE DRUZINE GRAFOV 11
Slika 2.9: Primera K12 in K6.
2.2.3 Cikli
Cikel Cn je graf, ki ga sestavlja en sam cikel in ima natanko n vozlisc ter
povezav. Vsak Cn je torej regularen graf stopnje 2.
Slika 2.10: Primeri ciklov C3, C5 in C9.
2.2.4 Posploseni Petersenovi grafi
Naj bosta n ≥ 3 in 0 < k < n naravni stevili. Posploseni Petersenov graf
GPG(n, k) je graf z mnozico vozlisc V = {ui | i ∈ Zn}∪{vi | i ∈ Zn} in mnozico
povezav E = {{ui, ui+1} | i ∈ Zn} ∪ {{ui, vi} | i ∈ Zn} ∪ {{vi, vi+k} | i ∈ Zn}.
12 POGLAVJE 2. TEORIJA GRAFOV
Slika 2.11: Primera GPG(3, 1) in GPG(8, 2).
Primer GPG(4, 1) najdemo na sliki 2.6.
2.2.5 Cirkulanti
Cirkulant Circ(n, S) je graf z mnozico vozlisc V = {ui | i ∈ Zn} in mnozico
povezav E = {{ui, ui+k} | i ∈ Zn, k ∈ S}, kjer je n > 0, S ⊆ Zn, pri tem pa
mora veljati S = −S in 0 /∈ S.
Slika 2.12: Primera Circ(4, {1}) in Circ(7, {2, 3}).
2.3. IZOMORFIZMI IN AVTOMORFIZMI GRAFOV 13
2.3 Izomorfizmi in avtomorfizmi grafov
V tem podpoglavju se bomo seznanili z avtomorfizmi in izomorfizmi grafov.
Vpeljimo najprej pojem izomorfizma grafov.
Naj bosta Γ1 = (V (Γ1), E(Γ1)) in Γ2 = (V (Γ2), E(Γ2)) poljubna grafa. Pre-
slikava ϕ : V (Γ1) → V (Γ2) je izomorfizem grafov Γ1 in Γ2, ce je bi-
jekcija in ohranja sosednost, to je, da za poljubni vozlisci u, v ∈ V1 velja:
u ∼ v ⇔ ϕ(u) ∼ ϕ(v). V tem primeru pravimo, da sta Γ1 in Γ2 izomorfna
grafa, kar oznacimo z Γ1∼= Γ2.
Izomorfizem grafov je po definiciji bijekcija, ki ohranja sosednost, zato za po-
ljubna izomorfna grafa velja, da:
• imata grafa enaki zaporedji stopenj;
• imata grafa enak premer;
• za vsak graf Γ velja: Γ je izomorfen nekemu podgrafu v Γ1 natanko
tedaj, ko je Γ izomorfen nekemu podgrafu v Γ2;
• za vsak graf Γ velja: ce v Γ1 obstaja vozlisce, ki je vsebovano na k
kopijah Γ, potem tudi v Γ2 obstaja taksno vozlisce.
Vcasih nas zanimajo tudi izomorfizmi iz danega grafa vase. V tem primeru
govorimo o avtomorfizmih danega grafa. Gre torej za bijektivne preslikave
ϕ : V (Γ) → V (Γ), pri katerih za poljubni vozlisci u, v ∈ Γ velja: u ∼ v ⇔
ϕ(u) ∼ ϕ(v). Mnozico vseh avtomorfizmov grafa Γ oznacimo z AutΓ.
Avtomorfizmi danega grafa Γ torej odrazajo njegove simetrije. Vecja ko je
mnozica AutΓ (ki je v resnici grupa za operacijo kompozituma), vec simetrij
14 POGLAVJE 2. TEORIJA GRAFOV
premore Γ. Oglejmo si konkreten zgled. Ali sta grafa na sliki 2.13 izomorfna?
Slika 2.13: Primer grafov Γ1 in Γ2.
Zaporedji stopenj grafov sta enaki. Premera grafov pa se razlikujeta, saj je
premer grafa Γ1 enak 3, premer grafa Γ2 pa je enak 2 (v kar se lahko pre-
pricamo s pomocjo nase aplikacije, kot bomo videli v poglavju 5). Opazimo
tudi, da na grafu Γ1 vozlisce 6 lezi na natanko treh ciklih dolzine 4, v grafu Γ2
pa poljubno vozlisce lezi le na dveh ciklih dolzine 4. Grafa Γ1 in Γ2 torej nista
izomorfna. Je pa na primer ϕ = (1234)(5678) avtomorfizem grafa Γ1, saj si ga
lahko predstavljamo kar kot rotacijo za π2
okrog sredisca slike grafa.
Izomorfizmi grafov so pomembni predvsem zato, ker grafe obicajno studiramo
le do izomorfizma natancno. Izomorfna grafa imata namrec povsem enako
strukturo, morebitna razlika je le v poimenovanju vozlisc.
2.4 Obhodi v grafih
Poglejmo si naslednja primera iz vsakdanjika. Cestni delavci bi radi pregledali
stanje cest med stevilnimi naselji. Porabiti zelijo cim manj goriva, zato iscejo
2.4. OBHODI V GRAFIH 15
tak obhod, ki bi vsako cesto obiskal natanko enkrat.
Podobno se neki popotnik odloci, da bi rad obiskal vsa vecja mesta v Slo-
veniji. Zanima ga, ali obstaja tak obhod, ki bi obiskal vsako mesto natanko
enkrat.
Primera lahko enostavno ponazorimo z grafom, kjer so mesta vozlisca in po-
vezave ceste. Zgoraj omenjena obhoda imata v teoriji grafov posebni poime-
novanji.
Naj bo Γ poljuben graf. Eulerjev obhod grafa Γ je enostaven obhod, na
katerem so zajete vse povezave grafa Γ. To je sprehod, ki prehodi vse pove-
zave grafa Γ, vsako po enkrat, in se konca tam, kjer je zacel. V primeru, da
se taksen sprehod ne konca v isti tocki, pa vendar zadosca vsem preostalim
pogojem, pravimo, da je to nesklenjen Eulerjev sprehod.
Ciklu, na katerem so vsa vozlisca grafa Γ, pravimo Hamiltonov cikel grafa
Γ. Pot, ki obisce vsa vozlisca grafa Γ, se imenuje Hamiltonova pot grafa Γ.
Slika 2.14: Primer iskanja obhodov.
16 POGLAVJE 2. TEORIJA GRAFOV
Graf na sliki 2.14 premore tako Hamiltonov cikel (3, 5, 2, 7, 1, 6, 4, 3) kot Eu-
lerjev obhod (5, 3, 4, 6, 1, 2, 3, 7, 1, 4, 7, 2, 5).
Iskanje Hamiltonove poti ali cikla ni majhen zalogaj, saj ni algoritma, ki bi
podal hitro in enostavno resitev. Gre za zelo kompleksen problem iskanja, za
katerega pravimo, da je NP-poln problem. Vec o tem si lahko bralec prebere
v [5]. Po drugi strani je problem obstoja Eulerjevega obhoda zelo enosta-
ven. Poznamo namrec potreben in zadosten kriterij za ugotavljanje obstoja
Eulerjevega obhoda (vse stopnje vozlisc morajo biti sode) in algoritme z line-
arno casovno zahtevnostjo glede na stevilo povezav (Hierholzerjev algoritem),
s pomocjo katerih ga lahko najdemo [4].
2.5 Barvanje grafov
V matematicnem svetu je precej dobro poznan problem stirih barv. V dalj-
nem letu 1852 je na londonskem University Collegeu pouceval Augustus De
Morgan. Francis Guthrie, eden njegovih nekdanjih studentov, je uspesno
pobarval zemljevid angleskih grofij s stirimi barvami, tako da so bile sosednje
grofije razlicnih barv. Guthrie je prek svojega brata Fredericka, ki je bil student
Augustusa De Morgana, slednjega vprasal, ali so stiri barve dovolj za poljuben
zemljevid. Problem dolgo casa ni bil razresen in je postal eden najslavnejsih
neresenih matematicnih problemov. Pojavilo se je vec neuspelih poskusov do-
kaza. Leta 1976 pa sta s pomocjo racunalnika problem resila Kenneth Appel
in Wolfgang Haken.
Problem stirih barv je tesno povezan s teorijo grafov. Recimo, da imamo
zemljevid angleskih grofij. Za vsako grofijo narisemo vozlisce. Nato povezemo
2.5. BARVANJE GRAFOV 17
tista vozlisca, katerih pripadajoce grofije imajo skupno mejo, in imamo pred se-
boj klasicno upodobitev grafa. V teoriji grafov nas pogosto zanima najmanjse
stevilo barv, s katerimi lahko pobarvamo poljuben graf tako, da so sosednja
vozlisca razlicnih barv.
Naj bo Γ = (V (Γ), E(Γ)) poljuben graf. Preslikava c : V → N je dobro
barvanje vozlisc grafa Γ, ce za poljubni dve sosednji vozlisci u, v ∈ Γ velja,
da je c(u) 6= c(v). Problem barvanja grafa predstavlja dolocitev najmanjsega
naravnega stevila χ(Γ), imenovanega kromaticno stevilo grafa Γ, tako da
bo obstajalo dobro barvanje c : V → N, za katerega bo za poljubno vozlisce
v veljalo c(v) ≤ χ(Γ). Iscemo torej minimalno stevilo barv, s katerimi lahko
dobro pobarvamo graf.
Poglejmo si dokaj mocan in uporaben izrek, ki ga je prvi dokazal Rowland
Leonard Brooks leta 1941.
Izrek 2.1 (Brooksov izrek). Naj bo Γ poljuben graf. Ce Γ ni lih cikel ali poln
graf, potem je χ(Γ) ≤ ∆(Γ).
Dokaz Brooksovega izreka je dokaj zahteven. Zainteresirani bralec ga najde
v [1]. Brooksov izrek nam torej poda zgornjo mejo pri iskanju kromaticnega
stevila, ki pa vcasih ni prevec uporabna. Pri manjsih grafih, ki imajo vozlisca
visoke stopnje, je lahko zgornja meja iz Brooksovega izreka zelo slaba.
Na sliki 2.15 smo graf dobro pobarvali z dvema barvama. Ker graf ni lih
cikel ali poln graf, po Brooksovem izreku velja, da je χ(Γ) ≤ 3, vendar smo
graf dobro pobarvali ze z dvema barvama. Preveriti moramo samo se, ali lahko
graf dobro pobarvamo z eno barvo, kar pa ocitno ni mozno (graf ima vsaj eno
povezavo), zato je χ(Γ) = 2.
18 POGLAVJE 2. TEORIJA GRAFOV
Slika 2.15: Dobro barvanje GPG(4, 1) grafa.
Dolocitev kromaticnega stevila ni lahek problem, saj ni algoritma, ki bi na-
tancno izracunal kromaticno stevilo poljubnega grafa. Tako kot iskanje Ha-
miltonove poti in cikla je tudi problem dolocitve kromaticnega stevila grafa
NP-poln problem. Vec o tem si lahko bralec prebere v [1].
Z barvanjem grafov smo koncali uvod v teorijo grafov. Dotaknili smo se
samo nekaterih osnovnih pojmov in definicij, ki gradijo to zanimivo in obsezno
matematicno vejo. Cilj diplomskega dela je bil razvoj ze omenjene HTML5
aplikacije. Aplikacija je matematicno obarvana, saj je namenjena delu na
tem podrocju, vendar je sam razvoj aplikacije potekal v racunalniskem svetu
programske kode. Zato si bomo v naslednjem poglavju pogledali HTML5 in
novosti, ki jih prinasa.
Poglavje 3
HTML5 in knjiznica Paper.js
HTML5 prinasa kar nekaj novosti. V tem poglavju si bomo ogledali osnovne
HTML5 znacilnosti, semanticne in sintakticne spremembe, bitno platno Can-
vas in nekatere nove vmesnike. V zakljucku poglavja bomo spoznali tudi Ja-
vaScript knjiznico Paper.js. Vecina tega poglavja je povzeta po [2] in [10].
3.1 HTML5 osnove
HTML5 je oznacevalni jezik za oblikovanje in predstavitev spletnih strani. To
je peta revizija HTML standarda, ki bo izpodrinila HTML 4.01 in Extensible
HyperText Markup Language 1.1 (XHTML 1.1) [15]. Glavno vodilo specifi-
kacije HTML5 je poenostavljanje delovanja in razvijanja vmesnikov spletnih
aplikacij. HTML5 si je najbolje predstavljati kot zbirko posameznih funkcij in
ne kot eno samo. Danasnje spletne vsebine stremijo k cim vecji interaktivno-
sti. Razvijalci spletnih vsebin in aplikacij zelijo, da bi imele te bogat nabor
dodatnih funkcij in moznosti. Tu pa naletimo na tezavo, saj je v taksnih
primerih velikokrat treba uporabiti dodatne vticnike, kot so: ActiveX, Flash,
QuickTime, RealPlayer. Ti vticniki se tako dobro integrirajo z brskalniki, da
19
20 POGLAVJE 3. HTML5 IN KNJIZNICA PAPER.JS
Slika 3.1: HTML5 logotip [11].
velikokrat dejstvo, da so bili uporabljeni, opazimo sele pri uporabi platforme,
ki tega vticnika ne podpira. Ni pa to edina tezava, saj vticniki zahtevajo visjo
procesorsko zmogljivost in dodatno kodiranje s strani razvijalca aplikacije. Tu
nam v pomoc priskoci HTML5, saj nam ponuja nabor novosti, s pomocjo kate-
rih se lahko v dolocenih primerih izognemo potrebi po zunanjih vticnikih. Kot
primer omenimo nova <video> in <audio> elementa, ki ju bomo podrobneje
opisali v nadaljevanju. Vse obstojece strani, ki temeljijo na predhodnih stan-
dardih, se vedno delujejo povsem enako, saj v HTML5 delujejo vsi elementi iz
predhodnikov, novim vsebinam pa HTML5 ponuja moc vseh novosti.
3.2 Novi strukturni elementi
Novi strukturni elementi, ki jih uvede HTML5, so vecinoma nastali na podlagi
najpogostejsih imen atributov iz prejsnjih razlicic. Se vedno lahko upora-
bljamo starejse atribute, vendar z uporabo novih elementov, ki predstavljajo
isto zadevo, dobimo berljivejso in enostavnejso sintakso. V nadaljevanju bomo
opisali nekatere omenjene elemente.
3.2. NOVI STRUKTURNI ELEMENTI 21
<header>
Element <header> oznacuje glavo ali uvod v dokument ali razdelek. Pred-
stavlja lahko skupino uvodnih (npr. logotip) in navigacijskih pripomockov.
<footer>
Element <footer> oznacuje nogo dolocenega razdelka, clanka ali samostojno
nogo strani. Lahko vsebuje ime avtorja, kontaktne informacije, datum, avtor-
ske pravice ipd.
<nav>
Element <nav> doloca odsek v dokumentu, ki je namenjen navigaciji do
preostalih podstrani ali drugih spletnih strani.
<section>
Element <section> predstavlja tematsko zdruzitev elementov dokumenta ali
aplikacije, obicajno z naslovom (npr. poglavja).
<article>
Element <article> je namenjen predstavljanju vsebine na spletni strani in
pogosto oznacuje vsebinsko zakljuceno celoto. To so lahko clanek, objava na
blogu, novica itd.
<aside>
Element <aside> je misljen kot prostor na strani, kjer postavimo navigacijo,
oglase in vse, kar zelimo lociti od glavnega dela vsebine na strani. Je pa ta del
22 POGLAVJE 3. HTML5 IN KNJIZNICA PAPER.JS
strani vsebinsko povezan z glavno vsebino.
Slika 3.2: Primer postavitve elementov [16].
Seveda to niso vsi elementi, ki jih uvaja prihodnji standard. Novih in spre-
menjenih elementov je se veliko vec, vendar so zgoraj opisani med najbolj
zanimivimi. Zdaj si bomo ogledali se tri nove elemente, ki so sami po sebi
dokaj revolucionarni.
3.3 Preostali novi elementi
HTML5 uvaja nove moznosti za integracijo videa in glasbe. Nekoc smo za to
potrebovali posebne vticnike, zdaj pa to ni vec potrebno, saj lahko znotraj
ustreznega elementa navedemo vir in tako integriramo glasbo ali video v sple-
tno stran. Novost je tudi bitno platno ali Canvas, ki smo ga uporabljali pri
razvoju nase aplikacije.
3.4. NOVI API 23
3.3.1 <video> in <audio>
Element <video> nam omogoca predvajanje videa na nasi spletni strani. Vse,
kar potrebujemo, je vir videa, ki ga umestimo med znacke. Tudi <audio>
element deluje na podoben nacin, saj nam omogoca predvajanje glasbe na
spletni strani. Potrebujemo vir in pravilen format datoteke.
3.3.2 Canvas
Canvas je dokaj revolucionarna novost, ki jo prinasa HTML5. Deluje kot bi-
tno platno za risanje, na katerem lahko izdelujemo grafe, animacije, graficna
orodja, interaktivne aplikacije in se kaj drugega. Tudi <canvas> je element,
ki ga ustvarimo na naslednji nacin:
Slika 3.3: Canvas HTML5 element.
Kot vidimo, smo Canvasu najprej dodelili unikatni identifikator (myCanvas),
in mu dolocili dimenzije ter atribut, ki omogoca dinamicno spreminjanje di-
menzij. Omeniti velja, da Canvas element ne deluje tako, kot preostali HTML
elementi, kjer se vpliv elementa pozna na vsebini znotraj znack. Canvas deluje
kot nekaksen graficni vsebnik, z njegovo vsebino pa lahko manipuliramo prek
skriptnih jezikov (ponavadi JavaScript). Izrisovanje grafike torej poteka prek
skript, vsebina med znackami pa se izpise, ce nas brskalnik ne podpira Canvas
elementa.
3.4 Novi API
Ogledali smo si najpomembnejse semanticne in sintakticne novosti v HTML5.
Poleg njih HTML5 specifikacija uvaja tudi nekatere nove vmesnike za progra-
24 POGLAVJE 3. HTML5 IN KNJIZNICA PAPER.JS
miranje aplikacij, tako imenovane Application programming interface (API), ki
se lahko uporabljajo v povezavi z JavaScriptom. API oznacuje skupek ukazov,
funkcij ali protokolov, ki jih razvijalci lahko uporabijo pri razvoju programske
opreme za dolocen operacijski sistem. Tako imajo dostop do vnaprej napisanih
funkcij, ki so namenjene interakciji z operacijskim sistemom [6]. Tukaj bomo
omenili le nekatere nove HTML5 API:
• Canvas API, ki smo ga ze opisali;
• Web storage API, s katerim lahko spletne strani lokalno shranjujejo
podatke znotraj brskalnika na podoben nacin kot piskotki, vendar z
vecjo kapaciteto, hitreje in bolj varno;
• Web Messaging API omogoca komunikacijo med dokumenti, ki se
nahajajo na razlicnih izvornih domenah.
Obstajajo pa tudi API, ki niso del HTML5 specifikacije, so pa v nekaksnem
tehnoloskem sorodu. Ti API so bodisi del katere druge specifikacije ali pa
imajo kar svojo lastno [15]. Eden od primerov je File API, ki je bil pri izdelavi
nase aplikacije se kako pomemben.
3.4.1 File API
Novosti, ki jih prinasa File API, nam omogocajo, da z JavaScript kodo prebe-
remo vsebino lokalno shranjene datoteke. Tako lahko prikazemo kratek opis
datoteke, preden jo nalozimo na streznik, ali pa kar preberemo njeno celotno
vsebino [17].
Po File API specifikaciji bi morali brskalniki ponujati naslednje vmesnike in
podatke:
3.5. KNJIZNICA PAPER.JS 25
• FileList objekt, ki predstavlja tabelo vseh datotek, izbranih z elemen-
tom <input type=”file”>;
• Blob vmesnik, ki nam ponuja metode za konstrukcijo in delo z Blobi;
• File vmesnik, ki vsebuje podrobnosti o imenu datoteke, njenem tipu
in lokaciji;
• FileError vmesnik in FileException izjemo;
• FileReader vmesnik, ki ponuja metode za branje datoteke [17].
Prav FileReader in Blob vmesnika smo potrebovali pri ustvarjanju nase apli-
kacije. Bolj natancno si ju bomo ogledali v 4. poglavju.
3.5 Knjiznica Paper.js
V tem podpoglavju se naslonimo na [12]. Paper.js je odprtokodno skriptno
ogrodje, namenjeno delu z vektorsko grafiko, ki za delovanje uporablja HTML5
Canvas. Trenutno je se vedno v razvoju, za katerega skrbita Jurg Lehni in
Jonathan Puckey. Ponuja nam cisto podatkovno strukturo graf scene in
veliko uporabnost za ustvarjanje in delo z vektorsko grafiko ter Bezierovimi
krivuljami. Gre za knjiznico, namenjeno tako zacetnikom, kot bolj zahtevnim
uporabnikom. Osnov se lahko naucimo zelo hitro, da pa bi delo s Paper.js
obvladali, potrebujemo kar veliko casa in znanja.
Paper.js ni samo ovoj, ki obdaja Canvas. Knjiznica nam poenostavi delo s
Canvasom, saj je izrisovanje graficnih elementov avtomatsko in optimizirano.
Tako lahko ukaze za izrisovanje prepustimo kar knjiznici, mi pa se lahko posve-
timo preostalim ciljem. Pri njihovem doseganju si lahko pomagamo s spodaj
opisanimi znacilnostmi.
26 POGLAVJE 3. HTML5 IN KNJIZNICA PAPER.JS
Slika 3.4: Paper.js.
• PaperScript - je enostavna razsiritev obstojecega JavaScripta, ki vse-
buje dodatno podporo za delovanje matematicnih operatorjev na Pa-
per.js objektih, kot sta Point in Size. Prirocno je tudi to, da Pa-
perScript samodejno ustvari Project, View in miskine Tool objekte
ter zanje poenostavi namestitev event nadzornih funkcij. PaperScript
kodo nalozimo tako kot JavaScript znotraj <script> elementa. Ome-
nimo tudi to, da je treba pri nalaganju dolociti, na kateri Canvas se
zadeva izrisuje.
Slika 3.5: Nalaganje PaperScripta.
• Poti in segmenti - s Paper.js je zelo enostavno ustvarjati nove poti.
Pot je definirana kot skupek segmentov, ki so povezani s krivuljami.
Vsak segment sestavljajo glavna tocka in dve nadzorni tocki. Omenjene
3.5. KNJIZNICA PAPER.JS 27
tri tocke dolocajo polozaj in usmeritev pripadajocih krivulj. Segmente
lahko dodajamo, brisemo in spreminjamo njihove lastnosti ter polozaje.
• Interakcija z misko in tipkovnico - knjiznica vsebuje nadzorne funk-
cije, ki nam pomagajo pri implementaciji miske in tipkovnice. Tako
lahko zelo enostavno ustvarimo bogata in zanimiva orodja, ki delu-
jejo na osnovi uporabe miske in tipkovnice. Nadzorne funkcije samo
definiramo v PaperScript kodi, saj se izvajajo samodejno ob uspesni
interakciji s Canvasom.
• Matematicne operacije - PaperScript nam omogoca uporabo obicajnih
algebraicnih operatorjev nad objekti, kot sta Point in Size. To po-
meni, da lahko “sestevamo tocke“, pristevamo vektorje in se veliko vec.
• Vektorska geometrija - kot je bilo ze omenjeno, je Paper.js knjiznica,
namenjena delu z vektorsko grafiko, zato je tudi podpora za delo z
vektorji zelo mocna. Neposredno delo z x- in y-koordinati je dokaj
neintuitivno in nefleksibilno. Skupaj z razsirjenim delovanjem mate-
maticnih operatorjev lahko premikamo tocke s pristevanjem vektorjev,
spreminjamo smer in velikost vektorja itd.
Kot vidimo, je Paper.js dokaj zmogljiva knjiznica, ki nam poenostavi delo s
Canvasom. Za uporabo Paper.js knjiznice smo se odlocili, ker je enostavna
za zacetnike in deluje kot odlicna odskocna deska v Canvas okolje. Glede na
to, da je Paper.js se vedno v razvoju, je dokaj tezko zaceti z izdelavo necesa
specificnega. Najbolje si je pomagati z referenco in vodici, ki pa se ne pokrijejo
vseh funkcionalnosti. Udelezba v razvoju in diskusiji je toplo priporocena, saj
vecina trenutnih uporabnikov aktivno sodeluje na uradni mailing listi. Razvoj
nase aplikacije je potekal na podoben nacin. Veliko je bilo treba sprasevati,
28 POGLAVJE 3. HTML5 IN KNJIZNICA PAPER.JS
testirati in spreminjati. Vec o samem razvoju aplikacije pa v naslednjem po-
glavju.
Poglavje 4
Razvoj aplikacije z0diak
Aplikacija je dobila svoje ime po zodiakalnih znamenjih ali horoskopu. Nasi
predniki so vsak horoskopski znak zacrtali med zvezdami, ki pa same po sebi
se ne izdajo tiste prave upodobitve horoskopskih znakov. Ko pa zvezde na
primeren nacin povezemo eno z drugo, dobimo lepe figure, ki pa niso nic kaj
drugega kot grafi.
Slika 4.1: Logotip aplikacije.
Sama struktura aplikacije je dokaj standardna. Zaradi samega namena apli-
kacije je bilo treba vgraditi delovanje miske in dobro definirati osnovno podat-
kovno strukturo, saj je za delovanje vecine gumbov to vse, kar potrebujemo.
Same funkcije bi lahko nekako razvrstili v tri osnovne razrede: kontrolne funk-
cije, preverjalne funkcije in funkcije za postavitev. Vsak gumb je povezan s
29
30 POGLAVJE 4. RAZVOJ APLIKACIJE Z0DIAK
pripadajoco kontrolno funkcijo, ki skrbi za postavitev spremenljivk, saj tako
tudi definiramo vlogo klikov na Canvasu. Odvisno od namena ima vsak gumb
tudi preverjalno funkcijo, ki preveri ustreznost izbire (npr. preverjanje ustre-
znosti avtomorfizma). Pri gumbih, ki skrbijo za izris ali drugacne upodobitve,
pa imamo po navadi tudi funkcijo, ki poskrbi, da se vozlisca grafa ustrezno
premaknejo (npr. krozno izrisovanje na sliki 4.6). Zaradi velikega stevila gum-
bov in preostalih moznosti je pomembno tudi medsebojno izkljucevanje. Za
to skrbi posebna funkcija, ki je povezana z vecino gumbov v aplikaciji.
Pomemben del aplikacije je tudi delovanje nalaganja in shranjevanja grafov.
Kot bomo videli v nadaljevanju, smo tu uporabili dokaj nenavadne resitve.
V tem poglavju bomo torej opisali, kako je potekal razvoj nase aplikacije.
Pogledali si bomo najpomembnejse gradnike in zamisli, ki jo tvorijo. To so:
osnovna podatkovna struktura Graph data structure, branje iz datoteke,
ustvarjanje elementov na Canvasu, ustvarjanje datoteke z zeljeno vsebino, pre-
mikanje elementov in preostale funkcije ter procedure.
Aplikacija ja namenjena predvsem tistim posameznikom, ki se prvic srecujejo
s teorijo grafov. Njena funkcionalnost je iz razumljivih razlogov nekoliko ome-
jena, vendar zacetniku nudi dovolj dobro orodje za spoznavanje in raziskovanje
osnovnih lastnosti grafov.
Morda bi si lahko z aplikacijo in izvorno kodo pomagali tudi tisti, ki se ucijo
dela s Canvasom in knjiznico Paper.js.
4.1. PODATKOVNA STRUKTURA 31
4.1 Podatkovna struktura
Najpomembnejsi del aplikacije je podatkovna struktura, imenovana Graph, ki
je tipa Graph data structure. Razred Graph data structure sestavljata
dve dinamicni tabeli. V prvi tabeli, Graph data structure.nodes, so shra-
njena vsa vozlisca. Druga tabela, Graph data structure.lines, pa vsebuje
vse povezave.
Slika 4.2: Osnovna struktura.
Prek tabele vozlisc lahko dostopamo do vsakega vozlisca grafa Graph. Vsako
vozlisce na Canvasu je objekt tipa Path.Circle, ki ga ustvarimo s preprosto
funkcijo
var Vozlisce = new Path.Circle(koordinate sredisca, radij).
Za potrebe aplikacije je bilo najpomembnejse to, da ima vsako vozlisce svojo
lokacijo na Canvasu, edinstveno oznako, barvo, radij in podatke o sosedih. Tu-
kaj velja omeniti, da smo zaradi spreminjanja arhitekture skozi razvoj ohra-
nili dodatno plast, imenovano construct, ki vsebuje omenjeni objekt tipa
Path.Circle. V zacetku razvoja aplikacije je bilo treba loceno dostopati do
samega kazalca na vozlisce in tabele sosedov istega vozlisca. Zdaj je tabela
sosedov premaknjena eno plast nizje k samemu kazalcu na vozlisce.
32 POGLAVJE 4. RAZVOJ APLIKACIJE Z0DIAK
Prek tabele povezav lahko dostopamo do vsake povezave na grafu Graph.
Vsaka povezava na Canvasu je objekt tipa Path.Line, ki ga ustvarimo s pre-
prosto funkcijo
var Povezava = new Path.Line(koordinate prvega krajisca, koordinate
drugega krajisca).
Vsaka povezava hrani podatke o krajiscih, barvi crte in njeni debelini.
Ce povzamemo vse, kar smo spoznali v tem razdelku:
• Graph - glavna podatkovna struktura, objekt tipa Graph data structure
• Graph.nodes - tabela vozlisc
• Graph.nodes[i].construct - i-to vozlisce, objekt tipa Path.Circle z
naslednjimi lastnostmi:
– Graph.nodes[i].construct.fillColor - doloca barvo
– Graph.nodes[i].construct.vertex - objekt tipa PointText, ki
predstavlja oznako vozlisca
– Graph.nodes[i].construct.neighbours - tabela sosedov
• Graph.lines - tabela povezav
• Graph.lines[i] - i-ta povezava, objekt tipa Path.Line z naslednjimi
lastnostmi:
– Graph.lines[i].edgeStart - kazalec na prvo krajisce
– Graph.lines[i].edgeEnd - kazalec na drugo krajisce
– Graph.lines[i].strokeColor - doloca barvo crte
4.2. PREMIKANJE VOZLISC IN OHRANJANJE STRUKTURE 33
– Graph.lines[i].strokeWidth - doloca debelino crte
Opisali smo samo najbolj kljucne lastnosti in razrede. Pomembne so glavne
ideje in osnovna struktura aplikacije, zato si bomo najbolj pomembne ideje
pogledali v nadaljevanju. Izvorna koda je prosto dostopna in tudi komentirana,
tako da si lahko bralec tudi sam bolj natancno ogleda dolocene podrobnosti.
4.2 Premikanje vozlisc in ohranjanje strukture
Struktura grafa se pri vseh premikih ohranja. To pomeni, da se morajo pri pre-
miku posameznega vozlisca ustrezno premakniti tudi vse povezave, ki imajo
krajisce v tem vozliscu. Zato smo morali pri razvoju aplikacije razmisljati,
kako to najbolje izvesti, saj gre za temeljno funkcionalnost.
Knjiznica Paper.js vsebuje nadzorne mehanizme, ki nam pomagajo pri inte-
graciji miskinih funkcij v aplikacijo. Ti mehanizmi so nadzorne funkcije, ki
pri vsakem dogodku, povezanim z uporabo miske, dobijo za vhodni podatek
event objekt, ki je neposredno povezan s samim dogodkom. Nadzorne funkcije
so naslednje:
• function onMouseDown(event) - funkcija se izvede vsakic, ko pri-
tisnemo na miskin gumb na Canvasu.
• function onMouseDrag(event) - funkcija se izvede vsakic, ko pri-
tisnemo na miskin gumb in ga drzimo ter hkrati premikamo miskin
kazalec po Canvasu.
• function onMouseMove(event) - funkcija se izvede vsakic, ko pre-
maknemo miskin kazalec na Canvasu.
34 POGLAVJE 4. RAZVOJ APLIKACIJE Z0DIAK
Event objekt vsebuje vse potrebne informacije o tem, kar se je zgodilo z misko.
Nasteli bomo nekaj primerov in jih tudi na kratko opisali:
• event.point - vsebuje informacijo o polozaju miskinega kazalca v casu
dogodka.
• event.delta - predstavlja vektor od zacetnega polozaja miskinega ka-
zalca v casu dogodka do trenutnega (morda tudi koncnega) polozaja.
• event.type - vsebuje informacijo o tipu dogodka.
To so najpomembnejse spremenljivke in funkcije, ki smo jih potrebovali pri
razvoju aplikacije, saj ta temelji na uporabi miske in tipkovnice. Preden si
lahko pogledamo, kako je to videti na primeru, potrebujemo se en mehani-
zem. Z informacijo o polozaju miskinega kazalca ob dogodku lahko natancno
dolocimo tudi tisto, kar se nahaja pod kazalcem. V tem primeru uporabimo
hitTest na naslednji nacin:
var hitResult = project.hitTest(event.point, hitOptions);
V nasi izvorni kodi je na zacetku definirano, kaj vse obravnavamo kot pomem-
ben zadetek. To smo naredili tako, da smo definirali strukturo hitOptions
(slika 4.3), kjer smo dolocili, da je za aplikacijo pomemben zadetek polnila
vozlisca (fill oz. barvno polnilo) ali povezave (stroke oz. crta).
Slika 4.3: Moznosti zadetka.
4.2. PREMIKANJE VOZLISC IN OHRANJANJE STRUKTURE 35
Znotraj projekta nato izvedemo hitTest, ki v spremenljivko hitResult shrani
vse rezultate. Pa si oglejmo, kako poteka premik vozlisca. Ko kliknemo na
posamezno vozlisce in ga povlecemo ter spustimo na drugi lokaciji, se sproti
izvaja onMouseDrag funkcija. Miskin kazalec ima tako vedno zacetni in tre-
nutni (morda tudi koncni) polozaj. To pa pomeni, da imamo v spremenljivki
event.delta shranjen vektor tega premika.
Slika 4.4: Pot miskinega kazalca.
V spremenljivki hitResult imamo shranjene rezultate testa, kjer lahko preve-
rimo, ali smo pri zacetnem kliku zadeli polnilo vozlisca ali crto povezave. To
lahko preverimo s primerjavo:
• hitResult.type == ’fill’ za vozlisca;
• hitResult.type == ’stroke’ za povezave.
Recimo, da smo v nasem primeru zadeli polnilo vozlisca. Polozaj vozlisca spre-
menimo tako, da trenutnemu polozaju pristejemo vektor premika miskinega
kazalca. Ob tem ne smemo pozabiti na povezave. Spremenljivka hitResult
hrani tudi informacijo o elementu, bolj natancno, kazalec na podatkovno struk-
turo vozlisca, ki smo ga zadeli. Do kazalca dostopamo prek hitResult.item
36 POGLAVJE 4. RAZVOJ APLIKACIJE Z0DIAK
lastnosti. Tako lahko enostavno preverimo, katere povezave so incidencne s pre-
maknjenim vozliscem, in jih ustrezno popravimo. To storimo tako, da ustrezno
krajisce povezave premaknemo za isti vektor premika miskinega kazalca.
4.3 FileReader API in branje iz datoteke
Splosno znano je, da JavaScript ne omogoca dela z datotekami. Zaradi var-
nostnih lukenj in moznosti zlorabe je to tudi smiselno. Vendar smo tudi v tej
smeri dobili nekatere nove moznosti, ki omogocajo branje lokalno shranjenih
datotek. Tukaj si bomo ogledali FileReader API.
FileReader API je del File API aspekta, opisanega v 3. poglavju, ki nam
omogoca branje lokalno shranjene datoteke na vec nacinov. Datoteko lahko
beremo kot binarni zapis, podatkovni Uniform Resource Locator (URL), ali
kot besedilo in se kaj drugega [8]. Za nase potrebe smo izbrali metodo “beri
kot besedilo“, saj je notacija grafa zapisana v tekstovni datoteki, kot prikazuje
slika 4.5. V prvi vrstici so s presledkom locene oznake vozlisc (nastevanje oznak
Slika 4.5: Notacija.
vozlisc koncamo s piko). V drugi vrstici v oglatih oklepajih nastevamo koordi-
nate vozlisc (prav tako jih locimo s presledkom), kjer je vrstni red zapisa enak
kot pri oznakah vozlisc. Od tu naprej vsaka vrstica vsebuje definirano pove-
zavo v zavitih oklepajih, kjer z vejico loceni oznaki predstavljata obe krajisci.
4.3. FILEREADER API IN BRANJE IZ DATOTEKE 37
Ce notacija vsebuje tudi koordinate vozlisc (saj ni obvezno), jih aplikacija tudi
uposteva pri izrisu. Ce notacija koordinat ne vsebuje, se graf izrise krozno, kot
prikazuje slika 4.6. Zdaj si lahko ogledamo, kako potekata branje in interpre-
Slika 4.6: Krozno izrisovanje.
tacija notacije grafa, ki se nahaja v tekstovni datoteki. S pomocjo FileReader
API lahko datoteko enostavno preberemo prek vnosnega polja za datoteke in
njeno vsebino shranimo v spremenljivko (znakovni niz ali string). Najprej
locimo dobljeni znakovni niz v tri dele: vozlisca, koordinate, povezave. Tako
imamo na voljo tri locene znakovne nize. Najprej se sprehodimo po znakov-
nem nizu vozlisc in na Canvasu ustvarimo vozlisca s pripradajocimi oznakami.
Ce so bile v notaciji shranjene tudi koordinate vozlisc, imamo na voljo zna-
kovni niz koordinat, s pomocjo katerega ustvarjena vozlisca premaknemo na
ustrezne lokacije. Ostanejo nam se povezave, ki pa jih je dokaj enostavno in-
terpretirati. Znakovni niz povezav beremo po vrsticah, kjer za vsako prebrano
povezavo preverimo oznaki obeh krajisc, in izrisemo povezavo med tema dvema
krajiscema.
38 POGLAVJE 4. RAZVOJ APLIKACIJE Z0DIAK
4.4 Blob in shranjevanje v datoteko
Shranjevanja v lokalno datoteko v JavaScriptu zaradi varnosti se vedno ni
mogoce izvesti. Vendar pa obstaja nacin shranjevanja, ki ga trenutno podpira
samo Google Chrome brskalnik. Ideja je dokaj enostavna. S pomocjo Java-
Script kode ustvarimo tekstovno datoteko, ki vsebuje zeljeno vsebino. Nato
ustvarimo skrito povezavo do ustvarjene datoteke in vsilimo prenos na lokalni
disk. Naj opozorimo, da to dejanje ni priporoceno za splosno uporabo, saj tudi
vecina brskalnikov tega ne omogoca. V nasem primeru gre za aplikacijo, ki se
nahaja na lokalnem disku in ne na strezniku, zato je uporaba varnejsa.
Blob je najbolje opisati kot nekaksen blok ali kos binarnih podatkov. Zgled je
lahko video datoteka, ki je sama preobsezna za nalaganje v spomin, ce je ne raz-
bijemo na vec manjsih delov. Samo ime izhaja iz Structured Query Language
(SQL) podatkovnih baz, kjer kratica pomeni ”Binary Large Object”. V Java-
Scriptu Blob velikokrat predstavlja obsezne binarne podatke. Lahko pa ravno
nasprotno predstavlja vsebino majhne tekstovne datoteke. Vendar z Blobi ne
moremo poceti prav veliko. Lahko dolocimo njihovo velikost, vprasamo za nji-
hov Multipurpose Internet Mail Extension (MIME) tip ali pa jih razbijemo na
vec manjsih Blobov [9].
Za nas je pomembno to, da lahko Blob konstruiramo sami. Pred kratkim
smo to v JavaScriptu poceli z BlobBuilder API. Z nedavno spremenjeno File
API specifikacijo pa smo dobili tudi novi Blob konstruktor, ki je bolj enostaven
[7]. Pomembno je ustrezno konstruirati notacijo grafa iz podatkovne strukture.
Na zacetku definiramo prazen znakovni niz. S pomocjo zanke se sprehodimo
po tabeli vozlisc in loceno s presledkom dodajamo oznake vozlisc v znakovni
niz. Pri zadnjem vozliscu namesto presledka dodamo piko. Podobno se lotimo
4.5. PREOSTALE FUNKCIJE 39
zapisa koordinat, kjer ponovimo sprehod po tabeli vozlisc in znotraj oglatih
oklepajev ustrezno dodajamo x in y koordinati vozlisc v znakovni niz (posa-
mezne oklepaje locimo s presledkom). V zadnjem koraku naredimo se sprehod
po tabeli povezav, kjer postopamo enako kot pri koordinatah, le da v znakovni
niz dodajamo oznake krajisc po locenih vrsticah (uporabimo znak za preskok
v novo vrstico) znotraj zavitih oklepajev.
S pomocjo konstruirane notacije lahko zelo enostavno konstruiramo Blob, ki
bo v nasem primeru predstavljal majhno tekstovno datoteko (vsebina katere
bo notacija). Prek skritega HTML elementa, ki vsebuje konstruirani Blob,
nato vsilimo prenos na lokalni disk.
4.5 Preostale funkcije
Do zdaj smo spoznali najbolj pomembne gradnike aplikacije. Ogledali smo si
podatkovno strukturo, objekte in razrede, ki tvorijo graf. Premikali smo ele-
mente grafa in ohranjali njegovo strukturo. Videli smo, kako lahko preberemo
vsebino datoteke in jo uporabimo. Navsezadnje pa smo si pogledali, kako lahko
ustvarimo datoteko z zeljeno vsebino.
Ostalo je se veliko funkcij in preostalih delov izvorne kode, ki tvorijo delujoco
celoto. Te bomo predstavili le na kratko. Izvorna koda, ki je se ostala, namrec
idejno ni tako zanimiva in tezka. Gre za implementacijo ze splosno poznanih
algoritmov in resitev. Pa si poglejmo najpomembnejse dele preostale izvorne
kode.
• onResize(event) - funkcija skrbi za obnasanje Canvasa pri spremi-
njanju velikosti okna;
40 POGLAVJE 4. RAZVOJ APLIKACIJE Z0DIAK
• onMouseMove(event) - funkcija poskrbi za to, da je vozlisce aktivno
in obarvano (rdece z obrobo), ko z miskinim kazalcem lebdimo nad
njim;
• Connected(Graph) - funkcija preveri, ali je graf povezan;
• content check(vertex content) - funkcija skrbi za edinstvene oznake
vozlisc;
• shuffle() - vsako vozlisce grafa premesti na nove, nakljucne koordinate;
• colorize() - glavna funkcija za barvanje grafa, ki poskrbi za delovanje
gumbov in izpisov;
– barvanje() - funkcija, ki preverja ustreznost barvanja;
– color choice(obj) - funkcija, ki nadzira izbor barv iz barvne pa-
lete;
• Hamilton() - glavna funkcija za iskanje Hamiltonove poti in cikla, ki
poskrbi za delovanje gumbov in izpisov;
– Hamilton edge check(Edges, mode) - funkcija preveri, ali iz-
brane povezave resnicno predstavljajo cikel. Vhodna podatka sta
tabela povezav, ki smo jih izbrali, in zastavica za preverjanje cikla
oz. poti. Nato funkcija preveri, ali povezave resnicno tvorijo cikel
ali pot, saj se morajo “drzati“ skupaj;
• Bipartite() - glavna funkcija za preverjaje dvodelnosti grafa;
– Bipartite positioning() - funkcija, ki ustrezno izrise dvodelen
graf (slika 2.6);
4.5. PREOSTALE FUNKCIJE 41
– Cycle(start) - funkcija, ki poisce in oznaci lihi cikel, ce graf ni
dvodelen. Funkcija za vhodni podatek dobi zacetno vozlisce. Nato
se izvaja algoritem iskanja v globino, ki ustrezno barva povezave
na lihem ciklu. Vse povezave, ki niso del koncnega lihega cikla, pa
obarva s crno barvo, ce se te obarvajo med izvajanjem funkcije.
• D partition A() - funkcija za izris razdaljne particije, ki skrbi za
zacetno izbiro vozlisca in izpisovanje;
– Graph flatten(Graph) - funkcija, ki poravna vse povezave;
– Partition positioning() - funkcija, ki zamakne povezave znotraj
iste sosescine. To storimo tako, da vsaki od teh povezav dodamo
novi, tretji segment na sredino. Segment nato le zamaknemo v
stran in povezavo zgladimo s pomocjo implementirane funkcije
smooth();
– D partition B(Start V) - glavna funkcija za izris razdaljne par-
ticije grafa, ki za vhodni podatek dobi zacetno vozlisce. Izvede se
algoritem iskanja v sirino, kjer vozliscem priredimo ustrezno iden-
tifikacijo sosescine. Nato vsako vozlisce le ustrezno premaknemo;
• Output log() - funkcija, ki nadzira sprotno izpisovanje dogodkov pri
preostalih funkcijah;
• Draw cycle - funkcija za dolocanje cikla in podatkovne strukture;
– Draw circular() - funkcija, ki graf izrise krozno;
• Draw Circulant - funkcija za dolocanje cirkulanta in podatkovne
strukture;
42 POGLAVJE 4. RAZVOJ APLIKACIJE Z0DIAK
• Draw complete - funkcija za dolocanje polnega grafa in podatkovne
strukture;
• Draw petersen - funkcija za izris posplosenega Petersenovega grafa;
– Draw GPG() - funkcija, ki graf izrise kot posplosen Petersenov
graf;
• Draw gpath - funkcija za dolocanje poti in podatkovne strukture;
– Draw inPath() - funkcija, ki izrise pot;
• Zoom() - funkcija za spreminjanje pogleda, priblizevanje in odmikanje;
• addContent() - funkcija za spreminjanje oznak vozlisc;
• Aut() - glavna funkcija za iskanje avtomorfizmov grafa, ki poskrbi za
delovanje gumbov in izpisov;
– Check Aut() - funkcija, ki preveri, ali izbrana permutacija vozlisc
predstavlja avtomorfizem grafa;
• clearButtons() - funkcija, ki skrbi za medsebojno izkljucevanje posa-
meznih gumbov in funkcij;
• description() - funkcija, ki prikaze ali skrije oznake vozlisc;
Na ta nacin smo opisali vse gradnike, ki so pomembni za delovanje aplika-
cije. Vecino ciljev, ki smo si jih zastavili na zacetku, smo uspeli izvesti, ne
pa vsega. Da bi lahko primerjali dva grafa obenem, bi potrebovali tudi dva
deljena Canvasa. To je izvedljivo, vendar je bilo v casu nastanka aplikacije na
voljo premalo literature in primerov, da bi nam uspelo tudi to. Tezava je v
tem, da izbrana knjiznica Paper.js se ni popolnoma dokoncana in je v aktivnem
4.5. PREOSTALE FUNKCIJE 43
razvoju. Nedvomno bo v bliznji prihodnosti to ena od prvih implementacij.
Seveda se lahko zgornji tezavi vsaj deloma izognemo tudi tako, da vsak graf
odpremo v svoji kopiji aplikacije.
Morda velja omeniti, da je bilo zaradi aktivnega razvoja knjiznice Paper.js
dokaj otezeno samo pisanje izvorne kode. Ta se v celoti nahaja v eni dato-
teki, ki jo med drugim tudi uporabimo za zagon aplikacije. JavaScript namrec
omogoca vkljucitev vec zunanjih skript v eno samo, kjer lahko nato upora-
bljamo funkcije uvozenih skript. PaperScript pa te funkcionalnosti se ne po-
nuja. Zato je bilo iskanje semanticnih napak izredno zamudno in otezeno. Tu
smo si pomagali z razhroscevalnikom, ki smo ga pripravili kar sami. Okno za
izpisovanje, ki se nahaja v aplikaciji spodaj, je sluzilo kot okno za izpisovanje
posameznih vrednosti spremenljivk in preostalih lastnosti. Tako smo resili kar
nekaj tezav, ki so se pojavile v razvojnem obdobju aplikacije.
V naslednjem poglavju bomo prikazali nekatere primere uporabe nase apli-
kacije.
44 POGLAVJE 4. RAZVOJ APLIKACIJE Z0DIAK
Poglavje 5
Primeri uporabe aplikacije
Aplikacijo z0diak lahko uporabimo kot pomoc pri resevanju razlicnih nalog iz
teorije grafov. Kot smo ze omenili, so tudi vse slike v 2. poglavju konstrui-
rane z aplikacijo. Lahko pa se lotimo bolj zanimivih in razgibanih problemov,
saj nam aplikacija ponuja razlicna orodja. Kot ilustracijo si najprej oglejmo
nekaj primerov, v katerih bomo skusali ugotoviti, ali so dani grafi tockovno
tranzitivni ali ne. Ker pojma tockovne tranzitivnosti se ne poznamo, ga bomo
opisali tukaj.
Naj bo Γ = (V,E) graf. Ce za vsak par vozlisc u, v ∈ V obstaja ϕ ∈ AutΓ, da
velja v = ϕ(u), potem je Γ tockovno tranzitiven.
Zdaj si lahko ogledamo nekaj konkretnih primerov.
GPG(8,3)
Po zagonu aplikacije je treba izbrani graf najprej konstruirati. To lahko na-
redimo rocno s postopnim risanjem, z uporabo posebnega orodja v meniju
Osnovne druzine grafov ali pa graf nalozimo iz tekstovne datoteke. Oglejmo si
45
46 POGLAVJE 5. PRIMERI UPORABE APLIKACIJE
najlazjo varianto. V meniju Osnovne druzine grafov izberemo orodje za izris
GPG. Po vnosu ustreznih parametrov se nam graf izrise tako, kot prikazuje
slika 5.1. Vprasanje, ki nas zanima, je, ali je dani graf tockovno tranziti-
Slika 5.1: GPG(8, 3).
ven. Hitro opazimo, da je ciklicna rotacija ϕ = (1 2 3 4 5 6 7 8)(9 10 11 12
13 14 15 16) avtomorfizem nasega grafa (to lahko tudi preverimo s pomocjo
gumba Avtomorfizem). Tako vidimo, da lahko vsako vozlisce na zunanjem
ciklu preslikamo v katerokoli drugo vozlisce na zunanjem ciklu. Podobno velja
za notranja vozlisca (vozlisca znotraj zunanjega cikla). Postavi se vprasanje,
ali obstaja avtomorfizem, ki nam preslika kaksno zunanje vozlisce v kaksno
notranje in obratno. Tu si lahko pomagamo z aplikacijo, ki nam omogoca pro-
sto premikanje vozlisc. Ce dobimo isto upodobitev grafa, ko zunanja vozlisca
ustrezno premaknemo navznoter in notranja vozlisca navzven, potem vemo, da
tak avtomorfizem obstaja. Treba ga je le se zabeleziti. Na sliki 5.2 je prikazan
postopek premikanja vozlisc. Avtomorfizem, ki ga iscemo, torej obstaja. V to
nas prepricata postopek premikanja vozlisc in koncna upodobitev, ki je enaka
47
Slika 5.2: Premiki vozlisc grafa GPG(8, 3).
zacetni. Da bomo tockovno tranzitivnost dokazali tudi formalno, moramo
pripadajoci avtomorfizem grafa tudi zapisati. Glede na to, da smo vozlisca
premikali postopoma, to ni tako tezko, saj vsak premik le ustrezno zapisemo.
Pri tem si lahko pomagamo z zacetno sliko grafa, ki jo bodisi nekam shranimo
ali odpremo v novem oknu aplikacije. Ustreznost avtomorfizma lahko nato
Slika 5.3: Preverjanje avtomorfizma.
tudi preverimo (slika 5.3). Graf GPG(8,3) je torej tockovno tranzitiven.
48 POGLAVJE 5. PRIMERI UPORABE APLIKACIJE
GPG(7,2)
Kot pri prejsnjem primeru je tudi tukaj treba graf najprej konstruirati. Posto-
pamo kot prej in dobimo izris, kot ga prikazuje slika 5.4. Znova nas zanima,
Slika 5.4: GPG(7, 2).
ali je dani graf tockovno tranzitiven. Kot pri prejsnjem primeru opazimo, da
obstajajo ciklicne rotacije, ki nam preslikajo poljubno vozlisce zunanjega ci-
kla v katerokoli drugo vozlisce zunanjega cikla. Podobno velja za notranja
vozlisca. Nas zanima, kako preslikati zunanja vozlisca v notranja in obratno.
Lahko poizkusimo ponoviti postopek premikov iz prejsnjega primera. Dobimo
situacijo s slike 5.5. Upodobitev grafa, ki smo jo dobili s premiki vozlisc, ni
enaka zacetni. To seveda se ne pomeni, da iskani avtomorfizem ne obstaja, je
pa znak, da ga morda ni. Zdaj si lahko pomagamo z izrisom razdaljne par-
ticije grafa, ki je zelo uporabna pri iskanju strukturnih lastnosti. Recimo, da
zacnemo z izrisom razdaljne particije tako, da izberemo vozlisce z zunanjega
cikla. Dobimo razdaljno particijo s slike 5.6.
49
Slika 5.5: Premiki vozlisc grafa GPG(7, 2).
Slika 5.6: Izris razdaljne particije grafa GPG(7, 2).
Zdaj naredimo se razdaljno particijo za neko notranje vozlisce (lahko kar v no-
vem oknu aplikacije za boljso primerjavo). Primerjava nam lepo prikaze tezavo
v tem konkretnem primeru. Vozlisce 4 na zunanjem ciklu lezi na natanko treh
ciklih dolzine 5, kar razberemo iz dejstva, da imamo med vsemi vozlisci na raz-
50 POGLAVJE 5. PRIMERI UPORABE APLIKACIJE
Slika 5.7: Primerjava razdaljnih particij grafa GPG(7, 2).
dalji 2 od vozlisca 4 natanko tri povezave. Notranje vozlisce 10 pa lezi na dveh
ciklih dolzine 5. To nam pove, da ni avtomorfizma, ki bi vozlisce 4 preslikal v
vozlisce 10 ali obratno. Graf GPG(7, 2) torej ni tockovno tranzitiven.
Folkmanov graf
Folkmanov graf, poimenovan po Jonu Folkmanu, je dvodelen in regularen
graf reda 20. Graf ima 40 povezav in je povezavno tranzitiven (kar pomeni, da
za poljubni povezavi e1 in e2 obstaja avtomorfizem grafa, ki preslika e1 v e2).
To je najmanjsi neusmerjen graf, ki je regularen in povezavno tranzitiven, ne
pa tockovno tranzitiven (ta in druga dejstva o tem grafu lahko bralec preveri
v [13]). Pa poglejmo, zakaj Folkmanov graf ni tockovno tranzitiven.
Graf reda 20 bi rocno konstruirali kar nekaj casa. Prav tako si v tem primeru
ne moremo pomagati s katerimi od druzin grafov, ki so vgrajene v aplikacijo.
Imamo pa dani graf ze shranjen v tekstovni datoteki, zato graf nalozimo prek
gumba Nalozi/shrani graf - Nalozi graf, kot prikazujeta sliki 5.8 in 5.9. Na
prvi pogled se zdi graf dokaj simetricen, tezko pa je ugotoviti, ali je tockovno
51
Slika 5.8: Nalaganje grafa iz datoteke.
Slika 5.9: Folkmanov graf.
52 POGLAVJE 5. PRIMERI UPORABE APLIKACIJE
tranzitiven ali ne. Lahko bi poskusali podobno kot pri prejsnjih primerih.
Lahko pa opazimo nekaj drugega. Vozlisce 11 ima iste stiri sosede kot vozlisce
10. Po drugi strani pa za vozlisce 5 to ne velja, saj vozlisce, ki bi imelo iste
sosede kot 5, ne obstaja. To nam pove, da ni avtomorfizma, ki bi vozlisce 11
preslikal v vozlisce 5. Folkmanov graf torej ni tockovno tranzitiven, v kar se
lahko prepricamo z izrisom razdaljnih particij glede na vozlisci 11 in 5. Razlika
je vec kot ocitna. Tako ima vozlisce 11 vsa preostala vozlisca na razdalji najvec
3, medtem ko sta vozlisci 5 in 1 na razdalji 4.
Slika 5.10: Primerjava razdaljnih particij Folkmanovega grafa.
Izomorfnost grafov
Dozdajsnji primeri so se navezovali izkljucno na pojem tockovne tranzitivnosti.
Pa si oglejmo, kako lahko hitro ugotovimo, da grafa nista izomorfna. Za primer
vzemimo kar grafa iz 2. poglavja (slika 2.13), kjer smo ugotovili, da nista
izomorfna, saj imata med drugim razlicen premer. Z aplikacijo bi si lahko
pomagali na naslednji nacin. Grafa konstruiramo loceno, vsakega v svoji kopiji
aplikacije, kot prikazuje slika 5.11. Zdaj lahko uporabimo orodje za preverjanje
dvodelnosti. V meniju Ostala orodja izberemo opcijo Dvodelnost. To naredimo
53
Slika 5.11: Konstrukcija obeh grafov.
v obeh kopijah aplikacije, kot prikazuje slika 5.12. Levi graf je dvodelen, graf
Slika 5.12: Preverjanje dvodelnosti.
na desni pa ne, saj vsebuje lihi cikel. Grafa torej nista izomorfna.
Grotzschev graf
Grotzschev graf je najmanjsi graf s kromaticnim stevilom 4, ki ne vsebuje tri-
kotnika. Poimenovan je po nemskem matematiku Herbertu Grotzschu [14].
Prepricajmo se, da je kromaticno stevilo tega grafa res 4. Kot Folkmanov graf
54 POGLAVJE 5. PRIMERI UPORABE APLIKACIJE
lahko tudi Grotzschev graf nalozimo iz tekstovne datoteke, saj je shranjena
na isti lokaciji. Po Brooksovem izreku je kromaticno stevilo grafa manjse ali
Slika 5.13: Grotzschev graf.
enako 5. Grafa ocitno ne moremo dobro pobarvati z eno barvo, morda pa bi
ga lahko pobarvali z dvema barvama (ce bi bil dvodelen). Z uporabo orodja
za preverjanje dvodelnosti hitro ugotovimo, da Grotzschev graf ni dvodelen,
torej ga z dvema barvama ne moremo dobro pobarvati. Brez vecjih tezav
ga lahko dobro pobarvamo s stirimi barvami (eno od moznosti prikazuje slika
5.14). Ostane le se vprasanje, ali lahko Grotzschev graf dobro pobarvamo ze s
tremi barvami. Predpostavimo, da je to mogoce, in poizkusimo najti ustrezno
dobro barvanje. Barvanja se lotimo, kot prikazuje slika 5.15. Za zunanji cikel
dolzine 5 (na vozliscih 1,2,3,4,5) potrebujemo ze vse tri barve. Zaradi rotacij-
ske in zrcalne simetricnosti nasega grafa vrstni red barvanja ni pomemben. V
vsakem primeru se dve barvi pojavita po dvakrat in ena barva enkrat. Brez
55
Slika 5.14: Dobro barvanje s stirimi barvami.
skode za splosnost lahko torej privzamemo, da je teh pet vozlisc pobarvanih
tako, kot prikazuje slika 5.15. Nato zacnemo z barvanjem notranjih vozlisc.
Slika 5.15: Poizkus barvanja s tremi barvami.
Vozlisca 6, 7 in 10 imajo ze po dva soseda razlicnih barv, zato je njihova barva
ze enolicno dolocena. Takoj opazimo, da so vozlisca 6, 7 in 10 treh razlicnih
barv, hkrati pa so sosedna vozliscu 11, ki bi ga torej morali pobarvati s cetrto
barvo. Le tako bi namrec dobili dobro barvanje. To protislovje tako pokaze,
56 POGLAVJE 5. PRIMERI UPORABE APLIKACIJE
da Grotzschevega grafa s tremi barvami ni mogoce dobro pobarvati in da je
njegovo kromaticno stevilo enako 4.
Poglavje 6
Zakljucek
V diplomskem delu smo razvili aplikacijo za delo z grafi. Izkazalo se je, da je bil
zacetek najtezji, saj pregled literature ni obetal veliko. Po kratkem testiranju
knjiznice Paper.js pa se je vendarle izkazalo, da je ideja izvedljiva. Pri razvoju
sta bili najbolj pomembni zacetna struktura podatkov in izbira PaperScripta,
ki je prijazen do zacetnikov. Skozi razvoj aplikacije se je tudi knjiznica Paper.js
posodabljala in tako smo programsko kodo vseskozi spreminjali, dopolnjevali
in izboljsevali.
Najvecja tezava je bilo pocasno delovanje aplikacije pri vecjem stevilu objektov
na Canvasu. S pomocjo testiranja in preverjanja smo ugotovili, da se je napaka
skrivala v eni od Paper.js funkcij, zato smo jo morali uporabiti na drugacen
nacin. To seveda ni bila edina tezava, saj sta izziv predstavljala tudi pisanje
programske kode v urejevalniku Notepad++ in posledicno iskanje semanticnih
napak. Tu nam je bil v veliko pomoc razhroscevalnik, ki smo ga pripravili sami.
Koncni izdelek seveda se vedno ni idealen in bi se ga dalo nadgraditi, a na
neki tocki se je bilo treba pri razvoju aplikacije ustaviti. Vecina zastavljenih
57
58 POGLAVJE 6. ZAKLJUCEK
funkcionalnosti je implementiranih, aplikacija pa je pripravljena na prihodnje
posodobitve in integracijo novosti. Napake so najbrz se vedno tu, zato na-
prosamo vse uporabnike, da svoja mnenja in ugotovitve delijo z nami. Kot
receno, je bil cilj diplomskega dela dvojni. Osvojiti osnovno znanje na povsem
svezem podrocju (HTML5) in nato ustvariti aplikacijo za delo z grafi, ki bo
nudila osnovne funkcionalnosti.
Upamo, da bo pricujoca aplikacija bralca in uporabnika prepricala, da sta
bila zastavljena cilja dosezena.
Literatura
[1] Langerholc, T. (2011). Barvanje grafov in Brooksov izrek. Diplomsko
delo, Ljubljana: Univerza v Ljubljani, Pedagoska fakulteta.
[2] Pilgrim, M. (2010). HTML5: Up and Running. Beijing[etc.]: O’Reilly
Media, Inc.
[3] Sparl, P. (2012). Zapiski predavanj: Teorija grafov . Pedagoska fakulteta
Ljubljana.
[4] Wilson, R. J., Watkins, J. J. (1997). Uvod v teorijo grafov. Ljubljana:
DMFA.
[5] Zupanc, K. (2012.) Problem trgovskega potnika. Diplomsko delo, Lju-
bljana: Univerza v Ljubljani, Pedagoska fakulteta.
[6] API (Application Program Interface) Definition, API. Dostopno na:
http://www.techterms.com/definition/api, 15.11.2013.
[7] Bidelman, E., Don’t Build Blobs, Construct Them. Dostopno na:
http://updates.html5rocks.com/2012/06/Don-t-Build-Blobs-Construct-
Them, 15.11.2013.
[8] de Beijer, M., HTML5 FileReader API.
Dostopno na: http://www.develop.com/htmlfivefileapi, 15.11.2013.
59
60 LITERATURA
[9] Flanagan, D., Blob | Javascript: The Definitive Guide | HTML5 APIs.
Dostopno na: https://www.inkling.com/read/javascript-definitive-guide-
david-flanagan-6th/chapter-22/blobs, 12.11.2013.
[10] Krog, M. Osnovne novosti v HTML5 in CSS3. Pedagoska fakulteta
Koper.
Dostopno na: http://90.157.203.179/clanek HTML5 in CSS3 Miso Krog.pdf ,
8.11.2013.
[11] Lawson, B., Two cheers for the W3C’s HTML5 logo.
Dostopno na: http://html5doctor.com/two-cheers-for-the-w3cs-html5-
logo/, 7.11.2013.
[12] Paper.js, About Paper.js.
Dostopno na: http://paperjs.org/about/, 10.11.2013.
[13] Wikipedija, Folkman graph.
Dostopno na: http://en.wikipedia.org/wiki/Folkman graph, 9.11.2013.
[14] Wikipedija, Grotzsch graph.
Dostopno na: http://en.wikipedia.org/wiki/Grotzsch graph, 9.11.2013.
[15] Wikipedija, HTML5.
Dostopno na: http://en.wikipedia.org/wiki/HTML5, 7.11.2013.
[16] Wright, T., HTML5 and The Future of the Web.
Dostopno na: http://coding.smashingmagazine.com/2009/07/16/html5-
and-the-future-of-the-web/, 7.11.2013.
[17] Young, A., HTML5 File API.
Dostopno na: http://dailyjs.com/2009/11/30/html5-file-api, 7.11.2013.
UNIVERZA V LJUBLJANI
PEDAGOSKA FAKULTETA
IZJAVA O AVTORSTVU DIPLOMSKEGA DELA
Spodaj podpisani Luka Jurkovic izjavljam, da sem diplomsko delo napisal sam
in da so uporabljeni viri in literatura korektno navedeni.
Luka Jurkovic
Ljubljana, december 2013