Lernpfad:Programmierung mit Javascript und p5js/Die zwei Funktionen setup und draw: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Thi (Diskussion | Beiträge) |
Thi (Diskussion | Beiträge) |
||
Zeile 1: | Zeile 1: | ||
==Die zwei Funktionen setup und draw== | ==Die zwei Funktionen setup und draw== | ||
Alle Projekte in p5js heißen ''sketches'' und beinhalten mindestens zwei Funktionen: | Alle Projekte in p5js heißen ''sketches'' und beinhalten mindestens zwei Funktionen: | ||
{{Schublade | | |||
* '''draw''': wird standardmäßig 30 mal in der Sekunde aufgerufen. Die Zeichen-Funktionen werden in den geschweiften Klammern von draw aufgerufen | * '''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) | ** '''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) | ||
Zeile 9: | Zeile 10: | ||
** mit der Funktion '''frameRate(''' ''r'' ''')''' einstellen, wie oft(''r'' Mal) die draw-Funktion in der Sekunde aufgerufen wird. | ** 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. | ** mit der Funktion '''noLoop()''' einstellen, ob die draw-Funktion wiederholt aufgerufen wird oder nur einmal aufgerufen werden soll. | ||
| Farbe=#ed225d }} | |||
Das folgende Beispiel zeigt noch einmal die Verwendung der beiden Funktionen: | Das folgende Beispiel zeigt noch einmal die Verwendung der beiden Funktionen: | ||
<syntaxhighlight lang="javascript" line="1" > | <syntaxhighlight lang="javascript" line="1" > |
Version vom 26. Dezember 2018, 23:21 Uhr
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(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.
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,
- dass die draw-Funktion 10 mal pro Sekunde aufrufen. Beobachte was mit der Ausgabe passiert.
- 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 Änderungen der folgenden Funktionen auf die Ausführung des Programms.
- frameRate()
- noLoop()
- Das entfernen der Zeile background(220);