let circles = []; // Array zum Speichern der Kreise

​

function setup() {

  createCanvas(800, 600); // Erstelle ein Canvas von 800x600 Pixeln

  background(220); // Setze den Hintergrund auf hellgrau

  // Erstelle die Kreise mit zufälligen Positionen und Größen

  for (let i = 0; i < numCircles; i++) {

    let newCircle;

    let safeToAdd;

    // Versuche einen Kreis zu erstellen, der sich nicht überschneidet

    do {

      newCircle = {

        x: random(width),

        y: random(height),

        diameter: random(20, 100) // Setze den Durchmesser zwischen 20 und 100

      };

      safeToAdd = true;

      // Überprüfe, ob der neue Kreis mit vorhandenen Kreisen kollidiert

      for (let j = 0; j < circles.length; j++) {

        let otherCircle = circles[j];

        let distance = dist(newCircle.x, newCircle.y, otherCircle.x, otherCircle.y);

        if (distance < (newCircle.diameter / 2 + otherCircle.diameter / 2)) {

          safeToAdd = false;

          break;

        }

      }

    } while (!safeToAdd);

    circles.push(newCircle);

  }

}

​

function draw() {

  background(220); // Erneuert den Hintergrund bei jedem Frame

  // Zeichne alle Kreise

  for (let i = 0; i < circles.length; i++) {

    let circle = circles[i];

    // Zeichne den äußeren schwarzen Kreis

    fill(0);

    noStroke();

    ellipse(circle.x, circle.y, circle.diameter, circle.diameter);

    // Berechne die Position des inneren weißen Kreises

    let innerDiameter = circle.diameter / 2;

    let maxOffset = (circle.diameter - innerDiameter) / 2;

    // Berechne den Abstand zwischen dem Mittelpunkt des schwarzen Kreises und der Mausposition

    let distFromCenter = dist(mouseX, mouseY, circle.x, circle.y);

    // Wenn die Maus außerhalb des schwarzen Kreises ist, setze den weißen Kreis auf den Rand des schwarzen Kreises

    if (distFromCenter > circle.diameter / 2) {

      let angle = atan2(mouseY - circle.y, mouseX - circle.x);

      let whiteX = circle.x + cos(angle) * maxOffset;

      let whiteY = circle.y + sin(angle) * maxOffset;

      fill(255);

      ellipse(whiteX, whiteY, innerDiameter, innerDiameter);

    } else { // Wenn die Maus innerhalb des schwarzen Kreises ist, bewege den weißen Kreis entsprechend

      let offsetX = constrain(mouseX - circle.x, -maxOffset, maxOffset);

      let offsetY = constrain(mouseY - circle.y, -maxOffset, maxOffset);

      fill(255);

      ellipse(circle.x + offsetX, circle.y + offsetY, innerDiameter, innerDiameter);

    }

  }

}

​