Dieser Artikel ist derzeit in Bearbeitung von thi

Lernpfad:Programmierung mit Javascript und p5js

Aus HG Wiki
Zur Navigation springen Zur Suche springen

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 geht's 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)