Alex Online Today

some experience to be shared

By

Visualisierte Simulation mit JavaScript und Canvas Element

Simulationen lässt man für gewöhnlich auf großen Maschinen laufen, um in angemessener Zeit zu Ergebnissen zu kommen. Wenn jedoch die Visualisierung im Vordergrund steht – frage ich mich – warum nicht auch mal mit JavaScript im Browser durchführen.

Folgende Aufgabe war gestellt: (Quelle: Universität Karlsruhe/KIT Vorlesung Grundzüge der Informationswirtschaft 2011, Prof. Dr. Christof Weinhardt, Timm Teubner)

Auf einem Schulhof mit 400 Schülern breiten sich drei unterschiedliche Gerüchte über den Verbleib eines Lehrers aus.

(1) Der Lehrer ist krank und deshalb nicht da.
(2) Der Lehrer ist mit einer Schülerin nach Argentinien durchgebrannt. (3) Der Lehrer ist ein gesuchter Serienmörder und jetzt im Gefängnis.

Bilden Sie den Schulhof als Raster von 20  20 Feldern ab, wobei sich auf jedem Feld genau ein Schüler befindet. Jeder Schüler kann mit den Mitschülern auf den umliegenden acht Positionen reden, (so wie hier dargestellt) und tut dies auch! Jeder Schüler glaubt zu jedem Zeitpunkt an genau eine Version des Gerüchts. Zunächst sei die Verteilung zufällig und gleichverteilt.

Für die Verbreitung der Gerüchte von einem Zeitpunkt auf den nächsten gelten folgende Regeln:

  1. (i)  Ein Schüler glaubt zum Zeitpunkt t+1 an ein Gerücht, wenn zum Zeitpunkt t vier oder mehr seiner Nachbarn an dieses Gerücht geglaubt haben.
  2. (ii)  Gerücht zwei stellt eine Ausnahme dar: Hier genügen drei Nachbarn – das Gerücht wird als plausibler erachtet, weil die betreffende Schülerin ebenfalls abwesend ist.
  3. (iii)  Sollten zwei der Bedingungen erfüllt sein, dominiert (natürlich) das absurdere Gerücht (3 > 2 > 1).

Die visualisierte Lösung findet Ihr unter:

http://www.alexander-wolf.net/simulation.htm

 

Eingesetzt wurde ein Canvas Element zur Darstellung des “Schulhofes”. Dieser wird nach jeder durchgeführtem Simulationsfolge neu gezeichnet. Die größten Zeiteinbußen in der Simulation stellt auch dieser Zeichenschritt dar. Wenn man die Randhöhe des Schulhofes erhöht (z.B. auf 1000) lässt sich mit diesem Skript eine sehr hohe Auslastung im Browser erzeugen. Dann funktioniert auch die Darstellung nur noch bedingt.

By

JavaScript Schnipsel: eval()

Mit eval() kann man in JavaScript Code nachträglich laden und ausführen. Aus diesem Grund ist es auch besonders wichtig, vorsichtig damit umzugehen! Eval ist besonders praktisch, um z.B. mathematische Funktionen dynamisch zusammen zu setzen.

Folgend ein kleines Beispiel:

function bar(a,b){
	var str = 'a*x+b';
	return (function(x){ 
		return eval(str);
	});
}
 
var foo = bar(4,5);
document.write(foo(1));

Diese Dynamisch erstellten Funktionen sind z.B. sehr hilfreich beim Zeichnen von Graphen.

By

jQuery Plugins

Ich beschäftige mich momentan mit der JavaScript Bibliothek jQuery. jQuery bietet viele Funktionen, die das Gestalten dynamischer Webseiten vereinfachen. Z.B. nutzt auch WordPress die jQuery Bibliothek.

Das Projekt mit dem ich mich beschäftige, ist sehr textorientiert, deshalb sollen alle Dialogfenster auf der Seite stets ausgeblendet sein, wenn man sie gerade nicht benötigt. Somit wird der Darstellungsbereich für den Text größer. Auf folgendem Screenshot wird das verdeutlicht:

Auf der linken Seite verdeckt ein Dialogfenster die Sicht auf den Text. Sobald man nun den Mauszeiger vom Dialogfenster nimmt, wird das Dokument wieder voll sichtbar. Klickt man auf einen Teil im Dokument oder auf eine Funktion, die das Dialogfenster benötigt, wird es wieder eingeblendet.

Dieses Verhalten könnte man nun mühsam für jedes Bedienelement, auf das man die Funktionalität anwenden möchten, ausprogrammieren. Eine elegantere Weise ist es, eine Plugin für jQuery zu schreiben.

Der Name meines Plugins lautet “hideous”. Wenn es geladen ist, reicht ein einfacher Aufruf von

$('#WindowID').hideous();

um einem Fenster mit einer ID bzw.

$('#WindowClass').hideous();

um einer Fensterklasse dieses “Verhalten” anzugewöhnen.

Das exakte einblende/ausblende Verhalten lässt sich desweiteren mit einigen Attributen beeinflussen:
Um z.B. das Plugin, wie in der Demo, mit Attributen auf die Klasse “.example” anzuwenden, verwendet man folgenden Code:

  $(".example").hideous(
  new Object({
    HIDETIME:300,
    TRANSPARENCY_FACTOR:0.15,
    VISIBILITY_FACTOR:0.75,
    FADEOUTTIME: 50,
    FADEINTIME: 50
  }));

HIDETIME legt die Zeit fest, wie lange das Element eingeblendet bleibt, wenn der Mauszeiger das Fenster verlassen hat.
TRANSPARENCY_FACTOR und VISIBILITY_FACTOR legen die exakte Transparenz fest. Bei 0.15 ist das Element nur noch zu 15% zu sehen bzw. zu 85% transparent!
FADEOUTTIME und FADEINTIME legen fest, wie lange der Effekt des Ein-/Ausblendens dauert.

In der folgenden Demo wird das Plugin auf eine Liste angewandt. Fährt man mit dem Mauszeiger über die Einträge, werden Sie für einen kurzen Moment hervorgehoben/eingeblendet.

Demo und Code

Achso, wenn ihr das verwenden möchtet, haltet euch bitte an die Lizenz oder meldet euch kurz bei mir:
Creative Commons Licence
Hideous jQuery Plugin by Alexander Wolf is licensed under a Creative Commons Attribution 3.0 Unported License.