1 / 94

Processing

Processing. Design by Numbers Nicolas Ruh & Christian Wüst Quellen: www.learningprocessing.com www.creativecoding.org http://shiffman.net. openprocessing.org/visuals/?visualID=37337. Inhalte (verlinkt!). DesignByNumbers Processing IDE Processing & JAVA Koordinaten Einfache Formen

bazyli
Download Presentation

Processing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Processing Design by Numbers Nicolas Ruh & Christian Wüst Quellen: www.learningprocessing.com www.creativecoding.org http://shiffman.net openprocessing.org/visuals/?visualID=37337

  2. Inhalte (verlinkt!) • DesignByNumbers • Processing IDE • Processing & JAVA • Koordinaten • Einfache Formen • Farben • Code Grundgerüst • Maus & Tasten • Variablen • Instanzvariablen • Boolean Logik • Verzweigungen • Schleifen • Methoden • Klassen • noise NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  3. Design by Numbers: Ziele • Grafiken vom Computer zeichnen lassen, also programmieren  • Beeindruckende Grafiken ... die man nicht von Hand zeichnen könnte • Dynamische Grafiken ... die sich ständig verändern • Interaktive Grafiken ... die auf Benutzerverhalten reagieren (Maus, Tasten,...) • ... und zum Schluss alles zusammen, ggf. plus • besondere Geräte (Website, Android Phone, Kinect, ...) • besondere Grafik (Perlin Noise, Fraktale, 3D, ...) • nicht nur Grafik, sondern auch Sounds NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  4. Design by Numbers: Mittel • Programmierumgebung & -sprache • Processing, basierend auf JAVA • Grundkenntnisse Programmieren • Erarbeiten/Repetieren und viel üben • Ideen und Kreativität • Erst Beispiele variieren, dann eigenes Projekt • Motivation und Eigenständigkeit • können wir hoffentlich voraussetzen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  5. Design by Numbers: Ressourcen Wiki Websites www.creativecoding.org Einführungskurs auf Deutsch www.openprocessing.org Konto erstellen, Sketches hochladen, zu unserem Classroom hinzufügen www.processing.org Hauptseite von Processing mit vielen Informationen, auf Englisch • www.nicolasruh.wikispaces.com • Arbeitsblätter • Folien • Cheatcheets • Links NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  6. Design by Numbers: Grobplanung • Montag & Dienstag • Grundkurs Programmieren mit Processing (im Team) • Materialien: www.creativecoding.org & Folien • Erfolgskontrolle: Arbeitsblätter • Mittwoch • Inputs zu: Projektplanung, Perlin Noise, ... (?) • Projektskizze erstellen  anfangen • Donnerstag & Freitag • Arbeit am Projekt • Ergebnisse auf www.openprocessing.com ausstellen sagen Sie uns, was Sie interessiert NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  7. Processing IDE (integrated development environment) • Processing hat eine einfache IDE, die beim Erstellen und Verwalten von Programmen (=Sketches) hilft • File: New, Open, Quit, Examples! • Edit: Copy, Paste, Select, Indent, Comment… • Sketch: Run, Stop, Show Sketch folder… • Tools: Auto format, Color chooser… • Help: Getting Started, Reference, Find in Reference… NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  8. IDE Menu Toolbar Sketch Tabs Text Editor Message Line Text Area Current Line# RUN • Auch ausführen kann man Sketches direkt hier (Ctrl-R) • Entweder öffnet sich das Programm in einem neuen Fenster • oder man bekommt eine Fehlermeldung Display Window NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  9. Toolbar buttons NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  10. Sketch Files and Folders … • Der Ordner, in dem Ihre Programme gespeichert werden, heisst‘Sketchbook’ • Sorgen Sie dafür, dass Ihre Sketche an einem für Sie zugänglichen Ort auf der Festplatte liegen • benutzen Sie “save As…” • oder ändern sie den Default-Ort: • Ausserdem: bauen Sie Ihre Initialen in den Dateinamen ein • Jeder Sketch hat seinen eigenen Ordner • Die Datei, mit der Sie normalerweise arbeiten, hat die Endung .pde • Beim Exportieren, ergeben sich andere (nicht mehr veränderbare) Versionen, in neuen Unterordnern, z.B. • Web-Version (HTML & JavaScript) • Betriebssystem-spezifisches Programm (z.B. .exe oder .app) • Android Version NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  11. Ihr erstes Programm • Öffnen Sie einen neuen Sketch • Im Editor, tippen Sie: // Mein erstes Programm print(“Hallo Welt”); rect(10, 10, 50, 50); • Drücken Sie “Run” • Was ist im Message/Text Area? • Was ist im Display window? • Speicher Sie den Sketch an einen geeigneten Ort, unter einem geeigneten Namen • z.B. D:/Dokumente/Processing/Sketches/NRHallo/NRHallo.pde NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  12. Fehler Vermutlich ist das Problem in dieser Zeile Der Compiler beschreibt das Problem- hier ist es die GROSSSCHREIBUNG NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  13. Help, Find In Reference • Doppelklick auf Befehl (wird in gelb hervorgehoben), dann • Menu: Help  Find in Reference (oder Ctrl-Shift-F) • funktioniert nur, wenn richtig geschrieben • öffnet die richtige Seite in der Referenz (englisch) • führt meistens ein Beispiel auf NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  14. Processing baut auf JAVA auf Processing Source code • Processing ist ein einfaches‘front end’ für Java. • Processing benötigt die JAVA SDK • Software Development Kit • Processing hat eigene Klassen für den Umgang mit Grafiken • Processing-Sketches können als universale JAVA-Applications (.jar) exportiert werden • Die üblichen JAVA-Bibliotheken können in Processing eingebunden werden Processing Library Processing Java Compiler Java Library Portable Java Program NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  15. Die Java Virtual Machine (JVM) • Das besondere an JAVA ist, dass es innerhalb einer sogenannten Virtual Machine ausgeführt wird • “Write once, run everywhere” – die JVM kümmert sich um die Betriebssystem-abhängigen Besonderheiten  JRE (Java Runtime Environment) Portable Java Program PC Mac Cell Phone Java VM Java VM Java VM JRE Windows OS X Phone OS CPU x86 G3/4/5 Running Java Program Running Java Program Running Java Program NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  16. Koordinaten in der Mathematik Ursprung NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  17. Koordinaten am Computer nichtdasselbeKoordinatensystemwie in der Mathematik! • Die obere linke Ecke ist 0,0 • X (= erste Koordinate) zählt nach rechts • Y (= zweite Koordinate) zählt nach unten Ursprung NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  18. Einfache Formen • Je nach Form braucht es verschiedene Informationen: • Point: x und y • Line: Start & Endpunkt, also zweimal x und y • Rectangle: Zwei Ecken? Oder??? • Ellipse: ???? NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  19. Point • In Processing: point(x, y); • ‘point’(klein geschrieben) = vordefinierter Befehl • in Klammern die Informationen (=Parameter) • bei ‘point’zwei Zahlen, die Koordinaten angeben • Semikolon; (nach jedem Befehl) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  20. Line • In Processing: line(x1, y1, x2, y2); • ‘line’(klein geschrieben) = vordefinierter Befehl • in Klammern die Informationen (=Parameter) • bei ‘line’zwei Zahlenpaare, die Koordinaten angeben • Semikolon; (nach jedem Befehl) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  21. Rectangle 1 • In Processing: rect(x, y, w, h); • ‘rect’(klein geschrieben) = vordefinierter Befehl • in Klammern die Informationen (=Parameter) • bei ‘rect’die obere linke Ecke sowie Breite und Höhe • Semikolon; (nach jedem Befehl) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  22. Rectangle 1b • In Processing: rectMode(CENTER); rect(x, y, w, h); • ‘rect’(klein geschrieben) = vordefinierter Befehl • in Klammern die Informationen (=Parameter) • bei ‘rect’der Mittelpunkt sowie Breite und Höhe • Semikolon; (nach jedem Befehl) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  23. Rectangle 2 • In Processing: rectMode(CORNERS); rect(x1, y1, x2, y2); • ‘rect’(klein geschrieben) = vordefinierter Befehl • in Klammern die Informationen (=Parameter) • bei ‘rect’die obere linke Ecke sowie die untere rechte Ecke • Semikolon; (nach jedem Befehl) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  24. Ellipse Modes • Wie bei rect: • CORNER (x, y, width, height) • CORNERS (x1, y1, x2, y2) • CENTER (x, y, width, height) • Zeichnet die Ellipse innerhalb dieser ‘Bounding box’ • Ein Kreis is einfach eine spezielle Ellipse (width = height) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  25. RGB-Farben • Werden meist aus den drei Grundfarben Rot, Grün und Blau gemischt, z. B.: • Rot + Grün = Gelb • Grün + Blau = Cyan • no colors = Black (!!) • Werte gehen meist von 0 (= nichts) bis 255 (= maximal) • (255, 0, 0)  knallrot • (50, 0, 0)  hellrot • (128)  mittleres Grau;zählt wie (128, 128, 128) • (0, 0, 255, 128)  rot, halb transparent; ein vierter Wert gibt die Durchsichtigkeit an • (0, 20)  schwarz, sehr transparent; zählt wie (0, 0, 0, 20) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  26. Farbwähler • Processing hat einen eingebauten Farbwähler • Menüpunkt: Tools  Color Selector • mit der Maus auswählen oder Farbwerte manuell eingeben • RGB wie gehabt, ganz unten dasselbe im Hexadezimalsystem • HSB = andere Methode, mit drei Werten eine Farbe anzugeben • mit Code: colorMode(HSB); //H = hue; S = saturation; B = brightness • mit colorMode kann man auch den Range der Farbwerte ändern, z.B.:colorMode(RGB,100); //RGB, aber Farbwerte von 0 bis 100 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  27. Anwendung von Farben // Hintergrundfarbe; gleich sichtbar background(255); // 100% weiss background(0,255,0); // 100% grün background(255,255,0); // 100% gelb // Rahmenfarbe für folgende Form(en) stroke(255,255,255); // weiss!! noStroke(); // keine Rahmenfarbe // Füllfarbe für folgende Form(en) fill(255,0, 255); // violett fill(255,255,0,128); // gelb, halbtransparent noFill(); // keine Füllfarbe NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  28. grayscale, Beispiel • Füllfarbe und Rahmenfarbe gelten für alle folgenden Formen - esseidenn sie werden wieder geändert • Standardwerte (also wenn Sie selbst nichts angeben): • background: 128 (mittleres grau) • fill: 255 (weiss) • stroke: 0 (schwarz) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  29. farbig, Beispiel background(255); noStroke(); fill(255, 0, 0); // Bright red ellipse(80,60,100,100); fill(127, 0, 0); // Dark red ellipse(80,160,100,100); fill(255, 200, 200); // Pink (pale red) stroke(0); ellipse(100,260,100,100); NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  30. Transparenz, Beispiel noStroke(); fill(0); rect(0,0,200,400); fill(0, 0, 255); rect(200,0,200,400); fill(255,0,0,255); //100% opacity. rect(0,0,400, 50); fill(255,0,0,195); // 75% opacity. rect(0,100,400, 50); fill(255,0,0,128); // 50% opacity. rect(0,200,400, 50); fill(255,0,0,64); // 25% opacity. rect(0,300,400, 50); • Der letzte Wert gibt die Tranzparenz an • wird oft ‚alpha‘-Kanal genannt NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  31. Grundstruktur für dynamische Sketches • // Mein erstes Programm • print(“Hallo Welt”); • rect(10, 10, 50, 50); Das war einfach – aber langweilig, weil statisch. Für interessantere, dynamische Programme braucht man ein immer gleiches Grundgerüst: Code, der nur einmal, (zu Beginn) ausgeführt wird Code, der immer wieder (in jedem Frame) ausgeführt wird Achtung!: wirklich gezeichnet wird erst am Ende von draw() NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  32. Beispiel: Joggen gehen Schuhe anziehen Vor die Türe gehen Schritt machen Luft holen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  33. Beispiel in Processing – was passiert? die Grösse des display Window, das braucht es immer size(200,200); background(255); frameRate(40); der Default wäre 60 Welche Farbe ist das? Muss diese Zeile hier stehen? fill(0,0,0,10) rect(0,0,10,10); NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  34. Beispiel in Processing – was passiert? size(200,200); background(255); frameRate(40); line(100,100, mouseX,mouseY); die momentane X-Koordinate der Maus NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  35. Der background-Trick void setup() { size(200,200); background(255); } void draw() { line(mouseX, mouseY, 100, 100); } void setup() { size(200,200); } void draw() { background(255); line(mouseX, mouseY, 100, 100); } NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  36. Maus-Tracking • Processing weiss immer, wo die Maus ist: • mouseX: Die aktuelle X-Koordinate der Maus • mouseY: Die aktuelle Y-Koordinate der Maus • Ein Beispiel: NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  37. Mehr Maus-Tracking … • Processing merkt sich auch, wo die Maus beim letzten Aufruf von draw()war (also im vorigen Frame) • pmouseX: Die vormalige X-Koordinate der Maus • pmouseY: Die vormalige Y-Koordinate der Maus NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  38. Ein einfaches Zeicheprogramm • Einfach immer Linien zeichnen zwischen der vormaligen und der aktuellen Position der Maus: NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  39. Mausklicks und Tastendrucke • Zwei weitere vorgegebene Methoden: • mousePressed() • keyPressed() • Im Codeblock zwischen den geschweiften Klammer gibt man an, was passieren soll, wenn das entsprechende Ereignis eintritt • Aufgerufen werden die Methoden automatisch NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  40. Variablen sind wie Kisten zuweisen Typ Name Wert int meineZahl = 7; Form Anschrift Inhalt einpacken = meinZahl 7 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  41. Beispiele und Fachbegriffe intzahl1;//deklarieren zahl1 = 7; //initialisieren print("zahl1 ist: " + zahl1); //ausgeben zahl1 = zahl1/2; //berechnen und zuweisen print("zahl1 ist jetzt: " + zahl1); //wieder ausgeben floatzahl2 = 10.7; //deklarieren & initialisieren print("summe: " + (zahl1 + zahl2)); //ausgeben NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  42. Strings (strenggenommen kein primitiver Typ) zuweisen Typ Name Wert String meinWort = “Hallo“; = Hallo meinWort NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  43. antwort Boolean (Wahrheitswerte) Name Typ Wert var antwort:Boolean = true; = true NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  44. Alle Primitive Typen • Ganzzahlen • byte: Eine sehr kleine Zahl (-127 bis +128) • short: Eine kleine Zahl (-32768 bis +32767) • int: Eine grosse Zahl (-2,147,483,648 bis +2,147,483,647) • long: Eine enorm grosse Zahl (+/- 264) • Fliesskommazahlen • float: Eine grosse Zahl mit viele Nachkommastellen • double: Doppelt so gross oder präzise, selten nötig • Andere Typen • boolean: Wahrheitswert, also true oder false • char: Ein Zeichen‘a’(in einfachen Anführungszeichen) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  45. Benötigter Speicherplatz • Ganzzahlen • byte: • short: • int: • long: • Fliesskommazahlen • float: • double: • Andere Typen • boolean: • char: NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  46. Beispiele Typen • Ganzzahlen • byte: 123 • short: 1984 • int: 1784523 • long: 234345456789 • Fliesskommazahlen • float: 4.0 • double: 3.14159 • Andere Typen • boolean: true • char: ‘a’ NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  47. Variablen benennen • Regeln: Du sollst nicht ... • ... Umlaute, Satzzeichen, Sonderzeichen verwenden • ... Zahlen als erstes Zeichen benutzen • ... existierende Schlüsselwörter benutzen, z.B.: • mouseX, int, size, heigth, ... • Konventionen: Du sollst ... • ... sprechende Namen wählen • rundenZaehler, maxRechteckBreite, … • ... den camelCase benutzen (dasHeisstAlso): • erstes Wort klein … • … alle Folgenden gross schreiben NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  48. Methodenvariable vs. Instanzvariable • Ergebnis? // Global " count " int count = 0; void setup() { size(200,200); } void draw() { count = count + 1; background(count); } ________ // Local " count " void setup() { size(200,200); } void draw() { int count = 0; count = count + 1; background(count); } ________ NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  49. Methodenvariablen // Local “count” void setup() { size(200,200); } void draw() { int count = 0; count = count + 1; background(count); } count wir innerhalbeiner Methode deklariert  • count existiert nur bis zum Ende dieser Methode • count kann ausserhalb dieser Methode nicht benutzt werden (Geltungsbereich) • count wird bei jedem Aufruf von draw() neu erschaffen Geltungsbereich (= scope) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  50. Instanzvariablen // Global “count” int count = 0; void setup() { size(200,200); } void draw() { count = count + 1; background(count); } count wir ausserhalbeiner Methode deklariert  • count existiert bis zum Ende des Programms • count kann in allen Methoden dieses Sketches benutzt werden (= Geltungsbereich) • count wird beim Start des Programms initialisiert, dann nur noch verändert Geltungsbereich (= scope) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

More Related