|
|
| Zeile 16: |
Zeile 16: |
| # Login-Bereich (Hier kann man sich anmelden, um Projekte zu speichern oder zu teilen) | | # Login-Bereich (Hier kann man sich anmelden, um Projekte zu speichern oder zu teilen) |
| # 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]]
| |
| Zunächst einmal lernen wir ein paar vorhandenen [[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.
| |
| Bei der Funktion ellipse gehören in die Klammer noch ein paar Informationen(Paramter), damit p5js weiß, an welcher Stelle und wie groß der Kreis werden soll.
| |
| <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 Ellipse ist: ellipse(x, y, w, [h]). <br />
| |
| 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.
| |
| <br />
| |
| Der Wert mouseX steht für die x-Position der Cursors (Maus-Pfeil). <br />
| |
|
| |
| '''Aufgaben'''
| |
| Teste das Programm selber und füge weitere Kreise mit
| |
| # veränderter Größe.
| |
| ## Ergänze auch einen vierten Wert.
| |
| # 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===
| |
| {{Collapse:Start}}
| |
| Es gibt noch weitere Formen in p5js z.B.:
| |
| #rect()
| |
| #triangle()
| |
| #line()
| |
| 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.
| |
| {{Collapse:End}}
| |
|
| |
| ==Die zwei Funktionen setup und draw==
| |
| 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.
| |
| ** Man kann auch einstellen, ob die Zeichnung wiederholt wird, oder nur einmal passieren soll (noLoop()).
| |
| * '''draw''': wird 30 mal in der Sekunde aufgerufen.
| |
|
| |
| =Farbe in p5js=
| |
| Das tolle an unseren Bildschirmen ist, dass sie Dinge in Farbe anzeigen. Das Prinzip das dahinter steckt ist die Kombination von drei Leuchten (rot, grün und blau), die kombiniert alle möglichen Farben ergeben.
| |