Hallo!

Ein Computer kennt nur zwei Anweisungen: 1 und 0 (Strom da/kein Strom da,...).

Beispiel:

10110000 01100001

Diese Folge aus 1 und 0 bedeutet: hole den Wert 97 aus dem Speicherbereich ax des Arbeitsspeichers (siehe Wikipedia: Assembler).

So zu programmieren würde unser Gehirn hoffnungslos überfordern!

Deswegen gibt es Programmierysteme, die aus den 1en und 0en Zeichen und Worte machen, welche das Gehirn leichter verarbeiten kann.

Beispiel:

mov al, 61h

Dieser Befehl bedeutet das gleiche wie 10110000 01100001, ist aber kürzer und man kann sich die Buchstabenfolgen leichter merken. Diese Programmiersprache nennt man Assembler. Die Befehle sehen aber immer noch nicht so aus, als könnte man damit verständliche Computerprogramme schreiben.

Hochsprachen

Also haben sich die Programmierer*innen sogenannte Hochsprachen ausgedacht, bei denen mit englischen Worten und Zeichen ein Programm geschrieben wird. Hilfsprogramme (Interpreter, Compiler,...) machen daraus die 1en und 0en, die der Computer verarbeiten kann.

In JavaScript gibt man mit Hilfe von p5.js mit folgender Anweisung einen Text auf dem Monitor aus:

text("Hallo", 10, 40);

Sieht schon besser aus! Das kann man sich merken. Stelle dir vor, der Befehl dazu würde stattdessen lauten:

100010100 01101101 01001010 00000101 00100001 11111110 11011111

So wollte ich nicht programmieren müssen!

Super, wir können den Computer mit Hilfe von JavaScript und p5.js etwas auf den Monitor schreiben lassen! Was genau machen diese beiden Anweisungen?

• Mit textSize(32); wird dem Computer gesagt, dass alle Texte ab jetzt mit der Schriftgröße 32 auf den Monitor geschrieben werden sollen.
• Mit text("Hallo", 10, 40); sagt man dem Computer, dass er den Text "Hallo" an der Stelle x = 10 und y = 40 auf den Monitor schreiben soll.
• Beachte, dass jede Anweisung mit einem Strich-Punkt ; beendet werden.

Was hast du beobachtet?

Der Text wird an der x/y-Stelle nach oben hin auf den Monitor geschrieben. Wenn man also den Befehl text("Hallo", 0, 0); eingibt, dann sieht man keinen Text, weil der ausserhalb des Zeichenbereichs ist. Bei text("Hallo", 0, 10); sieht man einen Teil des Textes.

Geometrie mit p5.js

Du kannst in diesem Kurs lernen, wie man Kunst am Computer erzeugen kann. Diese digitale Kunst besteht genauso aus geometrischen Formen wie auf dem Papier. Zwei Grundformen sind Kreis und Ellipse. Dafür gibt es in p5.js den Befehl

ellipse(xKoord, yKoord, breite, hoehe);

Solche Kreise und Ellipsen soll der Computer jetzt zeichnen und später auch bewegen. Damit Animationen leicht zu programmieren sind, hat man in p5.js ein Programm in zwei Teile unterteilt. In der Funktion setup() stehen Anweisungen, die der Computer einmal nach dem Start des Programms ausführt.

function setup() { 
    Anweisungen, die nur einmal beim Programmstart ausgeführt werden
}

In der Funktion draw() stehen Anweisungen, die der Computer immer wieder durchführt. Standardmäßig sind das 60 Ausführungen pro Sekunde (falls der Computer das so schnell schafft, sonst eben weniger pro Sekunde).

function draw() { 
    Anweisungen, die immer wieder ausgeführt werden
}

Ab jetzt programmieren wir unsere kleinen Programme immer nach dieser Vorlage.