Interaktion fertig und andere angefangen

README.org

@@ -1,2 +1,3 @@
 * Lektion 1
 [[./lektion-1.org]]
+[[https://prg-ming.github.io/index.html]]

lektion-1.org

@@ -28,18 +28,264 @@
         - 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
-rect(20,50,50,50);
+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
 
-#+RESULTS:
+** Interaktion
-#+begin_export html
+*** Console gibt MausX aus
-<script src="processing.js"></script>
+Schreibe ein Programm, dass ständig die aktuelle x-Koordinate der Maus auf der Konsole ausgibt. Das sieht z.B. so aus:
- <script type="text/processing" data-processing-target="ob-c92560303079ad7cdc64194bf877351c946e0f2d">
+#+begin_src processing
-rect(20,50,50,50);
+void setup() {
-</script> <canvas id="ob-c92560303079ad7cdc64194bf877351c946e0f2d"></canvas>
+  size(200, 200);
-#+end_export
+}
+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
+
+** 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