Incom ist die Kommunikations-Plattform der Hochschule Augsburg Gestaltung

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Augsburg Gestaltung mehr erfahren

Krendlinger_Anja (Block I)

Projekt für Interaktionsdesign im SommerSemester 2021 - Erster Block.

Zur Hilfe kommt hier bei https://teachablemachine.withgoogle.com/train

1. Erste Ideen

1.1 Drink!

Jeder kennt es, das lästige Trinken. 3l pro Tag, wie soll das gehen?
Meine Idee war eine Erinnerung zu schaffen, die einem sagt das man schon seit 30min nichts mehr getrunken hat.
Dies wird mithilfe von Farben visualisiert.

Weiß zeigt hier - alles ist in Ordnung. Man trinkt genug.

Rot (blinkend) zeigt hier - Bitte trinke was! Du hast schon seit einer halben Stunde nichts getrunken!

Blau zeigt hier - Du trinkst gerade. Sehr gut!

Problem:
Manchmal wird auch die Hand im Gesicht als „trinken“ gezählt wird. Das müsste überarbeitet werden.

Link: https://www.hs-augsburg.de/~anjak/ID4/drink/index.html

Unbenannt.jpgUnbenannt.jpg
2021-03-18 15_03_54-Example.png2021-03-18 15_03_54-Example.png
2021-03-18 15_04_32-Example.png2021-03-18 15_04_32-Example.png

1.1.2 Move!

Die Idee dahinter ist die selbe wie bei Drink!.
Da wir wegen Corona viel sitzen und uns kaum bewegen wäre etwas das uns daran erinnert ab und an mal einen Hampelmann zu machen doch gar nicht so verkehrt.

1.2 Squad Counter

Dieser Counter zählt ganz simpel wie oft man einen Squad macht.

Er zählt immer nur einmal wenn man sich „hinsetzt“ und erst erneut wenn man wieder „aufgestanden“ ist.

Wenn der Counter die Zahl 10 erreicht hat, schlägt er einem eine kurze Pause vor.

Hier mit könnte man auch zählen, wie oft man am Tag aufgestanden ist und wenn es unter einer gewissen Zahl liegt, weiß man, das man Abends noch einen Spaziergang machen sollte.

Link: https://www.hs-augsburg.de/~anjak/ID4/squad/index.html

Unbenannt.pngUnbenannt.png
2021-03-18 16_40_31-Example.png2021-03-18 16_40_31-Example.png

1.3 Guess my Pasta!

Bisher nur eine grobe Idee:
Weiß einer von euch wie jede der verschieden geformten Pastasorten heißt? Irgendjemand spricht von Rigattoni und man hat ein Fragezeichen im Kopf.

Also ich persönlich kenne nur Spagetti und Penne, aber es gibt so viele verschiedene Nudelsorten, noch dazu ja auch aus anderen Küchen, die wir deutschen meisten nicht kennen.
Das soll dieses Programm nun vereinfachen!

pasta_corta1.jpgpasta_corta1.jpg
pasta_corta2.jpgpasta_corta2.jpg
Pasta_2006_4.jpgPasta_2006_4.jpg

1.4 What does the cow say?

Man kennt doch sicher diese ganzen Bücher für Kleinkinder, die Tiere abbilden und beim drauf drücken dann die Geräusche zum Tier abspielen.
Die Idee war, dies in ein Spiel zu verwandeln.
Es zeigt einem verschiedene Bilder von Tieren wie Kühen, Schafen oder einem Hund und man muss dann die Geräusche dieses Tieres nach machen. Hat man das richtig, geht es zum nächsten Tierbild.

81Hk5VeHEBL.jpg81Hk5VeHEBL.jpg

2. Ausarbeitung

Zur weiteren Ausarbeitung wurde sich für die Idee „What does the cow say?“ entschieden. 🐄

Zuerst musst natürlich nach Tieren gesucht werden, die einen typischen Klang haben den man auch kennt bzw. erkennt.
Darunter wurde sich dann für Kühe, Schafe, Esel, Hühner, Katzen, Hunde, Schweine, Elefanten und Löwen entschieden.
Frei verfügbaren Bilder kann man gut auf Freepik gesucht und wird schnell fündig.

Nun werden die einzelnen Tierbilder abgespeichert und in den Code geladen.
Alle Vektor-Grafiken sind designed by macrovector / Freepik

41505.jpg41505.jpg
41497.jpg41497.jpg
41494.jpg41494.jpg

Für den ersten Test und um die Grundlage festzulegen wird ein Startscreen erstellt, eine kurze Struktur geschrieben und ein style.css hinzugefügt.
Dort wurde dann auch direkt das erste Tierbild eingefügt mit dem man durch den Tastendruck von ENTER das Spiel startet.

2021-03-28 13_17_49-Greenshot.png2021-03-28 13_17_49-Greenshot.png
2021-03-28 13_18_13-Greenshot.png2021-03-28 13_18_13-Greenshot.png

Um das Spiel dann richtig zu testen wurden zuerst Hund- und Katzengeräuschen in den Code eingefügt.
Nach dem dies gut geklappt hat, wurden alle weiteren Tiere auch eingefügt und es wurde daran gearbeitet das die Geräusche auch zu den passenden Bilder zugeordnet werden.
Zwischendurch ist noch der Verweis zum Ersteller der Bilder unten rechts in die Ecke geschrieben und der schwarzen Hintergrund entfernt worden, um es ein wenig ästhetischer zu machen.

Am Ende, wenn man alle 10 Tiere erraten hat, wurde ein End-Screen eingefügt der einem Gratuliert, da man alle 10 Tiergeräusche richtig erraten hat.

end.pngend.png

Die Tierbilder sind in einem Array gespeichert und dort wird von vorne nach hinten durch diese Liste hindurch gelaufen.
Die Geräusche sind zum Bild geordnet worden und der erste Testlauf des fertigen Projektes lief gut.

Aktuell gibt es noch keine Abwechslung der Tiere, aber man könnte natürlich die Bilder und Töne in einer zufälligen Reihenfolge ausgeben.
Nach und nach kann man natürlich auch noch mehr Tiere hinzufügen.

Hier kann man es ausprobieren: https://www.hs-augsburg.de/~anjak/ID4/wdtcs/index.html

Viel Spaß beim zum Affen machen, bzw zur Kuh! 🐄

Ein Projekt von

Fachgruppe

Interaktive Medien

Art des Projekts

Projekt-Tagebuch

Betreuung

foto: Prof. Andreas Muxel

Zugehöriger Workspace

IA4 Interaktionsdesign / Mensch und Maschine

Entstehungszeitraum

Sommersemester 2021