Phase 1 | Kennenlernen und Programmierprobieren
🪧 Worum geht es in dieser Phase?
👋 Herzlich willkommen auf unserem Lernpfad für die Schülerakademie Mathematik in OWL (Jg. 8) in Bielefeld!
Unser Thema lautet: Animationen mit JavaScript — affine Transformationen, Vektoren und Matrizen programmierend erkunden. In diesem ersten Lernschritt erfährst du, worum es in den nächsten Tagen gehen soll und lernst die Programmierumgebung kennen.
Auf dieser Internetseite findest du alle Materialien, Aufgaben und Hilfestellungen, die du brauchst. du brauchst nur ein internetfähiges Endgerät.
Vorne im Seminarraum hängt eine Liste mit allen wichtigen Befehlen, die wir nach und nach kennenlernen:
| Befehl | Stichworte |
|---|---|
setup() |
enthält Befehle für den Programmstart. |
draw() |
enthält Befehle, die in jedem Frame ausgeführt werden. |
| ... | ... |
Programmieren werden wir mit der Programmiersprache JavaScript, konkret mit einer Bibliothek mit dem Titel p5.js. Die wichtigste Internetseite (neben diesem Lernpfad) wird der Online-Editor von p5.js sein. Diesen findest du unter dieser Internetadresse: https://editor.p5js.org/ Auf dieser Seite des Online-Editors solltest du Dich registrieren, damit du Deine Programme speichern kannst.
Zum Ende des Workshops erstellt ihr eure eigene kleine (oder größere) Animation und wir können sie hochladen. Dann könnt ihr über den Link (oder einen QR-Code) auch später noch darauf zugreifen und etwas mit nach Hause nehmen.
👋 Kennlernspiele
Wir stellen uns reihum mit mathematischen Adjektiven oder Substantiven vor und wiederholen immer die Namen, die zuvor genenannt wurden. Wenn jemand auf keine Idee kommt, können wir alle zusammen überlegen.
Das ist der funktionale Herr Fiebig, ich bin die Frau Parallelogramm-Pörschke ...
Stellt euch der Reihe nach auf, sortiert nach eurer Anfahrtszeit heute morgen. Stellt euch anschließend kurz vor und sagt, von welcher Schule ihr kommt.
🌱 Aufgaben zum Programmiereinstieg
Öffne die Seite p5.js und erstelle einen Account:
- 👤 Klicke oben rechts auf „Sign up“.
- 👤 Wähle einen fiktiven Nutzernamen.
- 👤 Gib Deine schulische E-Mail-Adresse an und wähle ein sicheres Passwort.
- 👤 Logge Dich über „Log in“ ein.
Beachte, dass alle dein Programme öffentlich einsehbar sind.
👤 Öffne den Programmcode aus der folgenden Datei: 👾 Smileytransformation im Editor ein und verändere die Zahlen in den Klammern so, dass der Smiley grinst. Finde heraus, welche Bedeutung die Zahlen haben.
ℹ️ Beim ersten Speichern eines vorbereiteten Programms musst du unter „Datei“ auf „Duplizieren“ klicken. Anschließend kannst du das Programm speichern.
🏃♀️➡️ Ändere die Farben oder Formen und erweitere deinen Smiley!
💁 Hilfe zu den Koordinaten: Du siehst, es ist etwas anders als in der Mathematik.
-
👤 Experimentiere mit Farben, Formen und Füllungen: Erstelle ein kleines Bild, das du den anderen vorstellen kannst.
-
👥 Stellt euch eure Ergebnisse zu Zweit vor und wer mag auch vor der Gruppe.
💁 Zur Hilfe kannst du die folgenden Seiten nutzen:
ℹ️ Mit Hilfe von zwei Schrägstrichen // kannst du Kommentare im Programmcode einfügen. Diese Kommentare haben keine Auswirkungen auf das Programm, sondern helfen nur bei der Orientierung.
👤 Öffne das Beipspielprogramm: 👾 Setup und Draw
. Dort siehst du den Code eines einfachen Programms, das aus zwei Funktionen besteht: setup() und draw(). Führe das Programm über den Klick auf ▶️ aus und beobachte, was in der Konsole passiert. Überlege, was die Methoden setup() und draw() für Aufgaben haben.
🔗 Hilfreiche Links
- Übersicht über alle Befehle in p5.js
- Wesentliche Unterschiede zwischen Java und JavaScript, falls du vielleicht schon einmal mit Java programmiert hast.
- Einführung in JavaScript
- Grundlagenskript für diesen Lernpfad
- 2D Transformations by J David Eisenberg