GMU:Semesteraufgabe/Ephraim Schott - Revision history

EphTron at 14:21, 17 June 2015

2015-06-17T14:21:18Z

← Older revision		Revision as of 14:21, 17 June 2015
Line 165:		Line 165:
	Ich verzichtete absichtlich auf Blätter, damit die Pflanze die Webseite nicht zu schnell überwuchern konnte.		Ich verzichtete absichtlich auf Blätter, damit die Pflanze die Webseite nicht zu schnell überwuchern konnte.
	Ich ersetzte die Blätter durch unterschiedliche kleine Zweige, die in unterschiedliche Richtung aus der Pflanze austreten können. Aktuell besitzt die Pflanze vier unterschiedliche Zweige, die in Abhängigkeit vom Winkel der Hauptranke anfangen zu sprießen.		Ich ersetzte die Blätter durch unterschiedliche kleine Zweige, die in unterschiedliche Richtung aus der Pflanze austreten können. Aktuell besitzt die Pflanze vier unterschiedliche Zweige, die in Abhängigkeit vom Winkel der Hauptranke anfangen zu sprießen.

			== Probleme ==

			Bei der Verwendung des Plugins entstehen auf manchen Webseiten immer wieder unvorhergesehene Probleme, die ich bisher noch nicht lösen konnte.
			Zum einen gibt es einige Webseiten, die ihre Seitengröße beim Scrollen verändern. Auf diesen Webseiten können die Mauspositionen manchmal nicht richtig übermittelt werden oder die Ranke kann nicht in alle Bereiche der Webseite vordringen.
			Auf anderen Webseiten, wie beispielsweise auf Facebook, wird die Pflanze nach dem Anklicken eines Profils immer vollständig gelöscht, so dass sie wieder von vorne anfängt zu wachsen. Auf Twitter und Youtube ist dieser Fehler nicht zu beobachten.
			Manche Webseitenelemente, insbesondere Iframes, lassen sich oft nicht überwachsen.


Line 177:		Line 184:
	:* Besondere Effekte bei Mausklicks		:* Besondere Effekte bei Mausklicks
	:* Unterschiedlich Rankenlänge		:* Unterschiedlich Rankenlänge
			:* Behalten der Pflanzenform, beim Wechseln eines Tabs

EphTron: /* Wachstum */

2015-06-17T14:00:56Z

Wachstum

← Older revision		Revision as of 14:00, 17 June 2015
Line 143:		Line 143:
	== Wachstum ==		== Wachstum ==

	[[Image:Ranke_nur_zur_Maus.png\|300px\|~~left~~\|thumb\| Abbildung 6. Ranke mit Wachstumsprinzip 1.]]		[[Image:Ranke_nur_zur_Maus.png\|300px\|right\|thumb\| Abbildung 6. Ranke mit Wachstumsprinzip 1.]]

	Eine grundlegende Anforderung meines Konzepts war es, dass das Wachstum der Pflanze beeinflusst werden konnte. In unterschiedlichen Prototypen testete ich die folgenden Ansätze:		Eine grundlegende Anforderung meines Konzepts war es, dass das Wachstum der Pflanze beeinflusst werden konnte. In unterschiedlichen Prototypen testete ich die folgenden Ansätze:
Line 157:		Line 157:
	Die zwei anderen Wachstumsprinzipien konnten jedoch nicht alleine verwendet werden, da es häufig zu Situationen kommt, in denen keine berührten Punkte in der Nähe der Pflanze liegen.		Die zwei anderen Wachstumsprinzipien konnten jedoch nicht alleine verwendet werden, da es häufig zu Situationen kommt, in denen keine berührten Punkte in der Nähe der Pflanze liegen.
	Aus diesem Grund wurden die Prinzipien für das Wachstumsprinzip der Ranke kombiniert. Die Ranke bevorzugt als erstes Maushotspots, die sich in räumlicher Nähe zur Pflanze befinden (Prinzip 3). Sind keine Hotspots in der Nähe, so wächst sie zu einem Punkt auf der Webseite, der über 10 mal von der Maus berührt wurde (Prinzip 2). Gibt es keinen Punkt der häufiger als 10 Berührt wurde, wächst die Pflanze in Richtung der aktuellen Mausposition (Prinzip 1). Abbildung 7 zeigt, dass die Kombination der Wachstumsprinzipien zu einer natürlicheren Form der Ranke führt. Damit die Pflanze nicht in gerade Strecken zu den Hotspots wächst, wird auf jeden Richtungswinkel ein kleiner Zufallswert gerechnet.		Aus diesem Grund wurden die Prinzipien für das Wachstumsprinzip der Ranke kombiniert. Die Ranke bevorzugt als erstes Maushotspots, die sich in räumlicher Nähe zur Pflanze befinden (Prinzip 3). Sind keine Hotspots in der Nähe, so wächst sie zu einem Punkt auf der Webseite, der über 10 mal von der Maus berührt wurde (Prinzip 2). Gibt es keinen Punkt der häufiger als 10 Berührt wurde, wächst die Pflanze in Richtung der aktuellen Mausposition (Prinzip 1). Abbildung 7 zeigt, dass die Kombination der Wachstumsprinzipien zu einer natürlicheren Form der Ranke führt. Damit die Pflanze nicht in gerade Strecken zu den Hotspots wächst, wird auf jeden Richtungswinkel ein kleiner Zufallswert gerechnet.


	== Pflanzenmodell ==		== Pflanzenmodell ==

EphTron at 14:00, 17 June 2015

2015-06-17T14:00:36Z

← Older revision		Revision as of 14:00, 17 June 2015
Line 143:		Line 143:
	== Wachstum ==		== Wachstum ==

	[[Image:Ranke_nur_zur_Maus.png\|~~500px~~\|thumb\| Abbildung 6. Ranke mit Wachstumsprinzip 1.]]		[[Image:Ranke_nur_zur_Maus.png\|300px\|left\|thumb\| Abbildung 6. Ranke mit Wachstumsprinzip 1.]]

	Eine grundlegende Anforderung meines Konzepts war es, dass das Wachstum der Pflanze beeinflusst werden konnte. In unterschiedlichen Prototypen testete ich die folgenden Ansätze:		Eine grundlegende Anforderung meines Konzepts war es, dass das Wachstum der Pflanze beeinflusst werden konnte. In unterschiedlichen Prototypen testete ich die folgenden Ansätze:

EphTron at 13:59, 17 June 2015

2015-06-17T13:59:39Z

← Older revision		Revision as of 13:59, 17 June 2015
Line 142:		Line 142:

	== Wachstum ==		== Wachstum ==

			[[Image:Ranke_nur_zur_Maus.png\|500px\|thumb\| Abbildung 6. Ranke mit Wachstumsprinzip 1.]]

	Eine grundlegende Anforderung meines Konzepts war es, dass das Wachstum der Pflanze beeinflusst werden konnte. In unterschiedlichen Prototypen testete ich die folgenden Ansätze:		Eine grundlegende Anforderung meines Konzepts war es, dass das Wachstum der Pflanze beeinflusst werden konnte. In unterschiedlichen Prototypen testete ich die folgenden Ansätze:
Line 148:		Line 150:
	:# Wachstum zum räumlich nächsten, meist berührten Punkt.		:# Wachstum zum räumlich nächsten, meist berührten Punkt.

	~~[[Image:Ranke_nur_zur_Maus.png\|500px\|thumb\| Abbildung 6. Ranke mit Wachstumsprinzip 1.]]~~

	[[Image:GmuRanke.png\|300px\|thumb\|right\| Abbildung 7. Ranke mit kombinierten Wachstumsprinzipien.]]		[[Image:GmuRanke.png\|300px\|thumb\|right\| Abbildung 7. Ranke mit kombinierten Wachstumsprinzipien.]]

EphTron: /* Plants vs Humans */

2015-06-17T13:58:41Z

Plants vs Humans

← Older revision		Revision as of 13:58, 17 June 2015
Line 1:		Line 1:
			[[Image:Another_ranke.png\|300px\|right\| Eine Ranke des Plugins.]]

	= '''Plants vs Humans''' =		= '''Plants vs Humans''' =

	~~[[Image:Another_ranke.png\|300px\|right\| Eine Ranke des Plugins.]]~~		Im Rahmen dieses Semesterprojekts wurde ein Chrome-Plugin entwickelt, das eine künstliche Ranke über alle Tabs des Chrome-Webbrowsers wachsen lässt. Wer das Plugin ausprobieren möchte, kann es sich gerne hier herunterladen: [https://github.com/EphTron/gmuProject https://github.com/EphTron/gmuProject]

	Im Rahmen dieses Semesterprojekts wurde ein Chrome-Plugin entwickelt, das eine künstliche Ranke über alle Tabs des Chrome-Webbrowsers wachsen lässt. Wer das Plugin ausprobieren möchte, kann es sich gerne hier herunterladen:[https://github.com/EphTron/gmuProject https://github.com/EphTron/gmuProject]

	Ansonsten kann die Funktionsweise des Plugins auch hier geteste werden: [https://efraps.kochab.uberspace.de/plants-vs-humans/ Plants vs Humans]		Ansonsten kann die Funktionsweise des Plugins auch hier geteste werden: [https://efraps.kochab.uberspace.de/plants-vs-humans/ Plants vs Humans]

EphTron at 13:58, 17 June 2015

2015-06-17T13:58:06Z

← Older revision		Revision as of 13:58, 17 June 2015
Line 1:		Line 1:
			= '''Plants vs Humans''' =

	[[Image:Another_ranke.png\|300px\|right\| Eine Ranke des Plugins.]]		[[Image:Another_ranke.png\|300px\|right\| Eine Ranke des Plugins.]]

	~~= '''Plants vs Humans''' =~~		Im Rahmen dieses Semesterprojekts wurde ein Chrome-Plugin entwickelt, das eine künstliche Ranke über alle Tabs des Chrome-Webbrowsers wachsen lässt. Wer das Plugin ausprobieren möchte, kann es sich gerne hier herunterladen:[https://github.com/EphTron/gmuProject https://github.com/EphTron/gmuProject]

	Im Rahmen dieses Semesterprojekts wurde ein Chrome-Plugin entwickelt, das eine künstliche Ranke über alle Tabs des Chrome-Webbrowsers wachsen lässt. Wer das Plugin ausprobieren möchte, kann es sich gerne hier herunterladen: [https://github.com/EphTron/gmuProject https://github.com/EphTron/gmuProject]

	Ansonsten kann die Funktionsweise des Plugins auch hier geteste werden: [https://efraps.kochab.uberspace.de/plants-vs-humans/ Plants vs Humans]		Ansonsten kann die Funktionsweise des Plugins auch hier geteste werden: [https://efraps.kochab.uberspace.de/plants-vs-humans/ Plants vs Humans]
Line 80:		Line 80:

	=== Ranke statt Baum ===		=== Ranke statt Baum ===

	~~[[Image:GmuRanke.png\|300px\|thumb\|right]]~~

	Wie in Absatz 3.1 beschrieben wurde, erwieß es sich als sehr schwierig die Wachstumsrichtung des Baumes mit einer Maus sinnvoll zu beeinflussen. Die Maus wird immer eine Art Pfad bilden, wenn man sie über den Bildschirm bewegt. Zusätzlich vermehren sich die Äste des Baumes so schnell, dass die Webseite sehr schnell zuwächst und der Browser aufgrund der vielen Animationen oft in die Kniee gezwungen wird.		Wie in Absatz 3.1 beschrieben wurde, erwieß es sich als sehr schwierig die Wachstumsrichtung des Baumes mit einer Maus sinnvoll zu beeinflussen. Die Maus wird immer eine Art Pfad bilden, wenn man sie über den Bildschirm bewegt. Zusätzlich vermehren sich die Äste des Baumes so schnell, dass die Webseite sehr schnell zuwächst und der Browser aufgrund der vielen Animationen oft in die Kniee gezwungen wird.
Line 114:		Line 112:
	Ich beschloss die Pflanze als Gegner aufzufassen und sie als Störfaktor einzubauen. Dieser Ansatz ließ sich besonders gut mit dem zweiten Interaktionsansatz aus 3.1.1 kombinieren.		Ich beschloss die Pflanze als Gegner aufzufassen und sie als Störfaktor einzubauen. Dieser Ansatz ließ sich besonders gut mit dem zweiten Interaktionsansatz aus 3.1.1 kombinieren.

	Ich wollte die Pflanze in eine Umgebung setzen in die sie nicht hineingehört, damit sie den Menschen dort besonders plagen kann. Die Pflanze sollte in der Lage sein Elemente der Webseite auf der sie wächst zu verdecken, so dass die Webseite immer schwerer zu bedienen wird. Diese Idee ließ sich sehr gut mit meiner Grundidee verknüpfen, denn der Störfaktor der Pflanze ist am größten, wenn die Pflanze immer in die Richtung der Elemente wächst, die der Nutzer am häufigsten gebraucht.		Ich wollte die Pflanze in eine Umgebung setzen, in die sie nicht hineingehört, damit sie den Menschen dort besonders plagen kann. Die Pflanze sollte in der Lage sein Elemente der Webseite, auf der sie wächst, zu verdecken, so dass die Webseite immer schwerer zu bedienen wird. Diese Idee ließ sich sehr gut mit meiner Grundidee verknüpfen, denn der Störfaktor der Pflanze ist am größten, wenn die Pflanze immer in die Richtung der Elemente wächst, die der Nutzer am häufigsten gebraucht.


	=== Rekursive Interaktivität ===		=== Rekursive Interaktivität ===

	Mit dem Ansatz die Pflanze als Störfaktor aufzufassen, kam mir ein weitere Idee mit der man die Interaktion zwischen Pflanze und Mensch verstärken konnte. Ich wollte eine Art Rückkopplung in mein Konzept einbauen. Der Webseitennutzer sollte nicht nur zusehen können, wie die Pflanze ~~immer mehr~~ die Webseite übernimmt; er sollte auch eingreifen können.		Mit dem Ansatz die Pflanze als Störfaktor aufzufassen, kam mir ein weitere Idee, mit der man die Interaktion zwischen Pflanze und Mensch verstärken konnte. Ich wollte eine Art Rückkopplung in mein Konzept einbauen. Der Webseitennutzer sollte nicht nur zusehen können, wie die Pflanze die Webseite übernimmt; er sollte auch eingreifen können.
	Deshalb verlieh ich der Pflanze die Eigentschaft ~~Transparent~~ zu werden, wenn man sie anklickte. Damit hatte der Nutzer noch eine Chance die Webseite weiter zu benutzen, gleichzeitig würde die Mausbewegung die Pflanze wieder an die genau gleiche Stelle lenken wie zuvor. Pflanze und Nutzer würden damit in einen nie endenden Kreislauf eintauchen, in dem sie sich immer wieder gegenseitig beeinflussen.		Deshalb verlieh ich der Pflanze die Eigentschaft transparent zu werden, wenn man sie anklickte. Damit hatte der Nutzer noch eine Chance die Webseite weiter zu benutzen, gleichzeitig würde die Mausbewegung die Pflanze wieder an die genau gleiche Stelle lenken wie zuvor. Pflanze und Nutzer würden damit in einen nie endenden Kreislauf eintauchen, in dem sie sich immer wieder gegenseitig beeinflussen.


	== Finales Konzept ==		== Finales Konzept ==

	[[Image:Twitter_tendril.png\|500px\|thumb\| Zugewachsene Twitter Webseite]]		[[Image:Twitter_tendril.png\|500px\|thumb\| Abbildung 5. Zugewachsene Twitter Webseite.]]


	Nach der Überarbeitung des Konzepts gab es viele neue Ansätze, doch die ~~große~~ Frage ~~war~~, wie der Inhalt für eine solche Webseite aussehen sollte. Am besten würde sich eine Webseite ~~eigenen~~ auf der man sich länger aufhält, denn erst dann kann sich die Pflanze richtig entfalten - Webseiten wie Facebook, Twitter und Youtube.		Nach der Überarbeitung des Konzepts gab es viele neue Ansätze, doch es blieb die Frage, wie der Inhalt für eine solche Webseite aussehen sollte. Am besten würde sich eine Webseite eignen, auf der man sich länger aufhält, denn erst dann kann sich die Pflanze richtig entfalten - Webseiten wie Facebook, Twitter und Youtube.
	Mir wurde klar, dass die Pflanze nicht an eine einzelne Webseite gebunden werden sollte, sondern für alle Webseiten zur Verfügung gestellt werden musste.		Mir wurde klar, dass die Pflanze nicht an eine einzelne Webseite gebunden werden sollte, sondern für alle Webseiten zur Verfügung gestellt werden musste.

	Ich entschied mich ein Chrome-Plugin zu entwickeln, welches eine wuchernde Ranke erzeugt. Die Ranke sollte immer in die Bereiche der Webseite wachsen, ~~indenen~~ sich die Maus am häufigsten befand und dabei alle Elemente überdecken. Die Pflanze ~~soll~~ dabei gegen den Menschen agieren und ihm die Lust am Internet verderben, denn sie wächst unermüdlich weiter und weiter.		Ich entschied mich ein Chrome-Plugin zu entwickeln, welches eine wuchernde Ranke erzeugt. Die Ranke sollte immer in die Bereiche der Webseite wachsen, in denen sich die Maus am häufigsten befand und dabei alle Elemente überdecken. Die Pflanze sollte dabei gegen den Menschen agieren und ihm die Lust am Internet verderben, denn sie wächst unermüdlich weiter und weiter.
	Insbesondere auf Webseiten wieder Twitter und Facebook auf denen viele Menschen alltäglich ihre Zeit ~~verschwenden kann die Pflanze vielleicht dem ein oder anderen helfen~~.		Insbesondere auf Webseiten wieder Twitter und Facebook, auf denen viele Menschen alltäglich ihre Zeit verbringen.

	[https://efraps.kochab.uberspace.de/plants-vs-humans/ Webseite mit wuchernder Ranke.]		[https://efraps.kochab.uberspace.de/plants-vs-humans/ Webseite mit wuchernder Ranke.]
Line 139:		Line 137:
	= Umsetzung =		= Umsetzung =

	Zur Umsetzung meines Konzepts verwendete ich HTML, CSS und JavaScript. Insbesondere ~~verwendete~~ ich die JavaScript Bibliothek d3.js von Mike Bostock für die Visulisierungen der Pflanze und des Gitters.		Zur Umsetzung meines Konzepts verwendete ich HTML, CSS und JavaScript. Insbesondere nutzte ich die JavaScript Bibliothek d3.js von Mike Bostock für die Visulisierungen der Pflanze und des Gitters.
	[https://github.com/mbostock/d3/wiki/Gallery Siehe auch github.com/mbostock/d3/wiki/Gallery]		[https://github.com/mbostock/d3/wiki/Gallery Siehe auch github.com/mbostock/d3/wiki/Gallery]


			== Wachstum ==

			Eine grundlegende Anforderung meines Konzepts war es, dass das Wachstum der Pflanze beeinflusst werden konnte. In unterschiedlichen Prototypen testete ich die folgenden Ansätze:
			:# Wachstum zur aktuellen Mausposition.
			:# Wachstum zum meist berührten Punkt der Webseite.
			:# Wachstum zum räumlich nächsten, meist berührten Punkt.

			[[Image:Ranke_nur_zur_Maus.png\|500px\|thumb\| Abbildung 6. Ranke mit Wachstumsprinzip 1.]]

			[[Image:GmuRanke.png\|300px\|thumb\|right\| Abbildung 7. Ranke mit kombinierten Wachstumsprinzipien.]]

			Es zeigte sich, dass das erste Wachstumsprinzip sehr einseitig und vorhersehbar war. Wenn die Pflanze immer in Richtung der Maus wächst, bilden sich meistens Ballungen, die durch lange gerade Strecken verbunden sind (siehe Abb. 6).

			Die zwei anderen Wachstumsprinzipien konnten jedoch nicht alleine verwendet werden, da es häufig zu Situationen kommt, in denen keine berührten Punkte in der Nähe der Pflanze liegen.
			Aus diesem Grund wurden die Prinzipien für das Wachstumsprinzip der Ranke kombiniert. Die Ranke bevorzugt als erstes Maushotspots, die sich in räumlicher Nähe zur Pflanze befinden (Prinzip 3). Sind keine Hotspots in der Nähe, so wächst sie zu einem Punkt auf der Webseite, der über 10 mal von der Maus berührt wurde (Prinzip 2). Gibt es keinen Punkt der häufiger als 10 Berührt wurde, wächst die Pflanze in Richtung der aktuellen Mausposition (Prinzip 1). Abbildung 7 zeigt, dass die Kombination der Wachstumsprinzipien zu einer natürlicheren Form der Ranke führt. Damit die Pflanze nicht in gerade Strecken zu den Hotspots wächst, wird auf jeden Richtungswinkel ein kleiner Zufallswert gerechnet.


			== Pflanzenmodell ==

			Um der Ranke eine organische Form zu verleihen, orientierte ich mich an dem Wachstumsmodell einer Rebe. Ich abstrahierte ein vereinfachtes Modell aus der [https://www.uni-hohenheim.de/lehre370/weinbau/biologie/bio1.htm Beschreibung von Rolf Blaich].
			Zusätzlich programmierte ich einen Alterungsprozess, bei dem die Pflanzenabschnitte langsam ihre Farbe und Dicke ändern.

			Ich verzichtete absichtlich auf Blätter, damit die Pflanze die Webseite nicht zu schnell überwuchern konnte.
			Ich ersetzte die Blätter durch unterschiedliche kleine Zweige, die in unterschiedliche Richtung aus der Pflanze austreten können. Aktuell besitzt die Pflanze vier unterschiedliche Zweige, die in Abhängigkeit vom Winkel der Hauptranke anfangen zu sprießen.


	= Zukünftige Arbeit =		= Zukünftige Arbeit =

			Während der Entwicklung des Semesterprojekts stellte ich fest, dass dieses Plugin nie ein eindeutiges Ende finde würde. Es gibt unendlich viele Möglichkeiten die Ranke zu gestalten. Meine Programmstruktur unterstützt sowohl abstrakte Punkt als auch organische Rankenmodelle.
			In Zukunft möchte ich besonders das Aussehen der Rankenzweige verbessern und das Wachstum der Hauptranke auf das Wachstum der Zweige anpassen.

	~~Man~~ kann sich ~~zu dieser Arbeit~~ eine große Anzahl an Erweiterungen vorstellen.		Auch Abseite des Aussehens kann man sich noch eine große Anzahl an Erweiterungen vorstellen:
	~~Beispielsweise~~:		:* Variable Rankenfarbe
	Dynamische ~~Geschwindikeit~~		:* Dynamische Wachstumsgeschwindigkeit
	~~Unterscheidung zwischen Klicks und Hover.~~		:* Besondere Effekte bei Mausklicks
			:* Unterschiedlich Rankenlänge
	~~Ranken unterschiedlicher Länge~~

EphTron: /* Plants vs Humans */

2015-06-17T12:29:50Z

Plants vs Humans

← Older revision		Revision as of 12:29, 17 June 2015
Line 3:		Line 3:
	= '''Plants vs Humans''' =		= '''Plants vs Humans''' =

	Im Rahmen dieses Semesterprojekts wurde ein Chrome-Plugin entwickelt, das eine künstliche Ranke über alle Tabs des Chrome-Webbrowsers wachsen lässt. Wer das Plugin ausprobieren möchte, kann es sich gerne hier herunterladen:[https://github.com/EphTron/gmuProject https://github.com/EphTron/gmuProject]		Im Rahmen dieses Semesterprojekts wurde ein Chrome-Plugin entwickelt, das eine künstliche Ranke über alle Tabs des Chrome-Webbrowsers wachsen lässt. Wer das Plugin ausprobieren möchte, kann es sich gerne hier herunterladen: [https://github.com/EphTron/gmuProject https://github.com/EphTron/gmuProject]

	Ansonsten kann die Funktionsweise des Plugins auch hier geteste werden: [https://efraps.kochab.uberspace.de/plants-vs-humans/ Plants vs Humans]		Ansonsten kann die Funktionsweise des Plugins auch hier geteste werden: [https://efraps.kochab.uberspace.de/plants-vs-humans/ Plants vs Humans]

EphTron: /* Plants vs Humans */

2015-06-17T12:29:15Z

Plants vs Humans

← Older revision		Revision as of 12:29, 17 June 2015
Line 1:		Line 1:
			[[Image:Another_ranke.png\|300px\|right\| Eine Ranke des Plugins.]]

	= '''Plants vs Humans''' =		= '''Plants vs Humans''' =

	~~[[Image:Another_ranke.png\|300px\|right\| Eine Ranke des Plugins.]]~~

	Im Rahmen dieses Semesterprojekts wurde ein Chrome-Plugin entwickelt, das eine künstliche Ranke über alle Tabs des Chrome-Webbrowsers wachsen lässt. Wer das Plugin ausprobieren möchte, kann es sich gerne hier herunterladen:[https://github.com/EphTron/gmuProject https://github.com/EphTron/gmuProject]		Im Rahmen dieses Semesterprojekts wurde ein Chrome-Plugin entwickelt, das eine künstliche Ranke über alle Tabs des Chrome-Webbrowsers wachsen lässt. Wer das Plugin ausprobieren möchte, kann es sich gerne hier herunterladen:[https://github.com/EphTron/gmuProject https://github.com/EphTron/gmuProject]

EphTron at 00:06, 17 June 2015

2015-06-17T00:06:57Z

← Older revision		Revision as of 00:06, 17 June 2015
Line 77:		Line 77:

	Die Evaluierung des Prototypen hatte einige Probleme aufgezeigt, die zu großen Teilen auf das Konzept des ersten Entwurfs zurückzuführen waren. Einerseits musste eine Lösung zur sinnvollen Steuerung der künstlichen Pflanze mit der Maus gefunden werden und andererseits musste die Interaktivität mit der Pflanze durch eine motivierendere Idee stärker gefördert werden. Die Konzeptänderungen, die zugunsten dieser Anforderungen vorgenommen wurden, sollen in den folgenden Abschnitten beschrieben werden.		Die Evaluierung des Prototypen hatte einige Probleme aufgezeigt, die zu großen Teilen auf das Konzept des ersten Entwurfs zurückzuführen waren. Einerseits musste eine Lösung zur sinnvollen Steuerung der künstlichen Pflanze mit der Maus gefunden werden und andererseits musste die Interaktivität mit der Pflanze durch eine motivierendere Idee stärker gefördert werden. Die Konzeptänderungen, die zugunsten dieser Anforderungen vorgenommen wurden, sollen in den folgenden Abschnitten beschrieben werden.


			=== Ranke statt Baum ===

			[[Image:GmuRanke.png\|300px\|thumb\|right]]

			Wie in Absatz 3.1 beschrieben wurde, erwieß es sich als sehr schwierig die Wachstumsrichtung des Baumes mit einer Maus sinnvoll zu beeinflussen. Die Maus wird immer eine Art Pfad bilden, wenn man sie über den Bildschirm bewegt. Zusätzlich vermehren sich die Äste des Baumes so schnell, dass die Webseite sehr schnell zuwächst und der Browser aufgrund der vielen Animationen oft in die Kniee gezwungen wird.
			Ein weitere Nachteil des Baumes ist, dass er sinnvollerweise nur von unten ins Bild kommen kann und seine Äste nicht Kreise wachsen können.

			Ich wollte meine Pflanze jedoch nicht immer von der gleichen Position aus loswachsen lassen, weshalb ich den Baum durch eine Ranke ersetzte.
			Die Ranke hatte einerseits den Vorteile, dass sie an jedem Rand der Webseite starten kann und dass sie sich nicht so oft aufteilt, wie die Äste des Baumes.


Line 90:		Line 101:

	Da die Webseite des ersten Prototyps nicht direkt zur Interaktion einlud, war davon auszugehen, dass nur zufällige oder keine Interaktion mit der Maus stattfand. In meinem neuen Konzept sollte die Webseite zur gezielten Interaktion einladen.		Da die Webseite des ersten Prototyps nicht direkt zur Interaktion einlud, war davon auszugehen, dass nur zufällige oder keine Interaktion mit der Maus stattfand. In meinem neuen Konzept sollte die Webseite zur gezielten Interaktion einladen.
	Es gab zwei ~~Möglichkeiten~~:		Es gab zwei mögliche Interaktionsansätze:
	:# Eine Webseite, auf der das Pflanzenwachstum im Mittelpunkt steht.		:# Eine Webseite, auf der das Pflanzenwachstum im Mittelpunkt steht.
	:# Eine Webseite, auf der der Webseiteninhalt im Mittelpunkt steht.		:# Eine Webseite, auf der der Webseiteninhalt im Mittelpunkt steht.

	Bei der Entscheidung für ~~eine~~ der beiden ~~Möglichkeiten~~ half ~~die genaue Beschreibung des Projekttitels~~ "Plants vs Humans".		Bei der Entscheidung für einen der beiden Interaktionsansätze half mir der Projekttitel "Plants vs Humans".

			=== Versus ===

	~~=== Versus ===~~		'''Wie störend wäre es, wenn die Pflanze den ganzen Computerbildschirm zuwuchern könnte?!'''

	Um dem Titel der Semesterarbeit gerecht zu werden, reichte es nicht aus, die Pflanze im Hintergrund der Webseite wachsen zu lassen.		Um dem Titel der Semesterarbeit gerecht zu werden, reichte es nicht aus, die Pflanze im Hintergrund der Webseite wachsen zu lassen.
	Ich beschloss die Pflanze als Gegner aufzufassen und sie als Störfaktor einzubauen.		Ich beschloss die Pflanze als Gegner aufzufassen und sie als Störfaktor einzubauen. Dieser Ansatz ließ sich besonders gut mit dem zweiten Interaktionsansatz aus 3.1.1 kombinieren.

	~~Wie störend wäre es~~, wenn die Pflanze ~~den ganzen Computerbildschirm zuwuchern könnte?!~~		Ich wollte die Pflanze in eine Umgebung setzen in die sie nicht hineingehört, damit sie den Menschen dort besonders plagen kann. Die Pflanze sollte in der Lage sein Elemente der Webseite auf der sie wächst zu verdecken, so dass die Webseite immer schwerer zu bedienen wird. Diese Idee ließ sich sehr gut mit meiner Grundidee verknüpfen, denn der Störfaktor der Pflanze ist am größten, wenn die Pflanze immer in die Richtung der Elemente wächst, die der Nutzer am häufigsten gebraucht.

	~~=== Ranke statt Baum ===~~

	[[Image:~~GmuRanke~~.png\|~~300px~~\|thumb\|~~right\| Eine Ranke die sich auf unterschiedliche Hotspots aufteilt.~~]]		=== Rekursive Interaktivität ===

			Mit dem Ansatz die Pflanze als Störfaktor aufzufassen, kam mir ein weitere Idee mit der man die Interaktion zwischen Pflanze und Mensch verstärken konnte. Ich wollte eine Art Rückkopplung in mein Konzept einbauen. Der Webseitennutzer sollte nicht nur zusehen können, wie die Pflanze immer mehr die Webseite übernimmt; er sollte auch eingreifen können.
			Deshalb verlieh ich der Pflanze die Eigentschaft Transparent zu werden, wenn man sie anklickte. Damit hatte der Nutzer noch eine Chance die Webseite weiter zu benutzen, gleichzeitig würde die Mausbewegung die Pflanze wieder an die genau gleiche Stelle lenken wie zuvor. Pflanze und Nutzer würden damit in einen nie endenden Kreislauf eintauchen, in dem sie sich immer wieder gegenseitig beeinflussen.


			== Finales Konzept ==

			[[Image:Twitter_tendril.png\|500px\|thumb\| Zugewachsene Twitter Webseite]]

	Wie in Absatz 2.1 beschrieben wurde, erwieß es sich als sehr schwierig die Wachstumsrichtung des Baumes mit einer Maus sinnvoll zu beeinflussen. Die Maus wird immer eine Art Pfad bilden, wenn man sie über den Bildschirm bewegt. Zusätzlich vermehren sich die Äste des Baumes so schnell, dass die Webseite sehr schnell zuwächst und der Browser aufgrund der vielen Animationen oft in die Kniee gezwungen wird.
	~~Ein weitere Nachteil des Baumes ist, dass er sinnvollerweise nur von unten ins Bild kommen kann.~~

	~~Ich wollte meine Pflanze jedoch nicht immer von~~ der ~~gleichen Position aus loswachsen lassen~~, ~~weshalb ich den Baum durch~~ eine ~~Ranke ersetzte~~.		Nach der Überarbeitung des Konzepts gab es viele neue Ansätze, doch die große Frage war, wie der Inhalt für eine solche Webseite aussehen sollte. Am besten würde sich eine Webseite eigenen auf der man sich länger aufhält, denn erst dann kann sich die Pflanze richtig entfalten - Webseiten wie Facebook, Twitter und Youtube.
	~~Die Ranke hatte einerseits den Vorteile~~, dass ~~sie~~ an ~~jedem Rand der~~ Webseite ~~starten kann und dass sie sich nicht so oft aufteilt~~, ~~wie die Äste des Baumes~~.		Mir wurde klar, dass die Pflanze nicht an eine einzelne Webseite gebunden werden sollte, sondern für alle Webseiten zur Verfügung gestellt werden musste.

	~~=== Rekursive Interaktivität ===~~		Ich entschied mich ein Chrome-Plugin zu entwickeln, welches eine wuchernde Ranke erzeugt. Die Ranke sollte immer in die Bereiche der Webseite wachsen, indenen sich die Maus am häufigsten befand und dabei alle Elemente überdecken. Die Pflanze soll dabei gegen den Menschen agieren und ihm die Lust am Internet verderben, denn sie wächst unermüdlich weiter und weiter.
			Insbesondere auf Webseiten wieder Twitter und Facebook auf denen viele Menschen alltäglich ihre Zeit verschwenden kann die Pflanze vielleicht dem ein oder anderen helfen.

			[https://efraps.kochab.uberspace.de/plants-vs-humans/ Webseite mit wuchernder Ranke.]


	= Umsetzung =		= Umsetzung =

	~~== Maustracking ==~~		Zur Umsetzung meines Konzepts verwendete ich HTML, CSS und JavaScript. Insbesondere verwendete ich die JavaScript Bibliothek d3.js von Mike Bostock für die Visulisierungen der Pflanze und des Gitters.
			[https://github.com/mbostock/d3/wiki/Gallery Siehe auch github.com/mbostock/d3/wiki/Gallery]

	~~Zur Erstellung einer Mausheatmap, unterteilte ich die Webseite in ein Gitter aus vielen kleinen Vierecken. Bewegte der Nutzer die Maus über die Webseite, so legte er stets~~

	= Zukünftige Arbeit =		= Zukünftige Arbeit =

EphTron: /* Ranke statt Baum */

2015-06-16T22:37:17Z

Ranke statt Baum

← Older revision		Revision as of 22:37, 16 June 2015
Line 106:		Line 106:
	=== Ranke statt Baum ===		=== Ranke statt Baum ===

	[[Image:GmuRanke.png\|~~200px~~\|thumb\|right]]		[[Image:GmuRanke.png\|300px\|thumb\|right\| Eine Ranke die sich auf unterschiedliche Hotspots aufteilt.]]

	Wie in Absatz 2.1 beschrieben wurde, erwieß es sich als sehr schwierig die Wachstumsrichtung des Baumes mit einer Maus sinnvoll zu beeinflussen. Die Maus wird immer eine Art Pfad bilden, wenn man sie über den Bildschirm bewegt. Zusätzlich vermehren sich die Äste des Baumes so schnell, dass die Webseite sehr schnell zuwächst und der Browser aufgrund der vielen Animationen oft in die Kniee gezwungen wird.		Wie in Absatz 2.1 beschrieben wurde, erwieß es sich als sehr schwierig die Wachstumsrichtung des Baumes mit einer Maus sinnvoll zu beeinflussen. Die Maus wird immer eine Art Pfad bilden, wenn man sie über den Bildschirm bewegt. Zusätzlich vermehren sich die Äste des Baumes so schnell, dass die Webseite sehr schnell zuwächst und der Browser aufgrund der vielen Animationen oft in die Kniee gezwungen wird.
Line 113:		Line 113:
	Ich wollte meine Pflanze jedoch nicht immer von der gleichen Position aus loswachsen lassen, weshalb ich den Baum durch eine Ranke ersetzte.		Ich wollte meine Pflanze jedoch nicht immer von der gleichen Position aus loswachsen lassen, weshalb ich den Baum durch eine Ranke ersetzte.
	Die Ranke hatte einerseits den Vorteile, dass sie an jedem Rand der Webseite starten kann und dass sie sich nicht so oft aufteilt, wie die Äste des Baumes.		Die Ranke hatte einerseits den Vorteile, dass sie an jedem Rand der Webseite starten kann und dass sie sich nicht so oft aufteilt, wie die Äste des Baumes.


	=== Rekursive Interaktivität ===		=== Rekursive Interaktivität ===