Definitionen Girls Go Informatics Die Wissenschaft Informatik befasst sich mit der Darstellung, Speicherung, Übertragung und Verarbeitung von Information. [Gesellschaft für Informatik, Positionspapier Was ist Informatik? ] (integrierte) Entwicklungsumgebung auch: IDE (engl. Integrated Development Environment) Hilfsprogramm zur Softwareentwicklung enthält u. a. Texteditor, Compiler, Debugger, Processing Programmiersprache (Java-basiert) mit integrierter Entwicklungsumgebung direkt visueller Output ist Open-Source-Software sehr gute Dokumentation, viele Code-Beispiele und Tutorials installieren und offline arbeiten: Download unter https://processing.org/ download/ oder im Browser kollaborativ arbeiten: http://sketchpad.cc/ Programmieren mit Processing Koordinaten in Processing:
einfache Objekte zeichnen Punkt: point(x,y) Linie: line(x,y,a,b) Rechteck: rect(x,y,a,b) Ellipse: ellipse(x,y,a,b) Farben RGB-Farbraum: jede Farbe wird durch eine Kombination von rot, grün und blau dargestellt (R,G,B), wobei die Werte jeweils zwischen 0 und 255 liegen Beispiele: RGB-Wert (0, 0, 0) (255, 0, 0) (0, 255, 0) (0, 0, 255) (255, 255, 0) (255, 0, 255) (0, 255, 255) (255, 255, 255) (136, 136, 136) (255, 136, 0) (199, 16, 92) Farbe
Variablen und Datentypen Variablen Eine Variable ist eine Speicherzelle, die über ihren Namen angesprochen wird, und in der der Wert der Variablen abgelegt wird besitzt einen Datentyp, z. B. int, float, boolean, String,... wird verwendet, um Werte zu speichern und wieder abzurufen kann im Programmablauf ihren Wert, aber nicht ihren Typ ändern Datentypen Ein Datentyp ist eine Zusammenfassung von Wertemengen und darauf definierten Operationen ist abgeschlossen bzgl. dieser Operationen, d. h. wenn (Variablen-)Werte eines Datentyps mit einer Operation verknüpft werden, entsteht wieder ein Wert dieses Typs. Beispiele Datentyp Eigenschaften Codebeispiel int float boolean String Ganzzahlen (engl. integer) mit Operationen wie + - * / etc. Größe: 4 Byte, dadurch Werte zwischen -2 31 und 2 31-1 Fließkommazahlen (engl. floating point numbers) mit Operationen wie + - * / etc. Größe: 4 Byte, dadurch Werte zwischen +/-1,4*10-45 und +/- 3,4*10 38 Wahrheitswerte mit Operationen &&! etc. (und, oder, nicht) genau zwei mögliche Werte: true und false Zeichenketten, Kenntlichmachung durch, mit Operation + (Verkettung/Konkatenation) Werte z.b. asdf, 13,, Girls Go Informatics, :-) int a = 7; int b = 4; println(a + b); println(a / b); a = 8; println(a + b); println(a / b); float a = 7; float b = 4; println(a + b); println(a - b); println(a * b); println(a / b); boolean a = true; boolean b = false; println(a && b); println(a b); println(!a); println(a &&!b); String a = Hal ; String b = lo ; println(a + b); println(b + a);
Kontrollstrukturen Kontrollstrukturen dienen zur Steuerung des Programmablaufs. Es gibt zwei Arten von Kontrollstrukturen: 1. bedingte Anweisungen 2. Schleifen Bedingte Anweisungen Eine bedingte Anweisung oder if-statement besteht aus einer Bedingung und aus einem Codeabschnitt, der wiederum aus einer oder mehreren Anweisungen besteht. Der Codeabschnitt wird nur ausgeführt, wenn die Bedingung zutrifft. Syntax in Processing: if (Bedingung) { Anweisung; Vergleichsoperatoren: < > <= >= ==!= Beispiele: oder if (x == 10) { ellipse(50,50,x,x); if (!true) { ellipse(50,50,10,10); Schleifen Eine Schleife (engl. loop) dient zur Wiederholung einer Anweisung. Der Codeabschnitt wird solange ausgeführt, wie die Schleifenbedingung zutrifft. Syntax einer Zählschleife in Processing: Beispiel: for (Iterator;Bedingung;Inkrementierung) { Anweisung; for (int i=0; i<10; i=i+1) { ellipse(i*10,i*10,5,5);
Funktionen Eine Funktion beschreibt einen Codeabschnitt, der einen Namen besitzt und über diesen Namen an anderen Stellen im Code aufgerufen werden kann. Eine Funktion ist eine Art Abkürzung um Code-Dopplungen zu vermeiden. Aufbau Funktion ohne Rückgabe (void): Funktion mit Rückgabe: Aufruf an anderer Stelle und Zuweisung durch: int summe = berechnesumme(4,27); Rekursion Eine Funktion kann sich selbst aufrufen. Beispiel: rekursive Funktion fibo zur Berechnung der Zahlen der Fibonacci-Folge: 0,1,1,2,3,5,8,13,21,34, int fibo(int i){ if (i <= 0) { return 0; else if (i == 1) { return 1; else { return fibo(i-2) + fibo(i-1);
Canvas - Größe Nützliches in Processing Canvas - Hintergrundfarbe Füllfarbe Linienfarbe Linienbreite (Fließkomma-) Zufallszahlen erzeugen ganzzahliger Anteil der Zahl x Ausgabe in der Konsole für alle Datentypen t Koordinaten des Mauszeigers Methode draw() wird wiederholt ausgeführt => implementieren erzeugt dynamisches Verhalten für globale Einstellungen die Methode setup() überschreiben Wiederholungsrate einstellen Informationen zu einer im Quellcode verwendeten Funktion erhalten size(int, int); background(int, int, int); bzw. background(int); fill(r,g,b) - kompletter Farbraum fill(f) - Grautöne nofill() - keine Füllfarbe stroke(r,g,b) - kompletter Farbraum stroke(f)- Grautöne nostroke()- keine Linienfarbe strokeweight(int); random(float); int(x); println(t); über die Variablen mousex und mousey Beispiel: void draw() { background(random(255)); Beispiel: void setup() { framerate(1); framerate(int); Rechtsklick -> Suche in Referenz
Farben, Koordinaten, Variablen Girls Go Informatics - Erster Workshop 10. - 13. April 2017 Übung 1 Tipps aus der Vorlesung rect(x,y,a,b) ellipse(x,y,a,b) mousex und mousey fill(r,g,b) random(float) Mouse-Input Wir wollen ein Programm entwerfen, bei dem ein Objekt der Bewegung der Maus folgt. Erzeuge dir ein Objekt deiner Wahl und zeig es dann immer genau dort an, wo sich deine Maus gerade befindet. Übung 2 Variablentausch Zunächst sollst du zwei Kreise auf dem Bildschirm anzeigen. a) Färbe die Kreise nun in einer zufällig gewählten Farbe ein. b) Jetzt geht es ans Tauschen. Erweitere dein Programm so, dass die selben zwei Punkte nun 2 cm darunter angezeigt werden. Wie schaffst du es, dass die beiden Kreise ihre Farben tauschen? Anregungen: Versuche doch mal weitere Punkte hinzuzufügen und auch deren Farben mit den 1
anderen zu tauschen. Oder wie wäre es, wenn du die Farben nicht vollkommen zufällig wählst, sondern zum Beispiel nur verschiedene Blautöne zulässt? 2
If-Statements Girls Go Informatics - Erster Workshop 10. - 13. April 2017 Übung 1 Tipps aus der Vorlesung if (Bedingung) {Anweisung; Rechteck unter der Maus Stelle dir vor, dass deine Oberfläche in vier gleich große Bereiche unterteilt ist. Wie kannst du nun ein Programm schreiben, das in dem Bereich wo sich gerade der Mauszeiger befindet ein Rechteck anzeigt? Übung 2 Gemeiner Button Wir wollen ein Programm schreiben, das den Benutzer ein bisschen ärgert. Lasse eine Taste jedes Mal ihre Position verändern, wenn der Mauszeiger auf sie bewegt wird. Überleg dir doch auch einen lustigen Text, der den Nutzer dazu bringt die Taste unbedingt drücken zu wollen. Übung 3 Farbige Bereiche Schaffst du es das Programm aus Übung 1 so zu erweitern, dass die Rechtecke eine andere Farbe haben, wenn der Mauszeiger nicht in ihrem Bereich ist? 1
Schleifen Girls Go Informatics - Erster Workshop 10. - 13. April 2017 Tipps aus der Vorlesung for (Iterator;Bedingung;Inkrementierung) {Anweisung; z.b. for (int i=0; i<10; i=i+1){... Größe des Canvas: size(int, int); random(float) Linienbreite: strokeweight(int); Übung 1 Liniertes Blatt Wir wollen das Design eines linierten Collegeblocks entwerfen. Überlege dir ein Programm, welches mit Hilfe von Schleifen ein liniertes Blatt erzeugt. Anregungen: Wie muss das Programm erweitert werden, damit der Collegeblock auch noch einen Rand hat? Erzeuge zum einen einen Collegeblock, dessen Rand durch dickere Linien erzeugt wird und zum anderen einen, dessen Rand unliniert ist. Übung 2 Kreise Wie kann man Schleifen nutzen, um zehn zufällig gefärbte Kreise ineinander zu schachteln? Anregungen: Lässt sich dein Programm so erweitern, dass eine Spirale entsteht? 1
Funktionen Girls Go Informatics - Erster Workshop 10. - 13. April 2017 Tipps aus der Vorlesung int berechnesumme(int x, int y){return x + y; Übung 1 Funktionen Diese Aufgabe wird dir den Nutzen und die Vielseitigkeit von Funktionen näher bringen. a) Um nicht immer wieder die ellipse(...)-funktion benutzen zu müssen, schreibe eine Funktion (ohne Parameter), die dir einen Kreis zeichnet. b) Wie du vielleicht gemerkt hast, kann dir die Funktion aus a) immer nur einen Kreis fester Größe zeichnen. Ändere deine Funktion nun so ab, dass du den Mittelpunkt und den Radius des Kreises bestimmen kannst. c) Schreibe nun noch eine Funktion, die dir das Smilie-Gesicht aus der Vorlesung zeichnet. Damit das auch wieder dynamisch ist, soll die Position des Gesichts mit übergeben werden. Außerdem sollst du bestimmen können, ob es ein trauriger oder ein glücklicher Smilie wird. Nutze dafür einen Übergabeparameter vom Typ boolean. Übung 2 Funktionen Schreibe eine Funktion, die dir ein Koordinatensystem zeichnet. Die Grenzen darfst du selbst bestimmen. a) Kennst du die Fakultätsfunktion n! aus der Mathematik? Die Funktion ist folgendermaßen definiert: n! = n k = n! = 1 2 3... n und 0! = 1 k=1 In Java kannst du nicht einfach n! schreiben um das Ergebnis zu bekommen. Schreibe eine Funktion, die dir für ein beliebiges n die Fakultät zurückgibt. 1
b) Zeichne nun einige Punkte der Fakultätsfunktion in dein Koordinatensystem ein. ***) Wie schaffst du es, dass nicht nur Punkte in deinem Koordinatensystem erscheinen, sondern der komplette Funktionsverlauf als Linie? 2