Idee “Igelgrafik”

Igelgrafik (auf Englisch: turtle graphics) ist ein wesentlicher Bestandteil der Programmiersprache Logo, die in den 1960er Jahren von Seymour Papert entwickelt wurde. Sie sollte insbesondere dazu dienen, Kindern ans Programmieren heranzuführen. Auf dieser Webseite wurde Igelgrafik mit der Programmiersprache CIoffeeScript, die vor wenigen Jahren von Jeremy Ashkenas vorgestellt wurde und – wie Logo – viele Konzepte der funktionalen Programmierung umsetzt.

Bedienung dieser Webseite

Anforderungen

Ein moderner Web-Browser. Getestet wurden die Seiten mit Firefox und teilweise mit Chromium.

Programmierung

Der Igel wird in der Programmiersprache CoffeeScript programmiert, von der man aber zu Beginn nichts wissen muss und erstmal nicht viel sieht. Genau genommen läuft hier eine Variante von CoffeeScript, in der ich einige der Grundbefehle auch auf Deutsch “eingebaut” habe:

and, or, not, is, isnt und, oder, nicht, ist, istnicht
if then else unless switch wenn dann sonst esseidenn jenachdem
for, do, break, continue, while, until, when, by, loop für, tue, anhalten, fortsetzen, während, bis, sofern, alle, schleife
true false on off yes no wahr falsch an aus ja nein
class, extends, new klasse, erweitert, neu
delete, return, yield lösche, gibzurück, liefere
undefined, of, own undefiniert, von, eigene

Außerdem gibt es den wiederhole-Befehl, um eine Funktion mehrfach zu wiederholen, zum Beispiel:

wiederhole 4, ->
      vor 100
      links 90

und den würfel-Befehl, der aus einer Liste zufällig einen der Einträge aussucht:

würfel [1..6]

Schließlich sind die folgenden Farben als Konstanten definiert: schwarz, weiß, rot, grün, hellgrün, blau, hellblau, gelb, orange, lila, grau.

Und natürlich gibt es die Igel-Befehle:

vor, zurück, links, rechts,
stifthoch, stiftrunter, stiftfarbe, stiftbreite, fülle,
bildschirmleer, gerade, nachhause, versteckeigel,
geschwindigkeit

Tastenbedienung

Man kann Tasten “an Funktionen binden”, d.h. dass bei Drücken der jeweiligen Taste immer die angegeben Funktion ausgeführt wird. Dies geschieht mit dem taste-Befehl, zum Beispiel taste 'k', -> vor 10: Wird k gedrückt, so bewegt sich dann der Igel im 10 Schritte nach vorn. Ist f eine zuvor definierte Funktion, so kann man natürlich auch taste 'x', f benutzen, um bei Drücken der Taste x die Funktion f ausführen zu lassen.

Die Befehle neuerpfad und berührt

Mit neuerpfad "name" wird ein neuer, benannter “Pfad” begonnen. Dieser Pfad enthält alle vom Igel gezeichneten Striche bis zum nächsten neuerpfad-Befehl. Die Funktion berührt "name" gibt dann wahr zurück, wenn der Igel einen Teil des Pfades "name" berührt, sonst falsch.

Bedienung der Programmierumgebung

Auf der Igel Seite kann man direkt loslegen. Auf der linken Seite befindet sich dort der Canvas, das ist die “Welt”, in der sich der Igel bewegt. Auf der rechten Seite ist ein Textfenster, in dem man Befehle für den Igel eingeben kann. Die Befehle werden erst ausgeführt, wenn man auf Ausführen klickt. Unter Tutorial gibt es Beispiele für Programmiereinsteiger. In den verschiedenen Kategorien der Gallerie sind die Igel-Befehle genauer dokumentiert.

Man kann Skripte unter einen Namen abspeichern (und gegebenenfalls überschreiben) und dann wieder laden. Diese Skripte werden im “lokalen Speicherplatz” (HTML5 local storage) des Web-Browsers abgespeichert. Das stellt sicher, dass jeder Benutzer nur seine eigenen Skripte sieht, allerdings kann man nicht von verschiedenen Browsern oder gar verschiedenen Computern auf “seine” Skripte zugreifen. Für angemeldete Benutzer werden die Skripte auf dem Igelgrafik-Server abgespeichert (dann auf Wunsch auch mit Bild), so dass sie auch dann nicht verloren gehen, wenn der local storage gelöscht wird.

Tastenbelegung

Shift-PageDown. Legt ein neues Eingabefeld unter dem aktuellen Feld an.

Shift-PageUp. Fügt das aktuelle Eingabfeld mit dem darüberliegenden zusammen.

Ctrl-Enter. Führt den Code im aktuellen Eingabefeld aus und legt ein weiteres Eingabefeld an.

… (mehr kommt demnächst)