Die ersten Bewegungen!

Wie du beim vorigen Kapitel gelernt hast, kann man Variablen verändern. Dies machen wir uns zu nutzen, um ein Objekt bewegen zu können.

Beispiele

let xKoordinate = 0;
let yKoordinate = 25;

function setup() {
  createCanvas(600, 100);
}

function draw() {
  background(100);

  let breite = 50;
  rect(xKoordinate, yKoordinate, breite, breite);

  xKoordinate = xKoordinate + 1;

  if(xKoordinate > 600) {
    xKoordinate = 0;
  }
}

let xKoordinate = 0 und let yKoordinate = 25 schreiben wir ausserhalb von draw(). Würden wir diese beiden Variablen in draw() schreiben, würden die Werte bei jedem Durchgang wieder zurückgesetzt werden (60 Mal pro Sekunde!).

Die xKoordinate wird durch den Ausdruck xKoordinate = xKoordinate + 1; kontinuierlich verändert. Da die Framerate ca. 60 Hertz beträgt, bedeutet das, dass das Quadrat pro Sekunde 60 Pixel verschoben wird.

Wenn die Framerate = 60 Hertz ist, heisst das, dass alles, was innerhalb von draw() steht, 60 Mal pro Sekunde durchgeführt wird.

Der Ausdruck if(xKoordinate > 600) {...} wird später erklärt.

let durchmesser = 0;

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

function draw() {
  background(100);

  let x = 100;
  let y = 100;
  ellipse(x, y, durchmesser, durchmesser);

  durchmesser = durchmesser + 2;

  if(durchmesser > 200) {
    durchmesser = 0;
  }
}
	

Hier wird der Durchmesser des Kreises kontinuierlich vergrössert.

let durchmesser = 200;

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

function draw() {
  background(100);

  let x = 100;
  let y = 100;
  ellipse(x, y, durchmesser, durchmesser);

  durchmesser = durchmesser - 1;

  if(durchmesser < 0) {
    durchmesser = 200;
  }
}

Das Ganze umgekehrt!