Creative Coding mit Processing

Creative Coding
mit Processing
bian Dennler
Programmieren oder Zeichnen?
Von Fabian Dennler
Mit Beiträge von Till Nagel, Dennis Reimann, Eva Gerth u.a.
Creative Commons
CC BY-SA 3.0 CH
Namensnennung - Weitergabe unter
gleichen Bedingungen
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
1
Hintergrund ........................................................................................................................................................................................................................................................................... 2
Didaktische Analyse......................................................................................................................................................................................................................................................................................... 2
Methodische Analyse....................................................................................................................................................................................................................................................................................... 3
Warum Processing? ......................................................................................................................................................................................................................................................................................... 3
Drehbuch – Creative Coding mit Processing ......................................................................................................................................................................................................................................... 4
Grundlagen der Programmierung ............................................................................................................................................................................................................................... 5
Was ist ein Programm?................................................................................................................................................................................................................................................................................... 5
Was ist ein Algorithmus? ............................................................................................................................................................................................................................................................................... 5
Was ist ein Prozess? ......................................................................................................................................................................................................................................................................................... 5
Was ist eine Programmiersprache? .......................................................................................................................................................................................................................................................... 5
Was ist ein Compiler? Was ist ein Interpreter? ................................................................................................................................................................................................................................... 5
Processing Entwicklungsumgebung ........................................................................................................................................................................................................................... 6
Koordinatensystem .......................................................................................................................................................................................................................................................................................... 6
Anweisungen ...................................................................................................................................................................................................................................................................................................... 6
Variablen .............................................................................................................................................................................................................................................................................................................. 6
Schleifen................................................................................................................................................................................................................................................................................................................ 7
Bedingungen ....................................................................................................................................................................................................................................................................................................... 7
Funktionen........................................................................................................................................................................................................................................................................................................... 8
Objekte, Klassen, Methoden und Attribute ............................................................................................................................................................................................................................................ 8
Graphiken, Schriften und Objekte................................................................................................................................................................................................................................ 9
Hand Grafiken..................................................................................................................................................................................................................................................................................................... 9
Linie zeichnen..................................................................................................................................................................................................................................................................................................... 9
Gesicht zeichnen................................................................................................................................................................................................................................................................................................ 9
Objekte Überlagern ........................................................................................................................................................................................................................................................................................ 10
Zufallslinien zeichnen ................................................................................................................................................................................................................................................................................... 10
Schriftarten verwenden ............................................................................................................................................................................................................................................................................... 10
3D, Bewegungen und Kollisionen ............................................................................................................................................................................................................................. 11
3 Dimensionen ................................................................................................................................................................................................................................................................................................. 11
3D Objekte ......................................................................................................................................................................................................................................................................................................... 12
3D Oberflächen und Licht............................................................................................................................................................................................................................................................................ 12
Objekte bewegen ............................................................................................................................................................................................................................................................................................. 12
Objekte kollidieren ......................................................................................................................................................................................................................................................................................... 12
Bilder verwenden ............................................................................................................................................................................................................................................................. 13
Einzelbilder speichern .................................................................................................................................................................................................................................................................................. 13
Bilder laden ....................................................................................................................................................................................................................................................................................................... 13
Pixel-Array der Zeichenfläche ................................................................................................................................................................................................................................................................... 14
Bilder verarbeiten .......................................................................................................................................................................................................................................................................................... 14
Audio und Video verwenden....................................................................................................................................................................................................................................... 15
Frequenz und Tonhöhe in Kürze.............................................................................................................................................................................................................................................................. 15
Amplitude und Lautstärke in Kürze........................................................................................................................................................................................................................................................ 15
Nicht die Ohren kaputt machen! .............................................................................................................................................................................................................................................................. 15
Musik abspielen mit Minim ........................................................................................................................................................................................................................................................................ 15
Mikrophon Lautstärke visualisieren ...................................................................................................................................................................................................................................................... 15
Video abspielen................................................................................................................................................................................................................................................................................................ 16
Live Video einbinden ..................................................................................................................................................................................................................................................................................... 16
Sketches im Web mit processing.js .......................................................................................................................................................................................................................... 17
Online-Journalismus ...................................................................................................................................................................................................................................................................................... 17
HTML5 Gerüst .................................................................................................................................................................................................................................................................................................. 17
Processing Code............................................................................................................................................................................................................................................................................................... 17
OpenProcessing.org ....................................................................................................................................................................................................................................................................................... 17
Weitere nützliche Bibliotheken ................................................................................................................................................................................................................................. 18
PDF erstellen..................................................................................................................................................................................................................................................................................................... 18
OpenGL Bibliothek ......................................................................................................................................................................................................................................................................................... 18
GSVideo Bibliothek......................................................................................................................................................................................................................................................................................... 18
Aufgabestellungen ........................................................................................................................................................................................................................................................... 19
Die Methodik der generativen Kunst ..................................................................................................................................................................................................................................................... 19
Zufallslinie.......................................................................................................................................................................................................................................................................................................... 19
Zufallsquadrate ................................................................................................................................................................................................................................................................................................ 19
Spirale zeichnen .............................................................................................................................................................................................................................................................................................. 19
Zeichenprogramm .......................................................................................................................................................................................................................................................................................... 19
Rotationen.......................................................................................................................................................................................................................................................................................................... 19
Text einlesen ..................................................................................................................................................................................................................................................................................................... 19
Bilder laden und anzeigen........................................................................................................................................................................................................................................................................... 20
Projektrecherche............................................................................................................................................................................................................................................................................................. 20
Projektarbeit ..................................................................................................................................................................................................................................................................................................... 20
Projektbericht (Eigenbeurteilung) .......................................................................................................................................................................................................................................................... 21
Verhaltensbeobachtungen (Fremdbeurteilung) ............................................................................................................................................................................................................................... 21
Strukturlegetechnik und ConceptMap ................................................................................................................................................................................................................................................... 22
Indikatoren Raster und Bewertungen .................................................................................................................................................................................................................... 23
Indikatoren Programmieren nach Vorgaben (Programming Basics) ...................................................................................................................................................................................... 23
Indikatoren Präsentation ............................................................................................................................................................................................................................................................................ 24
Indikatoren Methodenkompetenzen...................................................................................................................................................................................................................................................... 25
Indikatoren Selbst- und Sozialkompetenzen ...................................................................................................................................................................................................................................... 26
Quellen .................................................................................................................................................................................................................................................................................. 27
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
2
Hintergrund
Der Ansatz ist ein Handlungsorientierter Unterricht, Lernende zentrierter Unterricht, der die Problemlösefähigkeit, Selbsttätigkeit und Eigenverantwortung in den Vordergrund stellt.
Die Unterrichtseinheit gliedert sich in drei wesentliche Phasen:
1. Die theoretische und praktische Erschliessung des Themenfeldes, bei der für alle Lernenden ein Grundstock an Fähigkeiten angelegt werden soll, auf den sie während der folgenden
Phasen zurückgreifen können.
2. die Kooperative Lernphase, bei der unterschiedliche Gruppen Teilthemen erarbeiten und den
Mitlernenden erklären.
3. die Phase der Projektarbeit und Produktion bei der die Arbeitsergebnisse in einen grösseren Kontext, ein geeignetes Medium implementiert werden, das den Ansprüchen eines Software-Projekts gerecht wird
Didaktische Analyse
In der Beruflichen Bildung Informatiker/Innen wird das Thema Programmieren nach Vorgaben
behandelt. Der Schlüssel für das Verständnis von Programmierung liegt im Erlernen der Formulierung von Programmanweisungen - der sog. Syntax - und der logischen Strukturierung von Programmabläufen, also dem Gestalten von Algorithmen.
Auch Visuelles Ausdrucksvermögen, die Fähigkeit, Lösungsstrategien zu entwickeln, ist nicht nur
eine Frage von Bildung, sondern auch im Alltag und Berufsleben höchst wertvoll und anwendbar.
Die technische Perspektive auf die Themen Bild oder Audio schulen den Blick im Umgang mit digitalen
Medien. Diese Auseinandersetzung mit digitalen Medien findet vor allem aktiv statt, indem wir Design-Projekte mit konkreten Ergebnissen produzieren.
Auf Grund des projekthaften Charakters richten sich die Unterrichtslektionen in erster Linie an Fächer, die ein projektorientiertes Profil aufweisen. Aus Gründen didaktischer Reduktion und dem Ziel,
ein gesichertes Grundverständnis in der Erzeugung einfacher Formen zu vermitteln, werden während
der Unterrichtsstunden, die den Umgang mit Processing einführen, simple geometrische Formen und
deren Manipulation in Bezug auf Grösse, Lokation, Farbe und Transparenz vorgestellt und erarbeitet.
Hinzu kommt, dass die Arbeitsergebnisse stets in Form eines druckbaren Ausgabeformats (PDF) abgegeben werden. Die Unterrichtssequenz ist auf die Entwicklung der kognitiven Strategien (Fachkompetenz), der metakognitiven Strategien (Methodenkompetenz) und der motivationalen Strategien
(Selbstkompetenz) ausgerichtet. Durch die Indikatoren Raster wird versucht, die Leistungsbeurteilung
transparenter, effizienter und objektiver zu machen, Lernenden wirksames Feedback zu geben sowie
das aktive, selbstgesteuerte Lernen zu unterstützen.
Methoden-, Sozial- und Selbstkompetenzen
Das Indikatoren Raster der Methoden-, Sozial- und Selbstkompetenzen sind als Mittel gedacht, Erwartungen an die Methoden-, Sozial- und Selbstkompetenzen auszudrücken, was von den Lernenden im
Unterricht erwartet wird. Damit können die Transparenz von Lernerwartungen erhöht und mögliche
Defizite früh angesprochen werden.
Fachkompetenzen
Weil es die Informatik Berufslehre mit mehreren Schwerpunkten gibt, werden die beruflichen Handlungskompetenzen in Module mit Indikatoren Raster festgelegt.
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
3
Methodische Analyse
In der ersten Phase der Unterrichtseinheit spielt der Einzelunterricht, in Form von einem Leitprogramm und adaptivem Lernen eine übergeordnete Rolle. Ziel ist es, die Lernenden in kurzer Zeit
auf ein Niveau zu bringen, von dem aus sie einen geschärften Blick und ein analytisches Handwerkszeug für die weitere praktische Tätigkeit erhalten.
Während der Projektphase können die Lernenden ihre erlangten Fähigkeiten erproben und eigene
Ideen umsetzen. Neben der Findung eines geeigneten Projektgegenstandes wird ihnen auch aus
organisatorischer Hinsicht ein hohes Mass an Teamfähigkeit abverlangt.
Die abschliessende Präsentation gibt den Lernenden die Möglichkeit, sich vor einem Publikum zu
präsentieren, die Ergebnisse, erlebten Widerstände und Erfahrungen zu reflektieren und in Absprache
mit allen Beteiligten das Vorhaben für die Phase der Produktion zu diskutieren.
Lernprozess Dokumentation
Durch die Prozessdokumentation kann sich die Lernbegleitung ein Bild von den Entwicklungen in den
verschiedenen Teilbereichen machen. Lernenden können sich über die Ziele und Besprechungsergebnisse informieren. Entscheidungen können im Projektverlauf nachvollzogen werden. Als Typische Dokumente dienen zur Dokumentation:
- Besprechungsprotokoll, Lernjournal
- Start/Stop/Weiter, Lernmatrix
Warum Processing?
Es gibt viele Gründe, die dafür sprechen, Processing als Programmierumgebung zu lernen:







Die Umgebung konzentriert sich auf die Eingabe von Text. Man muss keine speziellen GUIElemente lernen.
Es ermöglicht Interessierten ohne Programmierhintergrund einen schnellen und simplen Einstieg in das kreative Arbeiten mit Code. Ohne aufwendige Vorbereitung erlaubt Processing das
Zeichnen von grafischen Elementen und die Verwendung von Input, z.B. durch Maus und Tastatur.
Wir programmieren in Java, bzw. einer vereinfachten Version davon. Dadurch halten wir uns
an allgemein anerkannte Programmierstandards und jede/r kann nach seinen/ihren Wünschen und Fähigkeiten schrittweise zu reinem Java übergehen.
Processing ist ein Open source project. Es kostet also nichts, Processing zu installieren und es
zu verwenden. Ausserdem tragen viele Programmierer zur Erweiterung der Möglichkeiten von
Processing bei.
Mit Arduino, bzw. Wiring gibt es Umgebungen für die Programmierung von Mikrocontrollern,
die ähnlich wie Processing funktionieren.
Processing läuft unter Windows, Mac OS X und Linux.
Mit Processing.js kann man Processing-Files auch in Webbrowsern laufen lassen unter Einhaltung von JavaScript- und Html5-Konventionen.
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
4
Drehbuch – Creative Coding mit Processing
5 Minuten Einstieg: Max Planck Research Networks Video
25 Minuten Installation/Einführung Processing
15 Minuten Brainstorming
 Erwartungen / Vorkenntnisse
90 Minuten Einzelarbeit: Ausgangslage, Entwicklungsumgebung
90 Minuten Gruppenarbeit/Gruppenpuzzle
 G1: 3D, Bewegungen und Kollisionen
 G2: Bilder
 G3: Audio und Video
 G4: Sketches im Web: processing.js
 (Weitere Nützliche Bibliotheken)
45 Minuten Präsentation/Austausch: Experten
10 Minuten Wissenssicherung: Zufallsquadrate, Spirale
90 Minuten Einzelarbeit: Projektrecherche
180 Minuten Projektarbeit
90 Minuten Präsentation des Produkts: Projekte
Dauer
Die Dauer des Moduls umfasst ca. 10 bis 15 Unterrichtslektionen, wobei die Zeit abhängig von den
möglichen Vorkenntnissen der Klasse ist.
Lernziele und Handlungskompetenzen
 Ich kann Quellcode verständlich Ausarbeiten (Variablenname, Struktur, Kommentare), um die
Nachvollziehbarkeit des Programms sicher zu stellen
 Ich kann Quellcode analysieren und Veränderungen nachvollziehen
 Ich dokumentiere meine Scripts aus Entwickler- und Anwendersicht
 Ich kann Ablaufstrukturen mit Hilfe einer Script Sprache umsetzen
 Ich kann mit einer JavaScript Bibliothek in ein HTML5 <canvas> Element zeichnen, Text darstellen und Bilder anzeigen
 Ich entwickle ein grundlegendes Programmierverständnis
 Ich kennen Algorithmen zum Lösen von Aufgaben und Problemen aus verschiedenen Anwendungsgebieten
 Ich kann gegebene Algorithmen lesen und interpretieren
 Ich kann Algorithmen entwerfen und realisieren mit den algorithmischen Grundbausteinen
 Ich kann Algorithmen geeignet darstellen
 Ich kann ein Programm von der Idee aus umsetzen
 Ich entwerfe, implementiere und teste Programme
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
5
Grundlagen der Programmierung
Processing wurde als Programmiersprache speziell für Gestalter und Künstler entwickelt. Sie eignet
sich speziell für die Programmierung von Bildern, Animation und Sound und führt sehr schnell zu visuell ansprechenden Resultaten.
Mit Hilfe der Processing Entwicklungsumgebung können Programme geschrieben und ausgeführt
werden. Darüber hinaus hilft die Umgebung noch bei weiteren Aufgaben: Etwa Fehler im Code zu finden, oder das Programm für das Web zu exportieren. Processing ist Open Source Software, und kann
frei unter http://processing.org/download/ herunter geladen werden.
Was ist ein Programm?
Programme sind Algorithmen in maschinenlesbarer Form - also die Beschreibung eines Rechenvorgangs. Programme sind ausführbare Einheiten, bestehend aus einer Abfolge von Anweisungen/Statements.
Ein Programm liegt meistens als ausführbare Datei vor und wird zur Verarbeitung in den Arbeitsspeicher des Computers geladen.
Was ist ein Algorithmus?
Ein Algorithmus ist eine aus endlich vielen Schritten bestehende eindeutige Handlungsvorschrift zur
Lösung eines Problems oder einer Klasse von Problemen. Algorithmen sind eines der zentralen Themen der Informatik und Mathematik. In Form von Computerprogrammen und elektronischen Schaltkreisen steuern sie Computer und andere Maschinen. Für Algorithmen gibt es unterschiedliche formale Repräsentationen. Algorithmen können in Struktogramme, Programmablaufplänen und Datenflussdiagramme grafisch dargestellt werden.
Lesen Sie dazu noch http://dennisreimann.de/studies/programm_und_prozess/algorithmus und
http://www.grundstudium.info/algorithmen/
Was ist ein Prozess?
Der Ablauf eines Programms wird als Prozess bezeichnet - ein Prozess ist also ein Programm in Ausführung. Die Verarbeitung des Programms findet auf dem Prozessor des Computers statt. Jedes ausgeführte Programm beansprucht also den Prozessor und Ressourcen des Systems, wie z.B. Speicher.
Was ist eine Programmiersprache?
Eine Programmiersprache ist eine Mensch-Computer-Schnittstelle - dabei handelt es sich um ein formales Regelwerk mit definierter Syntax, welche es erlaubt, einseitig mit dem Rechner zu kommunizieren und ihm Anweisungen zu geben. Programmiersprachen sind auf der Grammatik- und Syntaxseite sehr fehleranfällig, da sie keine Toleranz erlauben.
Was ist ein Compiler? Was ist ein Interpreter?
Ein Compiler übersetzt Programmcode in ausführbare Programme, sogenannten Maschinencode. Diese Übersetzung ist maschinen- bzw. prozessorspezifisch, so dass bestimmte Rechner das Programm
ausführen können. Interpreter hingegen verarbeiten den Programmcode zur Laufzeit, so dass keine
vorangegangene Übersetzung notwendig ist.
Es gibt auch Mischformen zwischen Compiler und Interpreter - in Java wird beispielsweise der Programmcode in Bytecode vorkompiliert und auf der ausführenden Maschine durch die Java Virtual Machine interpretiert.
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
6
Processing Entwicklungsumgebung
Processing basiert auf der höheren Programmiersprache Java, vereinfacht deren Schreibweise und
minimiert so den Schreibaufwand bei Programmieren beachtlich. Dabei liegt der Schlüssel für das Verständnis von Programmierung liegt im Erlernen der Formulierung von Programmanweisungen - der
sog. Syntax - und der logischen Strukturierung von Programmabläufen, also dem Gestalten von Algorithmen.
Koordinatensystem
Processing verwendet ein kartesisches Koordinatensystem mit dem Nullpunkt in der oberen linken
Ecke.
Siehe auch Zeichenebene und Koordinatensystem http://www.mathe-online.at/mathint/zeich/i.html
Anweisungen
Mit Hilfe von Anweisungen teilen wir dem Computer mit, dass er bestimmte Dinge ausführen soll. Im
Folgenden werden die ersten Zeichen- und Farbanweisungen in Processing vorgestellt.
 size Setzt die Grösse des Zeichenbereichs.
 background Setzt die Hintergrundfarbe der Zeichenfläche.
 point Zeichnet einen Punkt
 line Zeichnet eine Linie
 rect Zeichnet ein Rechteck
 ellipse Zeichnet eine Ellipse
 stroke Setzt die aktuelle Farbe des Strichs
 fill Setzt die aktuelle Füllfarbe
Variablen
Eine Variable ist ein Zeiger zu einer Speicherstelle im Computer. Computer verarbeiten immer nur
eine Anweisung pro Zeit; mit Hilfe von Variablen können wir also Informationen an einem Schritt im
Programm speichern, und an einem späteren wieder benutzen. Jede Variable hat einen bestimmten
Typ, der vor der Benutzung explizit festgelegt werden muss.
In Processing wird eine Variable definiert, in dem zunächst der Typ, dann der Name und schliesslich
der Anfangswert angegeben werden.
Spezielle Variablen
Processing definiert einige speziellen Variablen, die wir direkt verwenden können, ohne sie selbst deklarieren zu müssen. Dadurch ermöglicht Processing häufig wiederkehrende Aufgaben zu vereinfachen.
 mouseX: Die horizontale Position des Mauszeigers
 mouseY: Die vertikale Position des Mauszeigers
 width: Die Weite des Zeichenbereichs
 height: Die Höhe des Zeichenbereichs
 mousePressed: Eine boolean-Variable, die den Wert true hält, wenn die Maustaste gedrückt
ist, und false, wenn sie nicht gedrückt ist
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
7
Schleifen
Mit Schleifen kann man unter anderem den Programmablauf steuern. Wir werden uns jetzt speziell
mit der for-Schleife beschäftigen. Damit kann man den zu schreibenden Code beträchtlich verkürzen,
was zu weniger Fehlern und besserem Überblick führt.
Neben der for-Schleife gibt es auch noch die Möglichkeit einer while- Schleife. Sie wird vorwiegend
in Fällen eingesetzt, in denen man von vorne herein nicht weiss, wie viele Schleifendurchläufe es
geben soll. Die while -Schleife wird durchlaufen, solange die jeweilig Bedingung erfüllt ist.
Quellcode
Struktogramm
Flussdiagramm
while (i>10) {
Anweisungen
}
Bedingungen
Bis jetzt sind unsere Programme immer von vorne nach hinten durchgelaufen, ohne auf irgendetwas
zu reagieren. Die if – Anweisung gibt uns die Möglichkeit Bedingungen für den weiteren Verlauf des
Programms zu setzen. Das können true/false -Abfragen oder der Vergleich zweier Zahlen sein. Es
sollten bei Zahlen immer nur Ganzzahlen (int) miteinander verglichen werden. Für Anweisungen, die
nur ausgeführt werden sollen, wenn bestimmte Bedingungen erfüllt sind, empfiehlt sich folgende
Schreibweise:
Quellcode
Struktogramm
Flussdiagramm
if (test) {
Anweisungen
}
Vergleichsoperatoren
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
8
Funktionen
Funktionen dienen dazu, oft wiederkehrende Codebereiche (Berechnungen, Formen usw.) nur einmal
eingeben zu müssen, und sie dann immer wieder aufrufen zu können. In der Regel geben Funktionen
etwas zurück (das Resultat der Berechnung). Deshalb werden die Rückgabewerte von Funktionen
auch einem Datentyp zugeordnet (int, float usw.)
Objekte, Klassen, Methoden und Attribute
Die objektorientierte Programmierung (kurz OOP) ist ein auf dem Konzept der Objektorientierung
basierendes Programmierparadigma. Die Grundidee dabei ist, Daten und Funktionen, die auf diese
Daten angewandt werden können, möglichst eng in einem sogenannten Objekt zusammenzufassen
und nach aussen hin zu kapseln, so dass Methoden fremder Objekte diese Daten nicht versehentlich
manipulieren können.
Zur besseren Verwaltung gleichartiger Objekte bedienen sich
die meisten Programmiersprachen des Konzeptes der Klasse.
Klassen sind Vorlagen, aus denen Instanzen genannte Objekte
zur Laufzeit erzeugt werden. Man kann sich die Erzeugung von
Objekten aus einer Klasse vorstellen wie das Fertigen von Autos
aus dem Konstruktionsplan eines bestimmten Fahrzeugtyps.
Klassen sind die Konstruktionspläne für Objekte. Die Klasse entspricht in etwa einem komplexen Datentyp wie in der prozeduralen Programmierung.
Häufig wird der Begriff Methode synonym zu den Begriffen Funktion oder Prozedur aus anderen Programmiersprachen gebraucht. Die Funktion oder Prozedur ist jedoch eher als Implementierung einer
Methode zu betrachten.
Im täglichen Sprachgebrauch sagt man auch „Objekt A ruft Methode m von Objekt B auf.“
Objekte (Fenster, Buttons, Laufleisten, Menüs, …) besitzen verschiedene Eigenschaften (Farbe, Grösse,
Ausrichtung, …). Diese Eigenschaften eines Objekts heissen Attribute.
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
9
Graphiken, Schriften und Objekte
Hand Grafiken
1. Nehmen Sie ein Blatt Papier und zeichnen Sie darauf zwei 10×10 cm grosse Rechtecke.
2. Zeichnen Sie in eines dieser Rechtecke eine (einfache) Grafik, ohne dass der Nachbar diese sehen kann.
3. Beschreiben Sie diese Zeichnung nun ihrem Nachbarn.
4. Vergleichen Sie ihre Grafiken miteinander. Wo gibt es Gemeinsamkeiten, wo Unterschiede?
Was gab es für Schwierigkeiten bei der Übermittlung?
5. und vice versa …
Linie zeichnen
Die Struktur eines Processing Programm (Sketch) besitzt im Wesentlichen zwei Methoden:


setup() wird direkt nach dem Programmstart einmalig ausgeführt.
draw() wird nach dem Ablauf von setup() ins Leben gerufen und läuft in einer Schleife bis
das Fenster geschlossen wird.
Wir verwenden die Anweisung line(x1, y1, x2, y2) so, dass zwei sich überkreuzende Linien
gezeichnet werden.
Gesicht zeichnen
Wir nutzen die verschiedene Zeichen- und Farbanweisungen und zeichnen ein Gesicht.
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
10
Objekte Überlagern
Wir zeichnen ein fast nicht sichtbares rotes Quadrat in die Zeichenfläche. Durch die Überlagerungen
der einzelnen Objekte addieren sich die Transparenten Objekte und das Quadrat erhält eine bestechende Farbe.
frameRate() erlaubt das Steuern der Bildfrequenz (wie oft der draw() Block pro Sekunde abgearbei-
tet wird) durch Angabe einer Ganzzahl. Für Processing stellt es jedoch nur einen Richtwert dar - Abweichungen sind möglich.
Zufallslinien zeichnen
Wir schreiben ein Sketch, das Linien mit zufällig gesetzten Anfangs- und Endpunkten zeichnet.
Schriftarten verwenden
In Processing können auch Schriftarten eingesetzt werden, um Texte darzustellen. Bevor man Text in
Processing ausgeben kann, muss man eine beliebige Schrift zuerst in das .vlw Format konvertieren
(Processing –> Tools –> Create Font).
Bei diesem Vorgang werden der oder die Buchstaben in der angegebenen Grösse gerendert. D.h. sie
liegen dann als Rastergrafik vor, was zur Folge hat, dass sie nicht mehr beliebig skalierbar sind, sonder
man vorher überlegen muss, wie gross die Zeichen sein müssen. Die Rastergrafiken werden in einer
.vlw – Datei im Sketch- Ordner des aktuellen Projektes gespeichert.
Um im Programm auf die Zeichen zugreifen zu können, gibt es einen eigenen Datentyp, nämlich
PFont. Um Text auf dem Bildschirm ausgeben zu können, muss man eine Variable (genau genommen
ein Objekt) vom Typ PFont erstellen und dann mit der Funktion LoadFont() die Zeichen laden. Mit
textFont() muss die aktuelle Schrift ausgewählt werden. Um den Text dann anzeigen zu können
benutzt man die Funktion text().
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
11
3D, Bewegungen und Kollisionen
3 Dimensionen
In Processing ist es auch möglich in 3D zu arbeiten. Dies gibt uns die Möglichkeit alle bisher programmierten Bilder und Animationen um eine Dimension zu erweitern.
Im Gegensatz zu 2D, wo wir nur die Achsen x und y haben, kommt in 3D eine z-Achse dazu, die vom
Ursprung (links oben) aus direkt aus dem Bildschirm heraus zeigt.
Damit wir die 3. Dimension nutzen können, müssen wir Processing sagen, dass wir nun in 3D arbeiten
wollen und einen entsprechenden Renderer wählen.
Einen letzten wichtigen, und manchmal etwas verwirrenden Punkt stellt die Tatsache dar, dass der
Betrachter in einer 3-dimensionalen Darstellung ja auch seine Position haben muss. Um das zu verdeutlichen spielen wir mit der Funktion translate() im folgenden Beispiel.
translate(width/2,height/2, 0);
Mit dieser Zeile verschieben wir das Koordinatensystem von links oben in die Mitte des Programmfensters. Die 0 als z-Koordinate bewirkt, dass wir eine Szene so betrachten, als ob wir in 2D arbeiten
würden. Wenn wir jetzt aber eine negative Zahl als z-Koordinate wählen, werden die gezeichneten
Objekte kleiner, da wir den Ursprung des Koordinatensystems von uns weg bewegt haben.
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
12
3D Objekte


sphere(int size); Zeichnet eine Kugel mit der Grösse size.
box(int size); Zeichnet einen Würfel mit der Grösse size
Sollten komplexere Formen benötigt werden, kann man diese entweder über beginShape(),
vertex(x,y,z) und endShape() in Processing erstellen, oder man importiert fertige 3D Objekte (*.obj) mit Hilfe der loadShape(*.obj) Funktion.
3D Oberflächen und Licht
Betrachtet man ein reales Objekt, z.B. einen einfärbigen Würfel, so stellt man fest, dass alle Seiten unterschiedliche Farbschattierungen aufweisen. Das liegt am Spiel zwischen Licht und Schatten. Dieses
Spiel gilt es so gut, wie möglich zu immitieren, will man realitätsnahe 3D Darstellungen generieren.
Generell müssen Lichtquellen in jedem draw() Durchlauf, und nicht in setup() aufgerufen werden.
Die einfachste Möglichkeit in Processing mit Licht zu arbeiten bietet die Funktion lights()
Objekte bewegen
Um eine Bewegung nicht abrupt ablaufen zu lassen gibt es eine einfache Technik – das “Easing”. Wird
ein Objekt nicht sofort an seinen Endpunkt bewegt, sondern nur einen bestimmten Prozentwert in
dessen Richtung. Das führt zu einer harmonischen runden Bewegung.
Konkret wird der Unterschied in der x-Position von Objekt und Mauszeiger errechnet (dx).
Wenn dieser Wert grösser ist als 1, dann wird ein neuer Wert für die Objektposition berechnet.
Lesen Sie die Artikel aus http://btk.tillnagel.com/creative-coding-1/05-bewegungen.html
Objekte kollidieren
Wenn wir eine Kollision in Processing erkennen wollen, d.h. das
Aufeinandertreffen zweier visueller Elemente, müssen wir bestimmte Bedingungen prüfen. Und zwar, ob diese beiden Elemente
kollidiert sind, also ob sie sich an gleicher Position befinden.
Wenn x grösser/gleich der Weite ist, dann bedeutet dies, dass der
Punkt den rechten Rand berührt, er also mit dem Rand kollidiert. In
diesem Fall soll die Geschwindigkeit umgedreht werden, so dass
sich der Punkt danach nach links bewegt.
Lesen Sie noch den Artikel http://btk.tillnagel.com/creative-coding-1/06-bewegungen2.html
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
13
Bilder verwenden
Einzelbilder speichern
Manchmal möchte man seine Processing Kreation als Bilder weiterverwenden, um es beispielsweise
bei Flickr hochladen zu können.
Dazu sollte man sein Processing Programm folgendermassen aufbauen:
Mit der Leertaste kann man nun seine Aufnahme beginnen. Vorsicht: Das kann ziemlich hohe Last für
die Festplatte bedeuten. Ist man mit der Aufnahme fertig, wechselt man in den Ordner des Sketches.
Jedes Frame steht als Bild zur Verfügung.
Bilder laden
In der digitalen Bildbearbeitung werden computergestützt Bilder bearbeitet. Dies umfasst die Analyse,
die Manipulation, die Speicherung und die Anzeige von (Raster-)Bildern. Die Bildbearbeitung kommt
in vielen Gebieten zum Einsatz, sei es um die Helligkeit eines Fotos nachzuverbessern, um einen Ausschnitt perspektivisch zu korrigieren, oder eine eingescannte Grafik zu schärfen.
Um Bilder in Processing verwenden zu können, müssen wir diese in einer Variable speichern. Dazu
verwenden wir den neuen Datentyp PImage. (Dies ist im Gegensatz zu int, float oder boolean
kein primitiver, sondern ein Objekt-Datentyp, was auch an der Grossschreibung erkennbar ist.)
Mit background(foto); wird das Bild als Hintergrund verwenden. Dabei sollten die Grössen übereinstimmen. Die Bilder sollten dabei im data-Ordner unterhalb des Programmordners liegen. (Nutze
den Menüpunkt "Sketch > Show Sketch Folder", um zum Programmordner zu gehen.)
Nachdem mit loadImage() ein Bild in ein PImage geladen wurde, kann die Grösse des Bildes abgefragt werden. Dazu können die Eigenschaften width und height verwendet werden.
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
14
Pixel-Array der Zeichenfläche
Um schneller arbeiten zu können, können statt mit Zeichenanweisungen auch direkt die Farben des
sichtbaren Felds manipulieret werden. So können einzelne Pixel über das Array pixels[] verändert
werden, anstatt mit point(x, y). Das Pixel-Array enthält für alle Pixel des Zeichenbereichs die
Werte (vom Datentyp color). Bevor mit dem Array gearbeitet werden kann, müssen die aktuellen
Werte, d.h. die aktuell zu sehenden Farben auf der Zeichenfläche, mittels loadPixels() geladen
werden. Nachdem man die Daten geändert hat, muss updatePixels() aufgerufen werden, um die
Änderungen auch sichtbar zu machen.
Bilder verarbeiten
Neben dem einfachen Darstellen des Bildes kann man auch Pixel um Pixel verändern, ähnlich einem
Photoshop Filter. Ein Bild besteht aus den einzelnen Bildpunkten, die auf einer Fläche angeordnet
sind. Auf die einzelnen Farbwerte des Zeichenbereichs kann über die Anweisung get(x, y) zugegriffen werden.
Die einzelnen Bildpunkte eines PImage-Bildes sind in einem Pixelarray gespeichert. In Processing
kann man auf die Pixel via img.pixels[i] zugreifen. In diesem Array sind die Farbwerte jedes
Bildpunktes allerdings einfach, d.h. linear hintereinander abgelegt.
Zur besseren Veranschaulichung dieses Pixelarrays hier ein Beispiel, dass ein Bild nicht direkt zeichnet, sondern an zufällige Positionen Kreise zeichnet, die von einem an dieser Stelle liegenden Farbwert
beeinflusst werden.
Je mehr und je feinere Kreise gezeichnet werden, desto besser kann das Original-Bild erkannt werden.
Analysieren und Dokumentieren Sie das Script.
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
15
Audio und Video verwenden
Frequenz und Tonhöhe in Kürze
Schallwellen besitzen eine sinusförmige Form. Wellenlänge
ist der Abstand zweier benachbarter Punkte gleichen Pegels.
Die Frequenz beschreibt die Anzahl der Wellen je Sekunde.
Töne sind Schwallwellen mit bestimmten Frequenzen. Je
höher die Frequenz, desto höher der Ton. Ein Klang sind
mehrere Töne übereinander gelegt.
Amplitude und Lautstärke in Kürze
Die Amplitude eines Tons wird als die Höhe der Welle repräsentiert. Ein lauter Ton hat eine hohe Welle und eine grosse
Amplitude. Und andersrum: eine kleine Amplitude repräsentiert
einen leiseren Ton. Die Lautstärke wird in Dezibel gemessen.
Nicht die Ohren kaputt machen!
Schall wird in Wellen übertragen, die entstehen, wenn bei der Klangerzeugung eines Objekts, beispielsweise eines Stereolautsprechers, die umgebende Luft verdrängt und dadurch der Luftdruck geringfügig verändert wird. Zur Beschreibung von Schallwellen verwenden Akustikexperten Begriffe wie
Frequenz und Amplitude. Lesen Sie den Online Artikel http://www.apple.com/de/sound/
Musik abspielen mit Minim
Analysieren Sie das Beispiel PlaySound_Minim und verändern Sie die abgespielte Sounddatei.
Nutzen Sie die audioPlayer.mix.get(sampleNumber) Funktion, und stellen Sie die Wellen in
Echtzeit dar. Nutzen Sie audioPlayer.left und audioPlayer.right um eine StereoVisualiserung zu erzeugen.
Mikrophon Lautstärke visualisieren
Analysieren Sie das Beispiel MicAudioLevel. Erstellen Sie ein Struktogramm, welches den Prozess
der draw Methode veranschaulicht. Nutzen Sie das Mikrophon als Steuerelement. So können Sie etwa
die Farbe eines Elements von der Umgebungslautstärke abhängig machen. Oder eine Grafik über die
Tonhöhe beeinflussen. Oder oder ...
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
16
Video abspielen
Wir wollen ein fertiges Video in Processing abspielen. Dazu muss zunächst die Bibliothek importiert
werden. Dann erzeugt man ein Objekt der Klasse Movie und gibt beim Konstruktor den Namen des
Quicktime-Videos an (das – wie gehabt – im data-Ordner liegen muss).
Live Video einbinden
Wenn ein Live-Videosignal verwendet werden soll, muss statt Movie die Klasse Capture eingesetzt
werden. So liefert beispielsweise die Kamera in den iMacs oder eine per USB angeschlossene Webcam
solch ein Live-Videosignal.
Beim Erzeugen des neuen Capture-Objekts wird die Weite und Höhe des aufzunehmenden Bildes
angegeben. Mit Hilfe der Funktion captureEvent() kann nun auf das jeweils neue Bild zugegriffen
werden (Zeilen 17-19).
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
17
Sketches im Web mit processing.js
Mithilfe der processing.js Bibliothek ist es möglich Processing ohne Einsatz von Java-Applets auf
Websites einzubinden. Die Javascript Bibliothek erweitert das HTML5 canvas -Element um weitere
Funktionen, wie die Möglichkeit, Formen und Animationen zu erstellen – und das direkt im
HTML/Javascript-Code.
Online-Journalismus
Online-Journalismus ist so viel mehr als nur Text, Bild, Foto, Audio oder Video. Erst wenn Medien
kombiniert werden, ergeben sich Geschichten, wie sie nur im Web gezeigt und nicht in der Zeitung, im
Fernsehen oder im Radio dargestellt werden können. Mit Content Management Systemen und Tools,
die in Redaktionen eingesetzt werden, stösst man allerdings schnell an seine Grenzen, wenn man einzigartige, auf bestimmte Geschichten zugeschnittene Darstellungsformen haben will. Lesen Sie den
vollständigen Artikel http://www.digitalerwandel.de/tag/processing-js/
HTML5 Gerüst
Den Ausgangspunkt bildet eine HTML5-Datei mit der Einbindung von Processing.js. Ebenso findet hier die Deklaration des canvas Element statt.
Processing Code
Der eigentliche Processing Code: sketches/test.pde
OpenProcessing.org
Es gibt viele Kurse und Workshops auf der ganzen Welt, die Verarbeitung zu unterrichten, und OpenProcessing.org ist ein Gastgeber für viele von ihnen, indem Professoren und Studenten auf dem Web,
und mit der Welt teilen, wie sie Verarbeitungszeit studieren zusammen.
Suchen Sie einige Sketches die Ihnen gefallen und analysieren sie Sie.
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
18
Weitere nützliche Bibliotheken
Mit Hilfe von Bibliotheken kann man erweiterte Funktionalitäten verwenden, die Processing nicht
direkt zu Verfügung stellt. Eine Bibliothek besteht aus Anweisungen und Klassen, die benutzt
und/oder erzeugt werden können. Der Code dieser Bibliotheken ist – wie selbst geschrieben – in Processing (oder Java) programmiert. Der Vorteil an einer Bibliothek ist, dass diese auf einfache Weise
eingebunden werden kann.
Mit solchen Libraries wird es über Grafikerzeugung und Bildbearbeitung hinaus möglich, etwa Audio
und Video zu benutzen oder mit externen Geräten zu kommunizieren. Auch das Einlesen von Daten
aus dem Internet und viele weitere Manipulationen werden erleichtert.
Wir können auch zusätzliche Bibliotheken aus weiteren Quellen verwenden. Diese sollten in Speicherort der Processing Sketches abgelegt werden.
Um eine Bibliothek verwenden zu können, muss sie im Processing-Programm hinzugefügt werden.
Dies geschieht mit einer einzelnen Zeile, in der die Bibliothek importiert wird. Diese kann man entweder selbst in den Code, oder über das Menü "Sketch > Import Library" hinzugefügt werden.
PDF erstellen
In Processing können Sie auch PDF-Dateien direkt erzeugen. Die Grafikanweisungen werden als Vektorgrafiken im PDF gespeichert und können so beliebig skaliert werden und in sehr hohen Auflösungen gedruckt werden. Zur Erstellung von PDFs muss die Bibliothek importiert werden.
In Zeile 4 des Beispiels wird in der size() Anweisung gesagt, dass die Grafik als PDF erzeugt werden
soll, und zwar in einer Datei mit Namen "circles.pdf". (Dabei wird sich kein Ausgabefenster öffnen; es
wird nur das PDF erstellt.)
OpenGL Bibliothek
Um zum Beispiel die grafischen Anweisungen schneller mit Hilfe der Grafikkarte ausführen zu können,
fügt man folgende Zeile am Anfang des Programms hinzu:
import processing.opengl.*;
GSVideo Bibliothek
Öffnen Sie das Beispiel ASCIIVideo.pde. Weshalb läuft die Anwendung nicht?
http://gsvideo.sourceforge.net/examples/Capture/AsciiVideo/AsciiVideo.pde
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
19
Aufgabestellungen
Die Methodik der generativen Kunst
Lesen Sie den Text „Die Methodik der generativen Kunst“.
Zufallslinie
Schreiben Sie ein Programm, das Linien mit zufällig gesetzten Anfangs- und Endpunkten und einer
zufälliger Farbe zeichnet.
Zufallsquadrate
Schreiben Sie ein Programm, das Quadrate (100x100Pixel) zufällig über dem Bildschirm verteilt. Der
Farbe der Quadrate soll ebenfalls zufällig gesetzt werden.
Spirale zeichnen
Schreiben Sie ein Programm, das vom Mittelpunkt ausgehend immer grössere Kreise auf den Schirm
zeichnet. Das ganze sollte so aussehen:
Zeichenprogramm
Entwerfen Sie ein Zeichenprogramm, das etwas anderes zeichnet, je nachdem, ob die Maus gedrückt
ist oder nicht. (z.B. Punkte statt Linien oder Kreise statt Rechtecke)
Rotationen
Schauen Sie sich das SquareFlower Beispiel an, und spielen Sie mit den Werten rum.
Ändern, Ausprobieren, Verstehen!
Text einlesen
Wählen Sie einen kleinen Text aus, und nutzen Sie den folgenden Sketch, um diesen Text in Processing
einzulesen. Erstellen Sie danach eine Darstellung der Zeilen.
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
20
Bilder laden und anzeigen
1. Erstellen Sie ein Programm das ein Bild horizontal bis zu maximal doppelter Breite skaliert.
2. Erstellen Sie ein Programm das ein Originalbild und eine rötlich eingefärbte, halbtransparente
Version des Bildes anzeigt.
3. Erstellen Sie ein Programm das in einem Bild die Farbe Rot entfernt.
4. Erstellen Sie ein Programm das ein Bild vertikal spiegelt.
5. Schreiben Sie drei Bildbearbeitungsprogramme:
a. Drehung um 90° nach rechts
b. Drehung um 180°
c. Drehung um 270° nach rechts
Projektrecherche



Suchen Sie ein Projekt oder ein Werk, das Text visualisiert, oder mit Text oder Schriften spielerisch umgeht. Dies können Poster, statische Grafiken, interaktive Software, Animationen oder
auch Installationen sein. Es sollte nur zu mindestens einem der beiden Bereiche passen:
 Analyse, Visualisierung, Textinterpretation, Generative Grafik, etc
 Schriften, Animation, Textgeneratoren, etc
Erstellen Sie eine Zusammenfassung. Achten Sie darauf, dass mindestens die folgenden Informationen dabei sind:
 Titel, Autor/Künstler, Quellenangabe (URL, Buch, ...)
 Kurzbeschreibung: Einen Absatz zum Projekt/Werk
 Tags: Drei bis fünf passende Stichwörter
 Zwei Screenshots: JPG oder PNG, 250px Weite
Setzen Sie den Text als Sketch um.
Projektarbeit
Erstellen Sie einen Sketch zum Thema "Beziehungen". Ihre Grafik oder interaktives Programm soll das
Konzept "Beziehung" visualisieren. Vorrangig soll es hierbei um die Grundidee gehen, und nicht etwa
aufwändige Animationen erstellen. Sie dürfen nur schwarz, weiss und drei weitere Farben verwenden.
Im Folgenden einige Beispiele (dies sind nur Anregungen):
 Beziehung zwischen zwei Menschen oder Gruppen symbolisch umsetzen
 Soziale Relationen aufzeigen (siehe Soziale Netze, Web2.0)
 Verbindungen zwischen Objekten/Ideen visualisieren (etwa die Beziehung zwischen Tag und
Nacht)
Quelltext Dokumentation
Schreiben Sie als Kommentar am Anfang in den Quelltext:
 Vollständige Namen aller Gruppenmitglieder
 Projektbeschreibung: Was ist die Idee/der Hintergrund? Was macht das Programm?
 Eventuelle Schwierigkeiten, bzw. Unvollständigkeiten in der Umsetzung
 Achtet darauf, dass ihr den Code formatiert, sinnvolle, aussagekräftige Variablennamen verwendet und – vor allem – gut kommentiert.
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
21
Projektbericht (Eigenbeurteilung)
Analyse der Gruppenarbeit als Gruppenmitglied. Erstellen Sie einen Projektbericht (mindestens 1 A4
Seite) unter Verwendung folgender Leitfragen.
Beantworten Sie alle Fragen.
1. Sind Sie mit dem Ergebnis der Gruppenarbeit zufrieden?
2. Sind Sie mit Ihrer Mitarbeit zufrieden?
3. Konnten Sie Ihre Ideen einbringen?
4. Wie war die Zusammenarbeit in der Gruppe?
5. Was ist Ihnen gelungen? Warum?
6. Was ist Ihnen weniger gelungen? Warum?
Verhaltensbeobachtungen (Fremdbeurteilung)
Zur Beurteilung der Gruppenarbeit werden die angeforderten Resultate aus dem Auftrag durch Beobachtungen von Arbeits- und Sozialverhalten ergänzt. Durch einen Projektbericht werden die
Lernenden gefördert ihre Arbeitsmethoden und Vorgehensweisen zu Analysieren.
Dabei wird das eigene Arbeits- und Sozialverhalten mit zwei Gruppenmitgliedern besprochen und
eingeschätzt.
Arbeitsverhalten






Zeigt Interesse und Arbeitsbereitschaft
Beteiligt sich zuverlässig an den Aufgaben
Ist konstruktiv und respektvoll
Bringt Ideen ein
Führt Aufgaben zügig und überlegt aus
Erkennt selbst zu erledigende Aufgaben







































Sozialverhalten





Fügt sich in die Gruppe ein
Unterstützt andere Partnerschaftlich
Hält Abmachungen und Termine
Gibt Informationen weiter
Geht auf andere ein
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
22
Strukturlegetechnik und ConceptMap
Compiler
Programm
Syntax
line
Quellcode
Variable
{}
Struktogramm
Array
int
Anweisung
Prozess
Datentyp
Y >= X
mouseX
fill
byte
PFont
Objekt
Klasse
Pixel
canvas
Sketch
Exception
true/false
Java
draw()
boolean
processing.js
import
Processing
mousePressed
Interpreter
Daten
Ein- / Ausgabe
return

Markieren Sie die Begriffe in der Tabelle die Sie einer anderen Person erklären können mit einem Grünen Hintergrund. Markieren Sie die Begriffe die Sie nicht kennen oder verstanden haben mit einem Gelben Hintergrund.

Erarbeiten Sie nun die Erklärung der Begriffe welche Sie nicht kennen. Sie können in den Unterlagen (Lehrmittel, Notizen, Internet, etc.) nachschlagen.


Nun werden wieder alle Begriffe einbezogen.
Legen Sie die Begriffe in Partnerarbeit so vor sich, wie sie der Bedeutung nach zusammen gehören. Begriffe, welche in einer Beziehung zueinander stehen, werden nebeneinander gelegt.
Dabei können sehr unterschiedliche Lösungen entstehen.

Wählen Sie nun 7 Begriffe, die für Sie wichtig erscheinen. Erarbeiten Sie ein Concept Map zur
Veranschaulichung der Begriffe und der Beziehungen
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
23
Indikatoren Raster und Bewertungen
Indikatoren Programmieren nach Vorgaben (Programming Basics)
Auftragsbeschreibung

Strukturen darstellen
Stukto-, Flussdiagramm




Datentypen
anwenden



Benutzerschnittstelle
erstellen



Ablaufstruktur umsetzen
Quellcode ausarbeiten








Testen, Testfälle
Dokumentation
Journal









Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Indikatoren
Die Struktur ist nicht erkennbar und auch nicht geeignet
dargestellt
Struktur ist erkennbar, aber nicht richtig dargestellt
Wahl der Struktur unvollständig, aber richtig dargestellt
Ablauf ist vollständig und richtig dargestellt
Struktur (Funktionalität) ist vollständig und richtig dargestellt
Die Datentypen sind nicht richtig eingesetzt
Die Unterscheidung der Datentypen ist erkennbar
Es wurden die richtigen Datentypen gewählt, Zahlenbereiche gezielt eingesetzt
Ein- und Ausgabe der Daten unvollständig umgesetzt
Ein- und Ausgabe der Daten grösstenteils umgesetzt
Ein- und Ausgabe der Daten vollständig und korrekt
umgesetzt
Struktur und Code haben nichts gemeinsam
Implementierung entspricht nur teilweise der Struktur.
Struktur wurde richtig umgesetzt
Codierung erfolgte nicht nach den Vorgaben der Programmiersprache
Syntaktische Fehler im Code
Logische Fehler im Code, welche vom Compiler bzw.
Interpreter nicht gefunden werden
Korrekte Berechnungen, Prozesse
Robuste Benutzerschnittstelle
(Fehlerabfrage und -meldung)
Unstrukturierter Test ohne erkennbare Strategie.
Test reproduzierbar, Testfälle nicht zwingend
Testbeschrieb korrekt und kluge Wahl der Testfälle
(Abdeckung)
Vorgehen nicht dokumentiert.
Dokumentation ist vorhanden mit kleineren Lücken
System-Dokumentation ist vollständig und Code kommentiert
Gliederung und Darstellung ist unübersichtlich
Alle Aktivitäten gemäss Zeitplan sowie alle ungeplante
Arbeiten sind erwähnt
Erfolge und Misserfolge sind erwähnt
Fabian Dennler, @foxfabi
Punkte
-0.25
+0.25
-0.25
+0.25
-0.25
+0.25
-0.25
+0.25
-0.25
+0.25
-0.25
+0.25
-0.25
+0.25
-0.25
+0.25
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
24
Indikatoren Präsentation
Auftragsbeschreibung
Zeitmanagement
Medieneinsatz
Lautstärke, Geschwindigkeit, Blickkontakt
und Gestik
Sprachliche
Ausdrucksfähigkeit
schriftdeutsch
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Indikatoren
 Der Zeitrahmen wurde um nicht mehr als 4% Minuten
über- oder unterschritten
 Der Zeitrahmen wurde um nicht mehr als 2% Minuten
über- oder unterschritten.
 Der Zeitrahmen wurde eingehalten
 Die gewählten Präsentationstechniken sind nicht adressaten- und inhaltsgerecht. Sprache und Medien Veranschaulichung passen nicht überein.
 Es werden keine Präsentations- und Moderationstechniken eingesetzt
 Sprache und Medienveranschaulichung passen nicht
immer überein.
 Bedient die eingesetzten Hilfsmittel professionell
 Setzt geeignete Mittel und Techniken ein
 Gute Vorbereitung
 Zwei Bewertungspunkte nicht erfüllt oder mehr
 Ein Bewertungspunkt nicht erfüllt oder zwei Bewertungspunkte schlecht erfüllt.
 Die Lautstärke war der Raumgrösse und der Sitzordnung der Zuhörer angepasst
 Die Sprechgeschwindigkeit war angenehm
 Es fand häufig Blickkontakt mit den Zuhörern statt
 Die Gestik wirkte offen, kontrolliert und ruhig
 Viele Silben werden verschluckt.
 Die Formulierungen sind oft umgangs-sprachlich.
 Die Sätze sind kompliziert aufgebaut oder unvollständig
 Die Sätze sind gelegentlich grammatikalisch falsch.
 Die Aussagen sind tadellos formuliert
 Die Aussprache ist deutlich.
Fabian Dennler, @foxfabi
Punkte
-0.25
+0.25
-0.25
+0.25
-0.25
+0.25
-0.25
+0.25
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
25
Indikatoren Methodenkompetenzen
Auftragsbeschreibung
Arbeitstechniken und
Problemlösen
Prozessorientiertes
vernetztes Denken und
Handeln
Lernstrategien
Kreativitätstechniken
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Indikatoren
 Hilflosigkeit im Benutzen der Hilfsmittel. Selbstständiges Arbeiten nicht möglich
 Erkenntnis der eignen Arbeitsschritte fehlen und es
findet keine systematisches anpassen statt
 Weitgehendes ordnen und benutzen der Hilfsmittel
 Vorwiegend realistische Erkenntnis der eignen Arbeitsschritte und teilweise systematisches anpassen
 Lückenloses ordnen und benutzen der Hilfsmittel
 Realistische Erkenntnis der eignen Arbeitsschritte und
systematisches anpassen
 Ist auch Hilfe des Unterrichtaufbaues nicht in der Lage
Prozesse und Zusammenhänge zu erkennen
 Erkennt mit Hilfe des Unterrichtaufbaues Prozesse und
Zusammenhänge weitgehend.
 Erkennt mit Hilfe des Unterrichtaufbaues Prozesse und
Zusammenhänge
 Nachlässiges anpassen der Lernstrategien
 Weitgehend Selbstständiges Anpassen der Lernstrategien.
 Selbstständiges anpassen der Lernstrategien
 Hilflosigkeit beim kreieren eigener Denkmuster
 Permanente Unterstützung
 Vorwiegend selbstständiges formulieren
 Weitgehendes kreieren eigener Denkmuster
 Selbstständiges formulieren
 Eigene kreative Denkmuster kreieren und weiterentwickeln.
Fabian Dennler, @foxfabi
Punkte
-0.25
+0.25
-0.25
+0.25
-0.25
+0.25
-0.25
+0.25
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
26
Indikatoren Selbst- und Sozialkompetenzen
Auftragsbeschreibung
Indikatoren
 Beschränktes/Keine Überprüfung vorhanden
 Hilflos im Aufnehmen von Kritiken und antworten mit
gestärktem Selbstbewusstsein
 Weitgehend Eigene Überprüfung vorhanden
Kommunikationsfähigkeit  Überwiegendes aufnehmen von Kritiken und antworten
mit gestärktem Selbstbewusstsein
 Eigene Überprüfung vorhanden
 Kritiken aufnehmen und mit gestärktem Selbstbewusstsein antworten
 Beschränkt Konfliktfähig und unmotiviert lösungsorientierte Mass-nahmen zu entwickeln und erarbeiten
 Konfliktfähig und hilft mit lösungsorientierte MassnahKonfliktfähigkeit
men zu entwickeln und erarbeiten.
 Überaus Konfliktfähig und motiviert lösungsorientierte
Massnahmen zu entwickeln und erarbeiten
 Erkennt die Wichtigkeit eines Teams nicht und lässt das
Team für sich arbeiten. Passiv.
 Erkennt die Wichtigkeit eines Teams weitgehend und
Teamfähigkeit
arbeitet im Team gut mit
 Erkennt die Wichtigkeit eines Teams und arbeitet im
Team vorbildlich
 Oft unpünktlich, unordentlich und unzuverlässiges Arbeiten
 Sein Verhalten den Erwartungen selten/nie angepasst
 Weitgehend pünktlich, ordentlich und zuverlässiges
Umgangsformen
Arbeiten
 Sein Verhalten den Erwartungen vorwiegend angepasst
 Überaus pünktlich, ordentlich und zuverlässiges Arbeiten
 Sein Verhalten den Erwartungen angepasst
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Punkte
-0.25
+0.25
-0.25
+0.25
-0.25
+0.25
-0.25
+0.25
Letzte Änderung: 17.12.2012
Gewerbliche
Berufsschule Chur
http://www.gbchur.ch
Thema
Fach
Seite
Creative Coding mit Processing
Informatik
27
Quellen















Processing. 12.12.12. http://processing.org
Processing Wiki. 12.12.12 http://wiki.processing.org .
Processing. 12.12.12. http://de.wikipedia.org/wiki/Processing
Processing Bibliotheken. 12.12.12.
http://blogs.iad.zhdk.ch/computer-vision-2011/lektionen/7-2-marz-processing-bibliotheken/
Creative Coding. 12.12.12. http://btk.tillnagel.com/archive/creative-coding-2/09-extern-1.html
Learn Processing. 12.12.12. http://lernprocessing.wordpress.com/
Programm & Prozess. 13.12.12. http://dennisreimann.de/studies/programm_und_prozess/
Kreativ programmieren mit Processing. 03.04.2009. http://www.heise.de/ct/projekte/Kreativprogrammieren-mit-Processing-284093.html
Kreativ programmieren mit Processing und Arduino. 03.04.2009.
http://www.heise.de/ct/projekte/machmit/processing
Infographiken programmieren mit Processing. 13.12.12. http://ddi.informatik.huberlin.de/hausarbeiten/Eva_Gerth_Unterrichtsentwurf_Infografiken.pdf
Programmieren oder Zeichnen? 14.12.12.
http://wiki.arch.ethz.ch/asterix/pub/Psz07/WebHome/ProgrammierenOderZeichnenA5.pdf
Nassi-Shneiderman-Diagramm. 12.12.12. http://de.wikipedia.org/wiki/Nassi-Shneiderman-Diagramm
Objektorientierte Programmierung. 13.12.12
http://de.wikipedia.org/wiki/Objektorientierte_Programmierung
Warum Processing? 13.12.12.
http://www.ralphammer.de/teaching/doku.php?id=tutorials:processing:grundlagen:00_warum
Kriterienkatalog Qualifikationsverfahren Informatiker/in – PkOrg. 12.12.12.
http://www.pkorg.ch/pdf/PkOrg_Kriterienkatalog.pdf
Creative Coding mit Processing.doc
CC BY-SA 3.0 CH
Fabian Dennler, @foxfabi
Letzte Änderung: 17.12.2012