Wiederholung: Variablen

Es kommt Bewegung ins Spiel

Finde heraus, was folgender Code bewirkt:

float x = 0;
 
void setup(){
 size(400, 400); 
}
 
void draw(){
  background (255);
  ellipse(x, 100, 30, 30);
  x = x+1;
}

Was bewirkt hier die Variable x?

Lösung

Die Variable verschiebt den Kreis nach rechts:

Aufgabe 4 - Richtung ändern

Ändere das Beispiel von oben so ab, dass der Kreis von rechts nach links läuft.

Zufallszahlen

Processing stellt die Funktion random() zur Verfügung. Diese liefert einen Zufallswert zurück und kann vielfach verwendet werden.

void setup(){
 size(400, 400); 
 background (255);
}
 
void draw(){ 
  float x = random(400);
  float y = random(400);
  ellipse(x, y, 30, 30);
}

Aufgabe 5 - Experimente mit Zufallszahlen

Experimentiere mit dem Codebeispiel rechts. Was bewirken die Zufallszahlen?
Ändere das Programm so ab, dass ein neuer Kreis nur bei einem Mausklick erzeugt wird.
Ändere das Programm so ab, dass jeder Kreis in einer zufälligen Farbe gezeichnet wird. Verwende hierzu z.B. die RGB-Farben (z.B. fill(123, 42, 11)).

Lösungsvorschlag Aufgabe 4

float x = 400;
 
void setup() {
 size(400, 400);
}
 
void draw() {
  background(255);
  ellipse(x, 100, 30, 30);
  x = x - 1;
}

Lösungsvorschlag Aufgabe 5

void setup() {
 size(400, 400); 
 background(255);
}
 
void draw() {}
 
void mousePressed() {
  float r = random(256);
  float g = random(256);
  float b = random(256);
  fill(r, g, b);
 
  float x = random(400);
  float y = random(400);
  ellipse(x, y, 30, 30);
}

translate()

void setup() {
  size(600, 400);
}
 
void draw() {
  background(255);
  translate(mouseX, mouseY);
  rect(0, 0, 100, 100);
  ellipse(50, 50, 100, 100);
}

constraint()

void setup() {
  size(600, 400);
}
 
void draw() {
  background(255);
 
  float x = constrain(mouseX, 100, width - 100);
  float y = constrain(mouseY, 100, height - 100);
 
  ellipse(x, y, 30, 30);
}

Aufgabe 6 - Weitere Funktionen

Finde heraus, was die Funktionen translate() und constrain() bewirken. Vollziehe dafür die obigen Beispiele nach.
Schreibe ein Programm, bei dem drei senkrechte Linien gleichzeitig mit der Maus von links nach rechts und umgekehrt bewegt werden. Die erste Linie kann komplett zwischen den Seitenrändern bewegt werden, die zweite Linie ist jeweils mindestens 40px vom Rand weg, die dritte Linie jeweils mindestens 80px. Nutze dabei die Systemvariablen width, height, mouseX und die Methode constrain().

Lösungsvorschlag

translate(): Verschiebt die "zukünftigen" Zeichnugen.

constrain(): Schränkt den Zeichenbereich ein.

int xPos1;
int xPos2;
int xPos3;
 
void setup() {
  size(400, 130);
}
 
void draw() {
  background(0);
 
  xPos1 = mouseX;
  xPos2 = constrain(mouseX, 40, width - 40);
  xPos3 = constrain(mouseX, 80, width - 80);
 
  strokeWeight(5);
 
  stroke(255, 0, 0);
  line(xPos1, 10, xPos1, 40);
 
  stroke(255, 255, 0);
  line(xPos2, 50, xPos2, 80);
 
  stroke(255, 0, 255);
  line(xPos3, 90, xPos3, 120);
}