An den Rändern ändert sich die Richtung der Animation

P5

var x = 40; // Anfangsposition des Kreises
var r = x; // Radius des Kreises
var richtung = 1; // in welche Richtung läuft der Kreis

function setup() {
  createCanvas(960, 150);
  noStroke();
  fill(255, 0, 0);
}

function draw(){
  background(0);

  // Ellipse wird mit Radius-Angaben gezeichnet
  ellipseMode(RADIUS);

  ellipse(x, height/2, r, r);

  // "||" bedeutet "oder"

  // wenn der Kreis am rechten Rand ODER am linken Rand anstößt
  // dreht sich die Richung um

  // damit der Kreis nicht visuell über die Ränder hinausgeht
  // wird jeweils der Radius "r" mitgerechnet
  if ((x > width - r) || (x < 0 + r)) {
    richtung = -richtung; //Richtung kehrt sich um, ist also 1 oder -1;
  }

  // 10 * -1 = -10…
  x = x + (10 * richtung);
}

Richtung kann entweder „1“ oder „-1“ sein – damit wird bei x entweder 10 dazugezählt (Kreis bewegt sich nach rechts) oder abgezogen (Kreis bewegt sich nach links)