Creative Coding

btk

Till Nagel

Einführung – Woche 1

Aufgaben

A1: Millimeterpapier

  1. Nimm ein Blatt Millimeterpapier und zeichne darauf zwei 10×10 cm große Rechtecke.
  2. Zeichne in eines dieser Rechtecke eine (einfache) Grafik, ohne dass dein Nachbar diese sehen kann.
  3. Beschreibe diese Zeichnung nun deinem Nachbarn.
  4. Vergleicht deine und seine/ihre Grafiken miteinander. Wo gibt es Gemeinsamkeiten, wo Unterschiede? Was gab es für Schwierigkeiten bei der Übermittlung?
  5. und vice versa …

A2: Processing starten

Lösung

Starte Processing und verwende nun die Anweisung line(x1, y1, x2, y2) so, dass zwei sich überkreuzende Linien gezeichnet werden.

A3: Kreise

Lösung

Zeichne einen großen Kreis, und zwei innere kleine Kreise.

A4: x Rechtecke

Lösung

Programmiere die Grafik nach. Hier gibt es verschiedene Ansätze, wie dies umzusetzen ist.

x Rechtecke

A5: "Punkt, Punkt, Komma, Strich …"

Lösung

Nutze die gelernten Zeichen- und Farbanweisungen und zeichne ein Gesicht.


Algorithmus

Ein Algorithmus ist eine genau definierte Handlungsvorschrift zur Lösung eines Problems.
So ist beispielsweise ein Kochrezept ein Algorithmus: Man verwendet als Zutaten Mehl, Eier und Milch, führt dann einige Anweisungen aus, wie Eier aufschlagen, umrühren, Teig in den Ofen schieben, und kann dann nach einiger Zeit einen Kuchen heraus nehmen. Vor allem aber sind Algorithmen eines der zentralen Themen der Mathematik und Informatik.

Processing

Processing ist eine Umgebung zum Erkunden des konzeptuellen Raums, der durch elektronische Medien ermöglicht wurde. Es ist eine Umgebung zum Lernen der Grundlagen des Programmierens innerhalb eines graphischen Kontextes. Desweiteren ist es ein elektronisches Skizzenbuch, um Ideen zu entwickeln. Und es ist ein professionelles Werkzeug zum Erstellen von ästhetisch ansprechender interaktiver Software.

Der Code wird prozessiert, so dass Grafiken und interaktive Programme entstehen

Umgebung

Mit Hilfe der Processing-Umgebung 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.

Download von Processing

Processing ist Open Source-Software, und kann frei unter http://processing.org/download/ herunter geladen werden.
Auf euren Macs sollte dies bereits drauf sein. Es ist aber sinnvoll, dies auch auf eurem Privat-PC zu installieren. (Windows-Nutzer sollten den ersten Download-Link verwenden!)

Koordinatensystem

Processing verwendet – wie alle Bildschirm-Anwendungen (etwa auch Photoshop) – ein kartesisches Koordinatensystem mit dem Nullpunkt in der oberen linken Ecke.
Siehe auch das Beispiel unter point().

Anweisungen

Mit Hilfe von Anweisungen teilen wir dem Computer mit, dass er bestimmte Dinge ausführen soll. Im Folgenden werden die ersten einfachen Zeichen- und Farbanweisungen in Processing vorgestellt.

size()

size(width, height);

Setzt die Größe des Zeichenbereichs. Der Zeichenbereich wird in der angegebenen Weite×Höhe (in Pixeln) verwendet.

Diese Anweisung sollte immer am Anfang eines Programms, oder als erste Anweisung in setup() verwendet werden.

background()

background(color);

Setzt die Hintergrundfarbe der Zeichenfläche. Die Farbe ist ein Grauwert zwischen 0 und 255, wobei 0 für schwarz, und 255 für weiss steht.

Diese Anweisung füllt den gesamten Zeichenbereich mit der angegeben Farbe aus, d.h. background() kann auch verwendet werden, um nach dem Zeichnen von Formen die Zeichenfläche wieder zu löschen.

point()

point(x, y);

Zeichnet einen Punkt an der Position (x, y)

(Dies ist keine mit Processing erstellte Zeichnung: Die X- und Y-Achse, wie auch die Einfärbungen sind lediglich zur Veranschaulichung.)

line()

line(x1, y1, x2, y2);

Zeichnet eine Linie von Position (x1, y1) nach Position (x2, y2)

rect()

rect(x, y, width, height);

Zeichnet ein Rechteck an Position (x, y) mit Weite x Höhe.

Zu beachten ist, dass das Rechteck nicht mit zwei Punkten definiert wird (also bspw. von oben links nach unten rechts), sondern mit einer Position (oben links) und den beiden Seitenlängen Weite und Höhe.
Sind die Seitenlängen gleich, entsteht mit dieser Anweisung folglich ein Quadrat.

ellipse()

ellipse(x, y, width, height);

Zeichnet eine Ellipse an Position (x, y) mit Weite × Höhe.

Die beiden hinteren Parameter geben nicht den Radius an, sondern den jeweiligen "Durchmesser". Die angegebene Position definiert den Mittelpunkt der Ellipse.
Mit dieser Anweisung kann natürlich auch ein Kreis gezeichnet werden, indem width und height gleich groß definiert werden.

stroke()

stroke(color);

Setzt die aktuelle Farbe des Strichs. Dies gilt etwa für Linien (line()), aber auch für den Aussenstrich bei Rechtecken und Ellipsen.

Alle folgenden Anweisungen, die einen Strich verwenden, nutzen die gesetzte Farbe. Erst wenn wieder ein anderer Wert mit stroke() gesetzt wird, ändert sich diese Strichfarbe.

fill()

fill(color);

Setzt die aktuelle Füllfarbe. Dies gilt z.B. für die Fläche von Rechtecken und Ellipsen.

Creative Commons Lizenz: Namensnennung-NichtKommerziell-Weitergabe unter gleichen Bedingungen 2.0 (Deutschland)

© 2008 Till Nagel, All rights reserved – Alle Rechte vorbehalten.