Programmieren! - Informatik, TU Wien

Programmieren!
Meine ersten Schritte als ProgrammiererIn!
Prolog 2014
Stefan Podlipnig, TU Wien
Ziele
• Kennenlernen einer einfachen Programmiersprache
• Verständnis für einfache Programmierkonzepte entwickeln
Diese Veranstaltung soll Ihnen einen einfachen Einstieg in die
Programmierung ermöglichen
Prolog 2014
Programmieren!
2
Organisation
• Vier Vorlesungen im Audi-Max




Do 25.09., 10:45 – 12:15
Fr 26.09., 9:00 – 10:30
Mo 29.09., 15:15 – 16:45
Di 30.09., 10:45 – 12:15
• Übungen im Computerraum
 90 Minuten
 HG EG 05 (Frogger Raum), Favoritenstrasse 9 – 11
 29.09. – 02.10.
 Genaue Termine auf der TISS-Homepage des Prologs
 Anmeldung zu einem Termin
 Auf der TISS-Homepage des Prologs unter Gruppen-Anmeldung
 29.09. – Extra zwei Gruppen für „Fortgeschrittene“
 Fragen an [email protected]
Prolog 2014
Programmieren!
3
Umfrage 1
Wer hat schon einmal programmiert?
Prolog 2014
Programmieren!
4
Umfrage 2
In welcher Programmiersprache haben Sie schon
Programme geschrieben?
•
•
•
•
•
•
•
•
•
•
•
Prolog 2014
Java
C
C++
C#
Objective-C
Python
JavaScript
Visual Basic
PHP
Processing
Andere Sprache
Programmieren!
5
Umfrage 3
Wie groß (in Codezeilen) war Ihr größtes Programm?
a. Kleiner als 100 Zeilen
b. 100 – 1000 Zeilen
c. Mehr als 1000 Zeilen
Prolog 2014
Programmieren!
6
Überblick
Operatoren
Variablen
Processing Grundlagen
Prolog 2014
Verzweigungen
Kleine
Programme
Programmieren!
Schleifen
7
PROCESSING – GRUNDLAGEN
Prolog 2014
Programmieren!
8
Programmierung (in Processing)
Quellcode in Processing
Übersetzung
(mehrere Schritte)
size(450, 150);
fill(150);
rect(20, 10, 100, 100);
Maschinensprache
0101010010010010
0101111010010111
0101110101011011
0110101110100001
0100011010101100
0100101011011101
1010101110101011
0111010101101101
• Maschinensprache = Befehle, die die CPU versteht
 Unterschiedliche Rechner (CPUs) können unterschiedliche
Maschinensprachen haben
• Programmieren in höherer Programmiersprache (z.B. Processing)
 Für Menschen leichter
 Muss aber bestimmten Regeln folgen (Unterstützung der Übersetzung)
Prolog 2014
Programmieren!
9
Processing
• Einfache Programmierumgebung für visuelle Elemente und
Interaktionen
• Einfache Entwicklung von Programmen
• Keine eigene Programmiersprache
 Stark vereinfachte Version der Programmiersprache Java
• Webseite
 http://processing.org/
Prolog 2014
Programmieren!
10
Entwicklungsumgebung
Menüleiste
Toolbar (Shortcuts,
Tab-Leiste)
Texteditor
Nachrichten
(Fehlermeldungen etc.)
Konsole
(Textausgabe)
Grafische Ausgabe
(Sketchfenster)
Prolog 2014
Programmieren!
11
Sketches und Sketchfenster
• Skizzen (Sketches)
 Für ein neues Programm
 Ausgabe erfolgt in das sogenannte Sketchfenster
• Koordinatensystem im Sketchfenster
 Achtung: positive Y-Werte gehen nach unten
Prolog 2014
Programmieren!
12
Zeichnen mit Funktionen
• Funktion in Processing
 Kleines „Programm“ für eine bestimmte Aufgabe
• Beispiel für einen Aufruf einer Funktion
 size(300, 150);
• Aufbau
 Name der Funktion
 Öffnende Klammer
 Argumente durch Beistriche getrennt
 Dienen zur Parametrisierung
size(300, 150);
 Schließende Klammer
 Strichpunkt
 Schließt die gesamte Anweisung ab
Prolog 2014
Programmieren!
13
Beispiele
• Beispiel
 Sketchfenster mit der Größe 200 × 200 (Breite × Höhe) erzeugen
size(200, 200);
• Beispiel
 Sketchfenster mit der Größe 200 × 200 erzeugen und danach
 Punkt an die Stelle mit den Koordinaten x=100 und y=50 zeichnen
size(200, 200);
point(100, 50);
Prolog 2014
Programmieren!
14
Beispiel
• Beispiel
 Sketchfenster mit der Größe 200 × 200 erzeugen
 Zeichenfarbe für Linien auf weiß setzen
 Linie zwischen dem Startpunkt (10, 10) und dem Endpunkt(150, 150)
zeichnen
Prolog 2014
Programmieren!
15
Informationen zu den Funktionen
• Auflistung der unterschiedlichen Funktionen in Processing
 http://www.processing.org/reference/
• Beispiel stroke
Prolog 2014
Programmieren!
16
Maßgeschneiderte Formen
• Eigene Formen festlegen
• Benötigte Anweisungen (in dieser Reihenfolge)
 beginShape() (ohne Parameter)
 Nacheinander Eckpunkte mit x- und y-Koordinaten mit Anweisung vertex
angeben
 endShape() mit Parameter CLOSE (um Form abzuschließen)
• Beispiel
size(480, 120);
beginShape();
vertex(180, 82);
vertex(207, 36);
vertex(214, 63);
vertex(407, 11);
vertex(412, 30);
vertex(219, 82);
vertex(226, 109);
endShape(CLOSE);
Prolog 2014
Programmieren!
17
Quiz zu Anweisungen
Welche der folgenden Anweisungen sind in Processing korrekt?
a)
b)
c)
d)
e)
f)
Prolog 2014
size(450, 150);
line(20, 10, 100, 100);
size(450, 150)
point 100, 50;
line(20, 10, 100, 100);
vertex(160, );
Programmieren!
18
VARIABLEN
Prolog 2014
Programmieren!
19
Motivation
• Ausgangsbeispiel
size(450, 150);
rect(20, 10, 100, 100);
rect(160, 10, 100, 100);
rect(300, 10, 100, 100);
• Änderungswünsche (Beispiel)
 Jedes Rechteck sollte 120 × 120 Bildpunkte groß sein
 Jedes Rechteck sollte auf der y-Achse bei 20 beginnen
• Änderung
 Alles händisch ändern?
 Was passiert, wenn wir danach wieder neue Anforderungen haben?
Lösung? - Variablen!
Prolog 2014
Programmieren!
20
Variable
• Benannte Speicherstelle
• Wird einmal vereinbart (deklariert)
 Name
 Datentyp
• Danach Zugriff über Name
• Wert kann sich im Laufe des Programms ändern
Prolog 2014
Programmieren!
21
Beispiel für Variable – Integer (ganze Zahlen)
• Beispiel: Variable für eine ganze Zahl mit dem Namen number
• In Processing
int number;
• Bedeutung
 int = Datentyp (steht für ganze Zahlen)
 number = Name
• Datentyp für ganze Zahlen
 In Processing werden 4 Bytes (32 Bits) für ganze Zahlen verwendet
 Wertebereich (232 Möglichkeiten = 4 294 967 296 Zahlen)
 -2 147 483 648 bis +2 147 483 647
Prolog 2014
Programmieren!
22
Datentyp
• Daten haben einen bestimmten Typ (Datentyp)
• Beispiele für einfache (primitive) Datentypen





Ganze Zahlen
Kommazahlen
Zeichen
Zeichenfolge
Wahrheitswert
• Der Datentyp legt fest
 Wertebereich
 Repräsentation im Speicher (wie viele Bytes werden belegt)
 Erlaubte Operationen
Prolog 2014
Programmieren!
23
Wert zuweisen
• Form
 Variable = „Wert“;
• Bedeutung
 Die rechte Seite (Wert) wird der linken Seite (Variable) zugewiesen
• Beispiele (Integer Variable)
 Einfache Vereinbarung, danach Zuweisung
int number;
…
number = 10;
 Vereinbarung mit Initialisierung
int number = 10;
 Vereinbarung mit Initialisierung, Vereinbarung mit Zuweisung aus anderer
Variable
int number = 10;
int number2 = number;
Prolog 2014
Programmieren!
24
Literal
• Wird zur direkten Darstellung eines Wertes verwendet
• Beispiele für Literale





Ganze Zahlen: 10, +10, -10
Kommazahlen: 10.50, +10.50, - 10.50
Einzelne Zeichen: ˈaˈ
Zeichenketten: "Hello"
Wahrheitswerte: true, false
Prolog 2014
Programmieren!
25
Ausgangsbeispiel mit Variablen
• Ausgangsbeispiel ohne Variablen -> Ausgangsbeispiel mit Variablen
size(450, 150);
int y = 10;
int s = 100;
rect(20, y, s, s);
rect(160, y, s, s);
rect(300, y, s, s);
size(450, 150);
rect(20, 10, 100, 100);
rect(160, 10, 100, 100);
rect(300, 10, 100, 100);
• Beispiel mit anderer Variableninitialisierung
size(450, 150);
int y = 20;
int s = 120;
rect(20, y, s, s);
rect(160, y, s, s);
rect(300, y, s, s);
Prolog 2014
Programmieren!
26
Verändern von Variableninhalten
• Beispiel
size(450, 250);
int y = 10, s = 100;
rect(20, y, s, s);
rect(160, y, s, s);
rect(300, y, s, s);
y = 120;
s = 110;
rect(20, y, s, s);
rect(160, y, s, s);
rect(300, y, s, s);
• Hinweise
 Variablen des gleichen Typs können in einer Zeile vereinbart werden
 Eine neue Zuweisung verändert das Bitmuster im Speicher und damit ist der
alte Wert nicht mehr vorhanden!
Prolog 2014
Programmieren!
27
Primitive Datentypen in Processing
Typ
Größe in Bits
Wertebereich
meist 8 true oder false
boolean
16
• Enthält u.a. Buchstaben (z.B. ˈAˈ), Zahlen, weitere Alphabete,
char
Sonderzeichen
• Kann als Zahl aufgefasst werden (0 bis 65535)
8
–128 bis +127
byte
(–27 bis 27 – 1)
16
–32768 bis +32767
short
(–215 bis 215 – 1)
32
–2147483648 bis +2147483647
int
(–231 bis 231 – 1)
64
–9223372036854775808 bis +9223372036854775807
long
(–263 bis 263 – 1)
32
ca. −3.4×1038 bis 3.4×1038 (IEEE 754 Darstellung)
float
64
ca. −1.8×10308 bis 1.8×10308 (IEEE 754 Darstellung)
double
Prolog 2014
Programmieren!
28
Zuweisungskompatibilität
• Beispiel
int x;
short y = 10;
x = y;
• Processing erlaubt solche Zuweisungen
• Kompatibilitätsbeziehung
 → = kann konvertiert werden in
 byte → short → int → long → float → double
 char → int …
• Umkehrung
 Nicht automatisch
 Das muss beim Programmieren explizit gesagt werden (Cast)
 Beispiel von oben (x zusätzlich mit Wert belegt): y = (short) x;
Prolog 2014
Programmieren!
29
Processing-Variablen
• Processing verwaltet einige spezielle Variablen
• Diese speichern Informationen über das ablaufende Programm
 Beispiele
 width = Breite des Sketchfensters
 height = Höhe des Sketchfensters
• Daneben bietet Processing auch konstante Werte (Konstanten), die
sich nicht ändern
 Beispiele
 PI entspricht Kreiszahl π
 HALF_PI entspricht π/2
• Beispiel
size(200, 200);
arc(width/2, height/2, 100, 70, 0, PI);
Prolog 2014
Programmieren!
30
Quiz 1 zu Variablen
Welche der folgenden Vereinbarungen sind korrekt?
a)
b)
c)
d)
e)
f)
g)
Prolog 2014
int x;
float y;
i float;
long huge;
double d;
char c;
large num;
Programmieren!
31
Quiz 2 zu Variablen
• Sie haben folgende Variablen gegeben
int i; float f; long l; double d; char c;
Welche der folgenden Zuweisungen sind korrekt?
a)
b)
c)
d)
e)
f)
g)
Prolog 2014
i
f
l
d
f
c
i
=
=
=
=
=
=
=
10;
12;
i;
12.25;
d;
'A';
c;
Programmieren!
32
OPERATOREN
Prolog 2014
Programmieren!
33
Motivation
• Wir möchten Variablen nicht nur einfach belegen oder einzelne
Werte zuweisen
• Sehr oft will man rechnen und dann das Ergebnis einer Variable
zuweisen
Lösung? - Operatoren!
Prolog 2014
Programmieren!
34
Wichtige Operatoren
•
•
•
•
•
•
Addition (+)
Subtraktion (-)
Multiplikation (*)
Division (/)
Modulo (%)
Zuweisung (=)
Prolog 2014
Programmieren!
35
Ausdruck
• Kombination von Operatoren und Operanden (Variablen, Zahlen)
• Beispiele
3 + 4
2 + 4 * 5
• Durch Anhängen eines Semikolons (;) wird aus einem Ausdruck
eine Anweisung (einfache Anweisung), z.B.
x = 3 + 4;
x = y + 5 - 2;
• Beispiel
size(300, 150);
int x = 20;
int y = x + x;
rect(x, y, 100, 50);
Prolog 2014
Programmieren!
36
Präzedenz
• Processing berücksichtigt bei unterschiedlichen Operatoren in
einem Ausdruck bestimmte Regeln für den Vorrang
 Zum Beispiel „Punkt- vor Strichrechnung“
• Beispiel





x = 2 + 4 * 5;
Operatoren: *, +, = (geordnet nach Vorrang)
Es wird 4 * 5 ausgewertet
Dann wird 2 + 20 berechnet
Zuletzt wird 22 der Variable x zugewiesen
Prolog 2014
Programmieren!
37
Beispiel für Operatoren mit Präzedenz
size(480, 120);
int x = 50;
int h = 20;
int y = 25;
int y2;
rect(x, y, 300, h);
x = x + 100;
y2 = y + h;
rect(x, y2, 300, h);
x = x - 150;
y2 = y + h * 2;
rect(x, y2, 300, h);
size(480, 120);
int x = 50;
int h = 20;
int y = 25;
rect(x, y, 300, h);
rect(x + 100, y + h, 300, h);
rect(x - 50, y + h * 2, 300, h);
Prolog 2014
Ausdrücke wie y + h * 2 werden nur
ausgewertet (keine Variable verändert) und
das Ergebnis als Argument übergeben!
Programmieren!
38
Kürzere Schreibweise
• Kürzere Schreibweise für Operatoren
Operation
Bezeichnung
entspricht
Op1 += Op2
Additionszuweisung
Op1 = Op1 + Op2
Op1 -= Op2
Subtraktionszuweisung
Op1 = Op1 - Op2
Op1 *= Op2
Multiplikationszuweisung
Op1 = Op1 * Op2
Op1 /= Op2
Divisionszuweisung
Op1 = Op1 / Op2
Op1 %= Op2
Modulozuweisung
Op1 = Op1 % Op2
Prolog 2014
Programmieren!
39
Inkrement und Dekrement
• Mit dem Inkrementoperator (++) bzw. dem Dekrementoperator (--)
wird der Wert einer Variable um 1 erhöht bzw. erniedrigt
 a++ entspricht a += 1 entspricht a = a + 1
Operator
Benennung
Beispiel
Erklärung
++
Präinkrement
++a
a wird vor seiner weiteren Verwendung um 1 erhöht
++
Postinkrement
a++
a wird nach seiner weiteren Verwendung um 1 erhöht
--
Prädekrement
--b
b wird vor seiner weiteren Verwendung um 1 erniedrigt
--
Postdekrement
b--
b wird nach seiner weiteren Verwendung um 1 erniedrigt
• Beispiel (Folge von drei Anweisungen)
a = 3;
a++;
b = ++a + 3;
Prolog 2014
Welchen Wert hat b nach
der dritten Anweisung - 8
Programmieren!
40
Ausdrücke und unterschiedliche Datentypen
• Variablen unterschiedlichen Typs in einem Ausdruck verwenden
 Beispiel
int x = 10;
float y = 20.0;
print(x + y);
• Typ des Ausdrucks = „größter“ Typ im Ausdruck
• Obiges Beispiel
 Ergebnis von x + y hat Datentyp float
 Ergebnis kann ohne Cast nur einer float- oder double-Variable zugewiesen
werden
Prolog 2014
Programmieren!
41
Kommentare
• Größerer Programmcode sollte immer kommentiert werden
• Processing erlaubt Kommentare
 Werden beim Ausführen ignoriert
 Beginnen mit // bei einzeiligen Kommentaren
 Können über mehrere Zeilen mit /* … */ realisiert werden
• Beispiel
/*
Simple
program
with
output
*/
size(400, 400);
arc(100, 100, 100, 100, 0, PI); // semi circle
// Draw a Pac-Man
noStroke();
fill(255, 255, 0); // yellow
arc(width/2, height/2, 100, 100, 0.63, PI * 1.8);
Prolog 2014
Programmieren!
42
Namenswahl
• Variablen
 Kurze aber aussagekräftige (sprechende) Namen
 Englisch bevorzugt
 „lowerCamelCase“-Schreibweise
 totalSum, numberOfValues, lineWidth, ….
• Hilfsvariable für kleine Programme
 Kurze Namen oder nur Buchstaben (z. B: x, y, i)
Prolog 2014
Programmieren!
43
Quiz 1 zu Operatoren
Welche der folgenden Zuweisungen sind korrekt?
a)
b)
c)
d)
e)
f)
Prolog 2014
x = 2 + 3;
y = y + ;
a + 1 = 2 + 3;
a = + 2 3;
b = +2 + 2;
+c = 2 + 3;
Programmieren!
44
Quiz 2 zu Operatoren
• Sie haben folgende Vereinbarungen gegeben
int a = 2, b = 4, c = 0, d = 0;
float x = 1.75, y = 2.5, z = 1.0;
Welche Werte haben die Variablen c, d, z, a, c und b nach der
Ausführung der folgenden Anweisungen?
c = 3 +
d = d *
z = x +
a++;
c = a++
b = a +
Prolog 2014
2 * -2 + a * 3;
a - 2 * b + 4;
y * a + 2;
+ 2;
2;
Programmieren!
45
VERZWEIGUNGEN
Prolog 2014
Programmieren!
46
Motivation
• In realen Programmen muss in bestimmten Fällen eine
Entscheidungen getroffen werden
• Beispiel
 Variable x hat Wert < 10
 In diesem Fall soll ein bestimmter Codeabschnitt ausgeführt werden
 Ansonsten darf dieser Codeabschnitt nicht ausgeführt werden
Lösung? – Verzweigungen!
Prolog 2014
Programmieren!
47
Verzweigungen in Processing
• Einfache Form
if (test) {
statements
}
• Schlüsselwort if
• test = Ausdruck (in Klammern), der ausgewertet wird
 Muss immer ein boolescher Ausdruck sein (also true oder false ergeben)
 Falls die Auswertung wahr (true) ergibt, dann werden die Anweisungen im
Block zwischen { und } ausgeführt
 Eine Anweisung kann auch wieder eine if-Anweisung sein (Verschachtelung)!
 Wenn nur eine Anweisung ausgeführt werden soll, dann kann man auf die
Klammern { } verzichten
Prolog 2014
Programmieren!
48
Vergleichsoperatoren
• Vergleichsoperatoren
Notation
Mathematische Notation
a < b
a < b
a > b
a > b
a <= b
a ≤ b
a >= b
a ≥ b
a == b
a = b
a != b
a ≠ b
• Beispiel
size(200, 200);
int rand = int(random(10));
if (rand > 5) {
fill(100);
}
rect(20, 20, 160, 160);
Prolog 2014
Programmieren!
x=5
x=9
49
Logische Werte
• Wertebereich umfasst 2 Werte
 true und false
• Operationen
 Negation: !
 Oder: ||
 Und: &&
Prolog 2014
a
b
!a
a && b
a || b
false
false
true
false
false
false
true
false
true
true
false
false
true
true
true
true
true
false
Programmieren!
50
Beispiele
Prolog 2014
size(200, 200);
int a = int(random(10));
int b = int(random(10));
if ((a > 5) && (b > 5)) {
fill(100);
}
rect(20, 20, 160, 160);
a=7
b=3
size(200, 200);
int a = int(random(10));
int b = int(random(10));
if ((a > 5) || (b > 5)) {
fill(100);
}
rect(20, 20, 160, 160);
a=2
b=3
Programmieren!
a=8
b=9
a=4
b=6
51
Präzedenz in Processing (Auswahl)
• Operatoren nach Präzedenz (Vorrang) geordnet
 Höchste Präzedenz zuerst
 Innerhalb einer Zeile gleiche Präzedenz
• Auswertung bei Operatoren auf gleicher Stufe (Assoziativität)
 Meist von links nach rechts
 Manchmal von rechts nach links (z.B. Zuweisung)
Symbole
Prolog 2014
Beispiel
()
a * (b + c)
++ -- !
a++, --b, !b
*/%
a*b
+-
a+b
> < <= >=
if (a < b) { … }
== !=
if (a == b) { … }
&&
if ((a < c) && (b > c)) { … }
||
if (a || ( b > c)) { … }
= += -= *= /= %=
a += 10
Programmieren!
52
Komplexere Formen der Verzweigung
• Mit else-Zweig
if (test) {
statements1
} else {
statements2
}
 Wenn test auf true auswertet, dann werden die Anweisungen in
statements1 ausgeführt, andernfalls die Anweisungen in statements2
• Mehrere Alternativen
if (test1) {
statements1
} else if (test2) {
statements2
} else if (test3) {
…
} else {
statementsX
}
Prolog 2014
Programmieren!
53
Beispiel
size(200, 200);
int rand = int(random(10));
if (rand > 5) {
background(0);
stroke(200);
fill(100);
}
if (rand % 2 == 0) {
rect(20, 20, 160, 160);
} else {
line(20, 20, 180, 180);
}
fill(50);
ellipse(100, 100, 50, 50);
Prolog 2014
Programmieren!
x=2
x=5
x=7
x=8
54
Quiz 1 zu Verzweigungen
• Sie haben folgenden Processing-Code gegeben
if (x > 5 || y < 4 && z > 6) {
fill(100);
rect(10, 10, 100, 100);
}
Bei welchen Kombinationen von Werten für x, y und z werden die
Anweisungen im Block ausgeführt?
a)
b)
c)
d)
Prolog 2014
x=2,
x=6,
x=7,
x=3,
y=4,
y=5,
y=3,
y=3,
Programmieren!
z=5
z=8
z=7
z=8
55
Quiz 2 zu Verzweigungen
• Sie haben folgenden Processing-Code und eine dazugehörige
Ausgabe gegeben
size(200, 200);
int rand = int(random(10));
if (rand < 5) {
rect(50, 50, 100, 100);
ellipse(100, 100, 100, 100);
} else {
ellipse(100, 100, 100, 100);
rect(75, 75, 50, 50);
}
if (rand % 2 == 0) {
line(180, 20, 20, 180);
} else {
line(20, 20, 180, 180);
}
Welche Werte für rand erzeugen die obige Ausgabe?
Prolog 2014
Programmieren!
56
SCHLEIFEN
Prolog 2014
Programmieren!
57
Motivation
• Ausgangsbeispiel
size(480, 120);
smooth();
strokeWeight(8);
line(20, 40, 80, 80);
line(80, 40, 140, 80);
line(140, 40, 200, 80);
line(200, 40, 260, 80);
line(260, 40, 320, 80);
line(320, 40, 380, 80);
line(380, 40, 440, 80);
• Problem
 Eine Anweisung wird sehr oft mit kleinen Änderungen bei den Argumenten
wiederholt
Lösung? - Schleifen!
Prolog 2014
Programmieren!
58
for-Schleife
• Aufbau
for (init; test; update) {
statements
}
• Schlüsselwort for
• init = Initialisierung vor dem Start der Schleife
 Z.B. Laufvariable für Schleife vereinbaren und initialisieren
 Eine Laufvariable gilt dann nur innerhalb der Schleife
• test = Abbruchtest für Beenden der Schleife
• update = Veränderung von Schleifenvariablen
 Wird nach den Anweisungen ausgeführt
• statements = ein oder mehrere Anweisungen in einem Block
 Bei einer einzigen Anweisung können die Klammern { } weggelassen werden
Prolog 2014
Programmieren!
59
Beispiel
• Beispiel: Die Zahlen von 0 bis 9 ausgeben
• Ablauf










for (int i = 0; i < 10; i++) {
println(i);
}
Betreten der Schleife: i wird mit 0 initialisiert;
Test auf i < 10 ergibt true
println(i) gibt 0 aus
i wird um 1 erhöht: i hat den Wert 1
Test auf i < 10 ergibt true
println(i) gibt 1 aus
i wird um 1 erhöht: i hat den Wert 2
…
i wird um 1 erhöht: i hat den Wert 10
Test auf i < 10 ergibt false: Ende der Schleife
Prolog 2014
Programmieren!
60
Ausgangsbeispiel angepasst
• Ausgangsbeispiel mit Schleife
size(480, 120);
smooth();
strokeWeight(8);
for (int i = 20; i < 400; i += 60) {
line(i, 40, i + 60, 80);
}
Prolog 2014
Programmieren!
61
Weitere Beispiele
size(480, 120);
smooth();
strokeWeight(2);
for (int i = 20; i < 400; i += 8) {
line(i, 40, i + 60, 80);
}
size(480, 120);
smooth();
strokeWeight(2);
for (int i = 20; i < 400; i += 20) {
line(i, 0, i + i/2, 80);
}
Prolog 2014
Programmieren!
62
Komplexeres Beispiel 1 - Beschreibung
• Wir möchten das folgende Bild (ein Beispiel für eine optische
Täuschung) mit Processing erstellen
• Vorgehensweise
 Hintergrund
 Alle Graustufen von links nach rechts durchlaufen
 Es gibt 256 Graustufen
 Breite des Fensters sollte ein Vielfaches der Anzahl der Graustufen sein
 Höhe kann beliebig gewählt werden (hier Anzahl der Graustufen)
Prolog 2014
Programmieren!
63
Komplexeres Beispiel 1 - Hintergrund
• Wir legen fest
 Anzahl der Graustufen (shades)
 Faktor für Vielfaches (factor)
 Größe des Sketchfensters (shades * factor, shades)
• Zeichnen
 Eine Graustufe mit einer Breite von factor Pixel
 Kann mit einem Rechteck erreicht werden
– Wird mit entsprechender Graustufe gefüllt
– Hat keine Umrandungslinie (noStroke())
• Ergebnis
int shades = 256;
int factor = 2;
size(shades * factor, shades);
noStroke();
for (int i = 0; i < shades; i++) {
fill(i);
rect(i * factor, 0, factor, height);
}
Prolog 2014
Programmieren!
64
Komplexeres Beispiel 1 - Abschluss
• Einfarbiger Balken wird über den Hintergrund gezeichnet
 Größe möglichst flexibel gestalten
 Startpunkt, Breite und Höhe werden mit Hilfe von width und height
realisiert
• Farbe muss jetzt neu gesetzt werden
 Mittlere Graustufe gewählt
• Ergebnis
int shades = 256;
int factor = 2;
size(shades * factor, shades);
noStroke();
for (int i = 0; i < shades; i++) {
fill(i);
rect(i * factor, 0, factor, height);
}
fill(128);
rect(width*0.1, height*0.3, width*0.8, height*0.4);
Prolog 2014
Programmieren!
65
Komplexeres Beispiel 1 – Alternative Lösung
• Aber es geht auch anders




Zeichenfläche beliebig festlegen
Von links nach rechts pro X-Koordinate eine vertikale Linie zeichnen
Die Graustufe ergibt sich aus der X-Koordinate der Linie
Wir haben width Punkte und 256 Graustufen
 width muss nicht 256 entsprechen
 Wir müssen die aktuelle X-Koordinate auf den Bereich 0 – 255 abbilden (map)
• Ergebnis
Prolog 2014
size(600,300);
for (int x = 0; x < width; x++){
stroke(map(x, 0, width - 1, 0, 255));
line(x, 0, x, height - 1);
}
noStroke();
fill(128);
rect(width*0.1, height*0.3, width*0.8, height*0.4);
Programmieren!
66
Verschachtelte Schleifen
• Schleifen können ineinander geschachtelt werden
 Anzahl der Durchläufe erhöht sich entsprechend
• Beispiel
size(480, 120);
background(0);
smooth();
noStroke();
for (int y = 0; y <= height; y += 40) {
for (int x = 0; x <= width; x += 40) {
fill(255, 140);
ellipse(x, y, 40, 40);
}
}
Prolog 2014
Programmieren!
Durchlauf
x
y
1
0
0
2
40
0
3
80
0
4
120
0
5
160
0
6
200
0
7
240
0
8
280
0
9
320
0
10
360
0
11
400
0
12
440
0
13
480
0
14
0
40
…
…
…
52
480
120
67
Komplexeres Beispiel 2 - Beschreibung
• Wir möchten das folgende Bild (ein Beispiel für eine optische
Täuschung) mit Processing erstellen
• Vorgehensweise
 Schleife für horizontale Linien
 Schleife für kürzere Linien
 Abwechselnd nach links oder nach rechts geneigt
Prolog 2014
Programmieren!
68
Komplexeres Beispiel 2 – Horizontale Linien
• Horizontale Linien
 X-Achse: Start bei 0, Länge entspricht Breite des Fensters
 Y-Achse (Werte frei gewählt): Start bei 40, Inkrement von 60
• Ergebnis
size(620, 620);
strokeWeight(6);
int increment = 60;
for (int y = 40; y < height; y += increment) {
line(0, y, width, y);
}
Prolog 2014
Programmieren!
69
Komplexeres Beispiel 2 – Kürzere Linien
• Für jede horizontale Linie
 Zeichne mehrere kürzere Linien
 Abwechselnd nach links oder nach rechts geneigt
• Beispiel (noch einzeln realisiert)
size(620, 220);
strokeWeight(6);
int increment = 60;
int step = 40;
for (int x = 20; x < width; x += increment) {
line(x, 60, x + increment, 60 + step);
line(x + increment, 120, x, 120 + step);
}
Prolog 2014
Programmieren!
70
Komplexeres Beispiel 2 – Abschluss
• Schleifen verschachteln und abwechselnd kürzere Linien nach links
oder nach rechts zeichnen
• Ergebnis (einfacher Ansatz)
size(620, 620);
strokeWeight(6);
int increment = 60;
int step = 40;
boolean even = false;
for (int y = 20; y < height; y += increment) {
line(0, y + step/2, width, y + step/2);
for (int x = 20; x < width; x += increment) {
if (even) {
line(x, y, x + increment, y + step);
} else {
line(x + increment, y, x, y + step);
}
}
even = !even;
}
Prolog 2014
Programmieren!
71
Quiz 1 zu Schleifen
Welche Ausgabe wird durch folgende Schleifen erzeugt?
for (int i = 0; i <= 5; i++) {
print(i);
}
for (int i = 0; i <= 5; i += 2) {
print(i);
}
for (int i = 5; i > 0; i--) {
print(i);
}
Prolog 2014
Programmieren!
72
Quiz 2 zu Schleifen
• Sie haben folgende Ausgabe gegeben (Größe 480 × 120)
Durch welche Schleife wurde diese Ausgabe erzeugt?
for (int i = 20; i < 400; i += 20) {
line(i, 0, i + i/2, 80);
line(i + i/2, 80, i * 1.2, 120);
}
for (int i = 20; i < 400; i += 20) {
line(i, 0, i + i/2, 80);
line(i, 80, i * 1.2, 120);
}
for (int i = 20; i < 400; i += 20) {
line(i + i/2, 80, i * 1.2, 120);
line(i, 0, i + i/2, 80);
}
Prolog 2014
Programmieren!
73
AUSBLICK
Prolog 2014
Programmieren!
74
Was haben Sie in diesem Prolog-Teil kennengelernt ?
•
•
•
•
•
Beispiele für Funktionen in Processing
Variablen
Operatoren
Verzweigungen
Schleifen
Prolog 2014
Programmieren!
75
Beispiele für weitere Aspekte in Processing
•
•
•
•
•
•
Viele weitere Funktionen für grafische Ausgaben (2D, 3D)
Aktiver Modus für Animationen
Funktionen selbst implementieren
Datenstrukturen (wie zum Beispiel Arrays)
Aufteilung von Programmcode in Klassen
Vorgefertigte Klassen (für Bilder, Videos, …)
Prolog 2014
Programmieren!
76
Was man mit Processing programmieren kann ….
Präsentation von Beispielen aus [Greenberg 2013]
Prolog 2014
Programmieren!
77
Processing und Java
• Ähnlichkeiten zwischen Processing und Java (Beispiele)
 Vereinbarungen und Datentypen
 Verzweigungen
 Schleifen
• Änderungen in Java (Beispiele)
 Keine einfachen Sketches mehr
 Mehr Schreibarbeit für lauffähiges Programm
 Viele Programme erzeugen als Output keine Grafik 
 Nicht mehr einfache Funktionen aufrufen
 Aufrufe werden komplexer
Mehr dazu ab Donnerstag in der VO Programmkonstruktion
Prolog 2014
Programmieren!
78
Literatur
• [Reas 2010] Casey Reas, Ben Fry: Getting Started with Processing,
1. Auflage, O'Reilly & Associates, 2010
• [Greenberg 2013] Ira Greenberg, Dianna Xu, Deepak Kumar:
Processing: Creative Coding and Generative Art in Processing 2, 2.
Auflage, friendsofED, 2013
Prolog 2014
Programmieren!
79