Wir programmieren Teil 2

Dieses ist der 2. Teil, hier gehts zum Einstiegsteil.

Zuerst mal eine möglich Lösung der kleinen Aufgaben. Die Änderungen sind fett markiert und kommentiert.

// Hello World!
void setup() {
 size(600, 200); // Fenster in der angegebenen Größe erstellen (Breite, Höhe)
 smooth(); // Glätten der Grafiken einschalten
 fill(0); // Farbe setzen (schwarz) ;-)
 textFont(createFont("SansSerif",18)); // Schrift und Schriftgröße wählen
 textAlign(CENTER); // Ausrichtung des Textes festlegen
 noLoop(); // draw() executes only once
}
// Der folgende Teil wir normalerweise immer und immer wieder wiederholt.
// Die Anweisung "noLoop();" in setup() verhindert dieses.
void draw() {
 fill(0,0,255); // Das Rechteck soll blau sein, also 0 rot, 0 grün und 255 von 255 blau
 stroke(0,0,255); // Auch die Umrandung des Rechecks soll blau sein
 rect (20,height-20,width-40,20); // Das Rechteck, beginnt 20 Pixel von links
                                          // und 20 Pixel von unten, ist 40 Pixel kleiner
                                          // als die Fensterbreite und 20 Pixel hoch.
 fill(0); // Die Schrift soll schwarz sein!
 text("Hello World!", width/2, height); // Den Text in die Mitte des Fensters schreiben.
}

Wenn ihr die Aufgaben gelöst habt, so habt ihr schon viele Dinge von Processing oder Programmieren verstanden:

• Der Computer arbeitet das Pragramm nacheinander Zeile für Zeile ab.
  (Das Rechteck musstet ihr vor dem Text zeichnen lassen)
• Befehle werden voneinander getrennt, bei Processing mit einem Semikolon.
• Befehlen können Parameter übergeben werden, bei Processing innerhalb von Klammern.
• Ihr habt eine Idee, wie der Computer Farben speichert, nämlich z.B. in Anteilen aus Rot, Grün, Blau.

Doch lasst uns weitermachen:

void setup() {
 size(300, 200);
 smooth();
 // der Befehl noLoop wird hier nicht mehr genutzt!
 // dadurch wird alles innerhalb der geschwungenen Klammern von draw()
 // unendlich oft wiederholt.
 frameRate(30); // das Fenster wird 30 mal in der Sekunde neu aufgebaut
}
 
int x = 0; // eine Ganzzahl-Variabe (Integer-Variable) wird eingeführt
int vx = 3; 
// x ist die x-Position des Kästchens, vx ist die Geschwindigkeit des Kästchens
void draw() {
 background(0); // Löschen der bisherigen Anzeige
 fill(0,0,255); // Farbe festlegen
 stroke(0,0,255);
 rect (x,height/2,10,10); // Kästchen zeichnen
 x=x+vx; // Die neue x-Position ergibt sich aus der alten und der Geschwindigkeit
if (x>width-10) { // ist der rechte Rand erreicht?
x=width-10; // Alles was in den geschweiften Klammern steht wird nur unter der
vx=-3; // Bedingug ausgeführt, wenn der rechte Rand erreicht ist.
}
if (x < 0) {
x=0;
vx=3;
}
}

Dieses Programm ist schon wesentlich schwieriger als unser erstes.

Es enthält Variablen und Kontrollstrukturen.

Eine Variable ist ein Platzhalter oder ein "Merker", der sich Werte merken kann, die aber veränderlich (variabal) sind. In der Sprache Precessing muss man angeben, was für Werte sich ein Merker merken soll, ganzzahlige Werte oder mit Komma ...

Mathematisch blödsinnig ist der Ausdruck x=x+vx. dieser ist nur wahr für vx=0, aber beim Programmieren meint diese Zeile etwas anderes: "x wird ersetzt duch x+vx" also: "Merker x, merke dir nun die alte Zahl plus den Wert von vx".

Manche andere Sprachen vermeiden diesen Bruch mit der Mathematik und nutzen dafür das Zeichen ":=".

Die nächste schwierige Stelle sind die Abfragen: if ( BEDINGUNG ) { ... }
Der Programmblock (das was in den geschweiften Klammern steht) wird nur ausgeführt, wenn die Bedingung erfüllt ist. Prorammblöcke werden in geschweiften Klammern notiert, so auch die Blöcke "setup" und "draw".

Doch genug der Theorie, nun seid ihr wieder dran:

• Ersetzt das Kästchen durch einen Kreis (Referenz nutzen!)
• Ändert das Programm so, dass der Ball sich schneller nach links als nach rechts bewegt.
• Schwieriger: der Ball soll nun auch in der Vertikalen hin- und her pendeln.

Viel Spaß! Weiter geht es morgen mit dem Teil 3.