Aufgabenserie 01

Das Ziel dieser Aufgabenserie ist, dass du mit Variablen und bedingten Anweisungen umgehen lernst.

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

• Der Kreis geht in der Mitte des Zeichenfelds nach unten.
• Der Durchmesser beträgt 100 Pixel.
• Färbe den Kreis mit fill(50, 100, 150).
• Der Kreis bewegt sich 1 Pixel pro Frame.
• Denk daran, dass sich der Nullpunkt des Zeichenfelds oben links befindet!

x = 200;
y = 0;

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

function draw() {
  background(100);

  y = y + 1;
  if(y > height) {
    y = 0;
  }

  let d = 100;
  fill(50, 100, 150);
  ellipse(x, y, d, d);
}

Aufgabe 02

Kommentare

• Der Kreis bewegt sich 1 Pixel nach rechts und oben pro Frame.
• Der Durchmesser beträgt 40 Pixel.
• Färbe den Kreis mit fill(150, 200, 150).

x = 0;
y = 400;

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

function draw() {
  background(100);

  x = x + 1;
  if(x > width) {
    x = 0;
  }

  y = y - 1;
  if(y < 0) {
    y = height;
  }

  let d = 40;
  fill(150, 200, 150);
  ellipse(x, y, d, d);
}

Aufgabe 03

Kommentare

• Der Kreis bewegt sich 3 Pixel nach rechts pro Frame.
• Der Durchmesser beträgt zuerst 50 Pixel, dann 100 Pixel und dann 10 Pixel.
• Der Durchmesser ändert sich nach 100 Pixel und nach 200 Pixel.

let x = 0;
let y; // hier schreiben wir nur, dass es die Variable y gibt
let d = 50;
function setup() {
  createCanvas(400, 400);

  // hier wird die Variable y definiert
  // sie wird erst hier definiert, weil erst hier die Variable
  // height durch createCanvas(400, 400) definiert ist
  y = height/2;
}

function draw() {
  background(100);

  x = x + 3;
  if(x < 100) {
    d = 50;
  }
  else if(x < 200) {
    d = 100;
  }
  else {
    d = 10;
  }

  if(x > width) {
    x = 0;
  }

  ellipse(x, y, d);
}