Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

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

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Audio Visualizer

Die Digitalisierung hat die Arbeit von Designer*innen grundlegend verändert. Für viele von uns wird der gesamte Designprozess von Planung, Ideation, User Research bis zur eigentlichen Gestaltung und Umsetzung von digitalen Werkzeugen gestützt. Werkzeuge die uns Effizienz und neue Möglichkeiten versprechen. Dabei lässt sich leicht vergessen, dass diese neuen Möglichkeiten auch Regeln und Grenzen mit sich bringen. Limitierungen die durch Personen, welche die Software entwickeln, bestimmt werden. Im Rahmen dieses Kurses setzten wir uns kritisch mit diesen Grenzen auseinander und versuchten über sie hinaus zu gehen, indem wir unsere eigenen digitalen Werkzeuge entwickelten. Dabei verblieben wir nicht bei generativer Grafik am Screen, sondern beschäftigten uns auch damit, wie wir z.B. code-basiert Modelle für den 3D-Druck oder Vorlagen für den Laser-Cutter erstellen können.

I. Idee & Konzept

Die abstrakte Idee dieses Projekts war es, ein visuelles Abbild von unterschiedlichen Sounds zu schaffen. Das Programm selbst wollte ich sowohl mit Audio Dateien als auch per Live-Input über ein Mikrofon oder Mischpult füttern. Dies legte die Grundlage für die Durchführung der Datenanalyse und -visualisierung. Ob mittels dieser Input Möglichkeiten nun Gesang, Klassik, Tiergeräusche, Sounds aus dem Alltag o. Ä. visualisiert werden würde, ließ ich mir frei und konzentrierte mich darauf, ein Konstrukt zu kreieren, das mit dem Schall in Echtzeit resoniert.

Idee-Konzept.pngIdee-Konzept.png

_

II. Inspiration

Bildschirmfoto 2022-01-29 um 21.33.00.pngBildschirmfoto 2022-01-29 um 21.33.00.png
Bildschirmfoto 2022-01-29 um 21.34.22.pngBildschirmfoto 2022-01-29 um 21.34.22.png
Bildschirmfoto 2022-01-29 um 21.41.24.pngBildschirmfoto 2022-01-29 um 21.41.24.png
Bildschirmfoto 2022-01-29 um 21.19.11.pngBildschirmfoto 2022-01-29 um 21.19.11.png

_

III. Implementation

Entscheidend zur Umsetzung des Programms war nun eine passende Entwicklungsumgebung. Dazu bot sich aus Erfahrung die Software VS Code und das Versionsverwaltungssystem GitHub an, mit welchen wir ebenfalls im Kurs arbeiteten. Ich entschied mich in erster Linie für die Processing basierte JavaScript-Library p5, die wir im Laufe des Kurses kennenlernten. Mithilfe von p5.js ließen sich die Sound Daten analysieren und als dynamische Parameter in verschiedene Variablen und Funktionen einbinden. Es bestand die Option sowohl die Volume Amplituden als auch den Frequenzbereich des Audios auszuwerten. Anschließend arbeitete ich primär mit dem polaren Koordinatensystem und verschiedenen shapes der library um den Schall sichtbar zu machen.

2.png2.png
5.png5.png
3.png3.png
6.png6.png
4.png4.png
7.png7.png
untitled (11).pnguntitled (11).png

_

IV. Visualisierung von Klassik (Vivaldi)

scheda_vivaldi-990x1000.jpgscheda_vivaldi-990x1000.jpg

untitled (1).pnguntitled (1).png
untitled (5).pnguntitled (5).png
untitled (6).pnguntitled (6).png
untitled (7).pnguntitled (7).png
untitled (8).pnguntitled (8).png
untitled (3).pnguntitled (3).png

Try it live >>

(and don't forget to run)

_

V. Varianten

untitled (12).pnguntitled (12).png
untitled (14).pnguntitled (14).png
untitled (16).pnguntitled (16).png
untitled (17).pnguntitled (17).png
untitled (20).pnguntitled (20).png
untitled (22).pnguntitled (22).png
untitled (23).pnguntitled (23).png
untitled (25).pnguntitled (25).png
untitled (28).pnguntitled (28).png
untitled (31).pnguntitled (31).png

VI. Fazit

Alles in Allem lief das gesamt Projekt ziemlich cool ab. Ich kam mit grundlegendem Wissen über hmtl & css, js, und etwas php in den Kurs und konnte mich somit recht schnell mit p5 und JSCAD zurechtfinden. Ich entdeckte schnell das Potential der library und war neugierig die verschiedenen Funktionen zu vernetzen und die visuellen Ergebnisse zu sehen. Dabei viel mir auf, dass die Resultate im Browser selten so aussahen, wie ich sie mir anfangs vorstellte. Was mich dazu brachte noch größeren Respekt vor der Kontrolle über komplexe Algorithmen bzw. KI zu entwickeln.

Ich lernte wie ich ebenfalls im 3-Dimensionalen Raum programmiere, Fraktale und interaktive Partikelsysteme entwickle und Vorlagen für die CNC Fräse, den Lasercutter und den 3-Druck mit Hilfe von JSCAD erstelle. Dabei fand ich bewundernswert wie inspirativ und vielfältig die Projekte und Ideen meiner Kommilitoninnen und Kommilitonen ausfielen.
Wäre das Semester etwas länger gewesen hätte ich mich gerne noch mehr mit der Auswertung verschiedener Frequenzen des Tones beschäftigt, diese spezifisch angesteuert und separat visualisiert. Doch mit Sicherheit und Freude werde ich mich in Zukunft fortlaufend mit generativer Gestaltung beschäftigen und ihren umfangreichen Anwendungsbereich weiter entdecken.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Keine Angabe

Betreuung

foto: Prof. Dr. Sebastian Meier

Zugehöriger Workspace

Parametric Design

Entstehungszeitraum

Wintersemester 2021 / 2022