Dieser Artikel ist derzeit in Bearbeitung von thi

Lernpfad:Programmierung mit Javascript und p5js: Unterschied zwischen den Versionen

Aus Informatik-Box
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(9 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{Status/In Bearbeitung von|thi}}{{Warnung|Dieser Lernpfad ist derzeit noch im Aufbau.}}
{{Status/In Bearbeitung von|thi}}{{Warnmeldung/Lernpfad im Aufbau}}
{{Navigation}}
{{Inhalt}}
 
=Einführung p5js=
In diesem Lernpfad lernst du die Grundlagen der ''Programmierung mit Javascript und p5js'' am Beispiel der Programmiersprache Javascript kennen.
In diesem Lernpfad lernst du die Grundlagen der ''Programmierung mit Javascript und p5js'' am Beispiel der Programmiersprache Javascript kennen.
In jedem Schritt werden Konzepte der Programmierung in Javascript mit der Bibliothek p5js vorgestellt.  
In jedem Schritt werden Konzepte der Programmierung in Javascript mit der Bibliothek p5js vorgestellt.  
= Der Editor=
== Der Editor==
[[Datei:P5js 02 Editor - Erlaeuterung.png | right | 500px ]]
[[Datei:P5js 02 Editor - Erlaeuterung.png | right | 500px ]]
Javascript ist eine Programmiersprache, die in jedem Browser läuft. P5js ist eine Sammlung von Befehlen, mit denen man relativ leicht Dinge zeichnen und animieren kann. Und der [https://editor.p5js.org/ Editor] von p5js bietet die Möglichkeit direkt mit dem Programmieren loszulegen, ohne irgendetwas installieren zu müssen.
Javascript ist eine Programmiersprache, die in jedem Browser läuft. [https://www.p5js.org P5js] ist eine Sammlung von Befehlen, mit denen man relativ leicht Dinge zeichnen und animieren kann. Und der [https://editor.p5js.org/ Editor] von p5js bietet die Möglichkeit direkt mit dem Programmieren loszulegen, ohne irgendetwas installieren zu müssen.


Der Editor besteht aus mehreren Teilen:  
Der Editor besteht aus mehreren Teilen:  
# Programmierfenster (Hier werden die Befehle eingetragen)
# Programmierfenster (Hier werden die Befehle eingetragen)
# Steurungsleiste (Hier kann das Programm gestartet werden)
# Steuerungsleiste (Hier kann das Programm gestartet werden)
# Ausgabebildschirm (Hier sieht man das Resultat der Programmierung)
# Ausgabebildschirm (Hier sieht man das Resultat der Programmierung)
# Konsole für Fehlermeldungen (Falls man irgendetwas falsch programmiert hat, wird es hier angezeigt)
# Konsole für Fehlermeldungen (Falls man irgendetwas falsch programmiert hat, wird es hier angezeigt)
Zeile 14: Zeile 18:
# 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=
[[Kategorie:Lernpfade]][[Kategorie:Lernpfade Informatik]][[Kategorie:Lernpfade zu Javascript]][[Kategorie:Lernpfade für die EF]]
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.

Aktuelle Version vom 7. November 2021, 13:13 Uhr

Icon Warning.png Dieser Lernpfad ist derzeit noch im Aufbau. Einige Schritte sind schon vollständig, während andere noch in Bearbeitung sind. Die fehlenden Schritte werden nach und nach ergänzt. Der aktuelle Fortschritt kann auf der Diskussionsseite verfolgt werden.

style="margin-right:-24px;"
Inhalt Lernpfad
Programmierung mit Javascript und p5js
  1. Programmierung mit Javascript und p5js
  2. Los gehts mit der Maus und einem Kreis
  3. Text ausgeben in p5js
  4. Farbe in p5js (Regenbogen)
  5. Fallunterscheidung (Farbbereiche)
  6. Fallunterscheidung (Countdown)
  7. Schleifen (Muster)
  8. Physik simulieren(Der fallende Ball)
  9. Tastatureingaben (Sprinter)
  10. Mauseingaben (Sprinter 2)
  11. Mauseingaben (Malprogramm)
  12. Klassen und Objekte (Die fallenden Bälle 1)
  13. Klassen und Objekte (Sprinter 3)
  14. Klassen und Objekte (Superball)
  15. Physik und Objekte (Flappy Bird)
  16. Arrays (Die fallenden Bälle 2)
  17. Arrays (Feuerwerk)
  18. Zweidimensionale Arrays (Labyrinth)
Inhalt bearbeiten

Einführung p5js

In diesem Lernpfad lernst du die Grundlagen der Programmierung mit Javascript und p5js am Beispiel der Programmiersprache Javascript kennen. In jedem Schritt werden Konzepte der Programmierung in Javascript mit der Bibliothek p5js vorgestellt.

Der Editor

P5js 02 Editor - Erlaeuterung.png

Javascript ist eine Programmiersprache, die in jedem Browser läuft. P5js ist eine Sammlung von Befehlen, mit denen man relativ leicht Dinge zeichnen und animieren kann. Und der Editor von p5js bietet die Möglichkeit direkt mit dem Programmieren loszulegen, ohne irgendetwas installieren zu müssen.

Der Editor besteht aus mehreren Teilen:

  1. Programmierfenster (Hier werden die Befehle eingetragen)
  2. Steuerungsleiste (Hier kann das Programm gestartet werden)
  3. Ausgabebildschirm (Hier sieht man das Resultat der Programmierung)
  4. Konsole für Fehlermeldungen (Falls man irgendetwas falsch programmiert hat, wird es hier angezeigt)
  5. Login-Bereich (Hier kann man sich anmelden, um Projekte zu speichern oder zu teilen)
  6. Projekt-Auswahlbereich (Hier findet man alle Projekte, die man gespeichert hat und weitere Beispiele)
Abgerufen von „http://ngb.schule/hgwiki/index.php?title=Lernpfad:Programmierung_mit_Javascript_und_p5js&oldid=8128“