Kursmaterial: Seite 2, Bilder

Die vorige Seite hat Dir genau, Wort für Wort, gesagt was Du tun sollst, ohne Dir eine Wahl zu lassen. Wir entschuldigen uns für diese schamlose Unterdrückung deiner künstlerischen Identität. Jetzt, da Du die Grundlagen schon kennst, wird das Kursmaterial etwas weniger linear sein und Dir mehr Spielraum zum Experimentieren lassen.

Den Bilder-Spielplatz öffnen

Ziel

Mache Dich mit unserer visuellen Programmierumgebung vertraut.

Anweisungen

Öffne die Spielplatz-Seite in einem neuen Tab.

Frohlocke.

Lies den ersten Abschnitt des JavaScript-Programms im unteren Teil des Bildschirms.

Spiel ein bisschen mit dem Inhalt der drawing-Funktion herum. Verändere hier und da die Werte und Farben und klicke auf 'Render' um das Ergebnis zu sehen. Lies Dir danach den Text unter dem Programm durch und füge ein paar neue Formen hinzu.

Erklärung

Die Idee hier ist, ein Gefühl für Konzepte der Programmierung zu bekommen, indem wir sie auf etwas anwenden, das leicht zu beobachten ist: Grafiken. Die Spielumgebung hat eine Anzahl praktischer Zeichen-Operationen für uns vordefiniert und lädt uns ein, mit ihnen zu experimentieren.

Im unteren Teil des Programms gibt es mehrere Zeilen, die mit zwei Schrägstrichen (//) anfangen. Man nennt sie Kommentare. Sie helfen dabei, Programme verständlicher zu machen, sind aber nicht selbst Teil des Programms. In Kommentaren kannst Du schreiben was auch immer Du willst—der Computer schaut sich das sowieso nie an.

Die Programme, die Du in der Spielumgebung eingibst, laufen nicht im Vakuum. Für diesen Kurs haben wir eine Reihe von einfachen Funktionen vordefiniert, mit denen man grafische Operationen ausführen kann. Sie sind im Kommentar des Beispiels beschrieben und können von Deinem Programm verwendet werden.

Das Code-Stück function drawing() definiert eine Funktion mit dem Namen drawing. Ein paar Schritte weiter werden wir mehr über die Definition von Funktionen erfahren, aber diese eine Definition ist speziell: Sie wird immer ausgeführt, wenn Du den 'Render'-Button klickst. Dort gehören also die Anweisungen (englisch: Statements) hin, die Dein Bild produzieren.

Die Schleife

Ziel

Lernen was eine Schleife ist, und wie man sie in JavaScript ausdrückt.

Das Problem: Wir wollen zwanzig Punkte malen ohne circle(x, y, something) zwanzigmal hinzuschreiben.

Anweisungen

Öffne diesen Link, um zu einer drawing-Funktion mit folgendem Programm zu gelangen:

color("red");
var count = 0;
while (count < 20) {
  circle(count * 10, 0, 4);
  count = count + 1;
}

Erklärung

Solange man seinem Programm nichts anderes beibringt, wird es Anweisungen einfach von oben nach unten ausführen. Das Großartige daran, einen Computer für uns arbeiten zu lassen, ist, dass er uns eintönige Aufgaben abnehmen kann. Daher wollen wir gar nicht erst anfangen, circle(0, 0, 4); circle(10, 0, 4); usw. zu schreiben, um unsere Punkte zu malen.

Mit dem Wort while kann man eine besondere Art von Anweisungen einleiten, die man Schleifen nennt (englisch: loop). Eine Schleife besteht aus einer Bedingung (englisch: condition) und einem Schleifenkörper (englisch: body). Im Beispiel ist count < 20 die Bedingung und der Körper ist alles, was zwischen den geschweiften Klammern steht. Eine Schleife hält sich nicht an die gewöhnliche Top-Down-Reihenfolge. Stattdessen wiederholt sie den Körper so lange, wie die Bedingung gültig ist.

Die geschweiften Klammern halten die zwei Anweisungen im Inneren der Schleife zusammen—sie machen deutlich, dass beide zum Schleifenkörper gehören. Wahrscheinlich ist Dir aufgefallen, dass diese Zeilen etwas eingerückt sind. Das macht man, um Programme leichter lesbar zu machen (in diesem Fall, um es offensichtlicher zu machen wo der Block anfängt und aufhört). Unbedingt erforderlich ist es aber nicht.

Im Beispiel verwendet die Schleife eine Variable als inneren Fortschritts-Anzeiger. Die Variable count fängt mit dem Wert null an und wird jedesmal, wenn der Schleifenkörper ausgeführt wird, um eins erhöht. Eine Bedingung ist ein ganz normaler Ausdruck und das Symbol < ist ein gewöhnlicher Operator, der zwei Ausdrücke miteinander vergleicht und als Wert etwas zurückgibt, dass angibt ob der Wert auf der linken Seite kleiner ist als der auf der rechten Seite. Wir würden also erwarten, dass der Schleifenkörper genau zwanzigmal ausgeführt wird—beim ersten Mal mit count bei null, dann bei eins und so weiter, bis 19. Wenn count 20 erreicht, ist die Bedingung nicht mehr gültig und das Programm wird hinter der Schleife fortgesetzt (was in unserem Fall das Ende des Beispiels ist).

Es gibt noch ein paar wissenswerte Dinge zum <-Operator: Der Wert, den er produziert, ist keine Zahl und kein String, sondern ein neuer Typ, genannt Boolean. Dieser Typ hat nur zwei mögliche Werte: true und false. Andere Operatoren, die solche Werte produzieren, sind > (größer als) und == (gleich).

Übung: Versuche ein Programm zu schreiben, das, statt nur eine gepunktete Linie zu malen, ein Raster mit 20 mal 20 Punkten malt. Dafür brauchst Du zwei Schleifen und zwei Variablen zum Zählen. Hinweis: Du kannst eine Schleife innerhalb einer anderen Schleife schreiben.

Während Du Programme in der Spielumgebung ausprobierst, halte ein Auge auf die Browser-Konsole. Wenn der Computer nicht versteht, was Dein Programm ihm sagen will, wird er Dir das dort (in mehr oder weniger verständlicher Form) mitteilen. Wenn nach einem Klick auf 'Render' nichts passiert, hast Du Dich wahrscheinlich irgendwo vertippt.

Bedingte Ausführung

Ziel

Als Nächstes wollen wir jeden zweiten Punkt unserer Punkt-Linien in einer anderen Farbe malen. Es soll immer ein Punkt schwarz sein und der nächste grau.

Dafür werden wir etwas über bedingte Anweisungen lernen.

Anweisungen

Ein Programm, das tut was wir wollen, wenn wir es in die drawing-Funktion packen, findest Du hier. So sieht es aus:

var count = 0;
while (count < 20) {
  if (count % 2 == 0) {
    color("black");
  } else {
    color("gray");
  }
  circle(count * 10, 0, 4);
  count = count + 1;
}

Erklärung

Das erste neue Konzept hier ist der Operator %, gesprochen 'Modulo'. Man braucht ihn nicht so häufig, aber hier ist er nützlich. Er teil die Zahl auf der linken Seite durch die auf der rechten Seite und gibt den Rest der Division zurück. Mit count % 2 == 0 kann man also prüfen, ob count eine gerade Zahl ist, denn dann ist der Rest null, wenn man sie durch zwei teilt.

Das eigentlich wichtige neue Konzept hier ist die Anweisung if/else. Genau wie eine Schleife, benötigt auch sie eine Bedingung. Wenn die Bedingung wahr (true) ist, wird die darauf folgende Anweisung ausgeführt. Wenn nicht, führt es die Anweisung aus, die nach dem Wort else kommt.

Der else-Teil kann auch weggelassen werden, um anzuzeigen, dass gar nichts passieren soll, wenn die Bedingung nicht gilt.

Übung: Erweitere das Beispiel-Programm so, dass jeder dritte Punkt um 10 Einheiten nach oben verschoben erscheint. Hinweis: Definiere eine Variable height und setze ihren Wert innerhalb einer bedingten Anweisung.

Funktionen

Ziel

Was machen wir, wenn wir mehrere fröhliche Gesichter (englisch: Smileys) an verschiedenen Stellen auf dem Bildschirm platzieren wollen? Wir könnten natürlich die sechs Anweisungen wiederholen, die zum Malen einer solchen Form benötigt werden, aber wir wollen ja den Computer für uns arbeiten lassen.

Wir werden lernen, wie man neue Funktionen definiert, um nützliche Operationen für uns auszuführen.

Anweisungen

Hier ist die smiley-Funktion:

function smiley(x, y) {
  moveTo(x, y);
  color("yellow");
  circle(0, 0, 50);
  color("black");
  circle(-20, 10, 7);
  circle(20, 10, 7);
  lineWidth(3);
  path("g -20 -10 q 20 -10 0 -50 c");
  goBack();
}

Du kannst sie in Deinen Code vor (oder hinter) die drawing-Funktion packen und diese so umschreiben, dass sie die neue Funktion aufruft. So zum Beispiel:

function drawing() {
  smiley(0, 0);
  smiley(-100, 20);
  smiley(100, 50);
}

Erklärung

Eine Funktion ist im Prinzip eine abgekürzte Schreibweise für ein Stück Code. Man definiert sie mit dem Wort function, wie oben zu sehen ist. Das erzeugt eine Variable mit dem gewählten Namen (in diesem Fall smiley), der für das Stück Code steht. Die Wörter hinter dem Funktionsnamen—(x, y)—sind die Parameter der Funktion. Sie erhalten ihren Wert, wenn die Funktion aufgerufen wird. Zum Beispiel würde smiley(0, 0) den Körper der Funktion ausführen und dabei sowohl x als auch y den Wert null geben.

Eine Sache, die man beachten muss, ist, dass Variablen, die innerhalb von Funktionen definiert werden (einschließlich ihrer Parameter), lokal zu dieser Funktion sind. Also wenn Du eine zweite Funktion hast, die auch einen x-Parameter hat, wie zum zum Beispiel circle, dann sind die beiden x-Variablen unabhängig voneinander und beeinflussen sich nicht gegenseitig. Innerhalb von smiley steht x immer für das x, das in smiley definiert ist, und in einer anderen Funktion würde eben das x gemeint sein, das im Kontext dieser Funktion als Variable existiert.

Übung: Definiere eine Funktion smileySquadron die fünf Smileys nebeneinander malt. Verwende dafür eine while-Schleife. Und wenn das funktioniert, male so viele Smileys wie Du möchtest!

Kreativ-Zone

Ziel

Erfinde Dein eigenes, unterhaltsames, grafisches Programm.

Anweisungen

Hier sind ein paar Dinge, die nützlich sein könnten:

Math.random() produziert Zufallszahlen zwischen 0 und 1. Math.random() * 10 gibt also eine unvorhersehbare Zahl zwischen null und zehn zurück, usw.

Mit setInterval(func, n) kann man eine Funktion alle n Millisekunden abfahren. In Verbindung mit der Funktion clear kannst Du damit Animationen erstellen. Ein Beispiel dafür findest Du hier.

Die Funktionen moveTo, rotate, scale und goBack, die in der Spielumgebung definiert sind, können mit Funktionen kombiniert werden, die sich selbst aufrufen, um so sehr einfach hierarchische, fraktale Grafiken zu erstellen. Schau Dir als Beispiel diesen Baum an.

Erklärung

Am meisten lernt man, wenn man selbst etwas tut. Tob Dich aus. Denk Dir etwas Aufwändiges aus. Und wenn Du nicht genau weißt, wie Du Deine Pläne umsetzen kannst: Nun, dafür sind die Coaches da.

Und weiter geht's…

→ …mit der dritten Seite.