From d7d9b66c848e5cc644b1543eae23e8b534cd874d Mon Sep 17 00:00:00 2001 From: Makussu Date: Thu, 21 Sep 2023 13:50:48 +0200 Subject: [PATCH] Interaktion fertig und andere angefangen --- README.org | 1 + lektion-1.org | 262 ++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 255 insertions(+), 8 deletions(-) diff --git a/README.org b/README.org index 559c9d8..0d97e23 100644 --- a/README.org +++ b/README.org @@ -1,2 +1,3 @@ * Lektion 1 [[./lektion-1.org]] +[[https://prg-ming.github.io/index.html]] diff --git a/lektion-1.org b/lektion-1.org index e8a465b..5bb1f0b 100644 --- a/lektion-1.org +++ b/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: -#+begin_export html - - -#+end_export +** 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 + +** 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