processing-projektarbeit/lektion-1.org

#+title: Lektion 1

* Fragen:
    1. Wo ist (0 | 0) im Koorindatensystem bei Processing?
    2. Was ist bein Befehl?
    3. Wie ist ein Befehl aufgebaut?
    4. Was ist der Unterschied zwischen einem Befehl und einer Funktion?
    5. Welche einfachen Formen kannst du mit Processing zeichnen?
    6. Gib den Code an, den du benötigst, um eine Linie zu zeichnen, die bei (0|0) startet und bei (25|50) endet.
    7. Wenn ich zwei Formen an der selben Stelle zeichne und sie sich überlappen, welche Form ist dann die obere? Die ich zuerst gezeichnet habe oder die ich als zweites gezeichnet habe?
    8. Was legt der Zeichenmodus fest?
    9. Wie lange gilt der Zeichenmodus, wenn ich einen Zeichenmodus z.B. mihilfe von rectMode() festlege?
    10. Gibt den Code an, der nötig ist um ein Rechteck mit folgenden Eigenschaften zu zeichenen:
        - Position: P(10, 15)
        - Breite: 20
        - Höhe: 60
        - Modus: CORNER
    11. Wie hoch und wie breit ist das gezeichnete Rechteck?
    12. rectMode(CORNERS);
    13. rect(45, 50, 65, 75);
    14. Farben und Graustufen werden mithilfe von Zahlen angegeben. Wie groß, dürfen diese Zahlen maximal sein? Was passiert, wenn die Zahl höher ist?
    15. Macht es es einen Unterschied, an welcher Stelle in meinem Code ich den Befehl background() verwende? Warum?
    16. Je nachdem, wie viele Zahlen ich z.B. im Befehl fill() angebe, erhalte ich eine andere Art von Farbe. Wie viele unterschiedliche Möglichkeiten habe ich, Zahlen anzugeben und welche Art von Farbe erhalte ich jeweils?
    17. In welcher Reihenfolge kann man die 3 Grundfarben einem Befehl background, fill oder stroke übergeben?
        - Grün, Rot, Blau
        - Gelb, Blau, Rot
        - Rot, Gelb, Blau
        - Blau, Grün, Rot
        - Rot, Grün, Blau
    18. Wenn ich eine Farbe z.B. mit fill() festlege - wie lange gilt diese Farbe dann?
        Für immer, solange die gesetzt ist

* Aufgaben

** Formen
*** Haus
#+begin_src processing
PVector topleft, topright;

void setup() {
  topleft = new PVector(100,150);
  topright = new PVector(400-75,150);
  size(400, 400);
}

void draw () {
quad(topleft.x, topleft.y,
     topright.x, topright.y,
     topright.x,350,
     topleft.x,350
     );

triangle(100,150,
         400-75, 150,
         200,10
         );
}
#+end_src

** Interaktion
*** Console gibt MausX aus
Schreibe ein Programm, dass ständig die aktuelle x-Koordinate der Maus auf der Konsole ausgibt. Das sieht z.B. so aus:
#+begin_src processing
void setup() {
  size(200, 200);
}
void draw() {
  println(mouseX);
}
#+end_src
*** Interaktive Linie
Programmiere eine Linie, deren eines Ende der Maus folgt.
#+begin_src processing
void setup() {
  size(200, 200);
}
void draw() {
  background(200);
  line(100, 100, mouseX, mouseY);
}
#+end_src
*** Wachsendes Quadrat
Programmiere ein Quadrat in der Mitte des Bildschirms, dessen Höhe & Breite den x-Koordinaten der Maus entspricht.
#+begin_src processing
void setup() {
  size(200, 200);
}
void draw() {
  background(200);
  quad(50-mouseX, 50-mouseX, 150+mouseX, 50-mouseX, 150+mouseX, 150+mouseX, 50-mouseX, 150+mouseX);
}
#+end_src
*** Fadenkreuz
Zeichne zwei Linien, die parallel zur x- bzw. y-Achse sind und immer der Maus folgen. Der Schnittpunkt liegt genau auf dem Mauszeiger. Programmiere zunächst eine der beiden Linien, dann wird es dir leicht fallen, die zweite hinzuzufügen.
#+begin_src processing
void setup() {
  size(200, 200);
}
void draw() {
  background(200);
  line(0, mouseY, mouseX, mouseY);
  line(mouseX, mouseY, 200, mouseY);

  line(mouseX, 0, mouseX, mouseY);
  line(mouseX, mouseY, mouseX, 200);
}
#+end_src
*** Linie und Kreis
Zeichne eine Linie, die parallel zur y-Achse verläuft und immer der Maus folgt. Im Bereich zwischen der Linie und dem linken Rand soll mittig ein Kreis gezeichnet werden, der den Bereich zwischen linken Rand und Linie ganz ausfüllt.
#+begin_src processing
void setup() {
  size(200, 200);
}
void draw() {
  background(200);

  // y-line
  line(mouseX, 0, mouseX, mouseY);
  line(mouseX, mouseY, mouseX, 200);

  // kreis
  ellipse(mouseX/2, 200/2, mouseX, mouseX);
}
#+end_src
*** Radiergummi
#+begin_src processing
void setup() {
  size(200, 200);
  background(255);
  // Viereck in der mitte
  fill(0);
  quad(50,50,
       150,50,
       150,150,
       50,150);
}
void draw() {
  // Radiergummi
  fill(255);
  noStroke();
  ellipse(mouseX, mouseY, 15, 15);
  strokeWeight(1);
}
#+end_src
*** Symmetrische Linie
#+begin_src processing
void setup() {
  size(200, 200);
  background(255);
}
void draw() {
  background(255);

  // first line to center
  line(mouseX, mouseY,
       200/2, 200/2);
  // second line from center
  line(200/2, 200/2,
       100+100-mouseX, 100+100-mouseY);
}
#+end_src
*** Rechte Ecke
#+begin_src processing
void setup() {
  size(200, 200);
  background(255);
}
void draw() {
  background(255);

  rectMode(CORNERS);
  rect(50, 50,
       mouseX, mouseY);
}
#+end_src
*** Position zur Graustufe
**** unelegant
#+begin_src processing
void setup() {
  size(255, 255);
  background(255);
}
void draw() {
  background(255);

  fill(mouseX);
  int x = 255/4;
  quad(x, x,
       255-x, x,
       255-x, 255-x,
       x, 255-x);
}
#+end_src
**** besser
#+begin_src processing
void setup() {
  size(200, 200);
  background(255);
}
void draw() {
  background(255);

  fill(mouseX*255/width);
  quad(50, 50,
       150, 50,
       150, 150,
       50, 150);
}
#+end_src
*** Quadrat erscheinen lassen
#+begin_src processing
void setup() {
  size(200, 200);
  background(255);
}
void draw() {}
void keyPressed() {
  quad(50,50,
       50,150,
       150,150,
       150,50);
}
void mousePressed() {
  background(255);
}
#+end_src

#+RESULTS:
#+begin_export html
<script src="processing.js"></script>
 <script type="text/processing" data-processing-target="ob-730f9010eec02390ee5412e7a8e1b71a2f34e5d6">
void setup() {
  size(200, 200);
  background(255);
}
void draw() {}
void keyPressed() {
  quad(50,50,
       50,150,
       150,150,
       150,50);
}
void mousePressed() {
  background(255);
}
</script> <canvas id="ob-730f9010eec02390ee5412e7a8e1b71a2f34e5d6"></canvas>
#+end_export

** Datentypen
*** Mausposition ausgeben
#+begin_src processing
void setup(){
  size(200, 200);
}
void draw(){
  println("x=" + mouseX, "y=" + mouseY);
}
#+end_src

*** Halbe Pixel?
#+begin_src processing
float x = 0;

void draw() {
   background(255);
   ellipse(x, 50, 30, 30);
   x = x + 0.5;
}
#+end_src
*** Zeichenverkettung
#+begin_src processing
String message = "la";
String moreMessage;

void setup() {
   println(message);
}

void draw() {
  moreMessage = message + moreMessage;
  println(moreMessage);
}
#+end_src
** Syntax und Konventionen
#+begin_src processing
final int speed=3;
final int r = 10;

boolean left1 = true;
boolean left2 = true;
boolean left3 = true;

float x1 = random(50, width-50);
float x2 = random(50, width-50);
float x3 = random(50, width-50);

void setup () {
  size(200, 200);
}

// move balls
void moveballs() {
  if (x1+r>width) {
    left1=true;
  }
  if (x1-r<0) {
    left1=false;
  }
  if (left1) {
    x1-=speed;
  } else {
    x1+=speed;
  }
  if (x2+r>width) {
    left2=true;
  }
  if (x2-r<0) {
    left2=false;
  }
  if (left2) {
    x2-=speed;
  } else {
    x2+=speed;
  }
  if (x3+r>width) {
    left3=true;
  }
  if (x3-r<0) {
    left3=false;
  }
  if (left3) {
    x3-=speed;
  } else {
    x3+=speed;
  }
}

void draw() {
  background(50);
  fill(200, 50, 50);

  ellipse(x1, width*0.25, r*2, r*2);
  ellipse(x2, width*0.5, r*2, r*2);
  ellipse(x3, width*0.75, r*2, r*2);
  moveballs();
}
#+end_src

** Arithmetische Operatoren
*** Muster
#+begin_src processing
int x = 0;
int y = 0;

void draw() {
   line(x, 0, x, y);
   x++;
   y++;
}
#+end_src