1 / 55

P R O C E S S I N G

P R O C E S S I N G. programmierenvironment für visuell orientierte, interaktive applikationen. Warum selbst programmieren?. kreativere lösungen ökonomischer politisch korrekt zugänglich mehr verständnis. 2. J a v a b a s i e r t. size(400, 400); background(192, 64, 0);

blake
Download Presentation

P R O C E S S I N G

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. P R O C E S S I N G programmierenvironment für visuell orientierte, interaktive applikationen www.processing.org

  2. Warum selbst programmieren? kreativere lösungen ökonomischer politisch korrekt zugänglich mehr verständnis www.processing.org

  3. www.processing.org

  4. www.processing.org

  5. www.processing.org

  6. www.processing.org

  7. www.processing.org

  8. 2 www.processing.org

  9. J a v a b a s i e r t • size(400, 400); • background(192, 64, 0); • stroke(255); • line(150, 25, 270, 350); www.processing.org

  10. void setup() { size(400, 400); stroke(255); background(192, 64, 0); } void draw() { line(150, 25, mouseX, mouseY); } www.processing.org

  11. h i n t e r g r u n d n e u z e i c h n e n • void setup() { • size(400, 400); • stroke(255); • } • void draw() { • line(150, 25, mouseX, mouseY); • } • void mousePressed() { • background(255, 247, 3); • } www.processing.org

  12. e x p o r t • File → Export Application • File → Export • Öffne index.html um den sketch im browser zu sehen • saveFrame("output.png") www.processing.org

  13. size(400, 400); • // falsche art die position anzugeben • ellipse(200, 200, 50, 50); • // immer in der mitte, egal wie sich die size() line verändert • ellipse(width/2, height/2, 50, 50); www.processing.org

  14. size(400, 400, JAVA2D); • size(400, 400, P2D); • size(400, 400, P3D); • size(400, 400, OPENGL); • size(400, 400, PDF, "output.pdf"); www.processing.org

  15. // JPEGs hineinladen • // daten von einer datei hineinladen • String[] lines = loadStrings(„irgendein.txt"); • PImage image = loadImage(„meinBild.jpg"); www.processing.org

  16. l i b r a r i e s • Sketch → Import Library → PDF Export www.processing.org

  17. Primitives • Float (32 bit information) • (floating-point numbers: 3.40282347E+38) • Int (32 bit) • numbers without a decimal point: -2,147,483,647 • Bol • (true or flase) • Char • (Each char is two bytes (16 bits) • (typographic symbols such as A, d, and $) www.processing.org

  18. object-oriented programming (OOP) • : : Objekte haben Eigenschaften und Funktionen • : : sie werden über „Klassen“ “classes“ definiert • : : Die class ist die Keksform, der Keks ist das object www.processing.org

  19. Beispiel „cars“ pseudo code normal • Data (Global Variables): • Auto Farbe • Auto x Position • Auto y Position • Auto x Geschwindigkeit • Setup: • Initialisiere Auto Farbe. • Initialisiere Auto Standort am Anfang. • Initialisiere Auto Geschwindigkeit • Draw: • Füll den Hintergrund • Zeig das Auto am richtigen Ort mit der richtigen Farbe • Verändere die Autoposition mit der richitgen Geschwindigkeit www.processing.org

  20. color c = color(0); • float x = 0; • float y = 100; • float speed = 1; • void setup() { • size(200,200); • } • void draw() { • background(255); • move(); • display(); • } • void move() { • x = x + speed; • if (x > width) { • x = 0; • } • } • void display() { • fill(c); • rect(x,y,30,10); • } www.processing.org

  21. Pseudo code object orientiert • Data (Global Variables): • Auto Objekt. • Setup: • Initialisiere Auto Objekt. • Draw: • Füll den Hintergrund • Zeig das Auto Objekt. • Bewege das Auto Objekt. www.processing.org

  22. http://processing.org/learning/objects/ www.processing.org

  23. Car myCar; • void setup() { • myCar = new Car(); • } • void draw() { • background(255); • myCar.move(); • myCar.display(); • } www.processing.org

  24. C L A S S - E L E M E N T E • name - mach keksformclass car { • Data - nenne variablen • Constructor - mach den keks • Car myCar = new Car();" • 4. methods definier die funktionen durch methods www.processing.org

  25. www.processing.org

  26. Class ist ein block, den du überall hinstellen kannst, solange er außerhalb von setup () und draw () ist • void setup() { • } • void draw() { • } • class Car { • } www.processing.org

  27. // Step 1. Deklariere das Objekt • Car myCar; • void setup() { • // Step 2. Initialisiere das Objekt. • myCar = new Car(); • } • void draw() • { • background(255); • // Step 3. Rufe die Funktionen des Objekts auf • myCar.move(); • myCar.display(); } www.processing.org

  28. 1. Objekt Variable deklarieren • Car myCar; www.processing.org

  29. Primitives v.s. compex data types • komplexen Datentypen, weil sie mehrere Informationen beinhalten (die Daten und Funktionalitäten. Primitive speichern nur Daten) www.processing.org

  30. Objekt initialisieren • Wenn man eine normale primitive Variable (zum Beispiel eine integer) initiertgibst du ihr einfach einen Wert: • // Variable Initialization • var = 10; // var equals 10 • Um ein Objekt zu initialisieren, muss du etwas mehr tun, nicht nur Wert zu weisen, sondern als ganzes konstruieren • „construct“. Du konstruierst ein Objekt mit dem neuen Operator • // Object Initialization • myCar = new Car(); // The new operator is used to make a new object. • "myCar" ist der Objektname • "=„ zeigt an, dass wir etwas neues kreieren, ein neues Keksobjekt, • der constructor ruft eine spezielle Funktion namens Car() auf. • Diese Funktion initialisiert automatisch alle Variablen des Objekts. • Sie bekommen den Wert null, der aber überhaupt nicht „0“ heißt, • sondern einfach gar nichts. Leere. • Die Fehlermeldung "NullPointerException" kommt meist daher, dass du vergessen hast das Objekt zu initialisieren. www.processing.org

  31. Nützung des Objekts • Autos fahren, Blumen wachsen, Sonnen strahlen: spezielle Objekte haben spezielle Funktionen • syntax: • variableName.objectFunction(Function Arguments); • // Functions are called with the "dot syntax". • myCar.draw(); • myCar.display(); www.processing.org

  32. constructor für mehere objekte nützen • Car myCar = new Car(color(255,0,0),0,100,2); www.processing.org

  33. ARGUMENTS • Arguments sind lokale Variablen, die nur im Inneren einer Funktion verwendet werden und mit Werten gefüllt werden, wenn die Funktion aufgerufen wird. www.processing.org

  34. Sie haben nur einen Zweck: • Die Variablen in einem Objekt zu initialisieren. Das sind die wichtigen Variablen, die die eigentliche Farbe oder die temporäre Position des Autos beinhalten. Die „Arguments“ des „constructors“ sind nur temporär und existieren nur um den Wert vom Entstehungsort des Objekts zum Objekt selbst weiterzuleiten. www.processing.org

  35. ARGUMENTS • Car(color tempC, float tempXpos, float tempYpos, float tempXspeed) { • c = tempC; • xpos = tempXpos; • ypos = tempYpos; • xspeed = tempXspeed; • } www.processing.org

  36. durch diese „arguments“ kannst du mit dem selben constructor viele verschiedene objekte herstellen www.processing.org

  37. g a n z e r c o d e : • http://www.learningprocessing.com/examples/chapter-8/example-8-2/ www.processing.org

  38. P R O C E S S I N G M I T A R D U I N O V E R B I N D E N www.processing.org

  39. Beispiel Code • Examples- Libraries- Serial – Serial call and response- www.processing.org

  40. schaltkreis • int firstSensor = 0; // first analog sensor • int secondSensor = 0; // second analog sensor • int thirdSensor = 0; // digital sensor • int inByte = 0; // incoming serial byte www.processing.org

  41. processing code • import processing.serial.*; • int bgcolor; // Background color • int fgcolor; // Fill color • Serial myPort; // The serial port • int[] serialInArray = new int[3]; // Where we'll put what we receive • int serialCount = 0; // A count of how many bytes we receive • int xpos, ypos; // Starting position of the ball • boolean firstContact = false; // Whether we've heard from the microcontroller • void setup() { • size(256, 256); // Stage size • noStroke(); // No border on the next thing drawn • xpos = width/2; // Set the starting position of the ball (middle of the stage) • ypos = height/2; • println(Serial.list()); // Print a list of the serial ports, for debugging purposes • String portName = Serial.list()[0]; • myPort = new Serial(this, portName, 9600); • } • void draw() { • background(bgcolor); • fill(fgcolor); // Draw the shape • ellipse(xpos, ypos, 20, 20); • } • void serialEvent(Serial myPort) { // read a byte from the serial port: • int inByte = myPort.read(); • // if this is the first byte received, and it's an A, • // clear the serial buffer and note that you've • // had first contact from the microcontroller. • // Otherwise, add the incoming byte to the array: • if (firstContact == false) { • if (inByte == 'A') { • myPort.clear(); // clear the serial port buffer • firstContact = true; // you've had first contact from the microcontroller • myPort.write('A'); // ask for more • } • } • else { • serialInArray[serialCount] = inByte; • serialCount++; • // If we have 3 bytes: • if (serialCount > 2 ) { • xpos = serialInArray[0]; • ypos = serialInArray[1]; • fgcolor = serialInArray[2]; • println(xpos + "\t" + ypos + "\t" + fgcolor); • myPort.write('A'); • serialCount = 0; • } • } • } www.processing.org

  42. Arduino code • int firstSensor = 0; // first analog sensor • int secondSensor = 0; // second analog sensor • int thirdSensor = 0; // digital sensor • int inByte = 0; // incoming serial byte • void setup() • { • // start serial port at 9600 bps: • Serial.begin(9600); • pinMode(2, INPUT); // digital sensor is on digital pin 2 • establishContact(); // send a byte to establish contact until Processing responds • } • void loop() • { • // if we get a valid byte, read analog ins: • if (Serial.available() > 0) { // get incoming byte: • inByte = Serial.read(); // read first analog input, divide by 4 to make the range 0-255: • firstSensor = analogRead(0)/4; // delay 10ms to let the ADC recover: • delay(10); // read second analog input, divide by 4 to make the range 0-255: • secondSensor = analogRead(1)/4; // read switch, multiply by 155 and add 100 • // so that you're sending 100 or 255: • thirdSensor = 100 + (155 * digitalRead(2)); // send sensor values: • Serial.print(firstSensor, BYTE); • Serial.print(secondSensor, BYTE); • Serial.print(thirdSensor, BYTE); • } • } • void establishContact() { • while (Serial.available() <= 0) { • Serial.print('A', BYTE); // send a capital A • delay(300); • } • } www.processing.org

  43. Zur Erinnerung : www.processing.org

  44. Wichtig für selbstgemachte sensoren: www.processing.org

  45. www.processing.org

  46. L Ö T E N • Rule #1: • Die beiden zu verbindenen Teile festklemmen (helping hands) www.processing.org

  47. Rule #2: • verwende den lötkolben solange er die richtige temperatur hat www.processing.org

  48. Rule #3: • erhitze den zu lötenden teil, nicht den lötdraht www.processing.org

  49. Rule #4: • überprüfe die verbindung unter einem vergrößerungsglas www.processing.org

  50. www.processing.org

More Related