Inf9 3.1 Erste Schritte mit Processing

Processing ist eine kleine Programmierumgebung mit beispielsweise Zeichenbefehlen:

point(x,y);

//Punkt mit den Koordinaten P(x|y)

line(x1,y1,x2,y2);

//Linie von P(x1|y1) nach Q(x2|y2)

rect(x,y,b,h);

//Rechteck mit Breite b und Höhe h, mit linker oberer Ecke bei P(x|y)

triangle(x1,y1,x2,y2,x3,y3);

//Dreieck ABC mit den Eckpunkten A(x1|y1), B(x2|y2) und C(x3|y3)

ellipse(x,y,b,h);

//Ellipse mit Höhendurchmesser h, Breitendurchmesser b und Mittelpunkt M(x|y)

arc(x,y,b,h,alpha,beta);

//Zeichnet einen Ellipsenbogen mit M(x|y), Breite b und Höhe h  beginnend im Uhrzeigersinn beim Winkel alpha und endend beim Winkel beta.

radians(Winkelgröße);

//Hilfsmethode, um den Winkel in Grad anzugeben. 
z.B. radians(90) = 90°

quad(x1,y1,x2,y2,x3,y3,x4,y4);

//Viereck mit den vier Ecken A(x1|y1), B(x2|y2), C(x3|y3) und D(x4|y4)

beginShape();
vertex(x,y); 
endShape(CLOSE);

//Beginnt ein Vieleck
//Fügt neue Ecke hinzu
//Ende des Vielecks

fill(graustufe);

fill(rot, gruen, blau);

noFill();

//Steht vor der zu füllenden Form. Gibt entweder die Füllfarbe in Graustufe 0-255 an oder den Rot-, Grün- und Blauanteil jeweils 0-255 an oder definiert, dass die Form innen leer ist.

stroke(pinselstrichfarbe); 
stroke(rot, gruen, blau); 

strokeWeight(pinselstrichstärke);

noStroke();

//Steht vor der Form. Verändert die //Farbe des Randes der Form.

//Verändert die Dicke des Randes.

//Kein Rand

size(Breite,Höhe);

//Setzt die Größe des Zeichenfensters

background(Graustufe);
background(Rot,Grün,Blau);

//Setzt die Hintergrundfarbe des Zeichenfensters

Jede Methode endet mit zwei runden Klammern. In den Klammern können weitere Parameter angegeben werden, die beeinflussen, was die Methode ausführt.
Merksatz 1.1.1

Jeder dieser Befehle führt eine vorgefertigte Methode von Processing aus, um auf der Zeichenfläche zu zeichnen. Wichtig ist dabei, dass alle Aufrufe dieser Methoden mit einem „;“ beendet werden.

Alle Zeilen in Java enden mit einem „;“.
Merksatz 1.1.2

Die Reihenfolge der Anweisungen ist wichtig! Unten siehst du jeweils zwei Programmcodes und ihre grafische Ausgabe:

rect(20,20,50,50);
ellipse(40,40,20,20);
fill(0,0,255);
triangle(50,50,70,50,70,80);

triangle(50,50,70,50,70,80);
rect(20,20,50,50);
fill(0,0,255);
ellipse(40,40,20,20);

Man erkennt, dass je nachdem in welcher Reihenfolge die Anweisungen stehen, eine andere Zeichnung herauskommt.

Die Reihenfolge der Anweisungen und Befehle sind beim Programmieren entscheidend. Wir nennen diesen Grundbaustein eines jeden Programmes eine Sequenz von Anweisungen oder Befehlen.
Merksatz 1.1.3

Programmiersprachen sind oft sehr empfindlich gegenüber Groß- und Kleinschreibung. Wenn man einen Befehl nicht exakt wie er definiert ist schreibt macht der Computer oft nichts oder wirft eine Fehlermeldung beim Kompilieren des Programmes aus.

Achte auf Groß- und Kleinschreibung!
Merksatz 1.1.4

Aufgabe 1:

Zeichne einen Kreis in einem Dreieck in einem Rechteck.

Aufgabe 2:

Verbessere den Quelltext, so dass die passende Ausgabe angezeigt wird.

Code:

Gesuchte Ausgabe:

size(200,200);
rect(50,50,100,100);
background(50);

Aufgabe 3:

Erschaffe die folgenden Figuren und notiere den nötigen Programmtext in dein Heft. (Größe der Ausgabe 200 x 200). Tipp: Farbcodes findest du hier.

Aufgabe 4:

Experimentiere mit der arc() Methode, um folgende Figuren zu zeichnen.

Lösungen der Aufgaben (nur für Abonnenten):

Hier findest du alle Lösungen der Aufgaben dieses Kapitels.

Zurück zur Übersicht