http://www.linksammlung.info/

http://www.schaltungen.at/

                                                                                          Wels, am 2015-01-06

~015_b_PrennIng-a_arduino.uno.r3-anzeige-analog (xx Seiten)_1a.pdf

Vielfachmeßgerät NORMATEST 2000 mit Spannbandmeßwerk ATS 975,-  + 20% MwSt. (1971-09-01)

/*Sketch: Proces_Graph_SerialMonitor_0_1023_1a.ino http://www.arduino.cc/en/Tutorial/Graph*/void setup() {  Serial.begin(9600); // Initialisierung der seriellen Kommunikation mit 9600 bps}void loop() {  // send the value of analog input 0:  Serial.println(analogRead(A0));  // wait a bit for the analog-to-digital converter  // to stabilize after the last reading:  delay(2);}

/*  Processing-Sketch: Graph_SerialMonitor_0_1023_1a.pde Verarbeitung Code für dieses Beispiel Grafische Skizze Dieses Programm dauert ASCII-codierten Zeichenfolgen über die serielle Schnittstelle mit 9600 Baud und Grafiken ihnen. Er erwartet, dass Werte in der Bereich 0 bis 1023, gefolgt von einem Zeilenumbruch oder Zeilenvorschub und Wagenrücklauf */import processing.serial.*;Serial myPort;        // Die serielle Schnittstelleint xPos = 1;         // Horizontale Position des Graphenvoid setup () {  size(800, 300);   // festlegen der Fenstergröße        println(Serial.list()); // Liste alle verfügbaren seriellen Ports  myPort = new Serial(this, Serial.list()[1], 9600);  // COM1 der PC [0]  COM6 der ARDUINO  [1]  // don't generate a serialEvent() unless you get a newline character:  myPort.bufferUntil('\n');  background(180);  // Hintergrund grau}void draw () {}void serialEvent (Serial myPort) {  // Alles passiert im serialEvent ()  // get the ASCII string:  String inString = myPort.readStringUntil('\n');  if (inString != null) {    inString = trim(inString);  // Schneiden Sie Leerzeichen:    // Konvertieren in einen int und Karte auf dem Bildschirm Höhe    float inByte = float(inString);     inByte = map(inByte, 0, 1023, 0, height);    stroke(127, 34, 255);  // Linien-Farbe    line(xPos, height, xPos, height - inByte);    // Am Bildschirmrand, gehen Sie zurück zum Anfang:    if (xPos >= width) {      xPos = 0;      background(220);  // Hintergrund grau    } else {      xPos++;  //erhöhen die horizontale X-Position    }  }}

Arduino + Processing : Analogue bar graph

RIM VUP120 Peakmeter VU-Meter LED mit Peak Hold

/*Arduino-Sketch: Proces_Spiegel-Scala_2a.inoAutor: Fritz Prenninger0,1,0,1023  an den serial Port*/                  // die angeschlossenen Pins werden deklariertint potPin = 0;   // Analog-Eingang pin-A0 (Meßwert-Zeiger)int button1 = 5;  // Digital-Eingang pin-5 (Quadrat links)int button2 = 6;  // Digital-Eingang pin-6 (Quadrat mitte)int button3 = 7;  // Digital-Eingang pin-7 (Quadrat rechts)void setup(){  Serial.begin(9600);  pinMode(button1,INPUT);  pinMode(button2,INPUT);  pinMode(button3,INPUT);}void loop(){  Serial.print(digitalRead(button1));  Serial.print(",");  Serial.print(digitalRead(button2));  Serial.print(",");  Serial.print(digitalRead(button3));  Serial.print(",");  Serial.println(analogRead(potPin));  delay(10);}

/*Processing-Sketch: Processing Spiegel-Scala_2a.pdeAutor: Fritz Prenninger*/import processing.serial.*;Serial serialPort;float Wert;         // WERT  Winkel-Position des Mess-Zeigersint[] button = { 0, 0, 0 };void setup() {  size(500, 300);    // Grafik-Fenster-Größe  noStroke();  println(Serial.list());  serialPort = new Serial(this, Serial.list()[Serial.list().length-1], 9600);   //serialPort = new Serial(this, Serial.list()[1], 9600);  serialPort.bufferUntil('\n');   // LF = Line Feed - Zeilenvorschub-Zeichen (ASCII 10 (0x0A) oder '\ n')}void draw() {  background(255,218,185);               // Hintergrund   fill(200);                     // Analo-Anzeige grau  stroke(100);                   // Rahmen-Farbe dunkelgrau  strokeWeight(15);              // Rahmen-Breite  rect(40, 15, 420, 225);        // Rahmen-Größe  noFill();  //fill(255, 255, 0);      // zum testen Spiegel-Skala-Fläche yellow  stroke(240);              // Scala-Strichfarbe silber-grau  strokeCap(ROUND);         // Strichenden rund  strokeWeight(20);         // Scala-Breite  arc(width/2, height-50, 400, 400, radians(210), radians(330));  // potWinkel Kreisposition X-Y   Kreis-Durchmesser X-Y  Winkel Start-Ende  stroke(0, 255, 0);          // IO-Strichfarbe grün  strokeCap(SQUARE);          // Strichenden gerade  strokeWeight(7);            // Scala-Breite  arc(width/2, 250, 400, 400, radians(270), radians(300));  // IO-Scalenlänge  stroke(255, 0, 0);          // OGW-Strichfarbe rot  arc(width/2, 250, 400, 400, radians(300), radians(330));  // OGW-Scalenlänge  stroke(0);                  // Meßwert Zeiger Farbe schwarz  strokeWeight(2);    pushMatrix();  translate(width/2, height-50);     // neuer Ursprungspunkt des Zeigers  float theta = Wert;                // WERT  Winkel-Position des Mess-Zeigers  rotate(radians(theta));            // Winkel-Position des Mess-Zeigers  line(60, 0, 210, 0);               // kurzer Zeiger X, Y, x, y  //line(0, 0, 210, 0);              // langer Zeiger X, Y, x, y   popMatrix();  // Grafik Taster  noStroke();  for (int i=1; i<4; i++) {    if (button[i-1]==0) fill(0, 0, 255);  // Blau ist Low    else fill(255, 0, 0);                 // Rot ist High    rect(140+50*i, 265, 20, 20);          // Quadrat-Position X-Y, Quadrat-Größe X-Y  }}void serialEvent(Serial serialPort) {  String dataString = serialPort.readStringUntil('\n');  // LF = Line Feed - Zeilenvorschub-Zeichen (ASCII 10 (0x0A) oder '\ n')  if (dataString != null) {    float[] data = float(split(dataString, ","));    if (data.length >=4) {      if (data[0]==0) button[0]=0;      else button[0]=1;      if (data[1]==0) button[1]=0;      else button[1]=1;      if (data[2]==0) button[2]=0;      else button[2]=1;      Wert = (int)map(data[3], 0, 1023, 210, 330);    // Umrechnung auf Zeiger-Winkel-Position (WERT auf Winkel-Grade)      println(data[3]);                               // data = 0..1023 WERT-Ausgabe im Nachrichten-Fenster    }  }}

arc(a, b, c, d, start, stop)arc(a, b, c, d, start, stop, mode)

https://processing.org/reference/arc_.html

int theta = 0;          // Verdrehwinkel 
float theta = 22.5;     // Verdrehwinkel

rotate(angle)rotate(radians(theta));


3D Drehen im Raum über die X- Y- Z-Achse
rotateX(radians(theta));   rotateY(radians(theta));    rotateZ(radians(theta));

// Processing-Sketch: Verdehwinkel 45°

size(300,300);                     // Größe-Grafikfensterline(0,height/2, width,height/2);  // X-Mittel-Linie (horozontal)line(width/2,0, width/2,height);   // Y-Mittel-Linie (vertikal)translate(width/2,height/2);       // verschiebt Default Referenzpunkt (links oben) in die Bildmitterotate(PI/4.0);                  // QUARTER_PI (=45°), HALF_PI (=90°), PI= (180°), HALF_PI*3.0 (=270°), TWO_PI (=360°) rect(-10,-10, 150,20);            // Nullpunkt des Rechteckes links-oben
    

// Processing-Sketch: Verdehwinkel 22,5  45° 67,5°
//  Beispiel Kapitel 19, Kap19_GrafischeObjekte004float theta = 22.5;         // Verdrehwinkel  22,5°void setup() {   size(200, 200);           // Größe-Grafikfenster 200x200 pixels  noFill();                 // keine Flächenfüllung
  strokeWeight(2);          // Strichstärke 2 pixels
  smooth();                 // Kantenglättung  background(200);          // Hintergrund in Default grau  line(0,0, width,height);  // Diagonal Linie  rotate(radians(theta));   // Transformationen sind kumulativ  stroke(255, 0, 0);        // Farbe rot  rect(0, 0, 200, 20);      // Rechteck (rot)  rotate(radians(theta));   // Transformationen sind kumulativ  stroke(255, 255, 0);      // Farbe gelb  rect(0, 0, 200, 20);      // Rechteck (gelb)   rotate(radians(theta));   // Transformationen sind kumulativ  stroke(0, 255, 0);        // Farbe grün  rect(0, 0, 200, 20);      // Rechteck (grün)}

Mausposition X=135 = 45°     X=270 = 90°

/*  //Processing-Scetch: rotate_rotation_1a.pdeFritz Prenninger, Wels 2015Bewegung eines Zeigers entlang einer 1/4 Kreisbahn*/int theta = 0;          // Verdrehwinkel //float theta = 10.0;   // Verdrehwinkel 
void setup() {      size(240, 240);       // Grafikfenster 271, 240  //smooth();           // Kantenglättung  //background(255);    // Hintergrund  0=schwarz  200=hellgrau  255=weiß} void draw() {   //fill(0, 10);        // Nachzieheffekt  Füllfarbe  //noStroke();         // Nachzieheffekt  keine Strich-Farbe  rect(0, 0, width, height); // dieses Rechteck löscht das Grafik-Fenster  stroke(255, 0, 255);       // Zeigerfarbe magenta  strokeWeight(2);           // Strich-Breite (4)  //theta+= 2;               // Inkrementierung, automatischer Zeigerlauf  float theta = mouseX;      // Zeiger nach X-Maus-Position  rotate(radians(theta/3));   //point(100, 0);           // Punkt X, Y  line(30, 0, 200, 0);       // Linie X, Y, x, y
  println("X-Mouse-Position: " + mouseX);  // Maus-WERT 270/3 = 90° im Nachrichten-Fenster
}

/*Processing-Sketch: Punkt_im_Kreis_1a.pdeFritz Prenninger, Wels 2015Bewegung eines Punktes entlang einer Kreisbahn*/int theta = 0;        // Verdrehwinkel 1 bis 5//float theta = 1.0;  // Verdrehwinkel 5.0 bis 0.1void setup() {   size(300, 300);     // Grafik-Fenster-Größe  smooth();           // Kantenglättung  //background(0);    // Hintergrund  0=schwarz  200=hellgrau  255=weiß} void draw() {   //fill(90, 30);                // Nachzieheffekt  Füllfarbe dunkelgrau 90, Deckkraft 10  noStroke();                    // keine Strich-Farbe  rect(40, 40, width, height);   // dieses Rechteck löscht das Grafik-Fenster  translate(width/2,height/2);   // verschiebt den Ursprungs-Punkt von links oben in die Bildmitte  stroke(255, 0, 0);             // Strich-Farbe rot  strokeWeight(30);              // Strich-Breite 30 pixels  point(0, 0);                   // Mittel-Punkt X, Y    theta+= 2;                     // Inkrementierung 1=langsam 5=schnell, automatischer Zeigerlauf   //theta+= 0.5;                 // Inkrementierung 1=langsam 5=schnell, automatischer Zeigerlauf  rotate(radians(+theta));       // Positive Zahlen drehen Objekte im Uhrzeigersinn (CW).  //rotate(radians(-theta));     // Negative Zahlen drehen Objekte gegen den Uhrzeigersinn (CCW).   point(100, 0);                      // Punkt X, Y  println("Verdreh-WERT: " + theta);  // Verdreh-WERT  im Nachrichten-Fenster}

/*  Processing-Sketch: 5_Punkt_im_Kreis_1a.pdeFritz Prenninger, Wels 2015Unterschiedliche Bewegung von drei Punkten entlang von Kreisbahnen*/Punkt[] p;           // Objekt-Arrayint anzahl = 5;      // Anzahl der zu erstellenden Objekte 5void setup() {  size(450, 450);    // Größe des Grafik-Fensters  background(0);     // Hintergrund schwarz  smooth();          // Kantenglättung

  p = new Punkt[anzahl];                              // Anzahl der Objekte ist 5                                                      // Punkte instanzieren  p[0] = new Punkt(200, 0, -0.99, 255, 255, 0, 40);   // 1.Punkt (X,Y, links0.99Geschwindigkeit, 255,255,  0=yellow,  Größe40);               p[1] = new Punkt(150, 0, 0.5, 0, 255, 255, 50);     // 2.Punkt (X,Y, rechts0.5Geschwindigkeit,   0,255,  0=cyan,    Größe50);        p[2] = new Punkt(50, 0, -5.0, 255, 255, 255, 60);   // 3.Punkt (X,Y, links5.0Geschwindigkeit,    0,  0,255=weiß,    Größe60);   p[3] = new Punkt(180, 0, 1.0, 255, 0, 255, 70);     // 4.Punkt (X,Y, rechts1.0Geschwindigkeit,   0,  0,255=magenta, Größe70);   p[4] = new Punkt(220, 0, -0.1, 180, 180, 180, 80);  // 5.Punkt (X,Y, links0.1Geschwindigkeit,  180,180,255=grau,    Größe80);   }void draw()  {  background(200);                 // Hintergrund-Farbe hellgrau    translate(width/2,height/2);   // verschiebt den Ursprungs-Punkt von links oben in die Bildmitte  for(int i = 0; i < anzahl; i++)  p[i].zeigePunkt();               // Methodenaufruf}class Punkt {                                             // Feldvariablen  int xPos, yPos, rot, gruen, blau, weight;  // (X,Y,  R,G,B,  Größe);   float winkel, geschwindigkeit;             // links0.99Geschwindigkeit                                             // Konstruktor -  Punkte instanzieren  Punkt(int x, int y, float geschw, int R, int G, int B, int W)     {     xPos = x;     yPos = y;     geschwindigkeit = geschw;     rot = R;     gruen = G;     blau = B;     weight = W;  }                                          // Methode zum Anzeigen des Punktes  void zeigePunkt()     {      stroke(rot, gruen, blau);           // Farbe festlegen        strokeWeight(weight);               // Größe festlegen    winkel += geschwindigkeit;          // Geschwindigkeit    //pushMatrix();                     //        rotate(radians(winkel));         // Rotation       point(xPos, yPos);               // Punkt anzeigen    //popMatrix();                      // Rotation umkehren    rotate(radians(-winkel));           // Rotation rückgängig machen  }}




// Beispiel Kapitel 19, Kap19_Sonnensystem.pdeSonnensystem[] p;  // Objekt-Arrayint anzahl = 9;    // Anzahl der zu erstellenden Objektevoid setup()  {  size(600, 500);   // Grafik-Bildschirm-Größe  background(0);    // Hintergrund-Farbe schwarz  smooth();         // Kantenglättung  p = new Sonnensystem[anzahl];//Instanzierung der 9 Planeten  p[0] = new Sonnensystem(30, 0, -5.0, 128, 128, 128, 3);    // Merkur                  p[1] = new Sonnensystem(60, 0, -2.0, 255, 255, 128, 5);    // Venus       p[2] = new Sonnensystem(90, 0, -1.2, 0, 0, 255, 8);        // Erde         p[3] = new Sonnensystem(120, 0, -0.64, 111, 87, 16, 8);    // Mars  p[4] = new Sonnensystem(150, 0, -0.1, 211, 85, 26, 14);    // Jupiter  p[5] = new Sonnensystem(180, 0, -0.04, 255, 255, 26, 10);  // Saturn  p[6] = new Sonnensystem(210, 0, -0.01, 150, 174, 240, 8);  // Uranus  p[7] = new Sonnensystem(240, 0, -0.007, 23, 75, 211, 8);   // Neptun  p[8] = new Sonnensystem(270, 0, -0.004, 200, 200, 200, 4); // Pluto}void draw()  {  background(0);       // Hintergrund-Farbe schwarz  stroke(255, 255, 0); // Strich-Farbe gelb  strokeWeight(20);    // Srich-Dicke  smooth();            // Kantenglättung  point(width/2, height/2);        // Punkt in der Bildmitte   for(int i = 0; i < anzahl; i++)    p[i].zeigeSonnensystem();      // Methodenaufruf}

Transformationen sind kumulativ und gelten für alles was danach passiert. 
Die Funktion rotate akkumuliert die Werte. 

Zum Beispiel ruft rotate(HALF_PI);   einmal und  ein zweites Mal rotate(HALF_PI);  
gleichees Ergebnis   wie eine einzige drehen mit rotate(HALF_PI); 
Wenn rotate() innerhalb draw() aufgerufen wird, wird die Umwandlung zurückgesetzt, 
wenn die Schleife erneut beginnt. 
Technisch rotate() multipliziert die aktuelle Transformationsmatrix durch eine Rotationsmatrix. 
Diese Funktion kann durch die Verwendung pushMatrix() und popMatrix() 1x zurückgesetzt werden.

//Processing-Scetch: translate_verschieben_1a.pdevoid setup() {  size(400, 400);      // Größe der Grafik-Ausgabe  noFill();            // keine Flächen-Füllung  strokeWeight(2);     // Strich-Breite  2 pixels}void draw() {  background(200);       // Grafik-Hintergrund-Farbe hellgrau  stroke(255, 0, 0);     // Zeichen-Farbe rot  rect(0, 0, 50, 50);    // 1. Rechteck gezeichnet links-oben  translate(50, 50);     // verschiebt 0-Punkt  rect(0, 0, 100, 100);      // 2. Rechteck    pushMatrix();      translate(100, 100);     // verschiebt geänderten Start-Punkt      rect(0, 0, 150, 150); // 3. Rechteck     popMatrix();          // letzter Translate-Wert wird gelöscht  translate(150, 150); // verschiebt vom gelöschten Start-Wert aus  fill(255, 255, 0);   // Füll-Farbe gelb  rect(0, 0, 50, 50);  // 4. Rechteck  noFill();            // keine Füll-Farbe}


Transformationen sind kumulativ und gelten für alles nachfolgende Aufrufe. 
Die Funktion translate akkumuliert die Werte. 
Zum Beispiel translate(50, 0) und dannach translate(20, 0) ist das gleiche wie translate(70, 0). 
Wenn translate() innerhalb draw() aufgerufen wird, wird die Umwandlung zurückgesetzt, 
wenn die Schleife erneut beginnt. 
Diese Funktion kann durch die Verwendung pushMatrix() und popMatrix() 1x zurückgesetzt werden.

Syntax:
 translate (x, y)
 translate (x, y, z)

Parameter: 
 x     float: Links- / Rechts-Verschiebung
 y     float: Auf- / Ab-Verschiebung
 z     float: vorwärts- / rückwärts.Verschiebung
Returns: void 
Verwandte Befehle:  popMatrix()
 pushMatrix() 
rotate()   rotateX()   rotateY()   rotateZ()
scale()

https://www.processing.org/reference/translate_.html

Beispiel 1

size(200, 200);         // Grafik-Ausgabe-Fensterfill(255,0,0);          // Füllfarbe rotrect(20, 20, 100, 100); // ident große Quadratescale(0.5);             // alles halb so großfill(0,255,0);          // Füllfarbe grünrect(20, 20, 100, 100); // ident große Quadratescale(3.0);             // alles 3x größerfill(255,255,0, 200);   // Füllfarbe gelb transparentrect(20, 20, 100, 100); // ident große Quadrate

Beispiel 2

size(200, 400);          // Grafik-Ausgabe-Fensterfill(255,0,0);           // Füllfarbe rotrect(20, 20, 100, 100);  // ident große Quadratescale(0.5, 1.5);         // alles halb so großfill(0,255,0);           // Füllfarbe grünrect(20, 20, 100, 100);  // ident große Quadratescale(3.0, 2.0);         // alles 3x größerfill(255,255,0, 200);    // Füllfarbe yellow transparentrect(20, 20, 100, 100);  // ident große Quadrate


Auch die Strichstärke wird im Maßstab dicker oder dünner
Auch die Position hat sich im Maßstab verändert

void setup() {   size(300, 200);       // Grafik-Ausgabe-Fenster  smooth();             // Kantenglättung
  noFill();             // keine Flächen-Füllung  strokeWeight(8);      // Strichbreite 8 pixels} void draw() {   background(200);               // Farbe des Grafik-Ausgabe-Fensters hellgrau  stroke(255, 0, 0);             // rot  ellipse(100, 100, 100, 100);   // ident große Kreis  scale(1.5, 0.5);               // X vergrößerung auf 150%  Y verkleinern auf 50%  stroke(0, 0, 255);             // blau  ellipse(100, 100, 100, 100);   // ident große Kreis}

Wabernder Kreis Seite 392

bläht sich auf und schrumpft zusammen mithilfe der Winkelfunktionen sin()  cos() aber auch tan()

float winkel = 0.0; void setup() {   size(350, 350);    // Größe des Grafik-Fensters  smooth();          // Kantenglättung  noFill();          // keine Flächenfüllung  strokeWeight(1);   // Linien-Breite / Strich-Dicke  background(255);   // Hintergrund-Farbe weiß} void draw() { 
  //background(200);            // Hintergrund-Farbe hellgrau  noStroke();                   // keine Begrenzungs-Linien  fill(0, 10);                  // Nachzieheffekt / Fläche schwarz transparent füllen  rect(0, 0, width, height);    // Rechteck zum Grafik-Schirm löschen  stroke(255, 0, 0);            // Strich-Farbe rot  translate(width/2, height/2); // Nullpunkt in Bildmitte  winkel+=0.05; 
// Versuchen Sie auch die folgenden Zeilen
  scale((1.0 + sin(winkel)), (1.0 + cos(winkel))); 
  //scale((1.0 + sin(winkel)), (1.0 + cos(winkel * 4))); 
  //scale((1.0 + sin(winkel * 3)), (1.0 + cos(winkel * 4))); 
  //scale((1.0 + tan(winkel)), (1.0 + cos(winkel))); 
  //scale((1.0 + tan(winkel)), (1.0 + cos(winkel * 4))); 
  //scale((1.0 + tan(winkel * 3)), (1.0 + cos(winkel * 4))); 
  //scale((1.0 + abs(sin(winkel))), (1.0 + abs(cos(winkel * 4)))); 
  //scale((1.0 + abs(sin(winkel))), (1.0 + abs(cos(winkel + PI/4)))); 
  //scale((1.0 + abs(sin(winkel * 3))), (1.0 + abs(cos(winkel + PI/4))));

  ellipse(0, 0, 150, 150);        // Kreis Dm = 150 pixels}

Beschreibung:
Erhöht oder verringert die Größe einer Form, durch Ausdehnen und Zusammenziehen der Eckpunkte. 
Objekte skalieren immer von ihrer relativen Ursprung des Koordinatensystems. 
Skalenwerte werden als Dezimal-Zahl-Prozentsätze festgelegt. 
Beispielsweise kann der Funktionsaufruf scale(2.0); erhöht die Dimension einer Form von 200%.

Transformationen gelten für alles, was nach nachfolgende Aufrufe passiert 
mit der Funktion multipliziert (2.0 x 1.5 = 3.0) die Wirkung. 
Zum Beispiel ruft scale(2.0); und dann scale(1.5); ist die gleiche wie scale(3.0);. 
Wenn scale(); innerhalb draw(); aufgerufen wird, ist die Umwandlung zurückzusetzen, 
wenn die Schleife beginnt von neuem. 

Diese Funktion kann durch die Verwendung pushMatrix(); und popMatrix(); 1x zurückgesetzt werden.

Syntax:   scale(s)          scale(X, Y);          scale(X, Y, z)

Parameter: 
 s        float: Prozentsatz, um das Objekt zu skalieren
 x        float: Prozentsatz, um das Objekt in der X-Achse zu skalieren
 y        float: Prozentsatz, um das Objekt in der Y-Achse zu skalieren
 z        float: Prozentsatz, um das Objekt in der z-Achse zu skalieren

Returns:  void zurück
Verwandte Befehle:
pushMatrix()   popMatrix()   
translate()   
rotate()   rotateX()   rotateY()    rotateZ()

Die Funktionen rotate  translate  scale können durch die Verwendung 
pushMatrix() und popMatrix() 1x zurückgesetzt werden.

void setup() {size(200, 200);          // Größe Grafik-Fenster}void draw() {  background(200);       // Farbe des Grafik-Ausgabe-Fensters hellgrau  fill(255,0,0);         // Füllfarbe rot  rect(0, 0, 75, 50);    // Rechteck  pushMatrix();          // Referenzpunkt kann verschoben werden     translate(50, 50);     fill(0,255,0);      // Füllfarbe grün     rect(0, 0, 75, 50); // Rechteck  popMatrix();           // Referenzpunkt wieder Default (links oben)  fill(0,0,255);         // Füllfarbe blau  rect(25, 25, 75, 50);  // Rechteck}




/*  Processing-Sketch: Kapitel 16, Kap16_TransformationenErik Bartmann, Brühl 2010Ausfühung unterschiedlicher Transformationen*/void setup() {   size(500, 250); // Größe Grafik-Fenster  noFill();       // keine Flächen-Füllung  smooth();       // Kantenglättung} void draw() {   background(0); // Farbe des Grafik-Ausgabe-Fensters schwarz  pushMatrix();  // Referenzpunkt kann verschoben werden    // 1. Translate (Verschiebung)   stroke(255, 0, 0);  // Strich-Farbe Rot   translate(100, 50);   rect(0,0, 150,80);  // Rechteck X, Y  // 2. Rotate (Rotation)   stroke(0, 255, 0);  // Strich-Farbe Grün   rotate(radians(45));   rect(0,0, 150,80);  // Rechteck X, Y  // 3. Rotate (letzte Rotation rückgängig machen)   rotate(radians(-45));    // 4. Translate (Verschiebung)   stroke(255, 255, 0); // Strich-Farbe yellow   translate(200, 50);   rect(0,0, 150,80);   // Rechteck X, Y  popMatrix(); // Referenzpunkt wieder Default (links oben)  // 5. Translate (Verschiebung)     translate(20,20);  stroke(255,0,255);   // Strich-Farbe magenta   rect(0,0, 20,20);    // Quadrat X, Y }

/*Processing-Sketch: Bild_400x200 Bildschirm_2560x1440_1a.pdeBildauflösung: 300dpiTatsächliche Bildgröße: 1728x2592 PixelMENU > Scetch > Add Files... > Bild.jpg suchen > ÖffnenUnter-ORDNER "Data" wird angelegt*/PImage meinBild;      // PImage-Objekt mit Namen "meinBild" erstellenvoid setup() {  size(800,400);      // Größe-Grafik-Fenster 
  smooth();           // Kantenglättung  meinBild = loadImage("Bild_400x200_pixel.png"); // Bild-Datei hochladen  imageMode(CENTER);  // Default = CORNER (links-oben)  CORNERS (links-oben, rechts-unten)  CENTER (Bild-Mitte)}void draw() {  background(200);    // Hintergrundfarbe Grafik-Ausgabe-Fenster hellgrau  println("Bild-Breite: " + meinBild.width); // Bild-Breite  println("Bild-Höhe: " + meinBild.height);  // Bild-Höhe  println("Bildschirm-Breite: " + displayWidth); // PC-Bildschirm-Breite  println("Bildschirm-Höhe: " + displayHeight);  // PC-Bildschirm-Höhe    //image(meinBild, 400, 200);     image(meinBild, mouseX, mouseY - meinBild.height/2);   //image(meinBild, 0, 0, width/2, height/2);   }

PImage

PImage meinBild; void setup() {   size(400, 400); // Größe des Grafik-Ausgabefensters  meinBild = loadImage("Voltmeter_1a.jpg");  // Bild-Datei hochladen}
void draw()
  image(meinBild, 0, 0, width, height);  // Bild-Breite  -Höhe

PImage photo;void setup() {  size(400, 400);  // Größe des Grafik-Ausgabefensters  photo = loadImage("Name_1a.jpg");  // Bild-Datei hochladen}void draw() {  image(photo, 0, 0);}


Beschreibung:
Datentyp zum Speichern von Bildern. 
Die Verarbeitung kann folgende Bild-Dateien angezeigt *.gif, *.jpg, *.tga, *.png. 
Bilder können in 2D- und 3D-Raum angezeigt werden. 
Bevor ein Bild verwendet wird, muß es mit dem loadImage() Funktion geladen werden. 
MENU > Sketch > Add File... < Öffnen>
Unterverzeichnis Data ORDNER wird angelegt.

Die PImage Klasse enthält Felder für die width und height des Bildes sowie ein Array mit Namen pixels[], 
die die Werte für jedes Pixel im Bild enthält. 
Die im Folgenden beschriebenen Methoden ermöglichen einen einfachen Zugang zu der Bildpixel 
und Alpha-Kanal und vereinfachen den process of compositing.

Vor der Verwendung der pixels() array ist, 
lesen Sie die loadPixels() -Methode auf das Bild verwenden, 
um sicherzustellen, dass die Pixeldaten korrekt eingelegt ist.

Um ein neues Bild zu erstellen, verwenden Sie die createImage() Funktion. 
Verwenden Sie nicht die Syntax newPImage().

 Felder:
 pixels[]      Array, für die Farbe jedes Pixels im Bild
 width         Bildbreite wie size(400, 400);
 height        Bildhöhe   wie size(400, 400);
 
Methoden:
 loadPixels()  Lädt die Pixeldaten für das Bild in seine pixels() -Array
 updatePixels()Aktualisiert das Bild mit dem Daten in seinem pixels() -Array
 resize()      Ändert die Größe eines Bildes zu einer neuen Breite und Höhe
 get()         Liest die Farbe jedes Pixels oder greift ein Rechteck von pixeln
 set()         schreibt eine Farbe zu jeder Pixel oder schreibt ein Bild in ein anderes
 mask()        Masken einen Teil eines Bildes mit einem anderen Bild als Alphakanal
 filter()      Konvertiert das Bild in Graustufen oder Schwarzweiß
 copy()        Kopiert die gesamte Bild
 blend()       Kopiert einen Bildpunkt oder ein Rechteck von Pixeln mit unterschiedlichen Füllmethoden
 save()        Speichert das Bild in eine *.tiff, *.png oder *.jpg -Datei

      PImage(width, height, format, factor)

Grafik-Fenster kleiner/größer als Bild-Größe

/*Processing-Sketch: Bild_400x200_pixel.png_1a.pdeBittiefe: 8Tatsächliche Bildgröße: 400x200 PixelMENU > Scetch > Add Files... > Bild.png suchen > Öffnenein Unter-ORDNER "Data" wird angelegt*/PImage meinBild; // PImage-Objekt mit Namen "meinBild" erstellenvoid setup() {   size(500,300); // Grafik-Fenster-Größe  meinBild = loadImage("Bild_400x200_pixel.png"); // Bild-Datei hochladen}void draw() {  background(230);         // Hintergrund-Farb hellgrau  image(meinBild, 10, 10); // PImage-Objekt, X, Y, (links-oben ist der Nullpunkt)}

Bild-Größe in Grafik-Fenster einpassen

/*Processing-Sketch: Bild_400x200_pixel.png_vergrößern_1a.pdeBittiefe: 8Tatsächliche Bildgröße: 400x200 PixelMENU > Scetch > Add Files... > Bild.png suchen > Öffnenein Unter-ORDNER "Data" wird angelegt*/PImage meinBild; // PImage-Objekt mit Namen "meinBild" erstellenvoid setup() {   size(440, 220); // Grafik-Fenster-Größe  meinBild = loadImage("Bild_400x200_pixel.png"); // Bild-Datei hochladen}void draw() {  background(230); // Grafik-Fenster-Hintergrund-Farbe hellgrau  image(meinBild, 10,10, width,height); // PImage-Objekt, X,Y, x,y hochladen}

/*Processing-Sketch: Bild_400x200 Bildschirm_2560x1440_1a.pdeBittiefe: 8   Bildauflösung: 300dpiTatsächliche Bildgröße: 400x200 PixelMENU > Scetch > Add Files... > Bild.jpg suchen > ÖffnenUnter-ORDNER "Data" wird angelegt*/PImage meinBild; // PImage-Objekt mit Namen "meinBild" erstellenvoid setup() {  size(600,300); smooth();  // Grafik-Fenster-Größe   meinBild = loadImage("Bild_400x200_pixel.png"); // Bild-Datei hochladen  imageMode(CENTER);  // Default = CORNER (links-oben)  CORNERS (links-oben, rechts-unten)  CENTER (Bild-Mitte)}void draw() {  background(200);  // Grafik-Fenster-Hintergrund-Farbe hellgrau  println("Bild-Breite: " + meinBild.width); // Bild-Breite im Nachrichten-Fenster  println("Bild-Höhe: " + meinBild.height);  // Bild-Höhe im Nachrichten-Fenster  println("Bildschirm-Breite: " + displayWidth); // Bildschirm-Breite im Nachrichten-Fenster  println("Bildschirm-Höhe: " + displayHeight);  // Bildschirm-Höhe im Nachrichten-Fenster    //image(meinBild, 400, 200);   // Bild in ORIGINAL-Größe  //image(meinBild, mouseX, height - meinBild.height/2);   //image(meinBild, mouseX, mouseY - meinBild.height/2);   image(meinBild, 200, 100, width/4, height/4);   }

/*  Processing-Sketch: Bild_400x200 Rotation ueber Maustasten_1a.pdeFritz Prenninger 2015 WelsBittiefe: 8   Bildauflösung: 300dpiTatsächliche Bildgröße: 400x200 Pixel           Automatische Rotation           Skalierung über vertikale Mausbewegung           X-Position  über die horizontale Maustasten           Linke Maustaste links herum           Rechte Maustaste rechts herum           MENU > Scetch > Add Files... > Bild.jpg suchen > ÖffnenUnter-ORDNER "Data" wird angelegt*/PImage meinBild;  // PImage-Objekt mit Namen "meinBild" erstellenfloat winkel;     // Verdeh-Winkelint richtung = 1; float geschwindigkeit = 0.05;  // Verdeh-Geschwindigkeitvoid setup() {   size(1200, 600);    // Grafik-Ausgabe-Format  smooth();           // Kantenglättung  meinBild = loadImage("Bild_400x200_pixel.png"); // Bild-Datei hochladen  imageMode(CENTER); // Bezug der Bildmittelpunkt} void draw() {    background(255);   winkel+= geschwindigkeit * richtung;  translate(mouseX, height - meinBild.height/2-200);   // Verschieben  rotate(winkel);                                  // Rotieren  scale(mouseY/100.0);                             // Scalieren   image(meinBild, 0, 0); } void mousePressed() {   switch(mouseButton) {     case LEFT: richtung = -1; break;                 // Links herum     case RIGHT: richtung = 1; break;                 // Rechts herum   } }

Voltmeter_400x400_1a.pde

BEISPIEL: Rotation ohne  rotate(radians(theta)); Befehl
Verdehwinkel = (theta)

Nur mit cos sin berechnet

/*  Processing-Sketch: Voltmeter_400x400_1a.pdeAutor: Fritz Prenninger, Wels, 2015-12-12Anzeigen eines Bildes mit Maus-Positions-Zeiger*/PImage meinBild;      // PImage-Objekt mit Namen "meinBild" erstellenvoid setup() {   size(400, 400);                            // Grafik-Ausgabe-Format  meinBild = loadImage("Voltmeters_1a.jpg"); // Bild-Datei hochladen}void draw() {   background(200);                           // Hintergrund-Farbe hellgrau  image(meinBild, 20, 20, width-20, height-20); // (Bild-Datei, X,Y,  x,y);  stroke(255, 0, 0);    float x = 270, y = 0 ;    // Koordinaten des alten Punktes (Zeigelänge)  float x1, y1;             // Koordinaten des neuen Punktes   float theta = mouseX;   x1 = x * cos(radians(theta)) - y * sin(radians(theta));   y1 = x * sin(radians(theta)) + y * cos(radians(theta));   stroke(0, 255, 0); // grüner Punkt  strokeWeight(4);     // Strich-Breite  translate(332, 331); // neuer Ursprungspunkt  line(0,0,x1,y1);     // Linie  println(theta);      // Winkel-WERT Ausgabe im Nachrichtenfenster    //Justierschraube des Bildes ausblenden  strokeWeight(94);  // Punkt-Dm 98-Punkte  stroke(255);       // weiß  point(4, 3);       // Punkt-Position}