Graphen

Wenn ich aufzeichne, wen ich alles kenne, male ich einen sternförmigen gerichteten Graphen. Wenn ich dazuzeichne, wer davon wen anderes kennt, entsteht ein netzförmiger Graph. Wenn ich dazuzeichne, wie intensiv unsere Bekanntschaften sind, male ich einen gewichteten Graphen. Routenplanung wird als Pfad innerhalb gewichter Graphen dargestellt. 3D-Modelle lassen sich als Graphen abspeichern. Ablaufdiagramme sind beschriftete Graphen, elektronische Schaltungen lassen sich als Graphen planen und meine Chancen, mit sieben Würfeln exakt 23 Augen zu werfen, sind mit einen Graphen darstellbar. Mit Graphen können die Anziehungskräfte zwischen Himmelskörpern veranschaulicht werden und Google erkennt anhand von Graphen, wie wahrscheinlich ich morgen mittag eine Teekanne kaufen möchte und ob sie eher rot oder schwarz sein wird.

Gestern war die Welt Zahl, heute ist sie Graph.

Definition Graph

Implementierung mit Javascript

Eigentlich wollte ich nur mal eine kleine Hilfs-Graphenklasse schreiben. Hab ich auch, und ein Testprogramm dazu. Damit das ganze nicht so langweilig aussieht, hat mein Test fix eine Visualisierung über eine HTML5-Canvas bekommen.

Graph.class.js (Github).

Und hey, minifiziert die ist Klasse sogar nur 532 Bytes groß:
var Graph=(function(){var a=function(c,e){e=e||{};var f={};var g=function(i,h,j){if(j){if(!(i in f)){f[i]={}}f[i][h]=j}else{if(i in f&&h in f[i]){delete (f[i][h]);if(Object.keys(f[i]).length==0){delete (f[i])}}}};var d=function(i,h,j){if(!(i in f)||!(h in f[i])||!f[i][h]){if(j){return d(h,i,false)}else{return false}}else{return f[i][h]}};var b=this;b.points=function(){return c};b.connect=function(i,h,j){g(i,h,j||true)};b.unconnect=function(i,h){g(i,h,false)};b.connected=function(i,h){return d(i,h,e.undirected)}};return a})();

Test: Ich – ich – ich betäube mich

Der Test erzeugt einen zufälligen Graphen und verbindet jene Knoten, die sich mindestens 200 Einheiten annähern. Dann werden den Knoten zufällige lineare Pfade zugeordnet, auf denen sie animiert werden. Mehr ist es nicht. Als der Test das erste mal lief, habe ich bestimmt 30 Minuten einfach nur darauf gestarrt: hypnotisch-berauschend!

Hier mal ein paar Screenshots.

Schließlich noch schnell Dat.gui rangehängt für die Interaktionen, Vollbildmodus eingebaut und fertig war die Schose. Zwei Abende locker und entspannt rumgecoded.

Die Live-Demo gibt's hier.

Und den Code gibt es hier.

(~ ̄▽ ̄)~