10.5.2 Projekt: Geisterstunde

In diesem Projekt wird ein kleines Gespenst gezeichnet und auf der Zeichenfläche animiert.

Das kleine Gespenst soll mit der Maus auf der Zeichenfläche bewegt werden können. In der Kategorie 'Werte' gibt es dazu die beiden Blöcke 'Maus: x-Koordinate' und 'Maus: y-Koordinate'.

  • Ersetze mit den Blöcken 'Maus: x-Koordinate' und 'Maus: y-Koordinate' die beiden Zahlenwerte hinter 'setze geistX auf' und 'setze geistY auf' und klicke dann auf die Schaltfläche 'Code ausführen' unterhalb der Zeichenfläche. Dein Programm sollte wie folgt aussehen:

Wenn du das Programm gestartet hast, bleibt das Gespenst oben links in der Ecke stehen, obwohl du die Maus bewegst. Das liegt daran, dass die Funktion 'setup()' nur ein einziges Mal beim Start des Programms abläuft. Wir brauchen eine Funktion, die ständig wiederholt wird, nachdem das Programm gestartet wurde. Genau das macht die Funktion 'draw()'.

  • Füge aus der Kategorie 'p5-Funktionen' den Block 'draw()' in das Programm ein.

  • Verschiebe dann mit der Maus alle Blöcke aus der Funktion 'setup()' in die Funktion 'draw()'. Dein Programm sollte nun wie folgt aussehen:

  • Jetzt kannst du mit der Maus das kleine Gespenst bewegen, denn die Anweisungen in der Funktion 'draw()' werden 60 Mal pro Sekunde ausgeführt. Dadurch erscheint die Bewegung des Gespenstes flüssig.

Denke immer daran, dass du regelmäßig dein Programm speicherst. Die Programmdatei findest du nach dem Speichern im Downloads-Ordner auf deinem PC. Sichere es dann in einem IServ-Ordner deiner Wahl. So kannst du das Programm auch zuhause wieder laden.

  • Gestalte für das kleine Gespenst einen Hintergrund.
  • Verwende dazu Blöcke aus den Kategorien 'Grundformen' und 'Aussehen'.

Das kleine Gespenst soll sich jetzt selbstständig animiert über die Zeichenfläche bewegen. Erst einmal soll es von links kommen und nach rechts laufen.

Schritt 1: Nachdenken

  • Wir haben im Projekt 1 gesehen, dass man die Position des Gespensts verändern kann, indem die Werte seiner x-Koordinate und seiner y-Koordinate geändert werden.
  • Da das Gespenst sich nicht nach oben oder unten bewegen soll, lassen wir die y-Koordinate unverändert.
  • Die x-Koordinate soll sich ändern. Wir setzen dazu das Gespenst beim Programmstart auf einen Anfangswert und ändern dann diesen Wert bei jedem Durchlauf durch die Funktion 'draw()'.

Schritt 2: Programmieren

Verändere dein Programm so, dass es wie folgt aussieht:

Das kleine Gespenst läuft von links nach rechts über die Zeichenfläche. Der Startwert für die x-Koordinate wurde auf -70 gesetzt, damit das Gespenst in die Zeichenfläche hineinläuft.

Jetzt wäre es schön, wenn das Gespenst seine Bewegung wiederholt. Dazu setzen wir den Wert der x-Koordinate auf -70, sobald es die Zeichenfläche verlassen hat. Genau dafür gibt es einen Falls-Mache-Block.

  • Ziehe aus der Kategorie 'Logik' den Block 'falls mache' in dein Programm.
  • Ziehe aus der Kategorie 'Logik' den Vergleichs-Block in dein Programm.
  • Ziehe aus der Kategorie 'Mathematik' den Zahlenblock in dein Programm.
  • Ziehe aus der Kategorie 'Variablen' den Block 'setze geistX auf' in dein Programm.
  • Ziehe aus der Kategorie 'Variablen' den Block 'geistX' in dein Programm.

Du solltest folgende Blöcke in deinem Editor haben:

  • Setze diese Blöcke so zusammen, dass das Gespenst auf die Position -70 springt, sobald es die Zeichenfläche verlassen hat.

Denke immer daran, dass du regelmäßig dein Programm speicherst. Die Programmdatei findest du nach dem Speichern im Downloads-Ordner auf deinem PC. Sichere es dann in einem IServ-Ordner deiner Wahl. So kannst du das Programm auch zuhause wieder laden.

Schritt 3: Lösungsvorschlag

Falls du Ideen brauchst, kann du dir folgenden Lösungsvorschlag ansehen:

  • Verändere das Programm, dass das kleine Gespenst von oben nach unten über die Zeichenfläche läuft.
  • Verändere das Programm, dass das kleine Gespenst schräg über die Zeichenfläche läuft.