Grundlagen

Arbeitsblatt

Das Arbeitsblatt für diesen Abschnitt kann hier digital mit dem Link oder dem QR-Code heruntergeladen werden: AB_Grundlagen.pdf

Die Bearbeitung erfolgt gleich parallel zu dieser Website. Fange mit dem Arbeitsblatt erst an, wenn du dazu aufgefordert wirst.

Im Verlauf dieses ersten Teils wirst du schrittweise die Bedienung bzw. Programmierung von Formen kennenlernen. Das mag manchmal stupide wirken, ist aber erst einmal nötig. Am Ende wartet dafür eine Kreativaufgabe, bei der du dich etwas austoben kannst.

Processing starten

Öffne zunächst "Processing", indem du die Windows-Taste drückst und dann direkt "Processing" schreibst. Es sollte dann als Auswahl erscheinen. Mit der Enter-Taste oder durch Anklicken kannst du es öffnen.

Optional kannst du das Processing-Fenster und diese Website im Splitscreen darstellen, damit beide jeweils die Hälfte des Monitors einnehmen.

Erste Grundlagen

Übertrage den folgenden Befehl nach Processing (durch Kopieren oder abtippen) und führe das Programm mit dem Play-Button aus:

point(20,30);

(Das Semikolon muss nach jedem Befehl geschrieben werden, damit dem Programm klar ist, wann ein Befehl aufhört. Wenn man es vergisst, gibt es eine Fehlermeldung mit "Missing ';'".)

Du solltest im Fenster dann einen kleinen Punkt erkennen können. Er ist schwer zu erkennen, weil er nur 1 Pixel groß ist.

Verändere die Zahlen 20 und 30 etwas (zwischen 0 und 100) und versuche daran ihre genaue Bedeutung nachzuvollziehen.

Da ein einzelner Pixel so schwer zu erkennen ist, machen wir aus dem Punkt einen Kreis. Was heißt "Kreis" auf englisch? Versuche durch Ausprobieren einen Kreis zu zeichnen.
Hinweise: Für einen Kreis brauchst du eine dritte Zahl als Größenangabe und Befehle werden allgemein immer klein geschrieben.

2 kleine Herausforderungen:

Zeichne den Kreis so, dass er in der Mitte des Fensters liegt und so groß ist, dass er genau die Ränder berührt.

Zeichne den Kreis dann so, dass er 10 Pixel breit ist und in der oberen Rechten Ecke jeweils die Ränder berührt.

Das Fenster ist nun noch sehr klein. Verändere mit dem size(...);-Befehl die Größe so, dass es 400 Pixel breit und 300 Pixel hoch ist.

Bearbeite nun den ersten Teil des Arbeitsblattes zu den Koordinaten.

Weitere Formen

Nachfolgend sind mehrere Befehle zum Zeichnen weiterer Formen aufgeführt. Probiere sie aus und vervollständige dabei die rechte Spalte auf dem Arbeitsblatt unten.

point(,);

line(,,,);

triangle(,,,,,);

square(,,);

rect(,,,);

circle(,,);

ellipse(,,,);

Ränder und Füllungen

Manchmal möchte man nicht, dass eine Form ausgefüllt ist oder eine sichtbare Umrandung hat. Deshalb wirst du jetzt lernen, wie du diese einstellst. Zeichne dafür einen Kreis in der Mitte des 400x300-Pixel großen Fensters, der einen Durchmesser von 100 Pixeln hat.

Ergänze einen zweiten Kreis, der um 50 Pixel weiter unten liegt. Weitere Formen werden einfach Zeile für Zeile untereinander geschrieben.

Ergänze noch einen Kreis, der gegenüber dem ersten um 50 Pixel weiter links liegt.

Führe das Programm aus und betrachte das Ergebnis. Es sollte wie folgt aussehen:

Du solltest feststellen, dass der zuletzt programmierte Kreis über die anderen gezeichnet wird. Das kennst du schon von den Algorithmen: Es wird von oben nach unten abgearbeitet.

Verändere den Programmcode so, dass der linke Kreis unter den anderen beiden gezeichnet wird oder anders gesagt, die anderen beiden über dem linken.

Der im Code obenstehende Kreis soll nun so bleiben, wie er ist. Die anderen beiden Kreise sollen aber jetzt nicht mehr ausgefüllt sein, sondern nur aus ihrer Umrandung bestehen.

Füge den Befehl noFill(); nach dem ersten circle(...);-Befehl ein und beobachte das Ergebnis in der Zeichnung.

Was passiert, wenn du vor den letzten Kreis folgenden Befehl einfügst?

noStroke();

Da der letzte Kreis jetzt weder eine Füllung noch eine Umrandung hat, sieht man ihn gar nicht mehr. Damit er zumindest seine Füllung wiederbekommt, müssen wir den noFill();-Befehl direkt vor diesem Kreis wieder aufheben.

Mache das mit fill(255);. Wofür die 255 steht, kannst du danach gerne ausprobieren. Die Zahl darf von 0 bis 255 gehen.

Es fehlt jetzt erst einmal nur noch, dass du die Umrandung verändern kannst.

Probiere dafür die Befehle strokeWeight(5); und noFill();

Notiere auf dem Arbeitsblatt unten, was die Befehle noFill();, fill(255);, strokeWeight(5);, noStroke(); und stroke(0); aus und verändere dabei die Zahlen, um ihre Bedeutung kennenzulernen.

Nachbauen

Baue die folgende Zeichnung möglichst exakt nach. Das Fenster soll 400x400 Pixel groß sein.

Kreativaufgabe: Schneemann

Die abschließende Aufgabe soll zum eigenen, kreativen Programmieren dienen und klingt ganz einfach: Zeichne in Processing einen Schneemann. Solltest du schneller als andere sein, kannst du zB den Hintergrund noch ausschmücken.

Farben mit RGB

Computer kennen nur 1en und 0en. Es muss also ein System überlegt werden, wie nur aus diesen beiden Zeichen jede erdenkliche Farbe erzeugt werden kann. Wir wissen bereits, dass auch größere Zahlen möglich sind, wenn die 1en und 0en kombiniert werden. Z.B. entspricht 101 der Dezimalzahl 5.

Farben bestehen aus den drei Komponenten Rot, Grün und Blau. Physikalisch kann man damit alle Farben erzeugen, die unsere Augen wahrnehmen, weil sie selbst nur Sensoren für Rot, Grün und Blau besitzen und unser Gehirn diese zu einem Gesamteindruck mischt.

RGB-Codes

Man verwendet acht 1en und 0en (Bits) pro Farbanteil, um damit insgesamt 16,7 Millionen Farben zu ermöglichen. Damit kommt man nämlich auf maximal 256 Möglichkeiten pro Farbanteil (von 00000000 für 0 bis 11111111 für 255). Die Farbe Rot wird dann als (255, 0, 0) dargestellt. Der rote Farbanteil ist also maximal vorhanden, der grüne und der blaue gar nicht. Der Code (100, 0, 200) entspricht einem dunklen Lila, weil es eine Mischung aus Rot und Blau ist, wobei der blaue Anteil größer als der rote ist (sonst wäre es ein dunkles Rosa) und die Farben nicht voll leuchten, sondern geringer sind (kleiner als die maximalen 255).

Für Computer wäre das:

(100, 0, 200) = 011001000000000011001000

Schieberegler für RGB-Codes

Processing-Befehl:

Arbeitsblatt

Das Arbeitsblatt für diesen Abschnitt kann hier digital mit dem Link oder dem QR-Code heruntergeladen werden: AB_Farben.pdf