Computerkunst als Einstieg in die Programmierung
Jun 1, 2021 @ 6:37

Die Beschäftigung mit Computerkunst eignet sich als Einstieg in die Programmierung, weil sie basierend auf vergleichsweise wenigen Grundlagen attraktive und kreative Aufgabenstellungen erlaubt und die Ergebnisse unmittelbar erlebbar sind. Mit Scratch, Snap!, Processing, P5.js oder Sonic Pi stehen verschiedene Umgebungen bereit, welche sich auf für den Einsatz auf der Sekundarstufe I eignen.

Gerne würde ich mit euch eine Diskussion darüber führen, wie ihr einen solchen Ansatz in eurem Unterricht nutzt oder möglicherweise nutzen würdet.

  • Was hält ihr grundsätzlich von einem solchen Ansatz?
  • Was setzt ihr bereits um oder was hindert euch daran?
  • Welche Ideen oder Projekte könnt ihr mit anderen teilen?
  • Welche Ressourcen dazu könnt ihr weiterempfehlen (Software, Bücher, Webseiten …)?
  • Welche Erfahrungen habt ihr damit bereits gemacht?
  • Wo seht ihr Vor- und Nachteile, Grenzen der Beschäftigung mit Computerkunst im Unterricht?

Unter https://gigers.com/blog/?p=622 findet ihr einen Blogbeitrag, der ein mögliches Projekt beschreibt. Das darin vorgestellte Snap!-Programm kann hier aufgerufen werden: https://snap.berkeley.edu/project?user=mattgig&project=Repeating%20elements .

Ich freue mich auf eure Fragen, Ideen, Gedanken und Meinungen.
Matthias

29 Antworten
  1. Am Beispiel eines zu zeichnenden Quadrats wird gezeigt, wie Schleifen Programme vereinfachen können.

  2. ich bin selber kein Lehrer von daher kann ich die didaktische Dimension nicht einschätzen.

    Empfehlen kann ich aber http://digitalart.joachim-wedekind.de/ueber-das-buch/
    Mit Hilfe von Snap wird gezeigt wie abstrakte Kunst nachgestellt werden kann. Und es fängt einfach mit Lineart als Turtle Grafik (so wie Paperts Logo) an und endet dann mit animierter Computerkunst.

    Und ich kann mir vorstellen, dass sich das Thema mit Geräten wie dem Axidraw kombinieren lässt um die fehlende Haptik auszugleichen. Damit kann auch etwas entstehen das in der echten Welt besteht und nicht einfach nur ausgedruckt würde.

  3. Processing ist eine auf Java basierende Entwicklungsumgebung, welche sich explizit an Kunstschaffende wendet. Nebst der hervorragend Dokumentation auf der Webseite (https://processing.org/tutorials/) findet man als Einstieg für den Schulbereich zwei Kurse auf iMooX:
    https://imoox.at/course/processing1
    https://imoox.at/course/processing2
    Wer sich tiefer einarbeiten möchte, findet zahlreiche Anregungen auf dem YouTube-Kanal „The Coding Train“: https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw .

  4. Hey, danke für das schöne Thema, ich habe hier noch ein paar nette Beispiele und Spielarten:

    Bleeptrack macht sehr schöne Sachen: https://www.bleeptrack.de/ – Sie hat zum Beispiel auch den Grafikgenerator zum 35c3 gemacht: https://35c3.bleeptrack.de/ Hier auch ein paar interessante Talks von ihr: https://media.ccc.de/search/?q=bleeptrack

    Ansonsten bin ich ja ein Fan von Oscilloscope Music – Jerobeam Fenderson ist da ja am bekanntesten. Hier kommen Code, Kunst und Physisches auch schön zusammen: https://www.youtube.com/watch?v=YqSvkNjWnnQ

    • Musik, welche Bilder auf einem Ozilloskop generiert. Das ist ja eine wirklich coole Sache! Da weiss ich wohl, was ich mir in den nächsten Tagen zwischendurch anschaue.

      Bleeptrack hatte ich ebenfalls nicht mehr auf dem Radar. Danke für die tollen Links.

  5. Im zweiten Video verwenden wir Variablen, um unser Programm etwas flexibler zu gestalten. Die etwas erhöhte Komplexität nehmen wir für mehr Flexibilität in Kauf. Um die „Glitches“ kümmern wir uns dann im im nächsten Video.

  6. Buchempfehlung

    Levin & Brain (2021). Code as Creative Medium: A Handbook for Computational Art and Design. Cambridge, MA: MIT Press
    Siehe auch https://mitpress.mit.edu/books/code-creative-medium

    Da Buch beschreibt unterschiedlichste Ansätze der Computerkunst. Dabei geht es nicht um deren direkte Programmierung, sondern vielmehr um die vielfältigen Möglichkeiten der Computerkunst, die illustriert durch zahlreiche Werke von Künstlerinnen und Künstlern zur eigenen kreativen Tätigkeit anregen. Wer nach Ideen sucht, wird hier definitiv fündig. Programmieranleitungen enthält das Buch nicht.

    Kennst du weitere interessante Publikationen? Dann schreibe doch einen kurzen Kommentar dazu.

  7. Nachdem wir beim letzten Mal Variablen eingeführt haben, verwenden wir diese nun auch in Berechnungen. Damit können wir nicht mehr nur Quadrate, sondern unterschiedliche regelmässige Vielecke zeichnen. Unser Programm hat also weiter an Flexibilität gewonnen.

    Leider stellen wir beim Umschreiben fest, dass jede Änderung auch (unbeabsichtigte) Konsequenzen hat und zu scheinbaren Fehlern führt. Diese sind aber bei der Programmierung von Computerkunst relativ einfach zu entdecken, da wir das Ergebnis ja unmittelbar sehen. Diese unmittelbare Rückmeldung beschleunigt den Lernprozess.

  8. Heute verpacken wir die bisher geschriebenen Befehle in eine eigene Funktion (einen eigenen Block), damit wir diese nachher mit zufälligen Parametern mehrfach abrufen können.

    Der neue Block versteckt die technischen Details und damit haben wir diesen Teil des Programms abstrahiert. Ausserdem haben wir eine Designentscheidung getroffen: Der Block enthält nur noch die Befehle zum Zeichnen des Vielecks, dessen Positionierung erfolgt ausserhalb dieses Blocks.

  9. Daniel Shiffman verfolgt oft denselben Ansatz, über Grafikkunst in die Programmierung mit Javascript/P5.js einzuführen. Er hat dazu bereits Hunderte Videos auf YouTube veröffentlicht, die ich wirklich toll finde. Falls seine Website noch nicht bekannt sein sollte: https://thecodingtrain.com/.

  10. Ich habe mit sehr positiver Resonanz letzte Woche auf die Veranstaltung women in Zech der TU Potsdam verwiesen. Da findet am 15.07. ein Webinar zu Generative Art statt. Im Prinzip hilf künstlerische Visualisierung beim Einstieg in jede Programmiersprache und lässt sich zur richtigen Kunst ausfalten 😉

    https://www.uni-potsdam.de/de/digital-engineering/fakultaet/gba/veranstaltungen/women-in-tech

  11. Ich habe im Profilunterricht Klasse 5/6 gute Erfahrungen mit TygerJython gemacht:
    https://www.tigerjython.ch/index.php?inhalt_links=navigation.inc.php&inhalt_mitte=unterricht/unterricht.inc.php

    Mit TurtleGrafik lassen sich algorithmische Prozesse anschaulich visualisieren.
    Zudem gefällt mir der Bezug zu einer weit verbreiteten Programmiersprache. 😉

    Ein guter Startpunkt ist: https://www.tigerjython4kids.ch/index.php?inhalt_links=turtle/navigation.inc.php&inhalt_mitte=turtle/turtle.inc.php

    • Das Lehrmittel „einfach Informatik“, das beim Klett und Balmer Verlag in Zusammenarbeit mit der ETH Zürich entwickelt wurde, setzt ebenfalls auf TigerJython. Allerdings hatte ich bei diesem Lehrmittel das Gefühl, dass es in erster Linie für Lehrpersonen geschrieben wurde, die neu ins Thema einsteigen und weniger für Schülerinnen und Schüler, die viel Freude am Experimentieren haben.

      Wie waren deine, respektive die Erfahrungen deiner Schülerinnen und Schüler mit dem Problembereich Tippfehler? Hat dies in deinen Klassen zu Schwierigkeiten geführt? Oder war dies überhaupt kein Thema?

  12. Ich denke du meinst nicht Tippfehler in den Handreichungen, sondern Fehler beim Abtippen – richtig?

    Ich habe die Materialien tatsächlich auf Arbeitsblätter pro Doppelstunde umgebastelt und dann auf Papier ausgeteilt. Tippen und Tippfehler war also durchaus dauernd dabei. Ich habe hier von Anfang an auf Pairprogramming und gemeinsame Fehlersuche gesetzt.

    Der Computer benötigt ja exakte Eingaben und so habe ich Fehler thematisiert und denke, alle haben aus den Fehlern auch viel gelernt. Neben Tygerjython haben die Schülerinnen und Schüler so auch Partnerarbeit und einen konstruktiven Umgang mit Fehlern gelernt.

    Ich freue mich, wenn ich das nächstes Schuljahr (hoffentlich in Präsenz und Partnerarbeit) wiederholen und ausbauen kann.

    • Bitte entschuldige die unklare Formulierung. Gemeint waren natürlich Tippfehler der Schülerinnen und Schüler. Im erwähnten Lehrmittel selbst habe ich bisher keine Fehler gefunden. So viel ich dies überblicken kann, wurde dieses sehr sorgfältig entwickelt.

      Zurück zu den Tippfehlern der Lernenden: Diese treten ja nicht nur beim Replizieren bereits vorhandener Vorlagen auf, sondern sind dann besonders lästig, wenn die Lernenden eigene Lösungen entwickeln. Für mich als Lehrperson ist es vor allem in etwas umfangreicheren Code dann auf die Schnelle schwierig, die entsprechenden Problemstellen zu erkennen. Häufig auch deshalb, weil der Code dann mehr als einen Fehler enthält, oder man von den Lernenden zuerst herausfinden muss, was sie genau bewirken wollen.

  13. Nachdem wir Vielecke an zufälligen Positionen gezeichnet haben, wollen wir uns wieder vermehrt der Ordnung zuwenden und die Vielecke in einem Raster positionieren. Damit die Schülerinnen und Schüler nicht das ganze Programm selbst schreiben müssen, stellen wir ihnen dieses in Form eines Puzzles zu Verfügung. Dies bedeutet: Alle Blöcke sind schon vorhanden, müssen aber noch richtig zusammengesetzt werden. Damit ist eine Konzentration auf die Logik der Programmierung möglich, ohne dass wir uns um die Details einer einzelnen Sprache kümmern müssen.

    Falls ihr mehr dazu wissen wollt, werdet ihr in der englischsprachigen Wikipedia fündig: https://en.wikipedia.org/wiki/Parsons_problems

    Wo seht ihr die Vorteile oder Nachteile der Puzzlemethode? Wann würdet ihr diese einsetzen?

  14. Anhand eines kleinen Programms schauen wir uns einen weiteren Ansatz an, der im Programmierunterricht verwendet werden kann. Wir gehen von einem fertigen Programm aus und lesen dies, d.h., wir überlegen anhand des Codes, was dieses Programm genau tut und überprüfen anschliessend unsere Vermutung, indem wir das Programm ausführen.

    • Wie handhabt ihr dies in eurem Programmierunterricht? Welchen Ansatz verfolgt ihr bevorzug?

      Gebt ihr den Lernenden ein Ziel vor und lässt sie dann selbst eine Lösung finden? Oder kopieren eure Schülerinnen und Schüler eher das, was ihr ihnen vorzeigt? Wie gross ist allenfalls die Transferleistung der Lernenden?

      Welche Techniken wendet ihr in eurem Unterricht an? Fällt ihr die Entscheidung für die eine oder andere Technik bewusst? Und wie wird diese von der eigenen Lernerfahrung beeinflusst?

  15. Heute steht uns eine Herausforderung bevor und es gibt kein Computerprogramm. Was wir haben ist das Endergebnis mit dem gewünschten Verhalten, welches wir beobachten können. Aber wie kommt man zu diesem Ergebnis? Welche Blöcke müssen dazu wie zusammengestellt werden?

    Bei der Lösung können wir auf die Bausteine vom letzten Mal zurückgreifen. Allerdings müssen wir dieses Mal die Puzzleteile zuerst selbst „ausschneiden“, bevor wir das Gesamtbild zusammensetzen können.

  16. Hier einige Links zum Digitalkünstler Manfred Mohr aus Deutschland. Einige seiner Werke eigenen sich für die Umsetzung im Programmierunterricht für Anfängerinnen und Anfänger:

    Wikipedia: https://de.wikipedia.org/wiki/Manfred_Mohr_(Künstler)

    Offizielle Webseite: http://www.emohr.com/index.html (50 Jahre Computerkunst)

    YouTube: https://www.youtube.com/user/ManfredEMohr

  17. Der heutige Beitrag ist ausnahmsweise kein Video, sondern ein Bild. Dieses zeigt einen um zusätzliche Funktionen erweiterten Vieleckblock. Dabei kommt eine Liste zum Einsatz, die zuerst aufgebaut und deren einzelne Elemente später verwendet werden. Aber was tut dieser Block genau?

    Ausserdem: Wie seht ihr das, lohnt es sich beim Programmieren von Grafiken mit mathematischem Hintergrund möglichst viel Mathematik einzubinden, auch wenn diese den aktuellen Lernstand der Schülerinnen und Schüler übersteigt? Oder ist es doch besser, alternative Lösungswege einzuschlagen (wie z.B. mit Listen zu arbeiten) und die informatischen Konzepte stärker in den Vordergrund zu rücken?

  18. Das heutige Video geht der Frage nach, wie viel Mathematik oder Technik im Programmierunterricht vermittelt werden soll.

    Wie seht ihr die Code-Qualität im Unterricht? Ist ein Programm gut genug, wenn es leistet, was es soll? Sollte es sich um Code handeln, der optimiert ist? Leicht lesbar?

    Was ist euch wichtig, wenn ihr konkrete Beispiele mit euren Schülerinnen und Schülern im Unterricht behandelt?

  19. Nochmal zu den Tippfehlern der Lernenden: Diese gar nicht als lästig, sonder vielmehr als lehrreich.

    Für mich als Lehrperson ist es auch auf die Schnelle nicht ganz einfach, die entsprechenden Problemstellen zu erkennen. Muss und will ich aber auch nicht.

    Fehler im Code zu finden ist ein wesentlicher Bestandteil des Programmieren, den die Lernenden lernen sollen – zumindest sehe ich das so. Gerade in Partnerarbeit habe ich damit auch sehr gute Erfahrungen gemacht, wenn ich natürlich auch zunächst immer wieder gerufen werde und mehrfach sagen muss: „Diskutiert das bitte zunächst im Team und sucht gemeinsam!“

  20. Ich gebe hier einmal ein niederschwelliges Beispiel für eine 3D-Design-Programmieraufgabe, die ich für meine 5. und 6. letztes Jahr im Lockdown erstellt habe. In dem Fall mit BlocksCAD.
    -> https://hackmd.okfn.de/s/B1hSWVHoL#

    Die Anregungen im Arbeitsblatt sind direkt Entwürfe aus der 5. Klasse – ohne Vorerfahrungen!

    • Auch BlocksCAD habe ich noch nicht gekannt. Bisher bin ich der 3D-Programmierung immer ein wenig ausgewichen, weil sich durch die zusätzliche Dimension die Komplexität noch erhöht.

      An dem von dir vorgestellten Beispiel gefällt mir technisch die Kombination aus visuellem Zugang und der Alternative, die 3D-Welt über Text zu steuern. Pädagogisch überzeugt mich dein Beispiel, weil es den Schülerinnen und Schülern, ausgehend von wenigen Grundvoraussetzungen, buchstäblich eine neue Welt eröffnet, in denen sie analytisches und kreatives Denken kombinieren können.

      Einen ganz herzlichen Dank für diesen und deine weiteren Beiträge.

  21. Heute greifen wir auf bereits beschriebene Blöcke und animieren diese. Dabei verwenden wir den Umstand, dass unser Sehsinn stärker auf Bewegungen als auf statische Bilder reagiert. Für Schülerinnen und Schüler, deren Medienwelt vor allem aus bewegten Bilder besteht, können dadurch die Beispiele an Attraktivität gewinnen, auch wenn es sich programmtechnisch – einmal abgesehen von den erhöhten Leistungsanforderungen an den Computer – um einen Taschenspielertrick handelt.

    Was meint ihr: Inwiefern spielen ästhetische Gesichtspunkte bei der Vermittlung von Programmierung eine Rolle? Nutzt ihr diese gezielt aus? Haltet ihr einen solchen Ansatz für unnötigen Zuckerguss, der vom Wesentlichen ablenkt? Oder nutzt ihr Animationen gar als Anstoss, Programmcode zu optimieren?

  22. Im letzten Video zum asynchronen Barcamp erweitern wir das Beispiel von gestern mit einen alternativen Löschmechanismus. Dabei wird das bisher Gezeichnete nicht komplett gelöscht, sondern es verblasst nur. Den dadurch erzielten Effekt könnt ihr euch im Video selbst anschauen.

Schreibe eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht.

The maximum upload file size: 50 MB. You can upload: image, audio, video, document, spreadsheet, interactive, text, archive, code, other. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded.