APLIKACIJA ZA DELO Z GRAFI

Transcription

1 UNIVERZA V LJUBLJANI PEDAGOŠKA FAKULTETA Študijski program: MATEMATIKA IN RAČUNALNIŠTVO APLIKACIJA ZA DELO Z GRAFI DIPLOMSKO DELO Mentor: doc. dr. Primož Šparl Kandidat: Luka Jurković Somentor: asist. Matej Zapušek Ljubljana, december 2013

2 ii Zahvala Zahvaljujem se svojemu mentorju, doc. dr. Primožu Šparlu, za zaupanje pri dodelitvi teme in za vse nasvete ter popravke pri nastajanju diplomskega dela. Zahvalil bi se tudi somentorju, asist. Mateju Zapušku, ki me je usmerjal med procesom izdelave aplikacije. Špela, hvala ti za vse! Brez tebe morda ne bi diplomiral v tem času. Sandra, hvala za idejo, ki me je usmerila na pravo pot! Zahvaljujem se vsem prijateljicam in prijateljem za spodbude in zaupanje. Posebej pa sem hvaležen staršema in celi družini, saj so oni tisti, ki so mi omogočili šolanje in celoten študij ter me vedno podpirali.

3 iii Program dela V okviru diplomskega dela ustvarite aplikacijo za delo z grafi. Aplikacija naj ima osnovne funkcionalnosti kot so ustvarjanje in brisanje vozlišč in povezav, premikanje vozlišč, izris razdaljne particije glede na izbrano vozlišče, izris nekaterih standardnih družin grafov kot so polni grafi, cikli in posplošeni Petersenovi grafi. Omogoči naj tudi preverjanje ali je dani graf dvodelen, ali je izbrana permutacija vozlišč grafa njegov avtomorfizem in ali je izbrano barvanje vozlišč grafa dobro barvanje. Pri ustvarjanju aplikacije si pomagajte z novostmi, ki jih prinaša novi standard označevalnega jezika za izdelavo spletnih strani HyperText Markup Language 5 (HTML5). Ljubljana, januar 2013 Mentor: doc. dr. Primož Šparl Somentor: asist. Matej Zapušek

4 iv Povzetek Novodobni spletni brskalniki uporabnikom ponujajo vse več možnosti in integriranih 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 področju, saj živimo v dobi spletnih in mobilnih aplikacij, ki se iz dneva v dan vse manj razlikujejo od primerljivih namiznih. Zato smo se odločili uporabiti novosti in funkcionalnosti, ki jih prinaša HTML5, ter ustvariti aplikacijo za delo z grafi. Pri tem smo se oprli na JavaScript knjižnico Paper.js in HTML5 novosti, kot je element Canvas. Ustvarjena aplikacija omogoča konstrukcijo in nalaganje grafa iz tekstovne datoteke ter manipulacijo, ob kateri se njegova struktura ohranja. Ob tem ima uporabnik na voljo različna orodja, kot so: barvanje grafa, izris razdaljne particije grafa, ustvarjanje novih vozlišč in povezav ipd., s katerimi si lahko pomaga pri spoznavanju in raziskovanju osnovnih lastnosti teh matematičnih struktur. MSC klasifikacija (2010): 05C12, 68R10, 05C38 ACM klasifikacija : G.2 Diskretna matematika G.2.2 Teorija grafov D.2 Programsko inženirstvo D.2.3 Orodja za kodiranje in tehnike K.3 Računalništvo in izobraževanje K.3.1 Uporaba računalnika v izobraževanju

5 Ključne besede: HTML5, Canvas, File API, PaperScript, teorija grafov v

6 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 versions 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

7 Keywords: HTML5, Canvas, File API, PaperScript, graph theory vii

8 viii

9 Kazalo 1 Uvod 1 2 Teorija grafov Osnove teorije grafov Nekatere znane družine grafov Poti Polni graf Cikli Posplošeni Petersenovi grafi Cirkulanti Izomorfizmi in avtomorfizmi grafov Obhodi v grafih Barvanje grafov HTML5 in knjižnica Paper.js HTML5 osnove Novi strukturni elementi Preostali novi elementi <video> in <audio> Canvas ix

10 x KAZALO 3.4 Novi API File API Knjižnica Paper.js Razvoj aplikacije z0diak Podatkovna struktura Premikanje vozlišč in ohranjanje strukture FileReader API in branje iz datoteke Blob in shranjevanje v datoteko Preostale funkcije Primeri uporabe aplikacije 45 6 Zaključek 57

11 Slike 2.1 Primer enostavnega grafa Graf in vsebovan podgraf Primer regularnega grafa Primer enostavnega sprehoda in poti Primer nepovezanega grafa Primer dvodelnega grafa Razdaljna particija glede na vozlišče Primer poti P 2 in P Primera K 12 in K Primeri ciklov C 3, C 5 in C Primera GP G(3, 1) in GP G(8, 2) Primera Circ(4, {1}) in Circ(7, {2, 3}) Primer grafov Γ 1 in Γ Primer iskanja obhodov Dobro barvanje GP G(4, 1) grafa HTML5 logotip [11] Primer postavitve elementov [16] Canvas HTML5 element Paper.js xi

12 xii SLIKE 3.5 Nalaganje PaperScripta Logotip aplikacije Osnovna struktura Možnosti zadetka Pot miškinega kazalca Notacija Krožno izrisovanje GP G(8, 3) Premiki vozlišč grafa GP G(8, 3) Preverjanje avtomorfizma GP G(7, 2) Premiki vozlišč grafa GP G(7, 2) Izris razdaljne particije grafa GP G(7, 2) Primerjava razdaljnih particij grafa GP G(7, 2) Nalaganje grafa iz datoteke Folkmanov graf Primerjava razdaljnih particij Folkmanovega grafa Konstrukcija obeh grafov Preverjanje dvodelnosti Grötzschev graf Dobro barvanje s štirimi barvami Poizkus barvanja s tremi barvami

13 Seznam uporabljenih kratic in simbolov HTML HyperText Markup Language (jezik za označevanje spletnih besedil) XML Extensible Markup Language (razširljiv označevalni jezik) XHTML Extensible HyperText Markup Language (označevalni jezik, podoben HTML, vendar usklajen s sintakso XML) API Application programming interface (vmesnik za programiranje aplikacij) URL Uniform Resource Locator (enolični krajevnik vira) SQL Structured Query Language (povpraševalni jezik za delo s podatkovnimi bazami) MIME Multipurpose Internet Mail Extension xiii

14 xiv SLIKE (večnamenska razširitev internetne pošte) GPG Generalized Petersen Graph (posplošeni Petersenov graf)

15 Poglavje 1 Uvod Teorija grafov je zelo razgibana in privlačna matematična veda, saj s svojo klasično upodobitvijo grafov privabi tako matematike, kot radovedneže, ki v svet matematike sicer ne zatavajo velikokrat. Že sama upodobitev Petersenovega grafa ima svoj čar, a je vendar le upodobitev, slika ali skica, ki je bolj ali manj statična. Tako se pri obravnavi teorije grafov velikokrat srečamo s težavo, kako si dani graf predstavljati, ga prikazati na različne načine ter tako odkriti kakšne njegove lastnosti, ki sicer niso povsem očitne. Kaže se torej potreba po aplikaciji, ki bi omogočala manipuliranje z grafi. Pri tem se seveda njihova struktura ohranja, mi pa na ta način dobimo boljšo predstavo o samem grafu. Ideja za razvoj računalniške aplikacije je na dlani. Obstajajo že bolj ali manj ustaljeni postopki in tehnologije, s pomočjo katerih to lahko izvedemo. Včasih pa je bolje izbrati svojo pot, neoznačeno in neustaljeno. Pogosto se namreč izkaže, da na ta način nastanejo najbolj zanimivi in izvirni izdelki. Cilj tega diplomskega dela je bil torej razviti HTML5 aplikacijo za delo z grafi, 1

16 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 še ni uradno standardiziran, specifične 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 preštudirati HTML5 in novosti, ki jih prinaša, nato pa z osvojenim znanjem razviti aplikacijo za delo z grafi, ki bi začetniku nudila pomoč pri spoznavanju in raziskovanju osnovnih lastnosti teh matematičnih struktur. Diplomsko delo začnemo z uvodom v teorijo grafov, kjer spoznamo osnove teorije grafov ter nekatere znane družine grafov, kot so poti, polni grafi, dvodelni grafi, cikli, posplošeni Petersenovi grafi in cirkulanti. Nadaljujemo z izomorfizmi in avtomorfizmi grafov, obhodi v grafih in barvanjem grafov. V tretjem poglavju predstavimo HTML5, njegove osnove in novosti, ki jih prinaša, ter JavaScript knjižnico Paper.js. Drugi del diplomskega dela je namenjen predstavitvi razvoja aplikacije in njeni uporabi. V četrtem poglavju tako opišemo osnovno podatkovno strukturo, nato pa delovanje premikov, ki ohranjajo strukturo grafa in delovanje shranjevanja ter nalaganja grafov. Poglavje o razvoju končamo s predstavitvijo preostalih funkcij. V petem poglavju za konec prikažemo uporabnost aplikacije na različnih primerih.

17 Poglavje 2 Teorija grafov Teorija grafov je matematična veda, ki raziskuje značilnosti grafov. Graf je matematična struktura ali kombinatorični objekt, ki modelira neko relacijo (običajno gre za irefleksivno in simetrično relacijo) nad elementi izbrane množice. Kljub temu, da sami začetki segajo v 18. stoletje, ko je švicarski matematik Leonhard Euler podal svojo rešitev problema königsberških mostov, gre za dokaj mlado vedo, ki je svoj pravi razvoj začela šele ob koncu 20. stoletja. Razlog za pospešen razvoj je bila nedvomno uporabnost na različnih področjih, kot so kemija, genetika, računalništvo, fizika in še mnoga druga. V tem poglavju bomo spoznali osnovne pojme teorije grafov, nekatere znane družine grafov, izomorfizme in avtomorfizme grafov, obhode v grafih ter barvanje grafov. Večina snovi tega poglavja je povzeta po [4] in [3]. Vse slike so bile konstruirane v naši aplikaciji. 3

18 4 POGLAVJE 2. TEORIJA GRAFOV 2.1 Osnove teorije grafov Enostaven graf Γ je urejen par (V (Γ), E(Γ)), kjer je V (Γ) končna neprazna množica elementov, ki jih imenujemo vozlišča grafa Γ, E(Γ) pa je podmnožica množice neurejenih parov različnih vozlišč. Elemente množice E(Γ) imenujemo povezave grafa Γ. Kardinalnosti V (Γ) pravimo red grafa Γ. Naj bo Γ graf in naj bosta u in v vozlišči tega grafa. Če je e = {u, v} E(Γ), pravimo, da sta u in v sosednji vozlišči, kar označimo z u v. Vozlišči u in v sta tudi krajišči povezave e, za katero pravimo, da je incidenčna z u in v. Običajno namesto {u, v} povezave označujemo kar z uv. V našem primeru je uv = vu, saj smo povezave definirali kot neurejene pare vozlišč. Takšnim grafom rečemo tudi neusmerjeni grafi, obstaja pa tudi pojem usmerjenega grafa, kjer so povezave urejeni pari vozlišč in tako uv vu. V tem diplomskem delu se bomo ukvarjali le z neusmerjenimi grafi. Bralec bo opazil, da po naši definiciji grafi nimajo večkratnih povezav (več povezav med istim parom vozlišč) ali zank (povezava, ki povezuje neko vozlišče 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 vozlišč in štirih povezav. Konkretno imamo V (Γ) = {1, 2, 3, 4, 5} in E(Γ) = {12, 13, 14, 42, 43}. Slika 2.1: Primer enostavnega grafa.

19 2.1. OSNOVE TEORIJE GRAFOV 5 Čeprav je graf abstrakten kombinatoričen objekt, ga torej v primeru dovolj majhnega reda lahko upodobimo. To storimo tako, da vozlišča predstavimo kot točke v ravnini, povezave pa kot krivulje ali črte, ki povezujejo povezana vozlišča. Takšne upodobitve so možne, kadar je red grafa dovolj majhen. Pri velikih in zapletenih grafih se velikokrat izkaže, da je dovolj, če gledamo samo del tega grafa. Tako si lahko prihranimo veliko dela in časa ter že na podlagi tega ugotovimo nekatere lastnosti celotnega grafa. Imejmo grafa Γ = (V (Γ), E(Γ)) in Σ = (V (Σ), E(Σ)). Graf Σ je podgraf grafa Γ, če je V (Σ) podmnožica množice V (Γ) in E(Σ) podmnožica množice 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 število povezav, ki so incidenčne z nekim danim

20 6 POGLAVJE 2. TEORIJA GRAFOV vozliščem. Nazoren primer iz vsakdanjika je recimo število cest, ki se srečajo na križišču. Nekatere funkcije, ki delujejo znotraj aplikacije, uporabljajo prav ta podatek. Stopnja vozlišča v v grafu Γ je število povezav, ki imajo krajišče v vozlišču v. Označimo jo z deg Γ (v) ali kar deg(v). Minimalno stopnjo vozlišč v grafu Γ označimo z δ(γ), maksimalno stopnjo pa z (Γ). Če so vsa vozlišča grafa Γ iste stopnje, rečemo, da je graf Γ regularen. Omenimo še zaporedje stopenj grafa. To je nepadajoči zapis stopenj vozlišč grafa (naraščajoči 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 vozlišča so prav tako iste stopnje, 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 včasih zanima tudi to, kako priti iz enega vozlišča v drugo. Nazoren primer je tisti iz sodobnih navigacijskih naprav. Vsa večja naselja so

21 2.1. OSNOVE TEORIJE GRAFOV 7 v tem primeru vozlišča, povezave pa so ceste, ki jih povezujejo. Zanima nas, kako najhitreje priti iz naselja X do naselja Y. Zanimiv zgled je tudi ugotavljanje toka med dvema elementoma v električnem vezju. Naj bo Γ = (V (Γ), E(Γ)) graf in naj bosta u, v poljubni vozlišči tega grafa. Zaporedju (v 0, v 1, v 2,..., v n ) vozlišč grafa Γ, kjer je v 0 = u in v n = v, pravimo sprehod od vozlišča u do vozlišča v, če za vsak i {0, 1, 2,..., n 1} velja v i v i+1 E(Γ). V tem primeru pravimo, da je ta sprehod dolžine n. Če so vse povezave sprehoda različne, govorimo o enostavnem sprehodu. Če so v enostavnem sprehodu različna tudi vsa vozlišča, potem govorimo o poti. Dolžini najkrajše poti med vozliščema u in v (če ta obstaja), pravimo razdalja med u in v ter jo označimo z d Γ (u, v). Poglejmo si primer na sliki 2.4. Slika 2.4: Primer enostavnega sprehoda in poti. Na levem primeru je rdeče obarvan enostaven sprehod (4, 3, 2, 1, 4, 2, 5), desni primer pa prikazuje pot (3, 2, 1, 4, 5). Sprehodi, ki se začnejo in končajo v istem vozlišču, imajo posebno poime-

22 8 POGLAVJE 2. TEORIJA GRAFOV novanje. Sprehod (v 0, v 1, v 2,..., v n ) imenujemo sklenjen sprehod ali obhod, če velja v 0 = v n. Če so vse povezave obhoda različne, potem ga poimenujemo enostavni obhod ali enostavni sklenjen sprehod. Če so v obhodu različna tudi vsa vozlišča (z izjemo enakosti v 0 = v n ), 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, če med poljubnim parom vozlišč obstaja pot. Nepovezan graf razpade na povezane podgrafe ali komponente grafa. Maksimalni razdalji med dvema vozliščema 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 srečamo tudi z vprašanjem, ali je določen graf dvodelen. Naj bo Γ(V (Γ), E(Γ)) graf. Graf Γ je dvodelen, če lahko množico V (Γ) zapišemo kot disjunktno unijo A B = V (Γ) tako, da vsaka povezava

23 2.1. OSNOVE TEORIJE GRAFOV 9 grafa Γ povezuje eno vozlišče iz množice A z vozliščem iz množice B. Slika 2.6: Primer dvodelnega grafa. Na sliki 2.6 se nahaja primer dvodelnega grafa, ki je upodobljen na dva načina. Na desni upodobitvi smo premaknili vozlišča množice A na eno stran in vozlišča množice B na drugo stran. Vpeljimo tu še pojem razdaljne particije grafa glede na izbrano vozlišče. Naj bo Γ povezan graf s premerom d in v V (Γ) poljubno vozlišče tega grafa. Družini množic N 0 (v), N 1 (v), N 2 (v),..., N d (v), kjer za poljubno celo število 0 i d velja N i (v) = {u V (Γ) d(v, u) = i}, ki tvori particijo množice V (Γ), pravimo razdaljna particija grafa Γ glede na vozlišče v. Graf lahko predstavimo tako, da narišemo vozlišča množic N 0 (v), N 1 (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 izhodišče izbrali vozlišče 2. Ogledali smo si nekatere najosnovnejše pojme v teoriji grafov. Spoznali smo pojem grafa, kaj ga sestavlja, kako ga upodobimo in kdaj je povezan. Spo-

24 10 POGLAVJE 2. TEORIJA GRAFOV Slika 2.7: Razdaljna particija glede na vozlišče 2. znali smo tudi pojme podgrafa, sprehoda, poti in cikla. Zdaj bomo spoznali še nekatere znane družine grafov. 2.2 Nekatere znane družine grafov Poti Pot P n je graf z množico vozlišč {1, 2,..., n + 1} in množico povezav {i(i + 1) 1 i n}. Torej gre za graf, ki je sestavljen iz ene same poti. Slika 2.8: Primer poti P 2 in P Polni graf Polni graf K n je graf reda n, v katerem sta poljubni dve različni vozlišči sosednji.

25 2.2. NEKATERE ZNANE DRUŽINE GRAFOV Cikli Slika 2.9: Primera K 12 in K 6. Cikel C n je graf, ki ga sestavlja en sam cikel in ima natanko n vozlišč ter povezav. Vsak C n je torej regularen graf stopnje 2. Slika 2.10: Primeri ciklov C 3, C 5 in C Posplošeni Petersenovi grafi Naj bosta n 3 in 0 < k < n naravni števili. Posplošeni Petersenov graf GP G(n, k) je graf z množico vozlišč V = {u i i Z n } {v i i Z n } in množico povezav E = {{u i, u i+1 } i Z n } {{u i, v i } i Z n } {{v i, v i+k } i Z n }.

26 12 POGLAVJE 2. TEORIJA GRAFOV Slika 2.11: Primera GP G(3, 1) in GP G(8, 2). Primer GP G(4, 1) najdemo na sliki Cirkulanti Cirkulant Circ(n, S) je graf z množico vozlišč V = {u i i Z n } in množico povezav E = {{u i, u i+k } i Z n, k S}, kjer je n > 0, S Z n, pri tem pa mora veljati S = S in 0 / S. Slika 2.12: Primera Circ(4, {1}) in Circ(7, {2, 3}).

27 2.3. IZOMORFIZMI IN AVTOMORFIZMI GRAFOV 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. Preslikava ϕ : V (Γ 1 ) V (Γ 2 ) je izomorfizem grafov Γ 1 in Γ 2, če je bijekcija in ohranja sosednost, to je, da za poljubni vozlišči u, v V 1 velja: u v ϕ(u) ϕ(v). V tem primeru pravimo, da sta Γ 1 in Γ 2 izomorfna grafa, kar označimo z Γ 1 = Γ2. Izomorfizem grafov je po definiciji bijekcija, ki ohranja sosednost, zato za poljubna 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: če v Γ 1 obstaja vozlišče, ki je vsebovano na k kopijah Γ, potem tudi v Γ 2 obstaja takšno vozlišče. Včasih 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 vozlišči u, v Γ velja: u v ϕ(u) ϕ(v). Množico vseh avtomorfizmov grafa Γ označimo z AutΓ. Avtomorfizmi danega grafa Γ torej odražajo njegove simetrije. Večja ko je množica AutΓ (ki je v resnici grupa za operacijo kompozituma), več simetrij

28 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 prepričamo s pomočjo naše aplikacije, kot bomo videli v poglavju 5). Opazimo tudi, da na grafu Γ 1 vozlišče 6 leži na natanko treh ciklih dolžine 4, v grafu Γ 2 pa poljubno vozlišče leži le na dveh ciklih dolžine 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 π okrog središča slike grafa. 2 Izomorfizmi grafov so pomembni predvsem zato, ker grafe običajno študiramo le do izomorfizma natančno. Izomorfna grafa imata namreč povsem enako strukturo, morebitna razlika je le v poimenovanju vozlišč. 2.4 Obhodi v grafih Poglejmo si naslednja primera iz vsakdanjika. Cestni delavci bi radi pregledali stanje cest med številnimi naselji. Porabiti želijo čim manj goriva, zato iščejo

29 2.4. OBHODI V GRAFIH 15 tak obhod, ki bi vsako cesto obiskal natanko enkrat. Podobno se neki popotnik odloči, da bi rad obiskal vsa večja mesta v Sloveniji. Zanima ga, ali obstaja tak obhod, ki bi obiskal vsako mesto natanko enkrat. Primera lahko enostavno ponazorimo z grafom, kjer so mesta vozlišča in povezave ceste. Zgoraj omenjena obhoda imata v teoriji grafov posebni poimenovanji. Naj bo Γ poljuben graf. Eulerjev obhod grafa Γ je enostaven obhod, na katerem so zajete vse povezave grafa Γ. To je sprehod, ki prehodi vse povezave grafa Γ, vsako po enkrat, in se konča tam, kjer je začel. V primeru, da se takšen sprehod ne konča v isti točki, pa vendar zadošča vsem preostalim pogojem, pravimo, da je to nesklenjen Eulerjev sprehod. Ciklu, na katerem so vsa vozlišča grafa Γ, pravimo Hamiltonov cikel grafa Γ. Pot, ki obišče vsa vozlišča grafa Γ, se imenuje Hamiltonova pot grafa Γ. Slika 2.14: Primer iskanja obhodov.

30 16 POGLAVJE 2. TEORIJA GRAFOV Graf na sliki 2.14 premore tako Hamiltonov cikel (3, 5, 2, 7, 1, 6, 4, 3) kot Eulerjev 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 rešitev. Gre za zelo kompleksen problem iskanja, za katerega pravimo, da je NP-poln problem. Več o tem si lahko bralec prebere v [5]. Po drugi strani je problem obstoja Eulerjevega obhoda zelo enostaven. Poznamo namreč potreben in zadosten kriterij za ugotavljanje obstoja Eulerjevega obhoda (vse stopnje vozlišč morajo biti sode) in algoritme z linearno časovno zahtevnostjo glede na število povezav (Hierholzerjev algoritem), s pomočjo katerih ga lahko najdemo [4]. 2.5 Barvanje grafov V matematičnem svetu je precej dobro poznan problem štirih barv. V daljnem letu 1852 je na londonskem University Collegeu poučeval Augustus De Morgan. Francis Guthrie, eden njegovih nekdanjih študentov, je uspešno pobarval zemljevid angleških grofij s štirimi barvami, tako da so bile sosednje grofije različnih barv. Guthrie je prek svojega brata Fredericka, ki je bil študent Augustusa De Morgana, slednjega vprašal, ali so štiri barve dovolj za poljuben zemljevid. Problem dolgo časa ni bil razrešen in je postal eden najslavnejših nerešenih matematičnih problemov. Pojavilo se je več neuspelih poskusov dokaza. Leta 1976 pa sta s pomočjo računalnika problem rešila Kenneth Appel in Wolfgang Haken. Problem štirih barv je tesno povezan s teorijo grafov. Recimo, da imamo zemljevid angleških grofij. Za vsako grofijo narišemo vozlišče. Nato povežemo

31 2.5. BARVANJE GRAFOV 17 tista vozlišča, katerih pripadajoče grofije imajo skupno mejo, in imamo pred seboj klasično upodobitev grafa. V teoriji grafov nas pogosto zanima najmanjše število barv, s katerimi lahko pobarvamo poljuben graf tako, da so sosednja vozlišča različnih barv. Naj bo Γ = (V (Γ), E(Γ)) poljuben graf. Preslikava c : V N je dobro barvanje vozlišč grafa Γ, če za poljubni dve sosednji vozlišči u, v Γ velja, da je c(u) c(v). Problem barvanja grafa predstavlja določitev najmanjšega naravnega števila χ(γ), imenovanega kromatično število grafa Γ, tako da bo obstajalo dobro barvanje c : V N, za katerega bo za poljubno vozlišče v veljalo c(v) χ(γ). Iščemo torej minimalno število barv, s katerimi lahko dobro pobarvamo graf. Poglejmo si dokaj močan in uporaben izrek, ki ga je prvi dokazal Rowland Leonard Brooks leta Izrek 2.1 (Brooksov izrek). Naj bo Γ poljuben graf. Če Γ 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 kromatičnega števila, ki pa včasih ni preveč uporabna. Pri manjših grafih, ki imajo vozlišča 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 že z dvema barvama. Preveriti moramo samo še, ali lahko graf dobro pobarvamo z eno barvo, kar pa očitno ni možno (graf ima vsaj eno povezavo), zato je χ(γ) = 2.

32 18 POGLAVJE 2. TEORIJA GRAFOV Slika 2.15: Dobro barvanje GP G(4, 1) grafa. Določitev kromatičnega števila ni lahek problem, saj ni algoritma, ki bi natančno izračunal kromatično število poljubnega grafa. Tako kot iskanje Hamiltonove poti in cikla je tudi problem določitve kromatičnega števila grafa NP-poln problem. Več o tem si lahko bralec prebere v [1]. Z barvanjem grafov smo končali uvod v teorijo grafov. Dotaknili smo se samo nekaterih osnovnih pojmov in definicij, ki gradijo to zanimivo in obsežno matematično vejo. Cilj diplomskega dela je bil razvoj že omenjene HTML5 aplikacije. Aplikacija je matematično obarvana, saj je namenjena delu na tem področju, vendar je sam razvoj aplikacije potekal v računalniškem svetu programske kode. Zato si bomo v naslednjem poglavju pogledali HTML5 in novosti, ki jih prinaša.

33 Poglavje 3 HTML5 in knjižnica Paper.js HTML5 prinaša kar nekaj novosti. V tem poglavju si bomo ogledali osnovne HTML5 značilnosti, semantične in sintaktične spremembe, bitno platno Canvas in nekatere nove vmesnike. V zaključku poglavja bomo spoznali tudi JavaScript knjižnico Paper.js. Večina tega poglavja je povzeta po [2] in [10]. 3.1 HTML5 osnove HTML5 je označevalni 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 specifikacije HTML5 je poenostavljanje delovanja in razvijanja vmesnikov spletnih aplikacij. HTML5 si je najbolje predstavljati kot zbirko posameznih funkcij in ne kot eno samo. Današnje spletne vsebine stremijo k čim večji interaktivnosti. Razvijalci spletnih vsebin in aplikacij želijo, da bi imele te bogat nabor dodatnih funkcij in možnosti. Tu pa naletimo na težavo, saj je v takšnih primerih velikokrat treba uporabiti dodatne vtičnike, kot so: ActiveX, Flash, QuickTime, RealPlayer. Ti vtičniki se tako dobro integrirajo z brskalniki, da 19

34 20 POGLAVJE 3. HTML5 IN KNJIŽNICA PAPER.JS Slika 3.1: HTML5 logotip [11]. velikokrat dejstvo, da so bili uporabljeni, opazimo šele pri uporabi platforme, ki tega vtičnika ne podpira. Ni pa to edina težava, saj vtičniki zahtevajo višjo procesorsko zmogljivost in dodatno kodiranje s strani razvijalca aplikacije. Tu nam v pomoč priskoči HTML5, saj nam ponuja nabor novosti, s pomočjo katerih se lahko v določenih primerih izognemo potrebi po zunanjih vtičnikih. Kot primer omenimo nova <video> in <audio> elementa, ki ju bomo podrobneje opisali v nadaljevanju. Vse obstoječe strani, ki temeljijo na predhodnih standardih, še vedno delujejo povsem enako, saj v HTML5 delujejo vsi elementi iz predhodnikov, novim vsebinam pa HTML5 ponuja moč vseh novosti. 3.2 Novi strukturni elementi Novi strukturni elementi, ki jih uvede HTML5, so večinoma nastali na podlagi najpogostejših imen atributov iz prejšnjih različic. Še vedno lahko uporabljamo starejše atribute, vendar z uporabo novih elementov, ki predstavljajo isto zadevo, dobimo berljivejšo in enostavnejšo sintakso. V nadaljevanju bomo opisali nekatere omenjene elemente.

35 3.2. NOVI STRUKTURNI ELEMENTI 21 <header> Element <header> označuje glavo ali uvod v dokument ali razdelek. Predstavlja lahko skupino uvodnih (npr. logotip) in navigacijskih pripomočkov. <footer> Element <footer> označuje nogo določenega razdelka, članka ali samostojno nogo strani. Lahko vsebuje ime avtorja, kontaktne informacije, datum, avtorske pravice ipd. <nav> Element <nav> določa odsek v dokumentu, ki je namenjen navigaciji do preostalih podstrani ali drugih spletnih strani. <section> Element <section> predstavlja tematsko združitev elementov dokumenta ali aplikacije, običajno z naslovom (npr. poglavja). <article> Element <article> je namenjen predstavljanju vsebine na spletni strani in pogosto označuje vsebinsko zaključeno celoto. To so lahko članek, objava na blogu, novica itd. <aside> Element <aside> je mišljen kot prostor na strani, kjer postavimo navigacijo, oglase in vse, kar želimo ločiti od glavnega dela vsebine na strani. Je pa ta del

36 22 POGLAVJE 3. HTML5 IN KNJIŽNICA 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 spremenjenih elementov je še veliko več, vendar so zgoraj opisani med najbolj zanimivimi. Zdaj si bomo ogledali še tri nove elemente, ki so sami po sebi dokaj revolucionarni. 3.3 Preostali novi elementi HTML5 uvaja nove možnosti za integracijo videa in glasbe. Nekoč smo za to potrebovali posebne vtičnike, zdaj pa to ni več potrebno, saj lahko znotraj ustreznega elementa navedemo vir in tako integriramo glasbo ali video v spletno stran. Novost je tudi bitno platno ali Canvas, ki smo ga uporabljali pri razvoju naše aplikacije.

37 3.4. NOVI API <video> in <audio> Element <video> nam omogoča predvajanje videa na naši spletni strani. Vse, kar potrebujemo, je vir videa, ki ga umestimo med značke. Tudi <audio> element deluje na podoben način, saj nam omogoča predvajanje glasbe na spletni strani. Potrebujemo vir in pravilen format datoteke Canvas Canvas je dokaj revolucionarna novost, ki jo prinaša HTML5. Deluje kot bitno platno za risanje, na katerem lahko izdelujemo grafe, animacije, grafična orodja, interaktivne aplikacije in še kaj drugega. Tudi <canvas> je element, ki ga ustvarimo na naslednji način: Slika 3.3: Canvas HTML5 element. Kot vidimo, smo Canvasu najprej dodelili unikatni identifikator (mycanvas), in mu določili dimenzije ter atribut, ki omogoča dinamično spreminjanje dimenzij. Omeniti velja, da Canvas element ne deluje tako, kot preostali HTML elementi, kjer se vpliv elementa pozna na vsebini znotraj značk. Canvas deluje kot nekakšen grafični vsebnik, z njegovo vsebino pa lahko manipuliramo prek skriptnih jezikov (ponavadi JavaScript). Izrisovanje grafike torej poteka prek skript, vsebina med značkami pa se izpiše, če naš brskalnik ne podpira Canvas elementa. 3.4 Novi API Ogledali smo si najpomembnejše semantične in sintaktične novosti v HTML5. Poleg njih HTML5 specifikacija uvaja tudi nekatere nove vmesnike za progra-

38 24 POGLAVJE 3. HTML5 IN KNJIŽNICA PAPER.JS miranje aplikacij, tako imenovane Application programming interface (API), ki se lahko uporabljajo v povezavi z JavaScriptom. API označuje skupek ukazov, funkcij ali protokolov, ki jih razvijalci lahko uporabijo pri razvoju programske opreme za določen 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 že opisali; Web storage API, s katerim lahko spletne strani lokalno shranjujejo podatke znotraj brskalnika na podoben način kot piškotki, vendar z večjo kapaciteto, hitreje in bolj varno; Web Messaging API omogoča komunikacijo med dokumenti, ki se nahajajo na različnih izvornih domenah. Obstajajo pa tudi API, ki niso del HTML5 specifikacije, so pa v nekakšnem tehnološkem 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 naše aplikacije še kako pomemben File API Novosti, ki jih prinaša File API, nam omogočajo, da z JavaScript kodo preberemo vsebino lokalno shranjene datoteke. Tako lahko prikažemo kratek opis datoteke, preden jo naložimo na strežnik, ali pa kar preberemo njeno celotno vsebino [17]. Po File API specifikaciji bi morali brskalniki ponujati naslednje vmesnike in podatke:

39 3.5. KNJIŽNICA PAPER.JS 25 FileList objekt, ki predstavlja tabelo vseh datotek, izbranih z elementom <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 naše aplikacije. Bolj natančno si ju bomo ogledali v 4. poglavju. 3.5 Knjižnica 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 še vedno v razvoju, za katerega skrbita Jürg Lehni in Jonathan Puckey. Ponuja nam čisto podatkovno strukturo graf scene in veliko uporabnost za ustvarjanje in delo z vektorsko grafiko ter Bezierovimi krivuljami. Gre za knjižnico, namenjeno tako začetnikom, kot bolj zahtevnim uporabnikom. Osnov se lahko naučimo zelo hitro, da pa bi delo s Paper.js obvladali, potrebujemo kar veliko časa in znanja. Paper.js ni samo ovoj, ki obdaja Canvas. Knjižnica nam poenostavi delo s Canvasom, saj je izrisovanje grafičnih elementov avtomatsko in optimizirano. Tako lahko ukaze za izrisovanje prepustimo kar knjižnici, mi pa se lahko posvetimo preostalim ciljem. Pri njihovem doseganju si lahko pomagamo s spodaj opisanimi značilnostmi.

40 26 POGLAVJE 3. HTML5 IN KNJIŽNICA PAPER.JS Slika 3.4: Paper.js. PaperScript - je enostavna razširitev obstoječega JavaScripta, ki vsebuje dodatno podporo za delovanje matematičnih operatorjev na Paper.js objektih, kot sta Point in Size. Priročno je tudi to, da PaperScript samodejno ustvari Project, View in miškine Tool objekte ter zanje poenostavi namestitev event nadzornih funkcij. PaperScript kodo naložimo tako kot JavaScript znotraj <script> elementa. Omenimo tudi to, da je treba pri nalaganju določiti, 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 točka in dve nadzorni točki. Omenjene

41 3.5. KNJIŽNICA PAPER.JS 27 tri točke določajo položaj in usmeritev pripadajočih krivulj. Segmente lahko dodajamo, brišemo in spreminjamo njihove lastnosti ter položaje. Interakcija z miško in tipkovnico - knjižnica vsebuje nadzorne funkcije, ki nam pomagajo pri implementaciji miške in tipkovnice. Tako lahko zelo enostavno ustvarimo bogata in zanimiva orodja, ki delujejo na osnovi uporabe miške in tipkovnice. Nadzorne funkcije samo definiramo v PaperScript kodi, saj se izvajajo samodejno ob uspešni interakciji s Canvasom. Matematične operacije - PaperScript nam omogoča uporabo običajnih algebraičnih operatorjev nad objekti, kot sta Point in Size. To pomeni, da lahko seštevamo točke, prištevamo vektorje in še veliko več. Vektorska geometrija - kot je bilo že omenjeno, je Paper.js knjižnica, namenjena delu z vektorsko grafiko, zato je tudi podpora za delo z vektorji zelo močna. Neposredno delo z x- in y-koordinati je dokaj neintuitivno in nefleksibilno. Skupaj z razširjenim delovanjem matematičnih operatorjev lahko premikamo točke s prištevanjem vektorjev, spreminjamo smer in velikost vektorja itd. Kot vidimo, je Paper.js dokaj zmogljiva knjižnica, ki nam poenostavi delo s Canvasom. Za uporabo Paper.js knjižnice smo se odločili, ker je enostavna za začetnike in deluje kot odlična odskočna deska v Canvas okolje. Glede na to, da je Paper.js še vedno v razvoju, je dokaj težko začeti z izdelavo nečesa specifičnega. Najbolje si je pomagati z referenco in vodiči, ki pa še ne pokrijejo vseh funkcionalnosti. Udeležba v razvoju in diskusiji je toplo priporočena, saj večina trenutnih uporabnikov aktivno sodeluje na uradni mailing listi. Razvoj naše aplikacije je potekal na podoben način. Veliko je bilo treba spraševati,

42 28 POGLAVJE 3. HTML5 IN KNJIŽNICA PAPER.JS testirati in spreminjati. Več o samem razvoju aplikacije pa v naslednjem poglavju.

43 Poglavje 4 Razvoj aplikacije z0diak Aplikacija je dobila svoje ime po zodiakalnih znamenjih ali horoskopu. Naši predniki so vsak horoskopski znak začrtali med zvezdami, ki pa same po sebi še ne izdajo tiste prave upodobitve horoskopskih znakov. Ko pa zvezde na primeren način povežemo eno z drugo, dobimo lepe figure, ki pa niso nič kaj drugega kot grafi. Slika 4.1: Logotip aplikacije. Sama struktura aplikacije je dokaj standardna. Zaradi samega namena aplikacije je bilo treba vgraditi delovanje miške in dobro definirati osnovno podatkovno strukturo, saj je za delovanje večine gumbov to vse, kar potrebujemo. Same funkcije bi lahko nekako razvrstili v tri osnovne razrede: kontrolne funkcije, preverjalne funkcije in funkcije za postavitev. Vsak gumb je povezan s 29

44 30 POGLAVJE 4. RAZVOJ APLIKACIJE Z0DIAK pripadajočo 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 ustreznosti avtomorfizma). Pri gumbih, ki skrbijo za izris ali drugačne upodobitve, pa imamo po navadi tudi funkcijo, ki poskrbi, da se vozlišča grafa ustrezno premaknejo (npr. krožno izrisovanje na sliki 4.6). Zaradi velikega števila gumbov in preostalih možnosti je pomembno tudi medsebojno izključevanje. Za to skrbi posebna funkcija, ki je povezana z večino gumbov v aplikaciji. Pomemben del aplikacije je tudi delovanje nalaganja in shranjevanja grafov. Kot bomo videli v nadaljevanju, smo tu uporabili dokaj nenavadne rešitve. V tem poglavju bomo torej opisali, kako je potekal razvoj naše aplikacije. Pogledali si bomo najpomembnejše gradnike in zamisli, ki jo tvorijo. To so: osnovna podatkovna struktura Graph data structure, branje iz datoteke, ustvarjanje elementov na Canvasu, ustvarjanje datoteke z željeno vsebino, premikanje elementov in preostale funkcije ter procedure. Aplikacija ja namenjena predvsem tistim posameznikom, ki se prvič srečujejo s teorijo grafov. Njena funkcionalnost je iz razumljivih razlogov nekoliko omejena, vendar začetniku 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 učijo dela s Canvasom in knjižnico Paper.js.

45 4.1. PODATKOVNA STRUKTURA Podatkovna struktura Najpomembnejši del aplikacije je podatkovna struktura, imenovana Graph, ki je tipa Graph data structure. Razred Graph data structure sestavljata dve dinamični tabeli. V prvi tabeli, Graph data structure.nodes, so shranjena vsa vozlišča. Druga tabela, Graph data structure.lines, pa vsebuje vse povezave. Slika 4.2: Osnovna struktura. Prek tabele vozlišč lahko dostopamo do vsakega vozlišča grafa Graph. Vsako vozlišče na Canvasu je objekt tipa Path.Circle, ki ga ustvarimo s preprosto funkcijo var Vozlišče = new Path.Circle(koordinate središča, radij). Za potrebe aplikacije je bilo najpomembnejše to, da ima vsako vozlišče svojo lokacijo na Canvasu, edinstveno oznako, barvo, radij in podatke o sosedih. Tukaj velja omeniti, da smo zaradi spreminjanja arhitekture skozi razvoj ohranili dodatno plast, imenovano construct, ki vsebuje omenjeni objekt tipa Path.Circle. V začetku razvoja aplikacije je bilo treba ločeno dostopati do samega kazalca na vozlišče in tabele sosedov istega vozlišča. Zdaj je tabela sosedov premaknjena eno plast nižje k samemu kazalcu na vozlišče.

46 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 preprosto funkcijo var Povezava = new Path.Line(koordinate prvega krajišča, koordinate drugega krajišča). Vsaka povezava hrani podatke o krajiščih, barvi črte in njeni debelini. Če povzamemo vse, kar smo spoznali v tem razdelku: Graph - glavna podatkovna struktura, objekt tipa Graph data structure Graph.nodes - tabela vozlišč Graph.nodes[i].construct - i-to vozlišče, objekt tipa Path.Circle z naslednjimi lastnostmi: Graph.nodes[i].construct.fillColor - določa barvo Graph.nodes[i].construct.vertex - objekt tipa PointText, ki predstavlja oznako vozlišča 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 krajišče Graph.lines[i].edgeEnd - kazalec na drugo krajišče Graph.lines[i].strokeColor - določa barvo črte

47 4.2. PREMIKANJE VOZLIŠČ IN OHRANJANJE STRUKTURE 33 Graph.lines[i].strokeWidth - določa debelino črte Opisali smo samo najbolj ključne 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 natančno ogleda določene podrobnosti. 4.2 Premikanje vozlišč in ohranjanje strukture Struktura grafa se pri vseh premikih ohranja. To pomeni, da se morajo pri premiku posameznega vozlišča ustrezno premakniti tudi vse povezave, ki imajo krajišče v tem vozlišču. Zato smo morali pri razvoju aplikacije razmišljati, kako to najbolje izvesti, saj gre za temeljno funkcionalnost. Knjižnica Paper.js vsebuje nadzorne mehanizme, ki nam pomagajo pri integraciji miškinih funkcij v aplikacijo. Ti mehanizmi so nadzorne funkcije, ki pri vsakem dogodku, povezanim z uporabo miške, dobijo za vhodni podatek event objekt, ki je neposredno povezan s samim dogodkom. Nadzorne funkcije so naslednje: function onmousedown(event) - funkcija se izvede vsakič, ko pritisnemo na miškin gumb na Canvasu. function onmousedrag(event) - funkcija se izvede vsakič, ko pritisnemo na miškin gumb in ga držimo ter hkrati premikamo miškin kazalec po Canvasu. function onmousemove(event) - funkcija se izvede vsakič, ko premaknemo miškin kazalec na Canvasu.

48 34 POGLAVJE 4. RAZVOJ APLIKACIJE Z0DIAK Event objekt vsebuje vse potrebne informacije o tem, kar se je zgodilo z miško. Našteli bomo nekaj primerov in jih tudi na kratko opisali: event.point - vsebuje informacijo o položaju miškinega kazalca v času dogodka. event.delta - predstavlja vektor od začetnega položaja miškinega kazalca v času dogodka do trenutnega (morda tudi končnega) položaja. event.type - vsebuje informacijo o tipu dogodka. To so najpomembnejše spremenljivke in funkcije, ki smo jih potrebovali pri razvoju aplikacije, saj ta temelji na uporabi miške in tipkovnice. Preden si lahko pogledamo, kako je to videti na primeru, potrebujemo še en mehanizem. Z informacijo o položaju miškinega kazalca ob dogodku lahko natančno določimo tudi tisto, kar se nahaja pod kazalcem. V tem primeru uporabimo hittest na naslednji način: var hitresult = project.hittest(event.point, hitoptions); V naši izvorni kodi je na začetku definirano, kaj vse obravnavamo kot pomemben zadetek. To smo naredili tako, da smo definirali strukturo hitoptions (slika 4.3), kjer smo določili, da je za aplikacijo pomemben zadetek polnila vozlišča (fill oz. barvno polnilo) ali povezave (stroke oz. črta). Slika 4.3: Možnosti zadetka.

49 4.2. PREMIKANJE VOZLIŠČ IN OHRANJANJE STRUKTURE 35 Znotraj projekta nato izvedemo hittest, ki v spremenljivko hitresult shrani vse rezultate. Pa si oglejmo, kako poteka premik vozlišča. Ko kliknemo na posamezno vozlišče in ga povlečemo ter spustimo na drugi lokaciji, se sproti izvaja onmousedrag funkcija. Miškin kazalec ima tako vedno začetni in trenutni (morda tudi končni) položaj. To pa pomeni, da imamo v spremenljivki event.delta shranjen vektor tega premika. Slika 4.4: Pot miškinega kazalca. V spremenljivki hitresult imamo shranjene rezultate testa, kjer lahko preverimo, ali smo pri začetnem kliku zadeli polnilo vozlišča ali črto povezave. To lahko preverimo s primerjavo: hitresult.type == fill za vozlišča; hitresult.type == stroke za povezave. Recimo, da smo v našem primeru zadeli polnilo vozlišča. Položaj vozlišča spremenimo tako, da trenutnemu položaju prištejemo vektor premika miškinega kazalca. Ob tem ne smemo pozabiti na povezave. Spremenljivka hitresult hrani tudi informacijo o elementu, bolj natančno, kazalec na podatkovno strukturo vozlišča, ki smo ga zadeli. Do kazalca dostopamo prek hitresult.item

50 36 POGLAVJE 4. RAZVOJ APLIKACIJE Z0DIAK lastnosti. Tako lahko enostavno preverimo, katere povezave so incidenčne s premaknjenim vozliščem, in jih ustrezno popravimo. To storimo tako, da ustrezno krajišče povezave premaknemo za isti vektor premika miškinega kazalca. 4.3 FileReader API in branje iz datoteke Splošno znano je, da JavaScript ne omogoča dela z datotekami. Zaradi varnostnih lukenj in možnosti zlorabe je to tudi smiselno. Vendar smo tudi v tej smeri dobili nekatere nove možnosti, ki omogočajo branje lokalno shranjenih datotek. Tukaj si bomo ogledali FileReader API. FileReader API je del File API aspekta, opisanega v 3. poglavju, ki nam omogoča branje lokalno shranjene datoteke na več načinov. Datoteko lahko beremo kot binarni zapis, podatkovni Uniform Resource Locator (URL), ali kot besedilo in še kaj drugega [8]. Za naše 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 ločene oznake vozlišč (naštevanje oznak Slika 4.5: Notacija. vozlišč končamo s piko). V drugi vrstici v oglatih oklepajih naštevamo koordinate vozlišč (prav tako jih ločimo s presledkom), kjer je vrstni red zapisa enak kot pri oznakah vozlišč. Od tu naprej vsaka vrstica vsebuje definirano povezavo v zavitih oklepajih, kjer z vejico ločeni oznaki predstavljata obe krajišči.

51 4.3. FILEREADER API IN BRANJE IZ DATOTEKE 37 Če notacija vsebuje tudi koordinate vozlišč (saj ni obvezno), jih aplikacija tudi upošteva pri izrisu. Če notacija koordinat ne vsebuje, se graf izriše krožno, kot prikazuje slika 4.6. Zdaj si lahko ogledamo, kako potekata branje in interpre- Slika 4.6: Krožno izrisovanje. tacija notacije grafa, ki se nahaja v tekstovni datoteki. S pomočjo FileReader API lahko datoteko enostavno preberemo prek vnosnega polja za datoteke in njeno vsebino shranimo v spremenljivko (znakovni niz ali string). Najprej ločimo dobljeni znakovni niz v tri dele: vozlišča, koordinate, povezave. Tako imamo na voljo tri ločene znakovne nize. Najprej se sprehodimo po znakovnem nizu vozlišč in na Canvasu ustvarimo vozlišča s pripradajočimi oznakami. Če so bile v notaciji shranjene tudi koordinate vozlišč, imamo na voljo znakovni niz koordinat, s pomočjo katerega ustvarjena vozlišča premaknemo na ustrezne lokacije. Ostanejo nam še povezave, ki pa jih je dokaj enostavno interpretirati. Znakovni niz povezav beremo po vrsticah, kjer za vsako prebrano povezavo preverimo oznaki obeh krajišč, in izrišemo povezavo med tema dvema krajiščema.

52 38 POGLAVJE 4. RAZVOJ APLIKACIJE Z0DIAK 4.4 Blob in shranjevanje v datoteko Shranjevanja v lokalno datoteko v JavaScriptu zaradi varnosti še vedno ni mogoče izvesti. Vendar pa obstaja način shranjevanja, ki ga trenutno podpira samo Google Chrome brskalnik. Ideja je dokaj enostavna. S pomočjo Java- Script kode ustvarimo tekstovno datoteko, ki vsebuje željeno vsebino. Nato ustvarimo skrito povezavo do ustvarjene datoteke in vsilimo prenos na lokalni disk. Naj opozorimo, da to dejanje ni priporočeno za splošno uporabo, saj tudi večina brskalnikov tega ne omogoča. V našem primeru gre za aplikacijo, ki se nahaja na lokalnem disku in ne na strežniku, zato je uporaba varnejša. Blob je najbolje opisati kot nekakšen blok ali kos binarnih podatkov. Zgled je lahko video datoteka, ki je sama preobsežna za nalaganje v spomin, če je ne razbijemo na več manjših delov. Samo ime izhaja iz Structured Query Language (SQL) podatkovnih baz, kjer kratica pomeni Binary Large Object. V Java- Scriptu Blob velikokrat predstavlja obsežne binarne podatke. Lahko pa ravno nasprotno predstavlja vsebino majhne tekstovne datoteke. Vendar z Blobi ne moremo početi prav veliko. Lahko določimo njihovo velikost, vprašamo za njihov Multipurpose Internet Mail Extension (MIME) tip ali pa jih razbijemo na več manjših Blobov [9]. Za nas je pomembno to, da lahko Blob konstruiramo sami. Pred kratkim smo to v JavaScriptu počeli 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 začetku definiramo prazen znakovni niz. S pomočjo zanke se sprehodimo po tabeli vozlišč in ločeno s presledkom dodajamo oznake vozlišč v znakovni niz. Pri zadnjem vozlišču namesto presledka dodamo piko. Podobno se lotimo

53 4.5. PREOSTALE FUNKCIJE 39 zapisa koordinat, kjer ponovimo sprehod po tabeli vozlišč in znotraj oglatih oklepajev ustrezno dodajamo x in y koordinati vozlišč v znakovni niz (posamezne oklepaje ločimo s presledkom). V zadnjem koraku naredimo še sprehod po tabeli povezav, kjer postopamo enako kot pri koordinatah, le da v znakovni niz dodajamo oznake krajišč po ločenih vrsticah (uporabimo znak za preskok v novo vrstico) znotraj zavitih oklepajev. S pomočjo konstruirane notacije lahko zelo enostavno konstruiramo Blob, ki bo v našem 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 elemente 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 željeno vsebino. Ostalo je še veliko funkcij in preostalih delov izvorne kode, ki tvorijo delujočo celoto. Te bomo predstavili le na kratko. Izvorna koda, ki je še ostala, namreč idejno ni tako zanimiva in težka. Gre za implementacijo že splošno poznanih algoritmov in rešitev. Pa si poglejmo najpomembnejše dele preostale izvorne kode. onresize(event) - funkcija skrbi za obnašanje Canvasa pri spreminjanju velikosti okna;

54 40 POGLAVJE 4. RAZVOJ APLIKACIJE Z0DIAK onmousemove(event) - funkcija poskrbi za to, da je vozlišče aktivno in obarvano (rdeče z obrobo), ko z miškinim kazalcem lebdimo nad njim; Connected(Graph) - funkcija preveri, ali je graf povezan; content check(vertex content) - funkcija skrbi za edinstvene oznake vozlišč; shuffle() - vsako vozlišče grafa premesti na nove, naključne 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 palete; Hamilton() - glavna funkcija za iskanje Hamiltonove poti in cikla, ki poskrbi za delovanje gumbov in izpisov; Hamilton edge check(edges, mode) - funkcija preveri, ali izbrane povezave resnično predstavljajo cikel. Vhodna podatka sta tabela povezav, ki smo jih izbrali, in zastavica za preverjanje cikla oz. poti. Nato funkcija preveri, ali povezave resnično tvorijo cikel ali pot, saj se morajo držati skupaj; Bipartite() - glavna funkcija za preverjaje dvodelnosti grafa; Bipartite positioning() - funkcija, ki ustrezno izriše dvodelen graf (slika 2.6);

55 4.5. PREOSTALE FUNKCIJE 41 Cycle(start) - funkcija, ki poišče in označi lihi cikel, če graf ni dvodelen. Funkcija za vhodni podatek dobi začetno vozlišče. Nato se izvaja algoritem iskanja v globino, ki ustrezno barva povezave na lihem ciklu. Vse povezave, ki niso del končnega lihega cikla, pa obarva s črno barvo, če se te obarvajo med izvajanjem funkcije. D partition A() - funkcija za izris razdaljne particije, ki skrbi za začetno izbiro vozlišča in izpisovanje; Graph flatten(graph) - funkcija, ki poravna vse povezave; Partition positioning() - funkcija, ki zamakne povezave znotraj iste soseščine. To storimo tako, da vsaki od teh povezav dodamo novi, tretji segment na sredino. Segment nato le zamaknemo v stran in povezavo zgladimo s pomočjo implementirane funkcije smooth(); D partition B(Start V) - glavna funkcija za izris razdaljne particije grafa, ki za vhodni podatek dobi začetno vozlišče. Izvede se algoritem iskanja v širino, kjer vozliščem priredimo ustrezno identifikacijo soseščine. Nato vsako vozlišče le ustrezno premaknemo; Output log() - funkcija, ki nadzira sprotno izpisovanje dogodkov pri preostalih funkcijah; Draw cycle - funkcija za določanje cikla in podatkovne strukture; Draw circular() - funkcija, ki graf izriše krožno; Draw Circulant - funkcija za določanje cirkulanta in podatkovne strukture;

56 42 POGLAVJE 4. RAZVOJ APLIKACIJE Z0DIAK Draw complete - funkcija za določanje polnega grafa in podatkovne strukture; Draw petersen - funkcija za izris posplošenega Petersenovega grafa; Draw GPG() - funkcija, ki graf izriše kot posplošen Petersenov graf; Draw gpath - funkcija za določanje poti in podatkovne strukture; Draw inpath() - funkcija, ki izriše pot; Zoom() - funkcija za spreminjanje pogleda, približevanje in odmikanje; addcontent() - funkcija za spreminjanje oznak vozlišč; Aut() - glavna funkcija za iskanje avtomorfizmov grafa, ki poskrbi za delovanje gumbov in izpisov; Check Aut() - funkcija, ki preveri, ali izbrana permutacija vozlišč predstavlja avtomorfizem grafa; clearbuttons() - funkcija, ki skrbi za medsebojno izključevanje posameznih gumbov in funkcij; description() - funkcija, ki prikaže ali skrije oznake vozlišč; Na ta način smo opisali vse gradnike, ki so pomembni za delovanje aplikacije. Večino ciljev, ki smo si jih zastavili na začetku, 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 času nastanka aplikacije na voljo premalo literature in primerov, da bi nam uspelo tudi to. Težava je v tem, da izbrana knjižnica Paper.js še ni popolnoma dokončana in je v aktivnem

57 4.5. PREOSTALE FUNKCIJE 43 razvoju. Nedvomno bo v bližnji prihodnosti to ena od prvih implementacij. Seveda se lahko zgornji težavi vsaj deloma izognemo tudi tako, da vsak graf odpremo v svoji kopiji aplikacije. Morda velja omeniti, da je bilo zaradi aktivnega razvoja knjižnice Paper.js dokaj oteženo samo pisanje izvorne kode. Ta se v celoti nahaja v eni datoteki, ki jo med drugim tudi uporabimo za zagon aplikacije. JavaScript namreč omogoča vključitev več zunanjih skript v eno samo, kjer lahko nato uporabljamo funkcije uvoženih skript. PaperScript pa te funkcionalnosti še ne ponuja. Zato je bilo iskanje semantičnih napak izredno zamudno in oteženo. Tu smo si pomagali z razhroščevalnikom, ki smo ga pripravili kar sami. Okno za izpisovanje, ki se nahaja v aplikaciji spodaj, je služilo kot okno za izpisovanje posameznih vrednosti spremenljivk in preostalih lastnosti. Tako smo rešili kar nekaj težav, ki so se pojavile v razvojnem obdobju aplikacije. V naslednjem poglavju bomo prikazali nekatere primere uporabe naše aplikacije.

58 44 POGLAVJE 4. RAZVOJ APLIKACIJE Z0DIAK

59 Poglavje 5 Primeri uporabe aplikacije Aplikacijo z0diak lahko uporabimo kot pomoč pri reševanju različnih nalog iz teorije grafov. Kot smo že omenili, so tudi vse slike v 2. poglavju konstruirane z aplikacijo. Lahko pa se lotimo bolj zanimivih in razgibanih problemov, saj nam aplikacija ponuja različna orodja. Kot ilustracijo si najprej oglejmo nekaj primerov, v katerih bomo skušali ugotoviti, ali so dani grafi točkovno tranzitivni ali ne. Ker pojma točkovne tranzitivnosti še ne poznamo, ga bomo opisali tukaj. Naj bo Γ = (V, E) graf. Če za vsak par vozlišč u, v V obstaja ϕ AutΓ, da velja v = ϕ(u), potem je Γ točkovno tranzitiven. Zdaj si lahko ogledamo nekaj konkretnih primerov. GPG(8,3) Po zagonu aplikacije je treba izbrani graf najprej konstruirati. To lahko naredimo ročno s postopnim risanjem, z uporabo posebnega orodja v meniju Osnovne družine grafov ali pa graf naložimo iz tekstovne datoteke. Oglejmo si 45

60 46 POGLAVJE 5. PRIMERI UPORABE APLIKACIJE najlažjo varianto. V meniju Osnovne družine grafov izberemo orodje za izris GPG. Po vnosu ustreznih parametrov se nam graf izriše tako, kot prikazuje slika 5.1. Vprašanje, ki nas zanima, je, ali je dani graf točkovno tranziti- Slika 5.1: GP G(8, 3). ven. Hitro opazimo, da je ciklična rotacija ϕ = ( )( ) avtomorfizem našega grafa (to lahko tudi preverimo s pomočjo gumba Avtomorfizem). Tako vidimo, da lahko vsako vozlišče na zunanjem ciklu preslikamo v katerokoli drugo vozlišče na zunanjem ciklu. Podobno velja za notranja vozlišča (vozlišča znotraj zunanjega cikla). Postavi se vprašanje, ali obstaja avtomorfizem, ki nam preslika kakšno zunanje vozlišče v kakšno notranje in obratno. Tu si lahko pomagamo z aplikacijo, ki nam omogoča prosto premikanje vozlišč. Če dobimo isto upodobitev grafa, ko zunanja vozlišča ustrezno premaknemo navznoter in notranja vozlišča navzven, potem vemo, da tak avtomorfizem obstaja. Treba ga je le še zabeležiti. Na sliki 5.2 je prikazan postopek premikanja vozlišč. Avtomorfizem, ki ga iščemo, torej obstaja. V to nas prepričata postopek premikanja vozlišč in končna upodobitev, ki je enaka

61 47 Slika 5.2: Premiki vozlišč grafa GP G(8, 3). začetni. Da bomo točkovno tranzitivnost dokazali tudi formalno, moramo pripadajoči avtomorfizem grafa tudi zapisati. Glede na to, da smo vozlišča premikali postopoma, to ni tako težko, saj vsak premik le ustrezno zapišemo. Pri tem si lahko pomagamo z začetno 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 točkovno tranzitiven.

62 48 POGLAVJE 5. PRIMERI UPORABE APLIKACIJE GPG(7,2) Kot pri prejšnjem primeru je tudi tukaj treba graf najprej konstruirati. Postopamo kot prej in dobimo izris, kot ga prikazuje slika 5.4. Znova nas zanima, Slika 5.4: GP G(7, 2). ali je dani graf točkovno tranzitiven. Kot pri prejšnjem primeru opazimo, da obstajajo ciklične rotacije, ki nam preslikajo poljubno vozlišče zunanjega cikla v katerokoli drugo vozlišče zunanjega cikla. Podobno velja za notranja vozlišča. Nas zanima, kako preslikati zunanja vozlišča v notranja in obratno. Lahko poizkusimo ponoviti postopek premikov iz prejšnjega primera. Dobimo situacijo s slike 5.5. Upodobitev grafa, ki smo jo dobili s premiki vozlišč, ni enaka začetni. To seveda še ne pomeni, da iskani avtomorfizem ne obstaja, je pa znak, da ga morda ni. Zdaj si lahko pomagamo z izrisom razdaljne particije grafa, ki je zelo uporabna pri iskanju strukturnih lastnosti. Recimo, da začnemo z izrisom razdaljne particije tako, da izberemo vozlišče z zunanjega cikla. Dobimo razdaljno particijo s slike 5.6.

63 49 Slika 5.5: Premiki vozlišč grafa GP G(7, 2). Slika 5.6: Izris razdaljne particije grafa GP G(7, 2). Zdaj naredimo še razdaljno particijo za neko notranje vozlišče (lahko kar v novem oknu aplikacije za boljšo primerjavo). Primerjava nam lepo prikaže težavo v tem konkretnem primeru. Vozlišče 4 na zunanjem ciklu leži na natanko treh ciklih dolžine 5, kar razberemo iz dejstva, da imamo med vsemi vozlišči na raz-

64 50 POGLAVJE 5. PRIMERI UPORABE APLIKACIJE Slika 5.7: Primerjava razdaljnih particij grafa GP G(7, 2). dalji 2 od vozlišča 4 natanko tri povezave. Notranje vozlišče 10 pa leži na dveh ciklih dolžine 5. To nam pove, da ni avtomorfizma, ki bi vozlišče 4 preslikal v vozlišče 10 ali obratno. Graf GP G(7, 2) torej ni točkovno 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 e 1 in e 2 obstaja avtomorfizem grafa, ki preslika e 1 v e 2 ). To je najmanjši neusmerjen graf, ki je regularen in povezavno tranzitiven, ne pa točkovno tranzitiven (ta in druga dejstva o tem grafu lahko bralec preveri v [13]). Pa poglejmo, zakaj Folkmanov graf ni točkovno tranzitiven. Graf reda 20 bi ročno konstruirali kar nekaj časa. Prav tako si v tem primeru ne moremo pomagati s katerimi od družin grafov, ki so vgrajene v aplikacijo. Imamo pa dani graf že shranjen v tekstovni datoteki, zato graf naložimo prek gumba Naloži/shrani graf - Naloži graf, kot prikazujeta sliki 5.8 in 5.9. Na prvi pogled se zdi graf dokaj simetričen, težko pa je ugotoviti, ali je točkovno

65 51 Slika 5.8: Nalaganje grafa iz datoteke. Slika 5.9: Folkmanov graf.

66 52 POGLAVJE 5. PRIMERI UPORABE APLIKACIJE tranzitiven ali ne. Lahko bi poskušali podobno kot pri prejšnjih primerih. Lahko pa opazimo nekaj drugega. Vozlišče 11 ima iste štiri sosede kot vozlišče 10. Po drugi strani pa za vozlišče 5 to ne velja, saj vozlišče, ki bi imelo iste sosede kot 5, ne obstaja. To nam pove, da ni avtomorfizma, ki bi vozlišče 11 preslikal v vozlišče 5. Folkmanov graf torej ni točkovno tranzitiven, v kar se lahko prepričamo z izrisom razdaljnih particij glede na vozlišči 11 in 5. Razlika je več kot očitna. Tako ima vozlišče 11 vsa preostala vozlišča na razdalji največ 3, medtem ko sta vozlišči 5 in 1 na razdalji 4. Slika 5.10: Primerjava razdaljnih particij Folkmanovega grafa. Izomorfnost grafov Dozdajšnji primeri so se navezovali izključno na pojem točkovne 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 različen premer. Z aplikacijo bi si lahko pomagali na naslednji način. Grafa konstruiramo ločeno, vsakega v svoji kopiji aplikacije, kot prikazuje slika Zdaj lahko uporabimo orodje za preverjanje dvodelnosti. V meniju Ostala orodja izberemo opcijo Dvodelnost. To naredimo

67 53 Slika 5.11: Konstrukcija obeh grafov. v obeh kopijah aplikacije, kot prikazuje slika Levi graf je dvodelen, graf Slika 5.12: Preverjanje dvodelnosti. na desni pa ne, saj vsebuje lihi cikel. Grafa torej nista izomorfna. Grötzschev graf Grötzschev graf je najmanjši graf s kromatičnim številom 4, ki ne vsebuje trikotnika. Poimenovan je po nemškem matematiku Herbertu Grötzschu [14]. Prepričajmo se, da je kromatično število tega grafa res 4. Kot Folkmanov graf

68 54 POGLAVJE 5. PRIMERI UPORABE APLIKACIJE lahko tudi Grötzschev graf naložimo iz tekstovne datoteke, saj je shranjena na isti lokaciji. Po Brooksovem izreku je kromatično število grafa manjše ali Slika 5.13: Grötzschev graf. enako 5. Grafa očitno ne moremo dobro pobarvati z eno barvo, morda pa bi ga lahko pobarvali z dvema barvama (če bi bil dvodelen). Z uporabo orodja za preverjanje dvodelnosti hitro ugotovimo, da Grötzschev graf ni dvodelen, torej ga z dvema barvama ne moremo dobro pobarvati. Brez večjih težav ga lahko dobro pobarvamo s štirimi barvami (eno od možnosti prikazuje slika 5.14). Ostane le še vprašanje, ali lahko Grötzschev graf dobro pobarvamo že s tremi barvami. Predpostavimo, da je to mogoče, in poizkusimo najti ustrezno dobro barvanje. Barvanja se lotimo, kot prikazuje slika Za zunanji cikel dolžine 5 (na vozliščih 1,2,3,4,5) potrebujemo že vse tri barve. Zaradi rotacijske in zrcalne simetričnosti našega grafa vrstni red barvanja ni pomemben. V vsakem primeru se dve barvi pojavita po dvakrat in ena barva enkrat. Brez