11.2.6 Freies Programmieren

6.1 Zeichenfläche und Koordinatensystem

Bislang haben Sie in einer geschlossenen Programmierumgebung Probleme gelöst. Jetzt werden Sie in einer freien Programmierumgebung eigene Projekte programmieren.

Dazu werden bunte Zeichnungen erzeugt oder kleinen Schildkröten wird das Zeichnen beigebracht. Vor der Ausführung eines Programms wird eine Zeichenfläche mit einer bestimmten Breite und Höhe angelegt und das Programm wird dann innerhalb dieser Zeichenfläche ausgeführt.

Die Maßeinheit der Breite und Höhe auf einem Bildschirm sind Pixel. Pixel kennen Sie aus dem ersten Thema: es sind Bildschirmelemente, die aus drei Subpixeln (rot, grün und blau) bestehen und deren Farbe man einzeln steuern kann. Displays haben sehr unterschiedliche Auflösungen:

ein Bildschirm in der Full-HD-Auflösung hat 1920 Pixel nebeneinander und 1080 Pixel übereinander.
ein Bildschirm in 4K-Auflösung hat 3840 Pixel nebeneinander und 2160 Pixel nebeneinander.

Bei einem 4K-Bildschirm wird oft eine Vergrößerung eingestellt, so dass mehrere echte Pixel zu einem virtuellen Pixel zusammengefasst werden. Abhängig von der Auflösung und dem Vergrößerungsfaktor eines Displays wird eine Zeichenfläche also unterschiedlich viel Platz auf dem Display einnehmen.

Auf der Zeichenfläche kann man sich ein Koordinatensystem denken, wobei oben links der Koordinatenursprung (0 / 0) ist:

die x-Werte werden nach rechts größer
die y-Werte werden nach unten größer

Bei der Programmierung denkt man sich Koordinaten in der Zeichenfläche im Vergleich zum Mathematikunterricht an der x-Achse nach unten gespiegelt. Mit der folgenden App können Sie die Koordinaten des Zeichenbereichs erkunden:

App
Lizenz

Bewegen Sie die Maus über die Zeichenfläche.
Die Zahlen in der Klammer geben die Koordinaten der Mausspitze an, wobei oben links der Ursprung P(0/0) ist.

In einem neuen Fenster starten: Bildschirm-Koordinatensystem

6.2 Zeichenfläche anlegen

Bevor man mit Hilfe von Anweisungen etwas auf dem Bildschirm ausgeben kann, muss zuerst eine Zeichenfläche festgelegt werden. Der technische Begriff für die Zeichenfläche ist Canvas.

Um eine Zeichenfläche anzulegen geht man wie folgt vor:

Blöcke
Text

Öffnen Sie den p5.js-Blockly-Editor und ziehen Sie die vorhandenen Blöcke auf das Mülltonnen-Symbol unten rechts oder die Werkzeugleiste in der Mitte, um die Blöcke zu löschen.
Klicken Sie auf die Kategorie "p5-Funktionen" und ziehen Sie den Block "setup()" in den Block-Editor.

Ändern Sie im Block "setup()" hinter "zeichenflaeche" den Wert von "Breite" und "Höhe" auf jeweils 300 und starten Sie das Programm mit einem Klick auf "Code ausführen". Man sieht eine weiße Fläche.

Ziehen Sie aus der Kategorie "Aussehen" den Block "Hintergrund" mit der Farbauswahlfläche in den Block "setup()" und ändern Sie die Farbe. Klicken Sie wieder auf "Code ausführen". Die Zeichenfläche der Größe 300 x 300 Pixel wird mit einer hellblauen Hintergrundfarbe ausgefüllt.

Öffnen Sie den p5.js-Flems-Editor.
Ändern Sie die Größe der Zeichenfläche auf eine Breite von 300 Pixeln und eine Höhe von 300 Pixeln, indem Sie die beiden Zahlen in den Klammern von createCanvas(400, 400) verändern.

Fügen Sie folgende Anweisung an das Ende von setup ein: background("#33ccff");
Die Zahl im Argument von "background" (Hintergrund) ist eine Hexadezimalzahl, mit welcher die Farbe angegeben werden kann: HTML - Color Picker. Sie sollten folgenden Code sehen:

setup = function() {
  var zeichenflaeche = createCanvas(300, 300);
  background("#33ccff");
};

new p5();

Es wird eine Zeichenfläche mit der Größe 300 x 300 Pixel angelegt und mit einer hellblauen Hintergrundfarbe ausgefüllt.

6.3 Vergleich von Text- und Block-Programmierung

Die Block-Programmierung nimmt einem die Notwendigkeit ab, Anweisungen fehlerfrei zu tippen. Der p5.js-Blockly-Editor generiert aus den zusammengesetzten Blöcken automatisch den Programmier-Code in der Hochsprache JavaScript.

Den generierten Programmier-Code kann man ansehen, indem man auf "JavaScript-Code" klickt.
Den generierten Programmier-Code kann man bearbeiten, indem man auf "Text-Editor" klickt.

In Jahrgang 11 können Sie sich entscheiden, ob Sie mit der Block-Programmierung, mit der Text-Programmierung oder mit beiden abwechselnd arbeiten. Wenn Sie den Grundkurs Informatik wählen, wird zunehmend die Text-Programmierung verwendet werden.

Bei der Text-Programmierung muss man die Anweisungen und die genaue Schreibweise der Anweisungen auswendig können oder in einer Dokumentation nachlesen und völlig fehlerfrei tippen, damit ein Programm ausgeführt werden kann. Dafür hat man völlige Freiheit beim Tippen des Programms und kann alle möglichen Anweisungen der Programmiersprache verwenden.

Bei der Block-Programmierung kann man ein Programm aus Blöcken zusammenstellen, ohne dass man die Anweisungen auswendig kennt. Dafür können nur Anweisungen verwendet werden, für die es auch Blöcke gibt, so dass nicht alle möglichen Programme in der Block-Programmierung geschrieben werden können.

6.4 Übung 1: Strichmännchen

Beim Programmieren in der Zeichenfläche wird die Position eines Objekts mit Hilfe von Koordinaten P(x/y) angegeben. Die x-Koordinate gibt den Abstand zum linken Rand der Zeichenfläche an und die y-Koordinate gibt den Abstand zum oberen Rand der Zeichenfläche an.

Öffnen Sie den p5.js-Blockly-Editor und zeichnen Sie folgende Figur nach.

Hinweise:

Die Koordinaten in y-Richtung müssen Sie bei der Programmierung mit positiven Werten angeben.

Nutzen Sie die Grundformen "Dreieck", "Ellipse", "Linie" und "Rechteck" aus der Kategorie "Grundformen".

Ändern Sie das Aussehen der Objekte mit den Blöcken aus der Kategorie "Aussehen".

6.5 Übung 2: Olympia

Die olympischen Ringe sehen, etwas vereinfacht gezeichnet, wie folgt aus:

Erstellen Sie mit dem Block-Editor oder dem Text-Editor ein Programm, welches diese Ringe zeichnen kann.

Die Farben in der Vorlage können Sie herausfinden, indem Sie das Bild mit den Ringen speichern (rechte Maustaste auf das Bild), in z.B folgender Internetseite laden: https://imagecolorpicker.com/ und sich dort die Farben im Hex-Code oder im RGB-Code anzeigen lassen.