Schleifen Programmieren

Komplizierte LED-Muster

Nun möchten wir ein LED-Muster anzeigen, das mehr als 2-3 verschiedene Bilder anzeigt. z.B. sowas:

Versuch Nummer 1

Bis jetzt haben wir gelernt:

• Eine Endlos-Schleife ab Start
• LED-Muster anzeigen
• Warten

Versuch Nummer 1

Mit diesen Kenntnissen starten wir das Programm

Versuch Nummer 1

STOPPPPPPP

Führt das zum Ziel?
=> Ja, aber das geht sicher etwas einfacher oder eleganter…

Versuch Nummer 2

Dazu schauen wir uns aus dem Menu LED einmal einen Befehl etwas genauer an:

Zeichne X Wert Y Wert

Damit kann man einzelne LEDs auf unserem 5 x 5 LED-Bildschirm einschalten.

Versuch Nummer 2

• Das probieren wir gleich mal im Simulator aus,
• Wir klicken diesen einen Befehl in die Dauerhaft-Schleife ein
• Wir spielen mit den X und Y-Werten
• Wir schauen, was im Simulator passiert.

Versuch Nummer 2

• Wir können durch Verändern der Werte für X und Y zwischen 0 und 4 jede beliebige LED auf unserem 5 x 5 - Display einschalten.

Zeilen und Spalten

• Das kommt aus der Mathematik, man bezeichnet im Allgemeinen die Spalten-Richtung mit X
• und man bezeichnet die Zeilen mit Y

Zeilen und Spalten

• Spalten, horizontale Richtung, Links-Rechts : X
• Zeilen, vertikale Richtung, Oben-Unten : Y

• Vielleicht ist Euch aufgefallen, dass die erste Zeile und erste Spalte durch 0 angesprochen wird, nicht durch 1!
• Das ist in fast allen Programmiersprachen so, dass die 0 die jeweils erste Zeile/Spalte anspricht!

Versuch 2 final

• Nun beschränken wir uns also auf eine Zeile in unserer LED-Anzeige
• Wir zeichnen einen Punkt nach dem anderen
• Dazu erhöhen wir jeweils den Spalten-Wert
• Also X !

Versuch 2 final

• Wenn wir nun noch zwischen den Befehlen Warte-Zeiten von ca 200 - 300 ms einbauen und dann am Schluss der Endlos-Schleife den Bildschirm löschen, dann sieht das ganz gut aus.

Versuch 2 final

• Damit haben wir jetzt aber eigentlich noch nichts gewonnen…
• Wir müssten immernoch, um den kompletten “Bildschirm” mit 5 x 5, also 25 LEDs zu füllen, 25 Befehle hinschreiben.
• Und da die Befehle schneller abgearbeitet werden, als die “Zeige Leds”-Befehle, müssen wir auch noch das pausieren einbauen

Also weiter…

Doch etwas gewonnen

… DOCH etwas gewonnen

• Aber etwas haben wir “gewonnen” : Wir haben jetzt Befehle eingebaut, die mit Zahlen arbeiten.
• Und aus den letzten Kurs-Nachmittagen haben wir vielleicht gelernt, dass wir feste Zahlen auch durch Variablen ersetzen können…
• Das wollen wir nun tun.
• Und dann innerhalb einer sogenannten Schleife, die benutzte Variable verändern.

JavaScript-Code Versuch 2

Versuch 2, eine Zeile mit einzelnen LED-Befehlen.

basic.forever(() => {
    led.plot(0, 0)
    basic.pause(300)
    led.plot(1, 0)
    basic.pause(300)
    led.plot(2, 0)
    basic.pause(300)
    led.plot(3, 0)
    basic.pause(300)
    led.plot(4, 0)
    basic.pause(300)
    basic.clearScreen()
})

Download Hex-Code Versuch 2

Hex-code

Versuch 3: mit Index-Schleife

Versuch 3: Index-Schleife

(Im Englischen nennt man das die FOR-Loop)

• Wir schauen uns jetzt zuerstmal an, wo wir eine solche Schleife in unserer Programmier-Umgebung bekommen
• Und wie sie aussieht
• Und dann schauen wir uns an, was die Schleife genau macht.

Verschiedene Schleifen

• Im Menu Schleifen gibt es unterschiediche Arten von Schleifen

Verschiedene Schleifen

• Was die im Einzelnen machen und unterscheidet, das können wir uns leider jetzt nicht genauer anschauen,
• Wir wollen die Index-Schleife

Der Schleifen-Index

• Diese Index-Schleife ziehen wir uns mal auf die Arbeitsfläche.
• Und dann schauen wir sie uns etwas näher an.

Der Schleifen-Index

• Wenn man die Schleife genauer anschaut, sieht man drei Dinge, die anscheinend veränderbar sind.
  • Neben dem Namen “Index” ist ein Dreieck, das deutet immer darauf hin, dass man etwas verändern kann.
  • Die 4 hinten ist eine Zahl, die scheint man auch verändern zu können.
  • In der Mitte der Schleife kann man bei Machen anscheinend Befehls-Puzzle-Teile einklicken

Der Schleifen-Index

• Was macht diese Schleife?
• So wie sie dasteht, fängt sie an, die Variable Index wird mit 0 beschrieben und dann wird durchgeführt, was bei machen eingeklickt wurde.
• Wenn das fertig getan ist, fängt sie wieder oben an, die Variable Index wird um 1 erhöht und dann wird wieder alles durchgeführt, was bei machen steht
• So geht es weiter, bis die Index-Variable den Wert 4 enthält, dann wird die Schleife noch ein letztes Mal durchgeführt, also alles was bei machen steht wird abgearbeitet und dann ist die Schleife fertig.

Der Schleifen-Index

• Diese Schleife - so wie sie dasteht – läuft also 5 mal!

  • Zuerst mit Index = 0
  • Dann mit Index = 1
  • Anschliessend mit Index = 2
  • Daraufhin mit Index = 3
  • Schliesslich ein letztes Mal mit Index = 4

Der Schleifen-Index

• Die Index-Variable wird auch Lauf-Variable genannt.
• In dieser Schleife kann man nun also die Anzahl der Durchläufe ändern
• Und man kann den Namen der Lauf/Index-Variable verändern
• Da wir 5 LEDs in einer Reihe anschalten wollen, passt uns die 4, die ja 5 Durchläufe ergibt, ganz gut, die müssen wir also gar nicht ändern.
• Die Lauf-Variable wollen wir aber umbennen in Spalte

For Schleife füllen

• Wenn wir die Variable in Spalte umbenannt haben, dann holen wir uns aus unserer Endlos-Schleife (Auch eine Schleife, die läuft aber IMMER) unten das Anschalten der LED und die dazugehörige Pause.

Umbennen / Ersetzen

• Das Löschen des Bildschirms legen wir mal auch noch zur Seite
• Dafür ersetzen wir den festen Wert 4 der bei X steht durch die Variable, die wir Spalte genannt haben

Umbennen / Ersetzen

• Nun haben wir also eine Schleife.
• Diese läuft von 0-4, also 5 mal
• Die Lauf-Variable heisst Spalte
• Diese Laufvariable wird von 0 - 4 durchgezählt

Schleife mit Variablen

• Das können wir nun in unsere Gesamt-Programm-Endlos-Schleife einklicken
• Dazu räumen wir diese (1) zuerst leer, wir ziehen den ganzen Block in den Mülleimer
• Unsere neue Index-Schleife ziehen (2) wir nun rein, um sie zur Ausführung zu bringen
• Unter die Index-Schleife ziehen wir (3) nun noch das Bildschirm-Löschen

Schleife mit Variablen

• Damit haben wir nun eine schöne erste Index-Schleife programmiert
• Das Ergebnis schauen wir zuerst im Simulator an
• Wenn alles passt, können wir das auch in den Calliope programmieren.

Finale Schleife mit Variablen

• Diese Schleife läuft nun 5 mal!
  • Zuerst mit Variable Spalte = 0, dann wird die LED in Spalte (X) 0 Zeile (Y) 0 gesetzt
  • Dann mit Variable Spalte = 1, dann wird die LED in Spalte (X) 1 Zeile (Y) 0 gesetzt
  • Anschliessend mit Variable Spalte = 2, dann wird die LED in Spalte (X) 2 Zeile (Y) 0 gesetzt
  • Daraufhin mit Variable Spalte = 3, dann wird die LED in Spalte (X) 3 Zeile (Y) 0 gesetzt
  • Schliesslich ein letztes Mal mit Variable Spalte = 4, dann wird die LED in Spalte (X) 4 Zeile (Y) 0 gesetzt

JavaScript-Code Versuch 3

Versuch 3, eine Zeile mit einer Schleife.

basic.forever(() => {
    for (let Spalte = 0; Spalte <= 4; Spalte++) {
        led.plot(Spalte, 0)
        basic.pause(300)
    }
    basic.clearScreen()
})

Download Hex-Code Versuch 3

Hex-code

Versuch 4, Ganzer Bildschirm

• Nun können wir also mit einer Schleife eine Zeile füllen, durch die Index-Schleife wird die Zeile spaltenweise gefüllt
• Wir wollen aber immnoch den ganzen Bildschirm einzeln mit LEDs füllen.
• Dazu kopieren wir nun die Index-Schleife 4 mal

4 mal kopiert

• Wir hängen sie viermal untereinander
• Das Bildschirm-Löschen schieben wir dabei nach unten, das wollen wir nur einmal ganz am Schluss haben
• Nun haben wir 5 identischen Zeilenfüller, verwirklicht durch eine Schleife
• Wir müssen nun noch die Zeilen-Nummern anpassen.

Fertiges Programm, Versuch 4

• Wenn wir das gemacht haben, haben wir ein Programm, das den Bildschirm LED für LED füllt
• Und das ganze durch die schlaue Verwendung einer Schleife, anstatt durch Aneinanderreihen von 25 Led-Setz-Befehlen.

JavaScript-Code

Finales LED-Flächen-Füll-Programm

let Spalte = 0
basic.forever(() => {
    for (let Spalte = 0; Spalte <= 4; Spalte++) {
        led.plot(Spalte, 0)
        basic.pause(300)
    }
    for (let Spalte = 0; Spalte <= 4; Spalte++) {
        led.plot(Spalte, 1)
        basic.pause(300)
    }
    for (let Spalte = 0; Spalte <= 4; Spalte++) {
        led.plot(Spalte, 2)
        basic.pause(300)
    }
    for (let Spalte = 0; Spalte <= 4; Spalte++) {
        led.plot(Spalte, 3)
        basic.pause(300)
    }
    for (let Spalte = 0; Spalte <= 4; Spalte++) {
        led.plot(Spalte, 4)
        basic.pause(300)
    }
    basic.clearScreen()
})

Download Hex-Code

Hex-code

“Hausaufgabe”

Schaut einmal zur Nachlese, zu den Hausaufgaben, da dürft Ihr dieses Bildschirm-Füll-Programm noch weiter verbessern/vereinfachen

Zu den Hausaufgaben

Navigation

• Zurück
  
• Hoch zur Übersicht
  
• Weiter

Lizenz/Copyright-Info

Für alle Bilder auf dieser Seite gilt:

• Autor: Jörg Künstner
• Lizenz: CC BY-SA 4.0

Download Folien

Download Kursteil: 06_02_Schleifen als PDF-Folien