aplikacija za delo z grafi - university of...

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

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


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


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-


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


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-


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}.


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


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.


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.


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


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-


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.


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,


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.


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.


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


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.


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;


• 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);


– 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;


• 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


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.

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.


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-


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.


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


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,


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

aplikacija za delo z grafi - university of...

Documents