Lernpfad:Programmierung mit Javascript und p5js/Los gehts mit der Maus und einem Kreis: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Arbeitsauftrag
Thi (Diskussion | Beiträge) |
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…) |
||
| (5 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 Funktion beschreibt wie man eine Funktion verwendet bzw. welche Informationen (Parameter) in der Klammer stehen müssen. | |||
{{Schublade | | {{Schublade | | ||
Die Syntax einer Ellipse ist: '''ellipse(''' ''x'', ''y'', ''w'', ''[h]'' ''')'''. <br /> | Die Syntax einer Ellipse ist: '''ellipse(''' ''x'', ''y'', ''w'', ''[h]'' ''')'''. <br /> | ||
| Zeile 13: | Zeile 16: | ||
# ''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}} | ||
| Zeile 31: | Zeile 36: | ||
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? | # Wie viele Parameter(Werte müssen in den Klammern) der Funktion rect eingegeben werden? | ||
<multiplechoice> | <multiplechoice> | ||
(2) (3) ( | (!2) (!3) (4) (!5) | ||
</multiplechoice> | </multiplechoice> | ||
# Wofür stehen die Parameter, die in der Funktion triangle benötigt werden? | # Wofür stehen die Parameter, die in der Funktion triangle benötigt werden? | ||
<multiplechoice> | <multiplechoice> | ||
(Für den Abstand der Eckpunkte.) | (!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 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.) | (!Die ersten drei Parameter sind die x-Positionen, die letzten drei Parameter sind die y-Positionen.) | ||
</multiplechoice> | </multiplechoice> | ||
{{Collapse:End}} | {{Collapse:End}} | ||
Aktuelle Version vom 28. Mai 2019, 10:31 Uhr
Los geht's mit der Maus und einem Kreis
Zunächst einmal lernen wir ein paar vorhandene 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.
Bei der Funktion ellipse 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 Funktion beschreibt wie man eine Funktion verwendet bzw. welche Informationen (Parameter) in der Klammer stehen müssen.
Die Syntax einer Ellipse ist: ellipse( x, y, w, [h] ).
Die Werte haben folgende Bedeutung:
- x steht für die x-Position,
- y steht für die y-Position,
- 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.
- Die einzelnen Parameter müssen durch ein Komma getrennt werden.
- Der Wert mouseX steht für die x-Position der Cursors (Maus-Pfeil).
Teste das Programm selber und füge weitere Kreise mit ...
- ... veränderter Größe hinzu.
- Ergänze auch einen vierten Parameter(Wert in den Klammern) bei einem Kreis.
- ... anderer Position ein.
- 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.
Für Fortgeschrittene
Es gibt noch weitere Formen in p5js z.B.:
- rect()
- triangle()
- line()
In der [p5js-Befehle ] findest du sie unter dem Punkt 2D Primitives.
Erstelle ein Bild mit möglichst vielen Formen.
- Wie viele Parameter(Werte müssen in den Klammern) der Funktion rect eingegeben werden?
(!2) (!3) (4) (!5)
- Wofür stehen die Parameter, die in der Funktion triangle benötigt werden?
(!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.)