130
Bearbeitungen
Lernpfad:Programmierung mit Javascript und p5js: Unterschied zwischen den Versionen
Lernpfad:Programmierung mit Javascript und p5js (Quelltext anzeigen)
Version vom 26. Dezember 2018, 13:56 Uhr
, 13:56, 26. Dez. 2018keine Bearbeitungszusammenfassung
Thi (Diskussion | Beiträge) |
Thi (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 15: | Zeile 15: | ||
# Projekt-Auswahlbereich (Hier findet man alle Projekte, die man gespeichert hat und weitere Beispiele) | # Projekt-Auswahlbereich (Hier findet man alle Projekte, die man gespeichert hat und weitere Beispiele) | ||
= | = Los geht's mit der Maus und einem Kreis= | ||
[[Datei:P5js_1_1_Bewegter_Kreis.png | right]] | [[Datei:P5js_1_1_Bewegter_Kreis.png | right]] | ||
Zunächst einmal lernen wir ein paar vorhandenen [[http://p5js.org/reference/ p5js-Befehle]] kennen. | Zunächst einmal lernen wir ein paar vorhandenen [[http://p5js.org/reference/ p5js-Befehle]] kennen. | ||
| Zeile 38: | Zeile 38: | ||
## Lass die anderen Kreise höher und tiefer erscheinen. (Hinweis: Hier sollte dir etwas Besonderes auffallen) | ## Lass die anderen Kreise höher und tiefer erscheinen. (Hinweis: Hier sollte dir etwas Besonderes auffallen) | ||
## Lass einen Kreis an der Position des Cursors erscheinen. | ## Lass einen Kreis an der Position des Cursors erscheinen. | ||
== | ==Für Fortgeschrittene== | ||
{{Collapse:Start}} | {{Collapse:Start}} | ||
Es gibt noch weitere Formen in p5js z.B.: | Es gibt noch weitere Formen in p5js z.B.: | ||
| Zeile 48: | Zeile 48: | ||
{{Collapse:End}} | {{Collapse:End}} | ||
= | =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: | ||
* '''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. | * '''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 kann auch einstellen, ob die Zeichnung wiederholt wird, oder nur einmal passieren soll (noLoop()). | ** Man kann auch einstellen, ob die Zeichnung wiederholt wird, oder nur einmal passieren soll (noLoop()). | ||
* '''draw''': wird 30 mal in der Sekunde aufgerufen. | * '''draw''': wird 30 mal in der Sekunde aufgerufen. | ||