Lernpfad:Einführung in Processing/14: Unterschied zwischen den Versionen

Lernpfad:Einführung in Processing/14 (Quelltext anzeigen)

1.011 Bytes hinzugefügt , 11:42, 4. Feb. 2022

keine Bearbeitungszusammenfassung

8.581

Bearbeitungen

@@ Zeile 91: / Zeile 91: @@
 Übernimm das Programm oben in {{Processing}} und probier es aus. Du siehst vier Zonen und einen fliegenden Ball. Verwende ''bedingte Anweisungen'', um den Ball in jeder Zone anders zu färben. (Wähle die Farben selbst.)
+{{P5js|https://editor.p5js.org/Ngb/full/er4IO-mto|height=100}}
 {{Aufgabe:End}}
+{{Tipp:Start}}
+Berechne zunächst die <code>x</code>- und <code>y</code>-Koordinate des Kreises und prüfe danach mit <code>if - else if - ...</code> Anweisungen die verschiedenen Bedingungen für die Position des Kreises.
+{{Tipp:End}}
+{{Lösung:Start}}
+<syntaxhighlight lang="java" line="1">
+float angle = 0;
+void draw() {
+  noStroke();
+  // Vier Zonen
+  fill(0);
+  rect(0,0,50,50);
+  fill(50);
+  rect(50,0,50,50);
+  fill(100);
+  rect(0,50,50,50);
+  fill(150);
+  rect(50,50,50,50);
+  fill(255);
+  // Farbe festlegen
+  float x = 50+25*sin(radians(angle));
+  float y = 50+25*cos(radians(angle));
+  if( x < 50 && y < 50 ) {
+    fill(199, 43, 0);
+  } else if( x >= 50 && y < 50 ) {
+    fill(0, 199, 43);
+  } else if( x >= 50 && y >= 50 ) {
+    fill(43, 0, 199);
+  } else {
+    fill(255);
+  }
+  // hier wird animiert...
+  ellipse(50+25*sin(radians(angle)), 50+25*cos(radians(angle)), 20, 20);
+  angle += 3;
+}
+</syntaxhighlight>
+{{Lösung:End}}