1.Platz HackARThon TH Köln

Hallo zusammen!

Nach langer Pause geht es nun weiter mit einem Blogeintrag. Eigentlich wollte ich als nächstes über ein anderes Thema schreiben, aber es ergab sich kurzfristig, dass ich mit meinem Kollegen Nico Bastian an einem Hackathon an der Technischen Hochschule Köln Campus Gummersbach teilgenommen habe. Das Event fand zwar schon vor einiger Zeit statt, nämlich am 12.Mai 2016, aber der offizielle Artikel der Hochschule wurde erst letzte Woche veröffentlicht. Und ja, wir haben tatsächlich den 1.Platz belegt. Yeah!

Doch worum ging es in diesem Hackathon bzw. was ist überhaupt ein Hackathon? Laut Wikipedia ist ein Hackathon wie folgt beschrieben:

Ein Hackathon (Wortschöpfung aus „Hack“ und „Marathon“) ist eine kollaborative Software- und Hardwareentwicklungsveranstaltung. Alternative Bezeichnungen sind „Hack Day“, „Hackfest“ und „codefest“.

Im Grunde hatten wir ungefähr 15 Stunden Zeit eine Anwendung zum Thema Kunst zu schreiben, daher hieß der Hackathon auch HackARThon. Ein wenig Problematisch für mich persönlich war das eigentliche Thema, da Kunst eher etwas kreatives ist und ich nicht wirklich kreativer Natur bin. Da ich jedoch vor einiger Zeit bereits mit dem AudioSpektrumListener von JavaFX experimentiert habe, ich weise damit auf meinen Audio Player hin, kam mir spontan die Idee dieses Wissen wiederzuverwenden und mit "Kunst" zu verbinden, also Bilder ;)

Die Idee war also, in einer JavaFX Anwendung aus einem Lied ein Bild zu erzeugen und nachdem ich dem Nico davon erzählt hatte und er ebenfalls der Meinung war, dass dies eine gute Idee wäre, hatten wir also unser Projekt für den HackARThon. Als dann der große Tag gekommen war und zunächst eine Stunde als Vorbereitung, Themenfindung und Teambildung reserviert war von den Organisatoren, sind Nico und ich erstmal ein Bier trinken gegangen, da wir zum einen unser Team und zum anderen das Thema bereits vorbereitet hatten. Anschließend ging es los!

Zunächst bauten wir die Oberfläsche in FXML, in dem wir ein BorderPane, welches im Zentrum das Canvas und am rechten Rand eine VBox für eventuelle Einstellungen etc., erstellten. Wie man eine MP3 öffnet und abspielt konnte ich aus meinem Audio Player übernehmen, ebenso den AudioSpektrumListener, welcher die Frequenzbänder mit den entsprechenden Tonhöhen usw. abfragt. Doch nun kam die große Herausforderung: Wie nutzen wir diese Werte um ein Bild zu malen bzw. Was soll Wie gemalt werden? Zunächst fingen wir an die Koordinaten 1:1 in X-Y-Koordinaten im Canvas umzuwandeln. Es hat zwar super funktioniert, jedoch sah es nicht wirklich schön aus, bzw. es sah sehr schlecht aus. Also fingen wir an Linien zu zeichnen, welche sich vom Mittelpunkt aus in Spiralform zum Rand des Canvas bewegen und dabei ihre Länge anhand der Werte verändern. Dies sah auf einmal richtig gut aus und wurde beibehalten. Jedoch fiel uns sehr schnell auf, das die Performance in den Keller ging nachdem ca. 1000 Linien gezeichnet wurden. Der Fehler wurde zum Glück kurz vorm Ende des Tages gefunden und war durch unsere eigene Dummheit entstanden. Anstatt die Linien direkt auf das Canvas zu "prägen", wie es zum Beispiel bei Microsoft Paint der Fall ist, hatten wir einen Pfad gezeichnet, welcher mit jeder weiteren Linie erneut gezeichnet werden musste und daher Performance schluckte. Nachdem der Fehler korrigiert wurde, lief es wunderbar und liefert immer noch konstante 60 FPS bei ca. 1.000.000 gezeichneter Linien.

Am nächsten Tag machten wir uns dann daran die Linien ein wenig zu optimieren und anzupassen, damit die Muster schöner werden. Wir passten also Farben, Länge, Größen, etc. an und experimentierten. Nachdem wir mit den Linien zufrieden waren und auch generell mit der Anwendung fingen wir an weitere Formen mit ins Spiel zu bringen, da wir noch ca. 5 Stunden Zeit übrig hatten.

Nachdem dann die offizielle Zeit vorüber war, ging es los mit der Vorstellung der Anwendung vor der Jury. Zunächst zeigte das größte Team, bestehend aus 3 Personen, ein JavaFX Spiel, in dem es darum ging zwei Fahrzeuge gegeneinander antreten zu lassen. Beide Fahrzeuge mussten dabei ein Drag-Rennen abschließen und wurden dabei lediglich durch schnelles und abwechselndes drücken zweier Knöpfe bewegt. Diese Anwendung belegte am Ende den 3.Platz. Den 2.Platz machte eine C# Anwendung, bei der man einen Elefanten durch eine Großstadt bewegen und zum überleben verschiedene Minispiele machen musste. Diese Anwendung war sehr hübsch und generell eine gute Idee, aber war noch nicht sehr weit gekommen, sodass lediglich ein Minispiel implementiert war. Anschließend stellten wir unsere JavaFX Anwendung vor, welche wir inzwischen AudiPic (Audi = Audio und Pic = Picture) getauft hatten und gewannen damit den Hackarthon. Als Preise bekamen wir jeweils einen 25€ Amazon Gutschein und einen YubiKey.

Wer einmal sehen möchte wie die Anwendung aussieht und was sie genau macht, hier ein kleines Demo-Video:

Zusätzlich dazu gibt es den TH Köln Artikel und die GitHub Seite zur Anwendung.

Hinweis: Die Anwendung ist in der Version 1.1 vorhanden, da noch ein paar dumme logische Fehler vorhanden waren sowie ein paar Feinheiten gemacht werden mussten.

Dies war mein "kurzer" Bericht zum HackARThon an der TH Köln Campus Gummersbach, ich hoffe es hat euch gefallen und für diejenigen die genau wissen wollen wie die Anwendung funktioniert: Es wird noch ein separater Blogeintrag nur über die Anwendung kommen!

Bis dann!