130
Bearbeitungen
Thi (Diskussion | Beiträge) |
Thi (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 1: | Zeile 1: | ||
== Los geht's mit der Maus und einem Kreis== | == 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 | Zunächst einmal lernen wir ein paar vorhandene [[http://p5js.org/reference/ p5js-Befehle]] kennen. | ||
Der Befehl ellipse() zeichnet einen Kreis (oder genauer eine Ellipse). In Javascript heißen die Befehle '''Funktionen''' und werden immer mit Klammern geschrieben. | Der Befehl ellipse() zeichnet einen Kreis (oder genauer eine Ellipse). In Javascript heißen die Befehle '''Funktionen''' und werden immer mit Klammern geschrieben. | ||
Bei der Funktion ellipse gehören in die Klammer noch ein paar Informationen( | Bei der Funktion ellipse gehören in die Klammer noch ein paar Informationen(Parameter), damit p5js weiß an welcher Stelle und wie groß der Kreis werden soll. | ||
<br /> | <br /> | ||
Die Syntax einer Funktion beschreibt wie man eine Funktion verwendet bzw. welche Informationen (Parameter) in der Klammer stehen müssen.<br /> | Die Syntax einer Funktion beschreibt wie man eine Funktion verwendet bzw. welche Informationen (Parameter) in der Klammer stehen müssen.<br /> | ||
Zeile 13: | Zeile 13: | ||
# ''w'' steht für die Breite(w kurz für width) | # ''w'' steht für die Breite(w kurz für width) | ||
# ''[h]'' steht für die Höhe(h kurz für height), muss aber nicht hinzugefügt werden. | # ''[h]'' steht für die Höhe(h kurz für height), muss aber nicht hinzugefügt werden. | ||
Der Wert ''mouseX'' steht für die x-Position der Cursors (Maus-Pfeil). <br /> | * Die einzelnen Parameter müssen durch ein Komma getrennt werden. | ||
* Der Wert ''mouseX'' steht für die x-Position der Cursors (Maus-Pfeil). <br /> | |||
| Farbe=#ed225d}} | | Farbe=#ed225d}} | ||
{{Aufgabe:Start}} | |||
Teste das Programm selber und füge weitere Kreise mit | Teste das Programm selber und füge weitere Kreise mit | ||
# veränderter Größe. | # veränderter Größe hinzu. | ||
## Ergänze auch einen vierten Wert. | ## Ergänze auch einen vierten Parameter(Wert in den Klammern) bei einem Kreis. | ||
# anderer Position ein. | # anderer Position ein. | ||
## 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. | ||
{{Aufgabe:End}} | |||
====Für Fortgeschrittene==== | ====Für Fortgeschrittene==== | ||
{{Collapse:Start}} | {{Collapse:Start}} |