8.581
Bearbeitungen
Thi (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „== Los geht's mit der Maus und einem Kreis== right Zunächst einmal lernen wir ein paar vorhandenen http://p5js.org/r…“) |
Jneug (Diskussion | Beiträge) K (Jneug verschob die Seite Lernpfad:Programmierung mit Javascript und p5js/Los geht's mit der Maus und einem Kreis nach Lernpfad:Programmierung mit Javascript und p5js/Los gehts mit der Maus und einem Kreis: Konflikt mit Navigationserzeugung für…) |
||
(11 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
== Los geht's mit der Maus und einem Kreis== | {{Navigation}} | ||
[[Datei:P5js_1_1_Bewegter_Kreis.png | right]] | == Los geht's mit der Maus und einem Kreis == | ||
Zunächst einmal lernen wir ein paar | [[Datei:P5js_1_1_Bewegter_Kreis.png|right]] | ||
Der Befehl ellipse() zeichnet einen Kreis (oder genauer eine Ellipse). In Javascript heißen die Befehle '''Funktionen''' und werden immer mit Klammern geschrieben. | Zunächst einmal lernen wir ein paar vorhandene [http://p5js.org/reference/ p5js-Befehle] kennen. | ||
Bei der Funktion ellipse gehören in die Klammer noch ein paar Informationen( | Der Befehl <code>ellipse()</code> zeichnet einen Kreis (oder genauer eine Ellipse). In Javascript heißen die Befehle '''Funktionen''' und werden immer mit Klammern geschrieben. | ||
Die Syntax einer Funktion beschreibt wie man eine Funktion verwendet bzw. welche Informationen (Parameter) in der Klammer stehen müssen. | Bei der Funktion <code>ellipse</code> gehören in die Klammer noch ein paar Informationen (sogenannte ''Parameter''), damit p5js weiß, an welcher Stelle und wie groß der Kreis gezeichnet werden soll. | ||
Die Syntax einer Ellipse ist: ellipse(x, y, w, [h]). <br /> | |||
Die Syntax einer Funktion beschreibt wie man eine Funktion verwendet bzw. welche Informationen (Parameter) in der Klammer stehen müssen. | |||
{{Schublade | | |||
Die Syntax einer Ellipse ist: '''ellipse(''' ''x'', ''y'', ''w'', ''[h]'' ''')'''. <br /> | |||
Die Werte haben folgende Bedeutung: | Die Werte haben folgende Bedeutung: | ||
# x steht für die x-Position, | # ''x'' steht für die x-Position, | ||
# y steht für die y-Position, | # ''y'' steht für die y-Position, | ||
# 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. | ||
* Die einzelnen Parameter müssen durch ein Komma getrennt werden. | |||
Der Wert mouseX steht für die x-Position der Cursors (Maus-Pfeil). <br /> | * Der Wert ''mouseX'' steht für die x-Position der Cursors (Maus-Pfeil). <br /> | ||
| 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. | ||
===Für Fortgeschrittene=== | {{Aufgabe:End}} | ||
====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 30: | Zeile 35: | ||
In der [[http://p5js.org/reference/ p5js-Befehle ]] findest du sie unter dem Punkt ''2D Primitives''. <br /> | In der [[http://p5js.org/reference/ p5js-Befehle ]] findest du sie unter dem Punkt ''2D Primitives''. <br /> | ||
Erstelle ein Bild mit möglichst vielen Formen. | Erstelle ein Bild mit möglichst vielen Formen. | ||
# Wie viele Parameter(Werte müssen in den Klammern) der Funktion rect eingegeben werden? | |||
<multiplechoice> | |||
(!2) (!3) (4) (!5) | |||
</multiplechoice> | |||
# Wofür stehen die Parameter, die in der Funktion triangle benötigt werden? | |||
<multiplechoice> | |||
(!Für den Abstand der Eckpunkte.) | |||
(Für die Positionen der Eckpunkte.) | |||
(!Die ersten beiden Parameter stehen für den Mittelpunkt des Kreises, die anderen drei für die Abstände.) | |||
(!Die ersten drei Parameter sind die x-Positionen, die letzten drei Parameter sind die y-Positionen.) | |||
</multiplechoice> | |||
{{Collapse:End}} | {{Collapse:End}} |
Bearbeitungen