72
edits
No edit summary |
No edit summary |
||
Line 24: | Line 24: | ||
= | = Konzept = | ||
Während der Arbeit an meinem Semesterprojekt musste ich mein Konzept stetig verändern und an gewisse technische Probleme, sowie konzeptionelle Ideen anpassen. Ich entwickelte viele verschiedene Prototypen und Features, die meine Grundidee als Fundament besaßen und die Idee jedes mal in abgewandelter Form umsetzten. Im Folgenden soll zuerst die Grundidee beschrieben werden und im Anschluss die Entwicklung des Konzepts vom ersten Entwurf hin zu meinem finalen Konzept. | |||
Line 31: | Line 33: | ||
[[Image:heatmap.png|thumb|right|Abbildung 1. Eyetracker Heatmap.]] | [[Image:heatmap.png|thumb|right|Abbildung 1. Eyetracker Heatmap.]] | ||
Die grundlegende Idee meiner Arbeit war es Mausbewegungen von Nutzern aufzuzeichnen und eine Webseite durch diese Aufzeichnungen visuell zu verändern. Das Ziel dieser Idee war angelehnt an die Funktionsweise eines Eyetrackers. Ein Eyetracker kann die Fixationspunkte einer Person aufzeichnen und anschließend die fixierten Bereiche farblich hervorheben. | |||
Ich stellte mir eine Webseite vor, die die von der Maus am häufigsten besuchten Bereiche markiert und diese visuelle beeinflusst. | |||
Um dieses Konzept an das Thema "Plants vs Humans" anzupassen, entschied ich mich dazu eine künstliche Pflanze zu programmieren und sie mit der Bewegungsmatrix der Maus zu "gießen". So wie echte Pflanzen zum Licht wachsen, sollte die künstliche Pflanze von Mausbereichen angezogen werden. | |||
Zur Aufnahme der Mausbewegungen legte ich ein Gitter aus vielen kleinen Vierecken über die Webseite. Jedes der Vierecke merkte sich, wie oft es von der Maus des Nutzers berührt wurde. In den Wachstumsphasen der Pflanze sollte die Wachstumsrichtung der Pflanze durch die berührten Vierecke beeinflusst und gelenkt werden. | |||
== Erster Entwurf == | == Erster Entwurf == | ||
[http://efraps.kochab.uberspace.de/plants-vs-humans/prototyp_1.html Prototyp Nr.1] | |||
Bei meinem ersten Prototyp verfolgt ich die Idee einen sich stetig verändernden und wachsenden Webseitenhintergrund zu entwerfen. Dazu sollte im Hintergrund einer Webseite ein künstlicher Binärbaum wachsen, der sowohl in Richtung der aktuellen Mausposition, wie auch in zufällige Richtungen wachsen konnte. | |||
Mit diesem ersten Entwurf wollte ich die generelle Tauglichkeit meiner Idee testen und weitere Faktoren, wie Interaktivtät, Ästhektik, Wachstumsgeschwindikeit und Pflanzenanzahl überprüfen. | |||
[http://efraps.kochab.uberspace.de/plants-vs-humans/prototyp_2.html Prototyp Nr.2] | |||
Es zeigten | |||
# technische limits, | |||
Der diente in erster Linie als Test für viele unterschiedliche Faktoren. Ich w | |||
<!--[[Image:EphTron_gmuTree.png|600px|Abbildung 1. Der erste Entwurf.]]--> | <!--[[Image:EphTron_gmuTree.png|600px|Abbildung 1. Der erste Entwurf.]]--> | ||
Line 69: | Line 82: | ||
= Umsetzung = | = Umsetzung = | ||
== Maustracking == | |||
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 = | ||
Man kann sich zu dieser Arbeit eine große Anzahl an Erweiterungen vorstellen. | |||
Beispielsweise: | |||
Dynamische Geschwindikeit | |||
Unterscheidung zwischen Klicks und Hover. | |||
Ranken unterschiedlicher Länge |
edits