Klänge zeichnen, Bilder in Songs verstecken

Ein kleiner Einblick in die Software Metasynth

Ich habe mir das Programm Metasynth etwas genau angeschaut und möchte hier einen kleinen Einblick in meine Recherche geben:
Der Hauptbeweggrund für diese Recherche ist mein Interesse an der Beziehung zwischen visueller und auditiver Gestaltung. Nachdem ich schon seit meiner Kindheit zeichne und musikalisch tätig bin, hat mich die in Metasynth implementierte Möglichkeit Klängen zu malen sehr neugierig gemacht. Erst war ich etwas skeptisch, da einem beim Aufrufen der Website ein eher altomodisches Erscheinungsbild begrüßt, worauf ich mir die Frage stellte, ob das Programm wirklich soviel kann wie in Rezensionen betont wird. Von dieser oberflächlichen Annahme verabschiedete ich mich schnell wieder, denn je mehr ich mich dann jedoch mit dem Programm beschäftigte, umso spannender wurde es für mich: Die abwechslungsreichen und für mich intuitiven Bearbeitungsmöglichkeiten wirkten immer vielversprechender, und Verweise darauf, dass Künstler wie Aphex Twin, zum Beispiel in seinem Song » ΔMi⁻¹ = −αΣn=1NDi[n][Σj∈C[i]Fji[n − 1] + Fexti[n⁻¹]]« mit dem Programm arbeiteten, machten mich noch neugieriger.

Anwendungsbeispiel: ΔMi⁻¹ = −αΣn=1NDi[n][Σj∈C[i]Fji[n − 1] + Fexti[n⁻¹]] von Aphex Twin

Ich fragte mich anfangs vor allem auch, ob sich die beiden Sinne »Sehen« und »Hören« in diesem Fall positiv oder negativ beeinflussen. Nur weil man ein schönes Bild malt, heißt es ja nicht, dass einem auch der Klang gefällt, genauso umgekehrt. – Das Programm kann eigentlich noch viel mehr, hier ein Überblick:

Metasynth ist ein Studio für OS X für elektronische Musik und Sounddesign. Es bietet verschiedene Möglichkeiten Klänge zu kreieren und zu verändern, unter anderem mit der Einbindung von Bilddaten. Die neueste Version von Metasynth kostet $249, eine Demoversion gibt es für alle Interessierten. Das einzige, was man in dieser Version nicht kann, ist es die Projekte zu speichern. Zum Downloaden dieser Version muss man Namen, Email und Telefonnummer angeben.

Das Programm gewann zahlreiche Preis wie zum Beispiel den Electronic Musician 2006 Editor’s Choice Award for best sound-design software. Es fand großen Einsatz in der Produktion der Soundeffekte im Film Matrix aus dem Jahr 1999. Außerdem haben Künstler wie Junkie XL, BT, Ian Boddy und Aphex Twin Musikstücke mithilfe des Programmes erschaffen. Aphex Twin hat dabei mit einer im Spektrogramm versteckten Abbildung seines Gesichts für Aufsehen erregt:

Hey, Who’s That Face in My Song?

»Hey, Who’s That Face in My Song?« – vollständiger Artikel hier.

Aufbau und Funktionen

Das Interface des Programms ist in zwei Bereiche eingeteilt, dem Sample Editor für Tonspuren, in dem übliche Bearbeitungen wie dem Schneiden oder Ein- und Ausblenden von Samples vorgenommen werden können, und dem XEditor, in welchem man unterschiedliche Möglichkeiten zur Klangsynthese oder Klangbearbeitung hat. Es gibt folgende Räume: Effect Room, Image Synth, Image Filter Room, Spectrum Synth, Sequencer Room und Montage Room.

Effect Room
Im Effect Room können eigene Samples in das Programm geladen und durch eine Auswahl von unterschiedlichsten Effekten bearbeitet: Flanger, Kompressoren oder Pitch- und Time Effekte.

Image Synth
Der Image Synth erzeugt Töne durch eingebaute Tongeneratoren, die eine Fläche von Pixeln analysieren. Man kann Bilder in den Editor laden, dieses bearbeiten, sowie neue Formen malen. Dementsprechend wie das Bild verändert wird, verändert sich auch der Klang. Auf der Zeichenfläche sind auf der x-Achse die Zeit und auf der y-Achse die Tonhöhen angeordnet. Die Bereiche der beiden Achsen können je nach Bedarf angepasst werden. Die Bearbeitungsmöglichkeiten sind denen von Adobe Photoshop ähnlich, so gibt es zum Beispiel einen Pinsel oder Wischfinger. Weiters kann man Filter auf die Zeichenfläche legen, mithilfe gezielte Klangeigenschaften verändert werden können, zum Beispiel jeweils einen Filter für Amplitude und Panning.

Image Filter Room
Der Image Filter Room funktioniert in seiner Bedienung nach dem gleichen Prinzip wie der Image Synth. Die Zeichenfläche im XEditor wird zu einem Equalizer. Das bedeutet die x-Achse steht für das Frequenzspektrum und die y-Achse für die Amplitude zu einem bestimmten Zeitpunkt im Sample Editor.

Spectrum Synth
Beim Spectrum Synth wird das sich im Sample Editor befindende Soundfile analysiert und im XEditor in Form eines Spektrogrammes wiedergegeben. Das bedeutet, dass in diesem Raum auf der x-Achse die Zeit und auf der y-Achse die Frequenz des Signals angeführt ist. Diese Abbildung kann wie bei den anderen Räumen durch visuelle Gestaltungswerkzeuge bearbeitet werden.

Sequencer Room
So wie bei üblichen Sequenzern aus der Musikproduktion kann man Im Sequencer Room musikalische Phrasen und rhythmischen Loops erzeugen.

Montage Room
Der Montage Room gleicht einer DAW mit 24 Spuren, die in den anderen Räumen erstellten Klänge können zusammengefügt, abgemischt mit bereits existierenden oder neu aufgenommen Audiodateien kombiniert werden.

  • Eine noch detailliertere Beschreibung und Anwendungsbeispiele der Räume finden sich hier.
  • Metasynth Roomtour

Fazit

Die Frage, ob sich der visuelle und auditive Sinnesorgane positiv oder negativ beeinflussen, hat sich für mich nach meiner Recherche als irrelevant entpuppt. Ich denke bei Metasynth geht es viel mehr darum, diese Sinne miteinander zu verknüpfen, um eine spannende Klangkomposition zu erstellen und sie je nach Workflow und Stimmung zu wechseln. Mit den visuellen Gestaltungswerkzeugen können dabei auf spielerisch kreative Weise neue spannende Klänge erzeugt werden, die auditiven konventionellen Tools helfen zur Orientierung und Strukturierung des Klanges.

Verwandte Programme:
Pixelsynth von Olivia Jack
Virtual ANS

Weiteres Anwendungsbeispiel: Kunst von Thomas Poersch

Quellen:
http://uisoftware.com/MetaSynth/
https://music.tutsplus.com/tutorials/an-introduction-to-metasynth–audio-2425
https://en.wikipedia.org/wiki/MetaSynth

Visual Feedback: Animations in Mobile Apps

Motion elements should be considered from the very start when planning a user journey. When designing animations, you need to analyze their influence on the usability and desirability of the app and if you cannot see a clear, positive impact, reconsider your approach. All animations should illustrate how elements are connected and make information even clearer. Moreover, app animations should be a functional element rather than decor. There are different kinds of possible animations for different user inputs.

Feedback Animation: The user gets positive or negative feedback depending on his action. This is similar to pressing a button, so it imitates Interaction with real objects in the physical world. A feedback interaction can also be fun but it must serve a purpose.

Progress Animation: A progress animation needs to inform the user about the level of progress and can additionally be entertaining.

Loading Animation: It might also be viewed as a subtype of the progress animation and informs the user about the current status of the loading process and that a device is actually loading.

Attention-Grabbing Animations: These animations support a visual hierarchy by including motion. Motion is added to some elements to highlight them and make them more noticeable.

Transition Animation: Moving from one screen to another should be a positive user experience. Transitioning between screens is important in every app that doesn’t just consist of one static screen.

Navigation Animation: Here the designer’s mission is to simplify user interaction with a product as much as possible. That means the more complex the structure of an app is the more time a designer should spend on making navigation easier. 

Marketing/Logo Animation: The integration of branding is an important factor in most apps. Animating a logo or elements of the logo can make it more memorable and appealing.

Animated Notifications: You can use bright colors to highlight important information and animate any changes to make the user aware of key information.

Scroll Animation: Scrolling is one of the typical interactions we are used to in both web and mobile interfaces. Animation adds beauty and elegance to the process, makes it stylish, original and harmonious.

Storytelling and Gamification: One more reason for using animation in mobile apps is making it a part of a story or a game. Animated stickers, badges, rewards, mascots – these are only a few ways to make an app interface interesting and lively.

When designing an app you should decide whether an animation is beneficial in a specific context. Before applying animation in a mobile app, designers should analyze both positive and negative impacts this may have on app interactions. Here are some benefits, but it also depends on the context. A good in-app animation should:

…provide clear feedback to the user

…increase usability

…speed up the processes of interaction

Sources:

https://yalantis.com/blog/how-to-create-mobile-ui-animations-that-meet-users-needs/, https://blog.tubikstudio.com/ux-design-how-to-use-animations-in-mobile-apps/, https://yalantis.com/blog/-seven-types-of-animations-for-mobile-apps/, https://medium.muz.li/7-types-of-in-app-animation-improving-mobile-app-user-experience-5f8b7930be2

Analyse von einem Politischen Werbespot

In diesem Blogeintag möchte ich mich basierend auf Jeremy Vineyard mit dem Wahlwerbespot der FDP 2017 auseinandersetzen

0:00-0:01 Naheinstellung

0:01-0:02 Blende mit Schrift

0:02-0:05 Großaufnahme, Zoom

0:05-0:06 Halbtotale

0:06-0:06 Naheinstellung

0:06-0:06 Naheinstellung

0:06-0:07 weiche Blende

0:06-0:07 Totale, Jumpcut, Unschärfe

0:07-0:08 Totale

0:09-0:09 Großaufnahme

0:09-0:09 Halbtotale

0:09-0:09 Blende

0:10 Detailaufnahme

0:11-0:12 Großaufnahme, Zoom, Überblendet mit Schrift

0:12 Unschärfe, Abdunklung

0:12-0:13 Geschnittener Zoom Rückwärts

0:13-0:15 Totale mit Kamerafahrt nach rechts

0:15 Großaufnahme

0:15 Totale

0:15 Naheinstellung

0:16 Totale

0:16 Naheinstellung

0:16 Naheinstellung

0:16-0:18 Halbtotale Kamerafahrt nach rechts

0:18-0:19 Großaufnahme, Zoom, Überblendet mit Schrift

0:19 Blendenwechsel schwarz weiß

0:20 amerikanische Kamerafahrt nach rechts

0:21 Blende

0:21 Totale

0:21 Halbtotale

0:22-0:23 Blende mit Schrift

0:23-024 Halbtotale

0:25 Detailaufnahme

0:25 Detailaufnahme

0:25 Blende

0:26 Detailaufnahme Kamerafahrt nach rechts

0:26-0:27 Sprung

0:27 Amerikanische, Vignette

0:28-0:30 Blende mit Schrift

0:30-0:31 Silhouette

0:31 Amerikanische

0:32 Totale Kamerafahrt nach rechts

0:32 Detailaufnahme

0:32 geschnittener Zoom vorwärts

0:33 Totale dramatischer Blickwinkel

0:34 Blende mit Symbol

0:34  Großaufnahme mit Kamerafahrt nach rechts

0:35-0:36 Blende mit Schrift

0:36-0:37unscharfe Großaufnahme

0:38-0:39 geschnittener Zoom vorwärts

0:39Großaufnahme

0:40 Amerikanische Kaperfahrt nach rechts

0:40 Blende

0:41 Amerikanische

0:41-0:43 Totale Überblendung mit Schrift

0:44 Detailaufnahme

0:45 Amerikanische Kamerafahrt nach rechts

0:45-0:46 Blende mit Schrift

0:46 Totale

0:46 Totale

0:46 – 0:47 Amerikanische

0:47 weiche Blende

0:47 Unschärfe Großaufnahme Jumpcuts

0:48-0:49 geschnittener Zoom vorwärts

0:49 Detailaufnahme Kamerafahrt nach rechts

0:50 Detailaufnahme

0:50 weiche Blende

0:51 Amerikanische mit Detailaufnahme

0:51 Halbtotale

0:51 Blende mit Schrift

0:52-0:53 Amerikanische

0:53 – 054 Jumpcuts

0:54 Halbtotale

0:55 -0:56 Amerikanische

0:56 Detailaufnahme

0:57 Kamerafahrt Rechts Amerikanische

0:58-0:59 Großaufnahme, Zoom

0:59-1:03 Blende mit Symbol

1:03-1:04 Blende mit Schrift

1:04 Detailaufnahme Sprungschnitte

1:05 Sprungschnitt Amerikanische

1:06 Halbtotale

1:07 Halbtotale Sprungschnitte

1:07 Detailaufnahme

1:07 Silhouette

1:08 Halbtotale

1:08 Blende mit Symbol

1:09 Halbtotale

1:09 weiche Blende

1:09 Totale mit Kamerafahrt nach rechts

1:10-1:12 Blende mit Schrift

1:12 Detailaufnahme

1:12 weiche Blende

1:13 Große Nahaufnahme

1:14 Halbtotale

1:14 Detailaufnahme

1:14 weiche Blende

1:15 Sprungschnitte Amerikanische

1:15-1:16 Halbtotale

1:16 Sprungschnitte

1:17 Nahaufnahme

1:17 Halbtotale mit Schriftüberblendung

1:18 Zoom Schrift

1:19 Halbtotale Jumpcuts

 1:20-1:21 Großaufnahme, Zoom

1:21-1:29 weiche Blende mit Schrift und Logoeinblendung

Character Design & Animation Styles

Character Design

Bevor das Designen eines Characters losgeht, sollte man sich schon mal im Klaren sein, welcher Animationsstil am Ende verwendet wird. Ob 2D oder 3D oder Stop-Motion oder… die unterschiedlichen Techniken geben natürlich schon gewisse Richtlinien oder besser Möglichkeiten vor wie der Character am Ende aussehen kann. Für die Abschlussarbeit und Recherche zu diesem Thema konzentriere ich mich aber auf 2D-Design. Zumindest was den Animationsstil betrifft. Der schlussendliche Stil hängt dann wohl von der zu erzählende Story ab.

Als Beispiele: simple gemetrische Formen die die Basis des Characters bilden oder noch simpler ohne gesichtsmerkmale oder Chracter die aus abstrakteren Formen bestehen.

https://medium.com/heres-the-plan-blog-eng/designing-characters-for-animation-660192a62de

Top Character Design Trends for 2019: Bold & Impressive

Animationsstile

Zum Thema 3D mit 2D miteinander verschmelzen habe ich weitere Beispiele gefunden. Diese Videos zeigen eher die Cartoonseite dieses Animationsstils. So kann das Kombinieren von 2und3D einfach genutzt werden um komplexe Perspektiven in einer einfachen 2D-Stil-Animation zu ermöglichen.

How to Merge 2D With 3D Animation – Flash Tutorial

2D & 3D Animation Combined

Sensory Branding

Viele Markenbotschaften sind heutzutage austauschbar. Die Vermittlung der Markenbotschaft kann dabei über Massenmedien, aber auch vielfältige, direkte, persönliche Kontakt- und Interaktionsformen, wie Markenevents und Markenwelten erfolgen. Dabei werden meist nur ein oder zwei Sinneskanäle bedient, wobei die visuellen oft völlig ausgereizt sind, weshalb auf andere Sinne zurückgegriffen werden muss. Bleiben Sinneskanäle jedoch ungesteuert, wird die Markenwirkung geschwächt, Kunden werden nicht mehr erreicht und deren Erwartungen nicht erfüllt. Da Marken meist mit allen Sinnen wahrgenommen werden, müssen diese gezielt gesteuert werden. 

Revising the Basics (Part 1)

My first step in getting back to Processing was to revise the basics. Although we’ve had a very good coding tutor in the first semester, I already feel like I forgot most of what we’ve learned there. So this is why I found myself a beginners course on Youtube. It’s approx. 65 videos about learning Processing by Gabriel Duarte. I only consider half of them to be „the basics“ but this seems to be my first opportunity to go further into the material after I feel confident with the basics.