Lernpfad:Programmierung mit Javascript und p5js/Los gehts mit der Maus und einem Kreis: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Thi (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Jneug (Diskussion | Beiträge) Markierungen: Mobile Bearbeitung Mobile Web-Bearbeitung |
||
| 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 vorhandene | 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 <code>ellipse()</code> 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(Parameter), damit p5js weiß an welcher Stelle und wie groß der Kreis werden soll. | |||
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. | |||
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 17: | Zeile 19: | ||
| Farbe=#ed225d}} | | Farbe=#ed225d}} | ||
{{Aufgabe:Start}} | {{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 hinzu. | # ... veränderter Größe hinzu. | ||
## Ergänze auch einen vierten Parameter(Wert in den Klammern) bei einem Kreis. | ## 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. | ||