10.2.1 Ferien am Meer

In diesem Kapitel wird in der Hochsprache JavaScript ein Programm geschrieben.

JavaScript ist eine umfangreiche Programmiersprache mit vielen Regeln und Befehlen. Wenn man mit dem Programmieren beginnt, kann es eine große Hilfe sein, wenn zu Beginn nur eine kleine Auswahl an Regeln und Befehlen einer Programmiersprache verfügbar sind. Das kann man mit einer Block-Sprache erreichen. Im Editor einer Block-Sprache gibt es nur eine bestimmte Menge von Blöcken, die man zu einem Programm zusammensetzt:

hochblocksprache

Aus den zusammengesetzten Blöcken wird automatisch das JavaScript-Programm erzeugt, das der Computer dann ausführen kann.

Hinweise:

  • Die hier verwendete Blocksprache ist Blockly von Google.
  • Der hier verwendete Editor enthält Anweisungen aus der Bibliothek p5.js.

Himmel, Strand, Meer, Sonne und Wolken

  • Öffne den p5js-Blockly-Editor indem du auf folgenden Link klickst: Editor öffnen. Im Block-Editor sieht man folgende beiden Blöcke:

canvas01

Hinweise:

  • Im setup()-Block kann man die Größe der Zeichenfläche einstellen. Die beiden Zahlen sind in der Maßeinheit Pixel, also Punkte auf dem Bildschirm. Der setup()-Block wird nach dem Programmstart genau einmal ausgeführt.
  • In den draw()-Block setzen wir alles, was auf der Zeichenfläche gezeichnet werden soll. Der draw()-Block wird viele Male pro Sekunde ausgeführt.
  • Verändere die Größe der Zeichenfläche, indem du die Zahlen bei 'Breite' und 'Höhe' änderst.
  • Verändere die Hintergrundfarbe, indem du auf die Farbfläche im Block 'Hintergrundfarbe' klickst und eine andere Farbe auswählst.
  • Wenn alles geändert wurde, klicke auf die Schaltfläche 'Code ausführen' um das geänderte Programm zu starten.

Programm speichern:

Wenn du ein Programm schreibst, ist es extrem wichtig, dass du regelmäßig deine Arbeit speicherst:

  • Tippe unten links einen Namen für dein Programm ein und klicke mit der Maus dann auf 'Speichern'.

Hinweis: Benenne deine Programme mit fortlaufenden Nummern, dann kannst du immer auf eine alte Version zurückfallen: prog01, prog02,...

Programm laden:

  • Lade ein gespeichertes Programm, indem du unten in der Mitte auf 'Programm laden' klickst, dein Programm im Ordner 'Downloads' suchst und dann auf 'Öffnen' klickst.

Im Block Hintergrundfarbe gibt es in der Farbauswahl nur eine endliche Zahl von Farben. Es soll jetzt eine beliebige Farbe für den Hintergrund gewählt werden können:

  • Lösche den Block Hintergrundfarbe indem du den Block auf den Mülleimer oder die mittlere Werkzeugleiste ziehst.

  • Klicke in der Werkzeugleiste auf 'Aussehen' und ziehe den Block Hintergrundfarbe = "Steelblue" in den draw()-Block.

canvas02

  • Öffne einen neuen Tab im Browser und gibt in die Suchleiste color picker ein. Du solltest je nach Browser etwas ähnliches sehen:

canvas03

  • Suche dir eine Farbe für den Hintergrund aus, kopiere den HEX-Farbcode (markieren und Strg-c) und ersetze SteelBlue mit dem HEX-Farbcode (Strg-v).

canvas04

  • Ziehe folgende Blöcke in den draw()-Block. Suche dir eine geeignete Farbe für den Strand.

canvas05

Hinweise:

  • Die Liniendicke legt fest wie breit der Rand um ein Objekt ist. Hier wird die Liniendicke auf 0 Pixel gesetzt, also hat das folgende Rechteck keine Umrandung.
  • Das Rechteck wird an die Position x = 0 und y = 300 gesetzt. Dabei ist der Koordinatenursprung oben links und die y-Werte werden nach unten größer.
  • Das Rechteck hat eine Breite von 400 Pixel und eine Höhe von 100 Pixel.
  • Nach einem Klick auf 'Code ausführen' solltest Du folgendes sehen:

canvas06

  • Ergänze das Programm mit folgenden Blöcken. Suche dir geeignete Farben für die Gischt und das Meer.

canvas07

  • Nach einem Klick auf 'Code ausführen' solltest Du folgendes sehen:

canvas08

  • Ergänze das Programm mit folgenden Blöcken. Suche dir eine geeignete Farbe für die Sonne.

canvas09

  • Nach einem Klick auf 'Code ausführen' solltest Du folgendes sehen:

canvas10

Der Code wird langsam etwas unübersichtlich. Deswegen sollen Blöcke, die zu einem Objekt gehören zusammengefasst werden:

  • Klicke auf js-Funktionen.

  • Ziehe um etwas tun in den Editor und ändere etwas tun in Strand.

  • Drücke die Strg-Taste und ziehe die beiden Blöcke die zum Strand gehören in den neuen Block.

  • Klicke auf js-Funktionen und ziehe den Block Strand an die Stelle, wo vorher die beiden zum Strand gehörenden Blöcke waren.

canvas11

  • Verändere das Programm so, dass die Blöcke aller Objekte in einem eigenen Block stehen.

canvas12

  • Klicke mit der rechten Maustaste auf den Block Strand und dann auf Baustein zusammenfalten.

  • Wiederhole das für die anderen Blöcke.

canvas13

Das bisher geschrieben Programm sieht jetzt aufgeräumt aus und man hat wieder Platz für neue Blöcke.

  • Ergänze das Programm mit folgenden Blöcken. Suche dir eine geeignete Farbe für die Wolke.

canvas14

  • Räume den Code wieder auf, indem du alle Blöcke, mit welchen du die Wolke gebaut hast in einem Wolken-Block zusammenfasst.

  • Nach einem Klick auf 'Code ausführen' solltest Du folgendes sehen:

canvas15