Lernpfad:Programmierung mit Javascript und p5js/Die zwei Funktionen setup und draw

Die zwei Funktionen setup und draw

Alle Projekte in p5js heißen sketches und beinhalten mindestens zwei Funktionen:

• draw: wird standardmäßig 30 mal in der Sekunde aufgerufen.
• setup: wird genau einmal am Anfang der Ausführung aufgerufen. Hier kann z.B. das Zeichenfeld verändert werden. createCanvas(200, 200); erstellt z.B. ein Zeichenfeld mit 200 x 200 Pixeln. Man darüber hinaus
  • mit der Funktion frameRate() einstellen, wie oft die draw-Funktion in der Sekunde aufgerufen wird.
  • mit der Funktion noLoop() einstellen, ob die draw-Funktion wiederholt aufgerufen wird oder nur einmal aufgerufen werden soll.

Das folgende Beispiel zeigt noch einmal die Verwendung der beiden Funktionen:

function setup() {
  createCanvas(100, 100);
  frameRate(1);  //Die draw-Funktion wird nur einmal pro Sekunde aufgerufen.
}

function draw() {
  background(220);
  console.log(frameCount); //console.log gibt einen Text in der Konsole aus.
}

Erläuterungen zum Programm:

• In Zeile 3 wird die Wiederholungsgeschwindigkeit für das Zeichenen der draw-Funktion eingestellt.
• In Zeile 8 wird mit dem Wert frameCount ausgegeben, wie oft die Funktion draw schon aufgerufen wurde.

Aufgaben

Ändere das obige Programm so um,

1. dass die draw-Funktion 10 mal pro Sekunde aufrufen. Beobachte was mit der Ausgabe passiert.
2. dass die draw-Funktion nur einmal aufgerufen wird.

Für Fortgeschrittene

Veränder das Programm so, dass ein Kreis bei Cursor-Position gezeichnet wird. Welche Auswirkung haben die Funktionen frameRate() und noLoop() auf die Ausführung des Programms.