Idee
Eine Seite, die schön, verspielt und gleichzeitig informativ ist. Die Welt ist nicht immer so schwarz/weiss wie sie so viele Leute malen. Der Mensch hat sechs Sinne (einige Wissenschaftler sind der Überzeugung, es seien sogar sieben) In der heutigen Gesellschaft gehen die unter, werden nicht mehr eingesetzt, faulen und verlernen, wie etwas geht. Ein Gedankenanstoss also.
Planung
Viel geplant wurde im Voraus nicht. Ich wollte einfach mal einen Regenbogen programmieren und mal schauen was passiert. Wie ich die Musik einbinden will und welche Art von Musik (Töne / Kompositionen) war auch nicht klar. Ursprünglich wollte ich mit einem Keyboard mehrere Spuren aufnehmen und jede einzelne Spur dann auf einen Farbstreifen des Regenbogens legen. Je nach dem auf welchem Streifen die Maus ist, wird diese Spur lauter abgespielt.
Zu Beginn hab ich verschiedenste Theorien zu Synästhesie gelesen, Künstler gefunden, die diese Gabe haben und Wissenschaftler die weitgedachte Erklärungen haben.
Einer davon war eben Hans Cousto. Er hat rausgefunden, oder einfach als erster gemessen, in was für einer Frequenz sich die Planeten in unserem Sonnensystem bewegen. Denn ihre Umdrehungen um die Sonne und die um sich selbst verursacht Klänge, die im Frequenzmassstab einfach weit über unserem Hörbereich liegen.
Umsetzung
Für das Projekt habe ich mich an der Theorie von Hans Cousto festgehalten.
Für jeden der sieben Töne im Notensystem plus den jeweiligen dur-Ton habe ich die Farbe gemäss Cousto's Theorie rausgesucht.
Anschliessend habe ich mir ein Keyboard in der Technikausleihe geholt. Meine midi Software war aber leider nicht kompatibel mit dem Keyboard. Ich konnte zwar spielen, aber der Ton wurde immer verzögert aufgenommen, so war es unmöglich mehrere Spuren zu spielen/komponieren.
Aus diesem Grund habe ich dann einzelne Töne genommen. Jeder Ton hat eine Farbe und kommt mehrmals auf der Seite vor.
Zuerst wollte ich mit p5.js arbeiten. Dann fand ich eine einfachere Lösung mit jquery und normalem css und javascript. Ich entschied mich gegen Bootstrap, weil dort einige Funktionen nicht taugten, die ich aber wollte.
Die Website funktioniert mit drei .js Dateien zwei .css und zwei .html. Es war unglaublich viel herumpröbeln und ausprobieren. Stundenlanges herumschieben von Feldchen, bis die richtige Prozentzahl gefunden wurde. Ich habe jenste js Libaries ausprobiert und sehr viel neues gelernt.
Mit Illustrator habe ich die verschiedenen Bilder auf der Subsite erstellt. Die hab ich mir ebenfalls prachtvoller vorgestellt.
Website
Ursprünglich sollte es ein Onepager werden. So dass die Theorie erscheint, wenn der User über das entsprechende Feld fährt. Da dies in dieser durchschnittlichen Programmierung dann zu vollgestopft wirkte, entschied ich mich für eine Subsite. Die Website sollte bunt und interaktiv sein. Es sollten sich viele Sachen dynamisch bewegen und Musik abgespielt werden je nach dem, wo der Cursor steht. Das ganze wurde dann ziemlich auf die Basics heruntergebrochen.
Wenn man jetzt über die einzelnen Feldchen fährt gibt es jeweis den passenden Ton dazu. Das war neben den Partikeln, die aus dem Cursor rieseln, das schwierigste zu programmieren.
Die Seite hätte so sein sollen, dass man nicht scrollen kann auf der Hauptseite. Da es aber auf jedem Server und jedem Browser wieder anders aussieht, hat das nicht ganz geklappt. Manchmal war im Google Chrome alles eine Seite und bei Firefox hatte es unten 1/3 einfach leer. Oder aber umgekehrt.
Fazit
Das Ziel war es, Musik und Farbe interaktiv miteinander zu verbinden. Meine Programmierskills stiessen da aber schnell an eine Grenze. Doch der Ball rollte und ich musste dieses Projekt abschliessen. Ich sehe es als Versuch. In meinem Kopf war eine Idee, die mit meinem aktuellen Vorwissen und in dieser Zeit von vier Monaten nicht umsetzbar war.
Eine anschaubare Website von Grund auf selbst zu bauen ist schwierig. Ohne Bausteine und ein wackeliges Fundament.
Manchmal googelt man wochenlang einfach nach den falschen Wörtern. Damit die Bilder wechseln, wie sie das auf der Subsite tun, hab ich nach "image change on click", "change src attribute on click" usw. gesucht. Nichts gefunden. Dann Ende Juni sehe ich eine Kollegin, die eine Bildergallerie macht. Bei ihr funktionierte es einwandfrei. Sie suchte in Google aber nach "card-flip". Die Bilder auf der Subsite sind das letzte was ich gemacht habe.
