1 / 129

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

harlow
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 • Zufallszahlen • Perlin-noise • Arrays • Klassen • Projektauftrag NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  3. Design by Numbers: Ziele Grafiken vom Computer zeichnen lassen, also programmieren, d.h.  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 (Android Phone, Kinect,LeapMotion, ...) • 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: Ziele Grafiken vom Computer zeichnen lassen, also programmieren, d.h.  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 (Android Phone, Kinect,LeapMotion, ...) • besondere Grafik (Perlin Noise, Fraktale, 3D, ...) • nicht nur Grafik, sondern auch Sounds Wichtig ist, dass jede(r) auf seinem/ihrem Niveau arbeiten kann alle am Ende besser programmieren können als zu Beginn beeindruckende Projekte entstehen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  5. 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

  6. 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 Reference, Tutorials, Beispiele ... • www.nicolasruh.wikispaces.com • Arbeitsblätter • Folien • Cheatcheets • Links NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  7. Design by Numbers: Vorerfahrung? • Stellen Sie sich gegenseitig vor • Finden Sie heraus, wo Sie stehen in Bezug auf bisherige Erfahrungen im Programmieren (irgendeine Programmiersprache) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  8. Design by Numbers: Grobplanung Mo Di Mi Do Fr Grundkurs Processing Material: www.creativecoding.org & Folien Erfolgskontrolle: Arbeitsblätter Arbeitsweise: im Team, teilweise geführt Sketches erweitern, Ideen sammeln, Projektskizze erstellen Inspiration: s. Links auf dem WIKI Inputs(?): sagen Sie uns, was Sie interessiert Erweiterungen: Informationen sammeln zu Eigenes Projekt umsetzen Gestalten Sie etwas Tolles! Sketches hochladen: www.openprocessing.com Projekt hochladen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  9. Processing Processing haspromotedsoftwareliteracywithinthevisualartsandvisualliteracywithintechnology NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  10. 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

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

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

  13. 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) • AndroidVersion • Im Unterordner „data“ liegen ggf. zusätzliche Dateien, z.B. Bilder NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

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

  15. 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

  16. 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, lokal) • führt meistens Beispiele auf NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  17. 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

  18. Die Java Virtual Machine (JVM) • Das besondere an JAVA ist, dass es innerhalb einer sogenannten Virtual Machine ausgeführt wird, die es für alle Geräte gibt • “Write once, runeverywhere” – 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

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

  20. Koordinaten am Computer nichtganzdasselbeKoordinatensystemwie 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

  21. Koordinatensystem in Processing(für Fortgeschrittene) • In Processing kann man das Koordinatensystem mit Befehlen verändern • z.B. verschieben, rotieren, skalieren, verzerren • Befehle: translate(), rotate(), scale() • Das ist oft einfacher, als die Formen zu ändern • Ausserdem kann ein Koordinatensystem gespeichert und wieder hergestellt werden • Befehle: pushMatrix(), popMatrix() NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  22. 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

  23. 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

  24. 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

  25. 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; (nachjedemBefehl) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  26. 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

  27. 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

  28. 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

  29. 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

  30. 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

  31. 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

  32. 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

  33. 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

  34. 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

  35. Grundstruktur für dynamische Sketches • // Mein erstesProgramm • 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

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

  37. Beispiel in Processing – was passiert? die Grösse des displayWindow, 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

  38. 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

  39. 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

  40. 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

  41. 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

  42. 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

  43. Mausklicks und Tastendrucke • Zwei weitere vorgegebene Methoden: • mousePressed() • keyPressed() • ImCodeblockzwischen den geschweiftenKlammergibt man an, was passierensoll, wenn das entsprechendeEreigniseintritt • Aufgerufen werden die Methoden automatisch NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  44. Interaktionen mit der Maus if (mousePressed) { if (mouseButton == LEFT) { stroke(0, 200, 100); fill(0, 100, 50); ellipse(mouseX, mouseY, 100, 100); } elseif (mouseButton == RIGHT) { stroke(0, 50, 100); fill(0, 100, 200); ellipse(mouseX, mouseY, 50, 50); } } NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

  45. 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

  46. 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

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

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

  49. 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

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

More Related