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.
Mache Dich mit unserer visuellen Programmierumgebung vertraut.
Ö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.
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.
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.
Öffne diesen Link,
um zu einer drawing-Funktion mit folgendem Programm zu
gelangen:
color("red");
var column = 0;
while (column < 20) {
circle(column * 10, 0, 4);
column = column + 1;
}
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 column < 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 column 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 column
bei null, dann bei eins und so weiter, bis 19.
Wenn column 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, eine für die Spalten (columns) und eine für die Reihen (rows) des Rasters. 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.
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.
Ein Programm, das tut was wir wollen, wenn wir es in die
drawing-Funktion packen, findest Du
hier.
So sieht es aus:
var column = 0;
while (column < 20) {
if (column % 2 == 0) {
color("black");
} else {
color("gray");
}
circle(column * 10, 0, 4);
column = column + 1;
}
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 column % 2 == 0 kann man also prüfen, ob
column 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.
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.
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);
}
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!
Erfinde Dein eigenes, unterhaltsames, grafisches Programm.
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.
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.