Spielend programmieren lernen mit der Oxocard ISBN Achtung, fertig, Code! Grafik: René Rüegsegger

Transkript

1 Wieso soll ich programmieren lernen? 04 Computer sind allgegenwärtig 06 Aus was für Teilen besteht ein Computer? 10 Was ist eine Programmiersprache? 12 Die Programmiersprache Blockly 16 Was kann die Oxocard? 18 Achtung, fertig, und los! 22 Die Blockly-Umgebung 24 Neue Blöcke einfügen 26 Wie kommt das Programm auf die Oxocard? 28 Was sind dots per inch? 30 Pixelbilder 32 Programmieren durch ausprobieren 36 Animation 38 Wir basteln uns ein Diffusor-Papier 42 Koordinaten und Grafikbefehle 44 Thomas Garaio Achtung, fertig, Code! Spielend programmieren lernen mit der Oxocard ISBN Grafik: René Rüegsegger Bibliografische Information der Deutschen Nationalbibliothek: Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Angaben sind im Internet über abrufbar. 1. Auflage 2018 Alle Rechte vorbehalten 2018 hep verlag ag, Bern Bedingte Anweisungen 50 Die Smiley-Maschine 54 Schleifen und Zahlenreihen 56 Animation mit Schleifen 60 Wie zeigt der Computer Bilder an? 62 Bild einfärben 63 Wie ein Ton entsteht 66 Töne und Geräusche 72 Wie der Zufall entsteht 74 Zufällige Farben und Koordinaten 76 Zufällige Töne 78 Spiel: Fang das Pixel 80 Kippen und Rollen 86 Kollision 88 Fang das Pixel 90 Internet und Kommunikation 94 Zusatzmaterialien und -angebote zu diesem Buch: Wetterdaten und Uhrzeit abfragen 96 Kurznachrichten schicken 100

2 WIESO SOLL ICH PROGRAMMIEREN LERNEN? Wer programmieren kann, kann Maschinen steuern aber auch Dinge erschaffen und Emotionen wecken! Filme, Musik, ja die ganze Unterhaltungsindustrie ist voll von Computertechnik und computergeneriertem Inhalt. Fürs Programmieren hat man den mächtigsten Werkzeugkasten der Welt zur Hand und kann damit eine unbegrenzte Anzahl von kreativen Ideen umsetzen. In diesem kurzen Kurs wirst du mit der Programmiersprache Blockly und dem Lerncomputer Oxocard arbeiten. Das ist nicht besonders schwierig und auch nicht sehr technisch. Mit Blockly und der Oxocard kannst du mit sehr einfachen Mitteln Bilder zeichnen und Töne erzeugen, am Ende kannst du sogar kleine Animationen und Spiele programmieren. Lösche alle Pixel Zeichne einfarbiges Bild x 0 y 0 Warte 4000 Millisekunden Oxocard ausschalten PROGRAMMIERERINNEN UND PROGRAMMIERER VERFÜGEN ÜBER DEN MÄCHTIGSTEN WERKZEUGKASTEN DER WELT. PROGRAMMIERE MIT DER PROGRAMMIER- SPRACHE BLOCKLY UND DEM LERNCOMPUTER OXOCARD BILDER, TÖNE UND KLEINE ANIMATIONEN. 04 WIESO SOLL ICH PROGRAMMIEREN LERNEN? 05

3 COMPUTER SIND ALLGEGENWÄRTIG Computer sind heute allgegenwärtig und nicht mehr aus unserem Leben wegzudenken. Nebst jenen Geräten, die du sofort als Computer wahrnimmst, wie Notebooks, Tablets oder Handys, gibt es mittlerweile eine Menge Geräte, die nicht sofort als Computer erkennbar sind, aber auch einen eingebaut haben. Wenn du morgens aus dem Haus gehst, hast du bereits mehrere «Computer» gebraucht. Vielleicht bist du dank einem Radiowecker aufgewacht, dann hast du warm geduscht der elektronisch gesteuerten Heizung sei Dank und deine Eltern haben dir auf dem Induktionsherd einen Kakao zubereitet. Du hast ein blinkendes Rücklicht am Fahrrad? Die Blinkgeschwindigkeit könnte von einem kleinen Computer geregelt sein. Auch die Pausenglocke wird meist mit einer elektronischen Zeitschaltuhr gesteuert wieder ein Computer. Computer sind aus unserem Alltag nicht mehr wegzudenken. Überall versteckt, sammeln sie Daten, steuern Abläufe und zeigen Informationen an. ÖV-ANZEIGE FITNESSTRACKER SMARTPHONE BEZAHLSYSTEM LED-RÜCKLICHT WERBEDISPLAY JETZT FERIEN BUCHEN 06 COMPUTER SIND ALLGEGENWÄRTIG 07

4 A U F G A B E Was enthält einen Computer? Was steuert er? Was für Computer begegnen dir an einem normalen Schultag? Betrachte dazu das Bild auf dieser Seite. Schreib dir auf, wo deiner Meinung nach ein Computer eingebaut ist und was er für eine Aufgabe hat. Radiowecker Kaffeemaschine Zeit, Alarm Temperatur, Menge, mahlen 08 COMPUTER SIND ALLGEGENWÄRTIG 09

5 AUS WAS FÜR TEILEN BESTEHT EIN COMPUTER? A U F G A B E Welche Sensoren finden wir in Handys und Tablets? Ergänze die Liste und schreibe auf, was dir alles einfällt. Wir Menschen können sehen, hören und riechen. Anhand unserer Sinnesorgane, den Augen, den Ohren und der Nase, nehmen wir unsere Umgebung wahr. Wir können uns mitteilen, indem wir Laute bilden, und uns mit Händen und Füßen bemerkbar machen. Damit ein Computer für uns nützlich ist, müssen wir ihm auch «Sinnesorgane» geben. Und Möglichkeiten, uns Dinge mitzuteilen. Bei einem normalen PC sind diese Ein- und Ausgabemöglichkeiten rasch aufgezählt: Tastatur, Maus/Touchpad, Bildschirm und Lautsprecher. Kompasssensor Positionssensor (GPS) Du hast vermutlich beim Gebrauch eines Handys schon einmal festgestellt, dass diese Geräte deutlich mehr können als ein normaler Computer. Man kann mit den Fingern Dinge auf dem Bildschirm fassen und bewegen. Spiele lassen sich auch durch Bewegungen steuern und das Handy kann dir sogar die aktuelle Position mitteilen. Das Gerät hat also Sinne, die wir Menschen nicht haben! Die dazugehörigen Sinnesorgane nennt man Sensoren. LAUTSPRECHER TASTATUR/TOUCHPAD BILDSCHIRM 10 AUS WAS FÜR TEILEN BESTEHT EIN COMPUTER? 11

6 WAS IST EINE PROGRAMMIERSPRACHE? Die ersten Computer waren mechanisch gebaut. Erst viel später, mit der Erfindung des Transistors, konnten anstelle von mechanischen Zahnrädern elektrische Signale werden. Einen der ersten Computer entwickelte der Engländer Charles Babbage Mitte des 19. Jahrhunderts. Und wer hat das erste Programm dazu geschrieben? Baroness Ada Lovelace! Babbage hat seinen Computer übrigens nur «theoretisch» gebaut; es gab nie eine funktionierende Maschine. Und Ada hat ihr Programm daher auch nur auf Papier verewigt und im Kopf durchgespielt. Nach ihr wurde 1980 die Programmiersprache Ada benannt. Was denkst du, welche Sprache spricht ein Computer? Es ist eine Sprache, die nur aus Nullen und Einsen besteht und für Menschen kaum «zu sprechen» ist. Man nennt sie Maschinensprache. Wir brauchen Sprachen, um mit anderen zu kommunizieren. Obwohl eine Programmiersprache in vielen Hinsichten anders ist als eine gesprochene Sprache, dient sie einem ähnlichen Zweck. Man will in diesem Fall einer Maschine mitteilen, was zu tun ist. Das muss man in einer Sprache tun, die sie versteht. Jede Stelle dieser Maschinensprache, ein sogenanntes «Bit», kann den Wert 0 oder 1 haben. Zahlen, Buchstaben, Bilder, Töne und alles andere, was du in deinem Computer speicherst, werden als Kombinationen von Nullen und Einsen codiert. Die folgenden Zeilen zeigen die Zahlen 2, 4 und 8 und die Buchstaben A, B und C ausgedrückt in jeweils acht Bits: 2 = = = A = B = C = Maschinensprache ist wie eine Fremdsprache, die du nicht beherrschst. Wenn du beispielsweise kein Japanisch sprichst, ist die Sprache für dich komplett unverständlich. Wenn du dich mit jemandem auf Japanisch unterhalten möchtest, brauchst du einen Dolmetscher, also einen Übersetzer. Einen Übersetzer für die Maschinensprache nennt man Interpreter oder Compiler, doch dazu bald mehr. ADA LOVELACE, DIE ERSTE PROGRAMMIERERIN Bevor wir nun eine Programmiersprache kennenlernen, stellen wir ein Experiment vor, dass dir zeigt, wie eine Maschinensprache funktioniert

7 A U F G A B E Probiert zu zweit eine einfache Maschinensprache aus: Eine Person programmiert, die andere ist die Maschine. Die Maschine kann nur zwei Dinge unterscheiden: Tippen auf die linke («0») oder die rechte («1») Schulter. 0 0 einen Schritt vorwärts Wir definieren folgende Maschinensprache: 0 0, d. h. zweimal links tippen, bedeutet, dass die Maschine einen Schritt vorwärts macht. Auf der nächsten Seite siehst du die weiteren Befehle. 01 nach links drehen 10 nach rechts drehen Tippen auf die rechte Schulter bedeutet 1 Tippen auf die linke Schulter bedeutet 0 11 einen Schritt rückwärts Wir schreiben jetzt ein kleines «Maschinenprogramm»: «Programmiere» dies jetzt in die Maschine ein und schaue, was passiert. Wenn ihr es einmal durchgespielt habt, wechselt ihr die Rollen. 14 WAS IST EINE PROGRAMMIERSPRACHE? 15

8 DIE PROGRAMMIERSPRACHE BLOCKLY Damit es für uns einfacher ist, eine Maschine zu programmieren, haben findige Ingenieurinnen und Ingenieure Programmiersprachen entwickelt. Diese sind für uns relativ verständlich und können von einem dazugehörigen Compiler (engl. to compile = zusammentragen, übersetzen) in die Maschinensprache übersetzt werden. Es gibt viele verschiedene Programmiersprachen, jeweils für unterschiedliche Zwecke. Eine Webseite wird anders programmiert als ein Spiel auf einer Konsole oder die Steuerung eines Autos oder eines Flugzeugs. Für diesen Kurs haben wir die visuelle Programmiersprache Blockly gewählt. Diese Sprache besteht aus einzelnen Blöcken, die du «zusammenstecken» kannst. Sie ist einfach zu lernen, aber trotzdem vielseitig, sodass du mit ihr auch kompliziertere Aufgaben meistern kannst. Das unten abgebildete Blockly-Programm zeigt vier Sekunden lang ein Smiley an und schaltet dann die Oxocard wieder aus. Der Compiler übersetzt diese Angaben in die Maschinensprache, in der es für diese einfache Aufgabe bereits über Bits braucht! Dies liegt daran, dass die Maschinensprache sehr primitiv ist. Der Computer braucht viele tausend Einzelanweisungen, damit er ein Smiley zeichnet. Lösche alle Pixel Zeichne einfarbiges Bild Warte 4000 Oxocard ausschalten x 0 y 0 Millisekunden MIT BLOCKLY SPIELEN IST ÄHNLICH WIE MIT LEGO: MAN STECKT EINFACH BLÖCKE ZUSAMMEN UND KANN DANN SOFORT ERGEBNISSE SEHEN BITS! Das heißt, 20 A4-Seiten wie diese wären nötig, um in Maschinensprache das gleiche Ergebnis zu erreichen wie in Blockly mit vier Zeilen ACHTUNG, FERTIG, CODE! DIE PROGRAMMIERSPRACHE BLOCKLY

9 WAS KANN DIE OXOCARD? Du kannst mit der Oxocard nicht nur Smileys darstellen, sondern auf dem Display Bilder in verschiedenen Farben darstellen, auch animierte. Zudem kann die Oxocard Töne erzeugen und wahrnehmen, und auch reagieren, wenn sie bewegt wird. Wird sie mit dem Internet verbunden, sind Daten aus dem Internet, z. B. Wetterdaten, verfügbar. Im Innern der Oxocard befindet sich die Platine mit den elektronischen Bauteilen. Sie hat ähnliche Möglichkeiten, wie wir sie heute auch in PCs, Tablets oder Smartphones vorfinden. Die folgende Grafik zeigt dir auf, was die Oxocard alles eingebaut hat und welche Zwecke die Teile erfüllen MIKROFON 02 AUDIO-AUSGANG 03 CONTROLLER Mit diesem elektronischen «Ohr» können akustische Signale verarbeitet werden. Du kannst Kopfhörer oder Lautsprecher anschließen um so Töne und Geräusche zu erzeugen. In diesem Gehäuse befindet sich das «Gehirn» der Oxocard. Zwei CPU-Kerne verarbeiten sämtliche Prozesse und steuern die Vorgänge GND UBUS VDO CS MISO SCK R34 R33 MISO GND D10 D11 IC13 C10 Q5 Q4 C12 USB to VART LED1 LED2 LED3 LED4 LED5 LED6 LED7 LED8 LED9 LED10 LED11 LED12 LED13 LED14 LED15 LED16 LED17 LED18 LED19 LED20 LED21 LED22 LED23 LED24 Microcontroller R21 R19 VP VN R12 GND WS WIFI/BLUETOOTH 05 BESCHLEUNIGUNGSSENSOR Per WiFi kannst du Daten aus dem Internet holen und mit anderen Karten kommunizieren. Per Bluetooth kannst du ebenfalls Daten an andere Geräte übermitteln, auch ohne externes Netz. Bei Bewegung erfährt die Karte eine Beschleunigung, die mit diesem Sensor gemessen wird. R11 08 VCC R26 R5 GND R6 C13 R9 C11 R1 - + LED25 LED26 LED27 LED28 LED29 LED30 LED31 LED32 LED33 LED34 LED35 LED36 LED37 LED38 LED39 LED40 LED41 LED42 LED43 LED44 LED45 LED46 LED47 LED48 R31 SDATA C23 VDD Accelerometer GND SDA C5 C3 R13 R14 VDD TEMPERATURSENSOR Du kannst damit die aktuelle Raumtemperatur bis auf 2 Grad genau ermitteln. C16 Power Supply LED49 LED50 LED51 LED52 LED53 LED54 LED55 LED56 VCC_LED DO_LED Button2 Button1 100 C6 Reset LED57 LED58 LED59 LED60 LED61 LED62 LED63 LED64 C78 C70 C62 C54 C46 C38 C30 C22 Button3 V24 Button6 Button5 Button KNOPF/TASTE 08 FARBIGE LED-LÄMPCHEN Mit den sechs Knöpfen kannst du deine Programme steuern und eine Aktion starten oder anhalten. Mit den 64 LEDs kannst du farbige Bilder zeichnen, auch animierte USB Über die USB-Schnittstelle kannst du Daten austauschen und den Akku laden. 18 WAS KANN DIE OXOCARD? 19