Aufgabenserie 02

Das Ziel dieser Aufgabenserie ist, dass du den Umgang mit Variablen und bedingten Anweisungen vertiefst.

Versuche jeweils die Animation nachzuprogrammieren. Das Zeichenfeld (Canvas) ist jeweils 400 x 400 Pixel gross. Wenn du die jeweilige Animation erfolgreich nachprogrammieren konntest, kannst du sie gerne auch noch ausbauen!

Schaue wenn möglich erst in der Lösung nach, wenn du denkst, du hast es korrekt nachprogrammiert oder wenn du wirklich nicht mehr weiter kommst!

Hilfestellungen findest du unter: Variablen, Die ersten Bewegungen! und Bedingte Anweisung

Aufgabe 01

Kommentare

• Die Startposition des Kreises ist in der Mitte des Zeichenfelds.
• Ändere die Position des Kreises mit Hilfe einer Variable für die Geschwindigkeit: x = x + speed.
• Ändere die Richtung der Geschwindigkeit, sobald der Kreis den Rand berührt: speed = -speed.

let x = 200;    // Startposition ist in der Mitte
let y = 200;    // Startposition ist in der Mitte
let speed = 3;  // die Geschwindigkeit der Bewegung des Kreises
let dim = 100;  // Durchmesser des Kreises

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(100);

  x = x + speed;    // hier wird der Wert von speed addiert (3)
	
  // Die x-Koordinate, bei der der Kreis den rechten Rand des Zeichenfelds berührt: 
  // Breite des Zeichenfelds minus halber Durchmesser des Kreises
  let limitRight = width - dim / 2;
  // Die x-Koordinate, bei der der Kreis den linken Rand des Zeichenfelds berührt:
  // Halber Durchmesser des Kreises
  let limitLeft = dim / 2;
	
  if(x >= limitRight) {
    // Setze den Kreis zurück, da er möglicherweise 
    // über dem rechten Rand des Zeichenfelds war
    x = limitRight;  
    // Kehre die Richtung der Geschwindigkeit
    speed = - speed;
  }
  else if (x <= limitLeft) {
    // Setze den Kreis zurück, da er möglicherweise 
    // über dem linken Rand des Zeichenfelds war
    x = limitLeft;  
    // Kehre die Richtung der Geschwindigkeit
    speed = - speed;
  }

  fill(50, 100, 150);
  ellipse(x, y, dim, dim);
}

Aufgabe 02

Kommentare

• Der Kreis hat sowohl eine horizontale, als auch eine vertikale Geschwindigkeit.
• Wähle für die beiden Geschwindigkeiten verschiedene Werte und speichere sie wie beim oberen Beispiel in je einer Variable.
  Zum Beispiel:
  let xSpeed = 3.5;
  let ySpeed = 2;
• Du musst nun sowohl die x- und die y-Koordinate verändern:
  x = x + xSpeed;
  y = y + ySpeed;
• Ändere die horizontale Bewegungsrichtung, wenn der Kreis den linken oder rechten Rand berührt und ändere die vertikale Bewegungsrichtung, wenn der Kreis den oberen oder unteren Rand berührt.

let x = 200;
let y = 200;
let xSpeed = 3.5;
let ySpeed = 2;
let dim = 40;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(100);

  x = x + xSpeed;
  y = y + ySpeed;

  // Hier berechnen wir die Ränder, wo der Kreis
  // seine Richtung ändern muss
  let limitLeft = dim / 2;
  let limitRight = width - dim / 2;
  let limitTop = dim / 2;
  let limitBottom = height - dim / 2;
	
  // Hier wird am linken und rechten Rand abgeprallt
  if (x < limitLeft) {
    x = limitLeft;
    xSpeed = -xSpeed;
  }
  else if (x > limitRight) {
    x = limitRight;
    xSpeed = -xSpeed;
  }

  // Hier wird am oberen und unteren Rand abgeprallt
  if (y < limitTop) {
    y = limitTop;
    ySpeed = -ySpeed;
  }
  else if (y > limitBottom) {
    y = limitBottom;
    ySpeed = -ySpeed;
  }

  fill(150, 200, 150);
  ellipse(x, y, dim, dim);
}