Meteoritenalarm
- dann gehe nochmal eine Ebene höher und klicke dich dort durch
- und lies dir unseren Blogeintrag zu unserem Mindset durch
Meteoritenalarm
repl.it?
Wie fuktioniert der Editor?
- www.repl.it öffnen und einen Account erstellen
- Neuen Repl erstellen und JavaScript als Sprache auswählen
- Einen sinnvollen Namen für das Projekt auswählen
Worauf sollte beim Kurs geachtet werden?
- Je nachdem wie viel Erfahrung die Teilnehmenden mitbringen, sollten die Teams möglichst einheitliche bzw. homogen eingeteilt werden
- Die Codebeispiele sind nicht dafür da um sie zu 100% vorzuführen. Es sollte darauf geachtet werden, das die Teilnehmer versuchen mit einigen Tipps des Inspirers die Lösung selber zu finden
- Für jeden Teil des Kurses sollte von den Teilnehmern ein „How to“ angelegt werden. Hier soll die Kernfunktionalität des Themas festgehalten werden um zur Not nochmal nachlesen zu können. (Die „How tos“ sollten den Codebeispielen ähnlich sehen und Kommentiert sein)
- Für viele Teilnehmer ist dieser Kurs das erste mal, dass mit einer „richtigen“ Programmiersprache gearbeitet wird. Legt also Wert auf die saubere Arbeit. Lesbarkeit des Programms sowie Kommentare und sauberer Code sind ein wichtiger Bestandteil des Kurses auch wenn es hierzu keine eigenen Lektionen gibt.
Kennenlernen
Vorstellungsrunde mit Programmiererfahrung/Motivation
Ihr stellt euch vor und erzählt, wie ihr zur Hacker School und zum Coden gekommen seid.
Nun die Teilnehmer:
- Wie heißt Du? (Achtet darauf, dass die Kinder sich nur mit Vornamen vorstellen – Datenschutz.)
- Warum bist Du hier?
- Hast Du schon mal programmiert?
- Was willst Du lernen?
Vorstellung interaktiver gestalten? (!Klick mich an!)
In unserem Inspirer Handbuch findet ihr
weitere Spielideen.
Wenn Du die Vorstellung etwas interaktiver gestalten möchtest, empfehlen wir das Spiel “Alle, die”, was im folgenden erklärt wird:
Spielidee und Ziel
- Wir kommen locker und leicht mit den Teilnehmer*innen ins Gespräch und erfahren, was sie gerne mögen (positiver Beziehungsaufbau).
- Wir können eine erste Diagnose stellen, was die Schülerinnen und Schüler können, was sie gerne mögen.
Ablauf
- Stellt Euch vor die Klasse.
- Ein*e Inspirer sagt: “Alle, die”-Frage z.B: “Alle, die Sport in der Freizeit machen?”.
- Alle, die sich angesprochen fühlen, stehen von ihrem Platz auf.
- Die*der Inspirer stellt Rückfragen und kommt ins Gespräch mit den Teilnehmer*innen, z.B. “Cool, du in der ersten Reihe: Wie heißt du? [Antwort] Welchen Sport machst du denn gerne? [Gespräch entsteht] Super und du in der letzten Reihe…”.
- Die*der Inspirer sagt: "Alle wieder setzen".
- Die*der Inspirer stellt die nächste Frage: z.B. “Alle, die gerne Spiele auf dem Handy oder Computer spielen!”
- Siehe 3.-5.
- Spielt das Ganze etwa 5 min (nach Gefühl)
Sammlung möglicher Fragen (!Klick mich an!)
Diese Sammlung kann gern erweitert oder angepasst werden.
IT/Programmieren
- Wer hat schon mal programmiert?
- Wer kann sich vorstellen etwas mit Programmieren und IT zu machen?
Hobbies
- Wer von Euch macht Sport in der Freizeit?
- Wer spielt ein Instrument?
- Wer spielt Computerspiele?
- Wer spielt Handyspiele?
Lustiges
- Wer hat eine Schuhgröße größer als 35?
Letzte Frage
- Wer ist schon in repl.it angemeldet?
Spielfeld erstellen
- Wie legen wir die Breite und Höhe unserer Leinwand fest?
- Wie funktioniert ein Koordinatensystem?
- Wie geben wir der Leinwand eine Farbe?
- Was ist ein String?
1 2 3 4 5 6 | function setup() { |
Formen zeichnen 1
Jetzt wo wir unsere Leinwand erstellt haben, wollen wir auch etwas darauf machen. Wir fangen damit an, ein rotes und ein blaues Viereck zu zeichnen.
- Was ist ein Parameter?
- Wie positionieren wir ein Objekt auf unserer Leinwand (x, y)?
- Was ist eine Funktion und wie programmieren wir sie?
1 2 3 4 5 6 7 8 9 10 11 12 13 | function draw() { // So werden Formen ohne Rand gezeichnet noStroke() // Ein rotes Rechteck (rectangle) // rect(x, y, w, [h]) fill("red") rect(0,0,100,50) // ohne Höhe wird das Rechteck zum Quadrat [h]ist optional fill("blue") rect(110,0,50) |
Formen zeichnen 2
Vierecke können wir jetzt. Also machen wir uns dran auch einen Kreis zeichnen zu können. Zusätzlich gucken wir uns an, wie wir unsere Farbauswahl auf das nächste Level bringen können.
- Wie funktioniert die Positionierung eines Kreises
- Wie legen wir die Größe des Kreises fest?
- Was ist RGB und wie können wir es nutzen?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
Aufgaben zu Teil 1
- Zeichnet jetzt entlang der y-achse (also senkrecht) die gleichen Formen. Versucht auch immer 10 Pixel Abstand zu lassen.
- Probiert jetzt frei auf der Fläche verschiedene Formen aus! Lasst Eurer Kreativität freien Lauf!
- Versucht vorher mit Euren Partner mit dem "Markierungstool"(Wenn die Konferenzsoftware das hat? Oder wenn ihr zusammen vorm Laptop sitzt mit der Maus anzeigen) den Ort der Form zu zeichnen. Liegt Ihr richtig? (Ihr sollt ein Gefühl für die Koordinaten und die Größe bekommen)
- Man kann schwarz als fill(0) oder fill (0,0,0) oder fill("black") schreiben. Wie kann man weiß auf diese drei Arten schreiben? In der nächsten Übung (5) wird ein weißes Quadrat gemalt. probiert es dort aus.
- Malt genau in der Mitte ein Quadrat mit einer Seitenlänge von 100 in der Farbe Weiß
- Malt genau in der Mitte einen Kreis mit dem Durchmesser 100 in der Farbe des Hintergrundes!
Anmerkung: zu 5. und 6. Fällt Euch was auf? Wie sehen die vier "Ecken" aus? (Wie ein Raumschiff ;) )
Raumschiff zeichnen
- Aufbauend auf der Liste wird jetzt das Konzept der Tupelliste gezeigt. Dabei soll jedes Tupel eine Frage und die dazu passende Antwort enthalten
- Aufgabe 5: Findet heraus wie man auf der Grundlage der Tupelliste auch einzelne Elemente aus der Tupelliste aufrufen kann.
1 2 3 4 5 6 7 8 9 |
|
Raumschiff und Ränder
Jetzt, wo wir unser Raumschiff gebaut haben, wollen wir ein bisschen mit Umrandungen bzw. strokes rumprobieren.
- Wie legen wir die Dicke der Umrandung fest?
- Wie legen wir die Farbe der Umrandung fest?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
Andere Formen
- Wie zeichnet man Linien?
- Wie positioniert man Linien auf der Leinwand?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
|
Aufgaben zu Teil 2
- Zeichnet verschieden Formen, mit verschiedenfarbigen Rändern und unterschiedlicher Dicke auf dem gesamtenSpielfeld :)
- Malt eine grüne Linie (egal welches grün) von rechts oben, nach links unten.
- Malt eine rote Linie (egal welches rot) von der Mitte in die linke obere Ecke.
- Malt eine Linie von rechts unten zur Mitte (sucht Euch eine Farbe aus)
- Zeichnet das Raumschiff (graues Dreieck) in genau der gleichen Größe wie oben. Die Position soll mittig am unteren Rand sein. Dann zeichnet einen Kreis mit dem Mittelpunktauf der Mitte der kurzen unteren Seite des Raumschiffs in der Farbe schwarz (Hintergrundfarbe) Was passiert? Wie sieht das aus?
Anmerkungen: Für 2./3./4.: Versucht die Variablen width und height zu benutzen. (Ihr könnt aber erstmal anhand der CanvasGröße das 450x300 die Koordinaten ausrechnen und danach eine "Formel" entwickeln.)
Meteoriten
Nachdem wir uns jetzt mit den meisten Formen und Positionierungen gut auskennen, wollen wir lernen wie wir unsere Meteoriten programmieren.
- Was macht die Funktion random?
- Warum setzen wir width und height als Maximum?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
Meteoriten 2
Was macht eine Liste und wie nutzen wir sie hier?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
Meteoriten Bewegung
Wir wollen nun versuchen unsere Meteoriten in Bewegung zu bringen.
- Wie funktioniert die Punktnotation?
- Wie können wir die Position eines Objekts verändern?
- Wie funktioniert eine Schleife?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /* |
Meteoriten Bewegung 2
Hier wollen wir die Position unsere Meteoriten im Blickbehalten um ihn rechtzeitig verschwinden zu lassen. Dazu brauchen wir eine Abfrage.
- Was ist eine If-Abfrage?
- Wie lassen wir den Meteoriten wieder verschwinden?
- Was ist ein Integer?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
Aufgaben zu Teil 4
- Lasst den ersten Meteoriten auch an einer zufälligen Position erscheinen. Es gibt verschiedene Möglichkeiten, hauptsache es funktioniert!
- Wie kann man Meteoriten diagonal fliegen lassen?
Mehr Meteoriten
Weil wir jetzt wissen, wie wir einen Meteoriten erstellen und sich bewegen lassen, können wir das Konzept auf mehr Meteoriten übertragen um unserem Ergebnis näher zu kommen
- Wie erstellen wir eine Variable der wir direkt eine X und Y Wert vermitteln?
- Wie fügen wir bestehende Variablen in ein Array ein?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
- Wie lassen wir uns einzelne Elemente aus einem Array ausgeben?
- Wie können wir den Inhalt eines Arrays lesen und verstehen?
1 2 3 4 5 6 7 8 9 10 11 12 13 | // So sieht die Datenstruktur dann aus (Achtung, |
Mehr Meteoriten in Bewegung
Ähnlich wie bei der ursprünglichen Meteoritenbewegung, wollen wir jetzt auch die anderen Meteoriten gleichzeitig bewegen.
- Was ist eine for Schleife und wofür können wir sie hier nutzen?
- Wie nutzen wir eine for Schleife in Verbindung mit einem Array um alle Objekte in nur einer Schleife bewegen zu können?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | function draw() { background("black") noStroke() fill(255) // meteors.length ist die Länge des Arrays // Mit dieser Schleife wird in der variablen i gezählt und zwar von 0 bis 2, also 0,1,2 for (let i = 0; i < meteors.length; i = i + 1){ // Hier definieren wir mit current_meteor, den aktuellen Meteor in diesen Schleifendurchlauf let current_meteor = meteors[i] // Der Meteor wird gezeichnet circle(current_meteor.X, current_meteor.Y, 20) // Und lassen ihn nach unten wandern indem wir die y-koordinate um eins nach oben zählen. current_meteor.Y = current_meteor.Y + 1 // Warum =10 und -10? Einfach mal "P" im richtigen Moment drücken :) if(current_meteor.Y > height + 10){//Warum +10 current_meteor.Y = - 10 //Warum -10? current_meteor.X = random(0,width) // int() schneidet die Nachkommastellen ab, die random() liefert. current_meteor.X = int(current_meteor.X) } } |
Aufgaben zu Teil 5
- "Versetzte Meteoriten": Wie kann man die Meteoriten auch horizontal versetzen, damit sie nacheinander unten ankommen?
- "Farbige Meteoriten": Weist den Meteoriten eine zufällige Farbe zu.
Tipp: Das ist mit Fleißarbeit verbunden, den Anfangsmeteoriten Farben zu geben. Hier muss man keine zufälligen mit random() wählen, sondern kann wie die Anfangskoordinaten auch selbst was "zufälliges" auswählen.
Ihr könnt neue "Untervariablen" in meteors einfügen. Entweder R,G und B oder einfach nur color, wo ihr mit color() die Farbe schon in eine p5-Farbe in einer Variablen speichert.
Erst in der if-Bedingung kommt neben der neuen x-Koordinate die Zufallsfarbe hinzu.
Raumschiff Bewegung 1
Jetzt müssen wir noch unser Raumschiff einfügen..
- Was ist die Framerate?
- Wo wird unser Raumschiff erstellt, wenn wir es an x:width/2 einfügen?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
Raumschiff Bewegung 2
Nachdem unser Raumschiff erstellt wurde wollen wir es noch in Bewegung bringen.
- Was macht die Funktion keyIsDown(key)
- Wie können wir das Raumschiff mit Tasten bewegen?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
|