Lernpfad:Programmierung mit Javascript und p5js/Text ausgeben in p5js

Aus HG Wiki
Zur Navigation springen Zur Suche springen

Ausgabe von Text

Es gibt zwei Funktionen um Text auszugeben:

  1. In der Konsole mit console.log( t ) gibt einen Text t in der Konsole aus.
  2. Auf dem Zeichenfeld mit text( t,x,y ) gibt den Text t auf dem Zeichenfeld aus. Die Position des Textes wird mit x und y festgelegt.

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. Die Zeichen-Funktionen werden in den geschweiften Klammern von draw aufgerufen
    • background(220); zeichnet zunächst den Hintergrund über die alte Zeichnung. (0 steht für schwarz, 255 für weiß, alle Werte dazwischen ergeben grau)
    • console.log( t ) gibt einen Text t in der Konsole aus.
    • text( t,x,y ) gibt den Text t auf dem Zeichenfeld aus. Die Position des Textes wird mit x und y festegelegt.
  • setup: wird genau einmal am Anfang der Ausführung aufgerufen. Hier kann man ...
    • z.B. das Zeichenfeld verändern. createCanvas(200, 200); erstellt z.B. ein Zeichenfeld mit 200 x 200 Pixeln.
    • mit der Funktion frameRate( r ) einstellen, wie oft(r Mal) 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(10);  //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.
  text(frameCount, 20,40); //Gibt einen Text auf dem Zeichenfeld 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 1 mal pro Sekunde aufrufen. Beobachte was mit der Ausgabe passiert.
  2. dass die draw-Funktion insgesamt nur einmal aufgerufen wird.

Für Fortgeschrittene

Veränder das Programm so, dass ein Kreis bei Cursor-Position gezeichnet wird.
Welche Auswirkung haben Änderungen der folgenden Funktionen auf die Ausführung des Programms?

  1. Ändere den Wert w in frameRate( w ).
  2. Füge noLoop() in der setup-Funktion hinzu.
  3. Entferne die Zeile background(220);