Das Programm
Vorbereitung
Als Erstes muss Processing installiert werden: https://processing.org/
Die wichtigsten Befehle sind hier erklärt: kurzes Intro
Schritt 0: Startercode
Die Ausgangslage kann als Zip Datei hier heruntergeladen werden.
Schritt 1: Fliegende Toastbrote
Eine Animation mit Toastbrot und fliegenden Toastern. Das war der erste Screensaver, der in den 90er Jahren die CRT Monitore vor dem Einbrennen schützte. In diesem Tutorial soll eine ähnliche Animation erstellt werden, auch wenn unsere heutigen Monitore nicht mehr so anfällig für Einbrennen sind.
Gegeben ist der folgende Code, der schon mal ein paar Toastbrote zeichnet. Diese bewegen sich jedoch noch nicht und die fliegenden Toaster fehlen noch gänzlich. Es soll nun der Code ergänzt werden, damit die Toastbrote von rechts oben nach links unten über den Bildschirm fliegen. Später sollen noch 5 fliegende Toaster hinzugefügt werden.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/**
* Flying Toasters - Startercode
* This Processing Sketch Author: Michael Job
* Version: 0.1
* Iconic Screensaver
*
* Credits for " F L Y I N G T O A S T E R S (tm)"
* Original concept by Jack Eastman
* Toaster artwork by Tomoya Ikeda & Igor Gasowski
* Flying Toasters by Bill Stewart
* (c) 1990-1992 Berkeley Systems Inc.
**/
int xWidth;
int yHeight;
PImage toastimg;
PImage toasterup;
PImage toasterdown;
Toast t1;
Toast t2;
Toast t3;
Toast t4;
Toast t5;
//name Toasters here
void setup() {
frameRate(12);
size(1080, 720);
background(0, 0, 0);
xWidth = 1080;
yHeight = 720;
toastimg = loadImage("toast.png");
toasterup = loadImage("toasterup.png");
toasterdown = loadImage("toasterdown.png");
t1 = new Toast(xWidth, 0, 2);
t2 = new Toast(xWidth-370, 30, 4);
t3 = new Toast(xWidth-230, 75, 3);
t4 = new Toast(xWidth-580, 700, 3);
t5 = new Toast(xWidth-430, 300, 2);
//init Toasters here
}
void draw() {
background(0, 0, 0);
t1.update();
t2.update();
t3.update();
t4.update();
t5.update();
//update Toasters here
}
class Toast {
int xpos, ypos, speed;
Toast (int x, int y, int s) {
xpos = x;
ypos = y;
speed = s;
}
void update() {
//make them move here
if (ypos > height) {
ypos = 0;
}
if (xpos < 0) {
xpos = width;
}
image(toastimg, xpos, ypos, 50, 50);
}
}
//add a class Toaster like the Toast class above here
Aufgabe:
Versuche zuerst einmal die Toastbrote zum Fliegen zu bringen. Dafür muss die Position der Toastbrote in der update() Methode verändert werden. Es soll von rechts nach links geflogen werden, also muss die x-Position immer kleiner werden. Ebenso soll die y-Position sich auch verändern, damit die Toastbrote nicht nur horizontal nach links fliegen, sondern diagonal nach links unten. Also muss auch die y-Position immer grösser werden. Probieren Sie hier ein paar verschiedene Werte aus.
Bestehende Werte können einfach verändert werden, z.B. xpos = xpos - 2; oder xpos -= 2; und ypos = ypos + 1; oder ypos = 1;`.
Die Kurzschreibweise mit `-=` und `= ist eine Vereinfachung von Subtrahieren/Addieren und gleichzeitigem Zuweisen.
Was fällt auf beim Ausprobieren mit fixen Werten?
Lösung
...
xpos -= speed; // oder xpos = xpos - speed;
ypos += speed; // wir verwenden hier die Variable speed, damit die Toastbrote unterschiedlich schnell fliegen können.
...Schritt 2: Fliegende Toaster hinzufügen
Nun wollen wir ja noch fliegende Toaster hinzufügen.
Aufgabe: Dafür muss eine neue Klasse Toaster erstellt werden, die ähnlich wie die Klasse Toast aufgebaut ist. Die Klasse schreiben Sie im gleichen File einfach unter dem anderen Code.
Aber Moment mal, was ist überhaupt eine "Klasse"?
Klassen und Objekte sind ein zentrales Konzept in der Programmierung. In Processing kann man auch damit arbeiten. Processing verwendet Java als Programmiersprache, und kann somit auch objektorientiert programmiert werden. Will man mehrere ähnliche Objekte zeichnen, so kann es sinnvoll sein, eine Klasse Toaster (oder eben Toast) zu erstellen. Diese Klasse kann die Eigenschaften und das Verhalten eines Toasters definieren.
In der update() Methode der Klasse Toaster muss dann die Position des Toasters verändert und das Bild des Toasters gezeichnet werden.
Neben der Klasse braucht es natürlich auch Code, der die Klasse dann überhaupt verwendet. Aber schreiben wir zuerst mal die Klasse.
Lösung Klasse Toaster
// additional class Toaster
class Toaster {
int xpos, ypos, speed;
Toaster (int x, int y, int s) {
xpos = x;
ypos = y;
speed = s;
}
void update() {
xpos -= speed;
ypos += speed;
if (ypos > height) {
ypos = 0;
}
if (xpos < 0) {
xpos = width;
}
image(toasterup, xpos, ypos, 50, 50);
}
}Die Lösung hier zeigt nur die Klasse Toaster. Damit diese in der draw Methode überhaupt aufgerufen werden können, resp. Ihre update()-Methoden, müssen sie zuerst Instanziert werden. Das heisst es werden anhand der Klasse Toaster eben nun konkrete Toaster erstellt. Denen geben wir einen Namen. Sowie bei den Toast(-broten).
Es hat dazu an den richtigen Stellen im Startercode Kommentare. "//name Toasters here" und "//init Toasters here" sowie "//update Toasters here". Orientieren kann man sich am bestehenden Code der Toast(-brote). Die Toaster können auf die gleiche Weise programmiert werden.
Fliegende Toaster, nicht schwebende!
Nun fliegen da zwar Toaster, aber die Flügel schlagen ja gar nicht!? Sieht mehr wie Schweben aus, geht gar nicht.
Aufgabe:
Bring die Flügel zum Schlagen! Dafür muss in der update() Methode des Toasters noch eine Bedingung hinzugefügt werden, die entscheidet, ob das Bild toasterup oder toasterdown gezeichnet wird. Dazu verwenden wir eine zusätzliche Variable up, die entweder false oder true sein kann. Wenn up true ist, wird toasterup gezeichnet, wenn up false ist, wird toasterdown gezeichnet. In jedem Durchlauf der update() Methode soll up gewechselt werden, damit die Flügel schlagen.
Lösung
// class toaster with moving wings
class Toaster {
int xpos, ypos, speed;
boolean up = false;
Toaster (int x, int y, int s) {
xpos = x;
ypos = y;
speed = s;
}
void update() {
xpos -= speed;
ypos += speed;
if (ypos > height) {
ypos = 0;
}
if (xpos < 0) {
xpos = width;
}
if (up) {
image(toasterup, xpos, ypos, 50, 50);
} else {
image(toasterdown, xpos, ypos, 50, 50);
}
up = !up;
}
}