Anweisung und Sequenz

Ein Ziel dieses Kurses ist es, dass Sie lernen, wie man einem Computer Algorithmen beibringen kann. Dazu benötigen wir eine Möglichkeit, den Computer zu programmieren. Wenn Sie sich im Internet über Programmiersprachen und Programmiersysteme informieren, sind Sie mit einer unüberschaubaren Fülle von Angeboten konfrontiert. Man fühlt sich schnell orientierungslos und überfordert.

In diesem Kurs programmieren wir direkt auf der Internetseite, ohne dass Sie sich Gedanken machen müssen, welche Programmiersprache Sie verwenden, welches Programm man herunterladen muss,...

Wir Menschen denken gerne in Bildern. Deswegen werden Sie in diesem Kurs viel mit geometrischen Objekten wie Kreisen, Ellipsen, Vierecken, Strecken,... arbeiten. Genug der Worte, fangen wir einfach mal an...

Anweisung

Wie Sie bereits gelernt haben, ist ein grundlegender Bestandteil eines Algorithmus die Anweisung. Ein Beispiel für eine Anweisung finden Sie in folgender Aufgabe.

Glückwunsch, Sie haben Ihr erstes Computerprogramm geschrieben und ausgeführt! Das Programm besteht aus einer einzelnen Anweisung, die wir uns jetzt genauer ansehen werden:

line(10, 30, 50, 60);

• line ist eine Anweisung, die in der hier verwendeten Programmiersprache (Javascript mit p5.js) bedeutet, dass der Computer eine Linie zeichnen soll.
• die Zahlen geben die Koordinaten an, von wo bis wo die Linie gezeichnet werden soll: Vom Punkt P(10/30) bis zum Punkt Q(50/60).

Sequenz

Das sieht noch ziemlich schlicht aus, um nicht zu sagen langweilig. Im nächsten Beispiel soll daher der Zeichenbereich eingefärbt werden und auch die Linie soll kräftiger und farbiger werden.

Dafür benötigt man mehr als eine Anweisung. Wie Sie sich vielleicht/hoffentlich erinnern, nennt man ein Folge von Anweisungen ein Sequenz. Mit der folgenden Sequenz soll der Zeichenbereich und die gemalte Linie farbenfroher werden.

• createCanvas(200, 200); erzeugt einen Zeichenbereich, der 200 Pixel breit und 200 Pixel hoch ist.
• background('yellow'); färbt den Zeichenbereich gelb (= yellow)
• stroke('red'); setzt die Zeichenfarbe für die Linie auf rot (= red)
• strokeWeight(10); setzt die Liniendicke für die Farbe auf 10 Pixel
• line(10, 30, 190, 170); kennen Sie bereits

Lösung

Wie Ihnen vielleicht aufgefallen ist, liegt der Koordinatenursprung des Zeichenbereichs oben links. Die x-Werte werden nach rechts größer und die y-Werte werden nach links größer.

Mit folgendem Programm können Sie die Koordinaten des Zeichenbereichs erkunden. Bewegen Sie die Maus einfach über die Zeichenfläche. Was im Programm steht, brauchen Sie nicht zu verstehen!

Geometrische Grundformen

Nur mit Strichen zeichnen ist recht eintönig, deswegen gibt es Anweisungen für eine Vielzahl geometrischer Formen.

point(x1, y1);

An der Koordinate P(x1/y1) wird ein Punkt gezeichnet.

line(x1, y1, x2, y2);

Vom Punkt P(x1/y1) wird eine Linie zum Punkt Q(x2/y2) gezeichnet.

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

Durch die Punkte A(x1/y1), B(x2/y2), C(x3/y3) wird ein Dreieck gezeichnet.

rect(x1, y1, breite, hoehe);

Der Punkt A(x1/y1) ist der obere linke Punkt. Von dort aus wird das Rechteck nach rechts (breite) und nach unten (hoehe) gezeichnet.

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

Durch die Punkte A(x1/y1), B(x2/y2), C(x3/y3) und D(x4/y4) wird ein Viereck gezeichnet.

ellipse(x, y, breite, hoehe);

Um den Mittelpunkt M(x/y) wird eine Ellipse mit der angegebenen Breite und Höhe gezeichnet. Um einen Kreis zu zeichnen, muss die Breite und die Höhe gleich sein.

Jetzt kennen Sie einige Formen, mit denen Sie arbeiten können. Bearbeiten Sie jetzt folgende Aufgabe: