130
Bearbeitungen
Lernpfad:Programmierung mit Javascript und p5js/Die zwei Funktionen setup und draw: Unterschied zwischen den Versionen
Lernpfad:Programmierung mit Javascript und p5js/Die zwei Funktionen setup und draw (Quelltext anzeigen)
Version vom 26. Dezember 2018, 23:14 Uhr
, 23:14, 26. Dez. 2018→Die zwei Funktionen setup und draw
Thi (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
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: | ||
* '''draw''': wird standardmäßig 30 mal in der Sekunde aufgerufen. | * '''draw''': wird standardmäßig 30 mal in der Sekunde aufgerufen. Die Zeichen-Funktionen werden in den geschweiften Klammern von draw aufgerufen | ||
* '''setup''': wird genau einmal am Anfang der Ausführung aufgerufen. Hier kann z.B. das Zeichenfeld | ** '''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) | ||
** mit der Funktion '''frameRate()''' einstellen, wie oft die draw-Funktion in der Sekunde aufgerufen wird. | ** '''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. | ** mit der Funktion '''noLoop()''' einstellen, ob die draw-Funktion wiederholt aufgerufen wird oder nur einmal aufgerufen werden soll. | ||
| Zeile 16: | Zeile 20: | ||
background(220); | background(220); | ||
console.log(frameCount); //console.log gibt einen Text in der Konsole aus. | console.log(frameCount); //console.log gibt einen Text in der Konsole aus. | ||
text(frameCount, 20,40); //Gibt einen Text auf dem Zeichenfeld aus. | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Zeile 27: | Zeile 32: | ||
====Für Fortgeschrittene==== | ====Für Fortgeschrittene==== | ||
{{Collapse:Start}} | {{Collapse:Start}} | ||
Veränder das Programm so, dass ein Kreis bei Cursor-Position gezeichnet wird. Welche Auswirkung haben | 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);''' | |||
{{Collapse:End}} | {{Collapse:End}} | ||