myow – Workbook Arts Education

Dominic Eckinger & Nathalie Bösch

Song-Cover

Album Cover
Audio
Generative Gestaltung
Musik
Song
Visuell
Die Schüler*innen gestalten ein digitales Cover für ihren Lieblings-Song. Ausgehend von der Stimmung des Songs, seinem Rhythmus, der Tonhöhe, etc. finden sie zu visuellen Formen, Farben und Animation. Mit den Möglichkeiten der generativen Gestaltung entwickeln sie zum ausgewählten Song ein interaktives Cover. Eine parallel zur Gestaltung geführte Auseinandersetzung mit der Entwicklung der Tonträger vom Plattenspieler zur digitalen Plattform führt zu einer postdigitalen Perspektive auf die Musikkultur: Durch die Digitalisierung veränderte sich die Art und Weise wie und wo Musik konsumiert wird, sowie die realen künstlerischen Voraussetzungen und Bedingungen der Musikproduktion.

Dieser Teil ist Beitrag des Bundles „Creative Coding – Algorithmisches Denken als Teil eines gestalterischen Prozesses“ herausgegeben von Margot Zanni und Andreas Kohli.

Mit dem Walkman (Sony 1979) und iPod (Apple 2001) wurde die Musik mobil und digital. Der Vertrieb wurde durch iTunes (Apple 2001) und Spotify (2006) plattformisiert.
Digitale Plattformen wie YouTube und TikTok lassen die Grenzen zwischen den Genren Musik, Video und Performance verschwimmen. Diese Entwicklung führte nicht nur zum Verschwinden der attraktiven LP-und CD-Covers, auch das Hörverhalten wird zunehmend durch Algorithmen gesteuert.
Die Open-Source-Kultur setzt andere Werte: Lauren McCarthy, die Lead Entwicklerin von p5.js argumentiert: „p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.“ (URL: https://p5js.org) Die digitale Welt ist omnipräsent, Creative-Coding ermöglicht einen Blick hinter die schimmernden Oberflächen.
Die beiden Kontexte werden in den Unterricht eingewoben und thematisiert. Die heute nahezu obsoleten Schallplatten- und CD-Cover finden so eine Entsprechung im postdigitalen Zeitalter.

Doppellektion 1

A1.1 Einführung in die Open Source Plattform p5.js
Die Schüler*innen berichten über ihre Erfahrungen mit Coden. Anschliessend macht die Lehrperson eine kurze Einführung zum Kontext von p5.js und zur Processing Community. (Einführung siehe: https://p5js.org/ und processing.org) Die Lehrperson thematisiert Lauren McCarthy als Lead-Entwicklerin von p5.js, die Open Source Kultur, die Programmiersprache JavaScript und die Möglichkeiten der generativen Gestaltung. Handout 1 10’

A1.2 Inhaltliche Einführung
Die Schüler*innen betrachten drei interaktive, mit p5.js programmierte CD Covers (Beispiel1, Beispiel 2, Beispiel 3). Die Schüler*innen gewinnen so einen ersten Eindruck über die Möglichkeiten vom Creative Coding. Einige weitere Beispiel zur Gestaltung mit p5.js werden auf der Website Generative Gestaltung gezeigt. 10’

A1.3 Technische Einführung in p5.js
Am Beamer wird die Programmoberfläche von p5.js, das Koordinatensystem, die basalen Funktionen „function loop“, „function draw“ sowie „MouseX“, „MouseY“ erklärt. Mehr dazu hier: https://p5js.org/reference/.
Mit diesen Funktionen programmieren die Schüler*innen anschliessend ein einfaches Zeichnungsprogramm. Das Handout 2 unterstützt diese erste Doppellektion. 15’

Anmerkung: Bezüglich des Koordinatensystems ist bemerkenswert, dass der Nullpunkt in der linken oberen Ecke liegt und in der Vertikalen die y-Achse nach unten positive Werte hat.

A1.4 Lehrgespräch Kontext Album Cover
Am Beispiel prägnanter Albumcover (1, 2, 3) der letzten 70 Jahre erarbeiten die Schüler*innen ein Spektrum an Gestaltungsmöglichkeiten. Unsere Auswahl an Schallplatten- oder CD-Covers beinhaltet Beispiele, die auf simplen Formen beruhen. Die einfachen Formen und die prägnanten Farbkontraste eigenen sich als Einstieg ins Coden. 15’

A1.5 Übung: Welche Musik passt zum Cover?
Ausgehend von einem aktuellen Song-Cover versuchen die Schüler*innen, das Genre, die Stimmung und die eingesetzten Musikinstrumente des Songs zu erraten. Es wird diskutiert, ob es überhaupt möglich sei, vom Bild Rückschlüsse auf die Musik zu ziehen. Die Situation wird aufgelöst und der Song von Black Sea Dahu abgespielt. 15’

A1.6 Übung: Welches Cover passt zur Musik?
Umgekehrt machen hören die Schüler*innen einen Song von Milky Chance und machen sich Notizen bezüglich der Stimmung, des Rhythmus’, des Genres und der Instrumente. Ausgehend dieser Notizen programmieren sie mithilfe der gelernten elementaren Funktionen ein Cover zu diesem Song. Das Rätsel wird aufgelöst und die verschiedenen Resultate verglichen. 25’

 

Doppellektion 2

A2.1 Einstiegsübung: „Viele Köch*innen verderben den Brei“
Die Schüler*innen schreiben während einer Minute einen eigenen Code und generieren damit erste grobe Skizzen ihrer Ideen. (Das Ende der Minute wird durch das Abspielen von Musik signalisiert.) Anschliessend rotieren die Schüler*innen zum Computer des/der Sitznachbarn*in und ergänzen den „fremden“ Code nach dem Prinzip „Cadavre Exqius“. 20’

A2.2 Input zu Open-Source-Software
Lauren McCarthy (Programmiererin/Künstlerin) – die Gründerin von 5p.js – wird vorgestellt. Frauen sowie People of Color sind in der Kunst und Technologie untervertreten. Processing.org versucht mit den Grundwerten von Diversität und Inklusion dieser Situation entgegenzuwirken. Ergänzend werden mit Mozilla und Blender weitere Open Source Projekte vorgestellt. Handout 3 10’

A2.3 Sichten und Ordnen von Song Cover

Verschiedene Songcovers werden auf ihrer gestalterischen Elemente hin untersucht und sortiert. Folgende Gestaltungselemente werden diskutiert: Farben, Kontraste, Schriften, Muster, Metaphern. Diese Elemente dienen den Schüler*innen als Anregung und Orientierung für die Gestaltung ihres Covers. Handout Liste Song-Cover 10’

A2.4 Technische Einführung in die Funktionen „variable“, „random“ und „font“
Der Code „variable“ eröffnet den Spielraum für Animationen, die Funktion „random“ greift auf zufällig generierte Werte oder Variablen zu. Das Handout 4 unterstützt die Anwendung der neuen Funktionen. 15’

A2.5 Technische Einführung in die Funktion „loop“
Einführung der Funktion „loop“ mit den beiden Varianten „for“ respektive „while“. Mit der Funktion „loop“ lässt sich Code in einer Schleife mehrmals ausführen. Zusätzlich wird der nested loop, ein Loop im Loop, mit einem Video von Daniel Shiffman erklärt. Die Schüler*Innen programmieren Schritt für Schritt mit. Handout 5 15’

A2.6 Übung: Sammlung von Codes
Nach dieser technischen Einführung wenden die Schüler*innen die neuen Kenntnisse experimentell an. Das Ziel ist eine Sammlung von Codes zu erstellen, auf die sie später in der Hauptaufgabe zurückgreifen können. In Zweierteams tauschen sie anschließend ihre Codes aus und besprechen gemeinsam das gestalterische Potenzial. 20‘

 

Doppellektion 3

A3.1 Übung: Code Rätsel
Ein Code wird am Beamer projiziert und Zeile für Zeile durchgegangen. Die Schüler*innen versuchen sich das Bild vorzustellen, dass dieser Code erzeugt, und zeichnen ihre Vorstellung auf ein A4 Blatt. Danach wird der Code vom Computer ausgeführt und mit den Zeichnungen der Schüler*innen verglichen. Abweichungen bei der Interpretation des Codes werden besprochen. 15’

A3.2 Technische Einführung, um externe Daten in p5.js zu darzustellen (500)
Einführung in die Funktionen „loadSound“, „play“, „loadFont“, „textFont“. Diese Funktionen werden für das Laden von Musik und von Schriften benötigt. 5’

A3.3 Lieblingssong
Die Schüler*innen bringen ihren Lieblingssong mit und lernen diesen in einer technischen Einführung im mp3-Format auf p5.js hochzuladen und abzuspielen.
Die Amplitude des Songs wird durch die Funktion „getAmp“ ausgelesen. Der numerische Wert der Lautstärke kann in den Code eingesetzt und als dynamisches Gestaltungselement genutzt werden. 10’

A3.4 Individuelle Arbeitsphase
Die Schüler*innen erproben die neu gelernten Funktionen, beginnen die neuen Möglichkeiten als Gestaltungsmittel einzusetzen und mit den Codes der vorangegangenen Lektion zu kombinieren.
Zum Abschluss erhalten sie eine Hausaufgabe für die Konzeption des Covers. 60’

 

Doppellektion 4

A4.1 Konzept erstellen
Die Schüler*innen präsentieren das Konzept für die Gestaltung ihres Covers. Das Konzept beinhaltet unter anderem ihre Gedanken zur technischen und gestalterischen Herangehensweise. Es unterstützt sie dabei, ihre Ideen zu ordnen, Gestaltungsmittel bewusst einzusetzen und Entscheide zu begründen. 20‘

A4.2 Hauptaufgabe
Mit Hilfe des erarbeiteten Konzepts soll die Idee nun erste Formen annehmen. 70‘

 

Doppellektion 5

A5
In dieser Doppellektion arbeiten die Schüler*innen an ihrem Song Cover weiter und werden von den Lehrpersonen bei gestalterischen und technischen Fragen unterstützt. 90‘

 

Doppellektion 6

A6.1 Präsentation
Als Abschluss inszenieren die Schüler*innen im Klassenraum ihr interaktive Song Cover. Einige Beamer und Kopfhörern stehen zur Verfügung. 20 ‘

Resultate:
https://editor.p5js.org/CreativeCodingZHdK/sketches/zhivNjH8G

https://editor.p5js.org/CreativeCodingZHdK/sketches/VkdnoHRMY

https://editor.p5js.org/CreativeCodingZHdK/sketches/ZzL8S0BEu

https://editor.p5js.org/CreativeCodingZHdK/sketches/adP63P3Fi

https://editor.p5js.org/CreativeCodingZHdK/sketches/DVSuAMxrl

https://editor.p5js.org/CreativeCodingZHdK/sketches/LYVsVZXEs

Doppellektion 1
(A1.1.) In einer plenaren Situation führen wir an die Plattform p5.js heran und bringen ihr Vorwissen in Erfahrung. (A1.2) Der thematischen Schwerpunkt wird vorgestellt. Nahe an den Hörpraktiken der Jugendkultur wird auf die aktuellen Produktionsbedingungen der Musiker*innen eingegangen und an exemplarischen Beispielen veranschaulicht. (A1.3) Die technischen Einführungen via Beamer erklären Schritt für Schritt den Code. Die Schüler*innen programmieren denselben Code gleichzeitig an ihrem Computer. Sobald erste Ergebnisse vorhanden sind, sollen die Schüler*innen ihr persönliches Login auf p5.js erstellen. Sie können so ihre Codes speichern und mit den anderen teilen. (A1.5) Passt das bunte Cover zu dem melancholischen Song? Die Schüler*innen wägen den Einsatz gestalterischer Mittel wie Farben und Formen ab und besprechen, wie diese Mittel eingesetzt werden können. (A1.6) ist eine Umkehrung von A1.5: während in A1.5 vom Cover auf die Musik geschlossen wird, ist nun die Musik Anlass, um über die Gestaltung der Covers nachzudenken und einen Entwurf zu programmieren.

Doppellektion 2
Um den Bezug zur Musik gleich zu Beginn der Lektion herzustellen, werden die Schüler*innen im Schulzimmer mit Musik empfangen. Die Doppellektion startet mit dem Postenlauf (A2.1) „Viele Köch*innen verderben den Brei?“. Dieser spielerische Zugang dient der Repetition der eingeführten Codes der letzten Doppellektion. Durch diese Aufgabe stossen die Schüler*innen gemeinsam und manchmal auch zufällig auf neue Bildideen. Das kollaborative Arbeiten tangiert zudem bereits die Idee der Open Source Community, welche in der nächsten Sequenz explizit thematisiert wird. (A2.2) dient der Kontextualisierung von p5.js. (A2.3) dient der Repetition der Gestaltungsmöglichkeiten, die auf Basis der technischen Einführungen in A2.4 und A2.5 explorativ in A2.6 erprobt werden. (A2.5) Die beiden Varianten der Funktion „loop“ unterscheiden sich in der Schreibweise des Codes. Die Variante mit der Schreibweise „for“ benötigt weniger Code und wird deswegen meist bevorzugt. Die Variante „while“ eignet sich im Unterricht besser für die Veranschaulichung der Funktionsweise.

Das Verwenden von Google Fonts erweitert die Möglichkeiten der typografischen Gestaltung.

Doppellektion 3
A3.1 dient der Repetition der bisher eingeführten Funktionen (Koordinatensystem, Formen, Farbe, Fonts, Random, Loop). Die Schüler*innen stellen mit dieser Übung schnell fest, dass maschinell oder von Hand erzeugten Bilder unterschiedlich wirken. Es taucht Fragen auf wie: Wann ist der Einsatz von Computer in der Gestaltung sinnvoll? Soll der Mensch versuchen sich der Perfektion des Computers anzunähern oder umgekehrt: soll der Computer menschliche Eigenschaften simulieren? Mir der technischen Einführung (A3.2) sind alle Voraussetzungen geschaffen, um nun individuell die Hauptaufgabe, die Gestaltung eines interaktiven Covers, anzugehen (A4.2)

Doppellektion 4
Die Arbeit an der Hauptaufgabe (A4.2) wird durch Einzelgespräche mit der Lehrperson eng begleitet. Es ist hilfreich, wenn technisch versiertere Schüler*innen den Kolleg*innen behilflich sind. Als weitere Ressource können sich sie auf happycoding.io oder thecodingtrain.com Codes anschauen und Lösungsvorschläge für technische Probleme finden. Für die Hauptaufgabe sollten zwei Doppellektionen (Doppellektion 4 und 5) eingeplant werden.

Doppellektion 5
Die Schüler*innen arbeiten selbständig an ihrem Projekt weiter. Sie werden von der Lehrperson begleitet und durch ihre Mitschüler*innen unterstützt.

Doppellektion 6
Die letzte Doppellektion steht ganz im Zeichen vom Abschluss und der Präsentation der Arbeiten. Die Schüler*innen bauen das Display auf und zeigen auf einigen Beamern ihre Arbeit. Die Musik wird via Kopfhörer abgespielt.

Formate

Einzelarbeit, Gruppenarbeit, Unterrichtssequenz

Max. Teilnehmer

12

Dauer

6 Doppellektion à 90 min

Zielgruppen

Gymnasium, Sek II

Benötigtes Vorwissen

Keine Vorkenntnisse benötigt in p5.js/JavaScript.

Erster Einsatzkontext

Kontext der ersten Durchführung: Zürich, Mathematisch-Naturwissenschaftliches Gymnasium Rämibühl.

Social