Hier entdeckst du “textbasiertes” Programmieren.
Dazu nutzen wir das Programm “Processing”.
Block 1 - Grundfiguren & vordefinierte Variablen
Hier lernst du Formen (z.B. Rechtecke, Kreise) zu erstellen und damit Bilder zu gestalten. Dabei wirst du verschiedene Farben verwenden. Außerdem wirst du Variablen nutzen, um die Größe und Position von Formen festzulegen. Du wirst feststellen, dass die Reihenfolge deiner Befehle wichtig ist! Viel Spaß!
Grundfiguren
Dies Aufgabe besteht aus mehreren kleinen Unteraufgaben.
Als Vorlage für dein Programm kannst du folgende Codestruktur verwenden:
void setup() {
size(500, 500);
}
void draw() {
//Zeichne hier dein Bild
}
Schritt 1: Zeichne ein Rechteck
Es sollte dieselbe Position und Größe, wie im Bild gezeigt, haben.
Schritt 2: Zeichne ein Dreieck
Das Dreieck sollte mittig platziert sein. Die untere Kante hat eine Länge von 300 Pixel. Die übrigen Werte sind dem Bild zu entnehmen.
Schritt 3: Zeichne einen Kreis
Der Kreis sollte eine Größe von 150 Pixel mal 150 Pixel haben und so wie im Bild positioniert sein. Achte besonders darauf, dass der Kreis hinter dem Rechteck platziert ist.
Schritt 4: Bring Farben ins Bild
Färbe die drei Figuren nun so ein, wie im Bild gezeichnet.
Erzeuge folgendes Bild. Unten findest du eine Hilfestellung.
Grundaufgabe: Erstelle ein Programm, um das Bild zu erzeugen.
Das Fenster soll eine Größe von 500×500 Pixel. Die Objekte haben folgende Farbwerte:
- Hintergrund: (150, 200, 255)
- grün: (0, 200, 0)
- gelb: (250, 250, 150)
- rot: (200, 0, 0)
Hilfestellung: In der Grafik sind hilfreiche Punkte und Längen eingezeichnet:
Grundaufgabe: Versuche folgendes Bild zu erstellen. Achte dabei auf die Reihenfolge der Befehle!
Farbwerte: (Du kannst, musst aber nicht diese Farben verwenden)
- gelb: (240, 240, 30)
- rot: (240, 60, 10)
- braun: (230, 160, 20)
Erstelle ein Programm, dass ein Bild von einem Regenbogen erstellt. Der Regenbogen soll aus sechs Segmenten bestehen.
Das Fenster hat eine Größe von 500 x 500 Pixel. Du kannst für die Farbsegmente Kreise mit dem Mittelpunkt (250, 500) verwenden. Die einzelnen Abschnitte haben eine Breite von 50 Pixeln.
Verwende folgende Farben:
Rot: (255, 0, 0)
Gelb: (255, 255, 0)
Grün: (0, 255, 0)
Türkis: (0, 255, 255)
Blau: (0, 0, 255)
Magenta: (255, 0, 255)
Tipp: Du kannst für die Mitte des Regenbogens einen weißen Kreis verwenden.
Erstelle ein Programm, welches das folgende Bild erzeugt:
Das Fenster hat eine Größe von 300×300 Pixel.
Für den Hintergrund, die Räder und die Lokomotive kannst du folgende Farbenwerte verwenden:
- blau: (150, 200, 255)
- grau: (150)
- rot: (255,0,0)
Zeichne außerdem eine Wiese, das Fenster und einen Rauchfang. Für die Wiese kannst du folgenden Farbwert verwenden:
- grün: (0,200,0)
Zusatzaufgabe: Füge Dampfwolken hinzu.
Erstelle ein Windrad. Wähle eine Fenstergröße von 500 x 500.
Vordefinierte Variablen
Grundaufgabe: Erstelle ein Fenster der Größe 800 x 800 Pixel mit einem weißen Hintergrund.
- Zeichne nun einen Kreis (Befehl: circle) an der Stelle, wo sich der Mauszeiger befindet. Verwende dafür mouseX und mouseY. So erhältst du ein kleines Zeichenprogramm. Die Größe des Kreises kannst du beliebig wählen.
Zusatzaufgaben:
a) Versuche die Farbe deines Ovals abhängig von der Mausposition zu ändern. Dies kannst du machen, indem du mouseX und mouseY im fill-Befehl verwendest. Die Farben müssen jedoch nicht genau diesem Beispiel entsprechen:
Hinweis: Der Befehl noStroke() entfernt die schwarze Umrandung.
b) Je weiter rechts sich der Mauszeiger befindet, desto größer soll der Kreis werden. Der Durchmesser könnte z.B. einem Zehntel von mouseX entsprechen.
Block 2 - Verzweigungen und eigene Variablen
Hier entdeckst du was Bedingungen sind und lernst sie einzusetzen. Mit Bedingungen kannst du in deinen Programmen optionale und alternative Handlungen umsetzen. Zusätzlich lernst du weitere praktische vordefinierte Variablen kennen.
Einfache Vergleiche
Grundaufgabe: Wenn deine Kreisscheibe die Fensterhälfte überquert, soll der Kreis die Farbe ändern. Auf der linken Fensterhälfte soll der Kreis grün sein, sonst die Farbe rot annehmen.
In diesem Beispiel wird die Verzweigung zusammen mit der Variable key verwendet. Diese Variable gibt an, welche Taste auf der Tastatur gedrückt ist. Eine Abfrage kann beispielsweise so aussehen:
if(key == 'e'){ ... }
Aufgabenstellung:
- Wenn die Taste e gedrückt ist, dann zeichne einen roten Kreis
- Wenn die Taste d gedrückt ist, dann zeichne ein grünes Dreieck.
- Wenn die Taste r gedrückt ist, dann zeichne ein blaues Rechteck.
- Wenn die Taste x gedrückt ist, dann lösche alle bisherigen Formen (Befehl background)
In dieser Aufgabe soll ein Zeichenprogramm mit verschiedenen Farben erstellt werden. Starte mit folgender Grundstruktur:
void setup() {
size(800, 800);
}
void draw() {
// Dein Code
}
Aufgabenstellung:
- Es werden nur noch Kreise gezeichnet, wenn die Maustaste gedrückt ist (mousePressed).
- Mit den Keyboard-Tasten wird gewählt, in welcher Farbe als nächstes gezeichnet wird (key).
-
-
- Taste r: Rot
- Taste g: Grün
- Taste b: Blau
-
Verwende hierfür den fill Befehl.
Tipp: Mit noStroke(); werden keine schwarzen Umrandungen mehr angezeigt.
Erweiterungsaufgaben für die Schnellen:
- Füge eine Farbe deiner Wahl hinzu, wobei ein Parameter von mouseX oder mouseY abhängen soll.
- Wenn die Taste l gedrückt wird, dann soll die Zeichnung gelöscht werden.
- Wenn mouseX größer als 230 ist, soll der Kreis sich um 50 vergrößern.
Erstelle ein Fenster der Größe 600 x 600 Pixel und zeichne darin eine dunkelgraue (50, 50, 50) Glühbirne. Die Glühbirne besteht aus einem Kreis und einem Rechteck.
Tipp: Mit dem Befehl noStroke(); verschwinden die Umrandungen der Formen.
Wenn die Maustaste gedrückt ist, dann soll die Glühbirne gelb (255, 255, 0) leuchten. Dafür wird die Variable mousePressed und eine Verzweigung verwendet.
Zusatzaufgabe: Wenn die Maustaste gedrückt ist, sollen außerdem Lichtstrahlen um die Glühbirne gezeichnet werden. Dies kann man dem Befehl line(x1, y1, x2, y2) gemacht werden. (x1, y1) ist hierbei der Startpunkt und (x2, y2) der Endpunkt der Linie. Die Strahlen müssen nicht exakt so aussehen, wie auf dem Bild.
Eigene Variable
Schreibe ein Programm, das zuerst einen kleinen Kreis zeigt, der zu einem großen Kreis anwächst.
Schritte:
- Erstelle dazu eine int-Variable mit dem Namen size = 0 vor dem setup-Aufruf. Das bedeutet, dass die Variable in setup und draw genutzt werden kann.
int wachsen=0; //wachsen ist global (im ganzen Programm aufrufbar) void setup() {
size(500, 500);
}
void draw() {
//Zeichne hier dein Bild
} - size soll stets um 10 wachsen.
- Erstelle einen Kreis, der von size abhängt und größer wird.
- Sobald er seine maximale Größe von 500 erreicht hat, soll er wieder als Kreis mit Größe 0 beginnen und wieder anwachsen.
Variation der Farbe
Die Farbe des Kreises soll von wachsen abhängen. Du kannst die Variable wachsen aus Schritt 1 im Befehl fill verwenden.
Erstelle einen Kreis, der sich von oben nach unten bewegt. Sobald der Kreis das Ende erreicht, soll der Kreis wieder oben erscheinen.
Dazu musst du eine Variable erzeugen, die du in die y-Koordinate des Mittelpunktes einsetzen.
int y1 = 0; //y-Position des Kreises
Block 3 - Spiel
Hier kannst du was du gelernt hast nun einsetzten, um ein eigenes Spiel zu programmieren!
Nutze deine Aufgabe aus Block 2 – Kreis in Bewegung und erweitere Sie!
Um mit dem Spiel zu starten müssen wir wie gewohnt im setup() die Größe unseres Spielfelds festlegen. Wir verwenden ein Spielfeld der Größe 400x800px
void setup() {
size(400, 800);
background(255,255,255);
}
void draw() {
//Zeichne hier den Hintergrund des Spielfelds, dass es so aussieht, wie auf dem Bild oben.
}
Das Rechteck soll klein sein und soll am unteren Bildschirmrand sein. Das Rechteck soll sich mit der Position der Maus nach links und rechts bewegen.
Die genaue Größe des Rechtecks kannst du selbst festlegen.
Schritt 1: Erzeuge zwei weitere Kreise vorerst am oberen Bildschirmrand in den richtigen Größen.
Schritt 2: Die Kreise sollen nach unten fallen. Jeder Kreis braucht eine eigene Variable. Dazu kopierst du am besten diesen Code VOR das setup()
int y1 = 0; //y-Position des ersten Kreises int y2 = 0; //y-Position des zweiten Kreises int y3 = 0; //y-Position des dritten Kreises
Schritt 3: Die Kreise fallen lassen. Um die y-Position der Kreise zu erhöhen, müssen die Variablen überschrieben werden. Hier ein Beispiel, wie das geht:
y1 = (y1+5);
Dabei ist die Zahl 5 sozusagen die Geschwindigkeit, in welcher der Ball fällt. Diese Codezeile sollte im Code direkt nach dem erzeugten Kreis stehen. Probier es einmal aus und schau, was passiert!
Wir müssen natürlich immer überprüfen, ob unser Rechteck die Kreise auch wirklich auffängt. Zwei Bedingungen müssen überprüft werden. Am besten überprüfst du immer die x-Position der Maus und ebenfalls, ob der Kreis auf Position des Rechtecks ist. Wenn wir den Ball gefangen haben, müssen unsere Variablen wieder auf 0 gesetzt werden.
Hier ist das Grundgerüst für den ersten Kreis:
if(y1> HIER KOMMT DEIN CODE){ if(mouseX < HIER KOMMT DEIN CODE){ y1=0; } }