myow – Workbook Arts Education

Olivia Schwarz & Mirco Leali

Build your Robot

Automaten
Chatbot
Creative Coding
Hypertext
Interaktion
Java Script
Mensch und Computer
Siri
Heute begegnen wir „smarten“ Computern (Maschinen, die scheinbar selbst denken können, tatsächlich aber basierend auf Algorithmen Entscheidungen treffen) überall: Sie heißen Siri, Roomba oder Eliza und dienen uns als Haushaltshilfen, als Navigationssystem im Auto oder beratend als Bot beim Online-Shopping. Der vorliegende Beitrag legt dar, wie Schüler*innen an drei Nachmittagen lernen, einen eigenen Chatbot mit p5.js zu programmieren und mit einer Narration zum ‘Leben’ zu erwecken. Ziel des Unterrichts ist zudem die Sensibilisierung hinsichtlich der Aspekte der „Vermenschlichung von Maschinen“: Wie reagieren wir bei der Interaktion mit solchen Maschinen? Welche Emotionen werden dabei hervorgerufen? Wie und weshalb simuliert man menschliches Denken? Wie können wir die Grauzone zwischen menschlichem Denken und computer-basierten Informationsverarbeitung verstehen und beschreiben? Entlang dieser Fragen, die sich um das Verhältnis von Mensch und Maschine drehen, vermitteln wir die Grundlagen von Creative-Coding.

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

Warum wünschen wir uns ein menschenähnliches Gegenüber, wenn wir mit Maschinen interagieren? Im Alltag erleben wir unzählige Begegnungen mit digitalen Entitäten, die ein intelligentes und selbstständiges Handeln simulieren. Spätestens seit der Entstehung der modernen Wissenschaften entstand der Wunsch, den Menschen durch Automaten nachzuahmen. Ein erster Schritt, menschliches Denken zu simulieren, stellte der Schachtürke aus dem 18. Jahrhundert dar: Dieser simulierte auf raffinierte Weise einen Automaten, der Schach spielen kann, indem er von einem in der Maschine versteckten Menschen gesteuert wurde. Heute kennen wir Siri. Ihr Algorithmus schafft für uns die Illusion, mit einem Menschen zu sprechen. Chatbots werden immer häufiger eingesetzt, sei es als persönlicher Helfer im Alltag oder im Supportbereich großer Firmen. Mittels der Programmiersprache p5js zeichnen und programmieren wir einen einfachen Chat-Bot.

1. Sequenz (3 Lektionen)

A1.1 Einführung
Die Lehrperson bereitet einen Text vor, der mit einem Large Language Modell wie z. B. ChatGPT geschrieben wurde und einen zweiten, der von einer tatsächlichen Person verfasst wurde. Im Hinblick auf die aktuelle Entwicklung kann auch eine kurze Diskussion darüber stattfinden, ob die Schüler*innen Texte, von Menschen geschrieben sind oder von Text-Bots wie ChatGPT generiert werden unterscheiden können. Sie notieren auf der Plattform Padlet ihre Erfahrungen mit sogenannten intelligenten Maschinen. Auf Basis dieser Notizen findet eine Diskussion im Plenum über ihre Erfahrungen statt. Die Schüler*innen lernen die Möglichkeiten der Interaktionen zwischen Mensch und Maschine kennen.
Mögliche Aufgabenstellung für die oben genannten Beispiele: Lest beide Texte. Welcher ist von einem Menschen verfasst? Notiere eine kurze Begründung.

A1.2 Technische Einführung in Basic-Formen
Die Lehrperson macht eine kurze Einführung zum Kontext von p5.js und zur Processing Community. Sie thematisiert Lauren McCarthy als Lead-Entwicklerin von p5.js, die Open Source Kultur, die Programmiersprache JavaScript und die Möglichkeiten der generativen Gestaltung. 5’
Die Schüler*innen bearbeiten das Bild „Musikautomaten und Ente“. Darauf sind Menschen und Automaten abgebildet. Die Schüler*innen werden aufgefordert, mit den geometrischen Basisfunktionen von p5.js „rect“, „ellipse“ oder „triangle“ Köpfe und Körper der dargestellten Personen abzudecken und so ein roboterhaftes Wesen zu konstruieren. Code-Beispiel, Code-Beispiel mit Abdeckungen 30’

A1.3 Login
Die Schüler*innen erstellen ihr persönliches Login für p5.js. 15’

A1.4 „Build your Robot“
Im Tandem erstellen Schüler*innen eine Liste mit Adjektiven, die den von ihnen geplanten Bot charakterisieren. Davon ausgehend diskutieren sie mögliche ästhetische Merkmale ihres Bots und erstellen erste Skizzen. 35’

A1.5 Individuelle Arbeitsphase
Schüler*innen programmieren einen ersten Entwurf ihres Bots. Link zum vorbereiteten Arbeitsbeispiel, Handout 2 Aufgabe 1, Handout 3 Grundlagen l 45’

 

2. Sequenz (3 L)

A2.1 „Build your Robot 2.0“
Die in Tandems zu bearbeitende Aufgabe 2 wird schriftlich eingeführt. Die Teams diskutieren in einem nächsten Schritt die Gestaltung des Hintergrunds ihres Bots und mit Hilfe einer Liste mit Charakterzügen und ihrer Sammlung von Adjektiven das „Rollenverhalten“ der Bots. Jedes Tandem entwickelt einen Bot mit spezifischen Charaktereigenschaften. 20’

A2.2 Technische Einführung: Hypertext
Anhand eines vorbereiteten Codes erklärt die Lehrperson wie ein Hypertext aufgebaut ist. Sie skizziert auf einem großen Papier das Flussdiagramm, das die Logik des Hypertexts im vorbereiteten Code abbildet und erklärt. 20’

A2.3 Technische Einführung: moving eyes, moving mouth
Die Lehrperson erklärt den Schüler*innen mit Hilfe des Handouts Handout 6 – Grundlagen ll die Funktionalität der beiden vorbereiteten Funktionen „moving eyes“ und „moving mouth“. Mit diesen beiden Funktionen können sie mittels Mausbewegungen die Augen und Lippen des Bots steuern. 25’

A2.4 Technische Einführung: miclevel
Die Schüler*innen lernen mit Hilfe der Schritt-für-Schritt-Anweisungen der Lehrpersonen am Beamer und des Handouts Handout 6 – Grundlagen ll die Funktionen „mic“ und „miclevel“ kennen und koppeln damit die Bewegung von Augen und Mund an die Lautstärke der Umgebungsgeräusche. Code-Beispiel 25’

A2.5 Individuelle Arbeitsphase im Tandem Build your Robot 2.0
Die Schüler*innen formulieren in Tandems die Hypertexte ihres Bots. Anschließend fügen sie diese in den vorbereiteten Code des Hypertexts ein und testen die Wirkung. Parallel dazu entwickeln sie das Aussehen des Bots weiter. Handout 6 40’

 

3. Sequenz (3 L)

A3.1 Technische Einführung „function preload“
Die Schüler*innen lernen unter Anleitung die Funktionen „preload“ und „image“ kennen. Diese Funktionen werden benötigt, um auf dem „canvas“ Bilder zu platzieren. Handout 6

A3.2 Individuelle Arbeitsphase im Tandem „Build your Robot 2.0“
Die Schüler*innen finalisieren ihren Bot inklusive der Umgebung in einer längeren, individuellen Arbeitsphase und verlinken ihn mit der Plattform Padlet. Damit sind alle Bots für alle Schüler*innen der Klasse zugänglich. 55’

Zum Schluss möchten wir noch erfahren, was ihre Meinungen zu dem Projekt und ihren Resultaten sind: Sind sie zufrieden? Wo sehen sie Verbesserungsmöglichkeiten in ihren Chatbots? 10′

1. Sequenz
(A1.1) Auf der Basis der Notizen auf Padlet diskutieren wir die Erfahrungen im Umgang mit intelligenten Maschinen im Plenum. Zudem erzählen die Schüler*innen von ihren Vorkenntnissen, Erwartungen und Wünschen bezüglich Creative-Coding.
(A1.2) Auf dem Beamer wird in kleinen Schritten die grundlegenden Codes präsentiert. Eingeführt werde die Basis-Formen der „function draw“, „rect“, „ellipse“, „triangle“ und „line“, sowie das Farbsystem RGB. Die Schüler*innen können diese sogleich auf ihrem Gerät ausprobieren. Diese elementaren Codes werden sie später für die Gestaltung des Bots benötigen. In der kurzen Übung „Place the Shapes“ wenden die Schüler*innen diese Codes an: Sie öffnen im Editor eine vorbereitete Umgebung und haben Zugriff auf ein vorbereitetes Bild. Dieses Bild von Jacques de Vaucanson (1738) greift die Thematik „Mensch – Maschine“ der vorangehenden Diskussion auf. Aufgabe ist es nun, die Figuren im Bild mittels geometrischer Formen so abzudecken, dass die Figuren verfremdet werden und einem Roboter ähnlich sehen.
(A1.3) Im Anschluss an die Übung „Place the Shape“ erstellen die Schüler*innen ihr persönliches Login auf https://p5js.org. Sie können jetzt ihre eigenen Codes speichern und später wieder darauf zurückgreifen.
(A1.4) Die Aufgabe „Build your Robot“ dient dem Prozess der Bildfindung und der Tandembildung.
Diese Einführung ist begleitet von einem Handout mit einem Überblick. 25’

2. Sequenz
(A2.1) Die Tandems werden in zwei Teams zusammengefasst. Für die beiden Teams sind zwei unterschiedliche Umgebungen für ihre Bots vorgesehen: Während sich die Bots des ersten Teams im Wald aufhalten und verirrten Schüler*innen helfen den Weg zu finden, unterstützen die Bots des zweiten Teams Neuankömmlinge einer Stadt sich zurecht zu finden.

Vorbereitete Leitfragen helfen dabei.

(A2.2), (A2.3), (A2.4), (A2.5) Am Anfang der Unterrichtssequenz steht eine technische Einführung in den Code des Hypertexts. Um eine interaktive Kommunikation mit dem Bot zu planen, benötigen die Schüler*innen ein Verständnis dafür, wie ein Hypertext funktioniert. In eine vorbereitete Hypertextstruktur werden anschließend die Fragen des Bots hineingeschrieben (A2.2).
Die in A2.3 eingeführten Funktionen dienen der interaktiven Gestaltung des Bots. Es bewährt sich neue Codes Schritt-für-Schritt am Beamer vorzuzeigen. Damit die Schüler*innen nachher selbständig arbeiten können, haben wir für alle Funktionen Handouts erstellt. Auf der Basis dieser Einführungen programmieren die Schüler*innen anschließend in einer längeren individuellen Arbeitsphase (A2.5) ihre Bots. Sie wissen, wie der Hypertext funktioniert und wo die von ihnen verfassten Antworten hineingeschrieben werden können. Die ersten Textfragmente entstehen. Der Chatbot formt und verfeinert sich langsam.

3. Sequenz
(A3.1) Als Bildmaterial eignen sich Ausschnitte aus Gemälden der Romantik und des Klassizismus bereit. Beide Epochen stehen für die Blütezeit der mechanischen Automaten. Die Schüler*innen wählen daraus aus und platzieren diese auf der Canvas. Die historischen Bilder bilden einen starken Kontrast zu den flach wirkenden Chatbots und verweisen noch einmal auf den in der Einführung erwähnten historischen Wandel der Automaten.(A3.3) Das Seitenverhältnis der Canvas entspricht ungefähr dem Screen von Smartphones (Breite 420 Pixel, Höhe 660 Pixel). So können die Schüler*innen auch außerhalb des Schulzimmers mit dem Bot interagieren.

Formate

Gruppenarbeit, Projekt

Max. Teilnehmer

12

Dauer

8 Lektionen à 45 min

Zielgruppen

Schüler*innen, Sek II

Benötigtes Vorwissen

Das beschriebene Projekt ist technisch anspruchsvoll und für Lehrpersonen mit Vorwissen zu P5.js geeignet. Zu allen Code-Elementen, welche in dieser Unterrichtssequenz genutzt werden, gibt es weiterführende Links und Online-Tutorials von Daniel Shiffman. Sein YouTube-Kanal „The Coding Train“ bietet umfassende Lehrgänge für P5.js an.

Erster Einsatzkontext

Zürich Enge, Maturschule Liceo Artistico

Social