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);

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

    // Berechne die Position des weißen Kreises

    let innerDiameter = circle.diameter / 2;

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

    let dx = constrain(mouseX - circle.x, -maxDistance, maxDistance);

    let dy = constrain(mouseY - circle.y, -maxDistance, maxDistance);

    let innerX = circle.x + dx;

    let innerY = circle.y + dy;

    // Zeichne den inneren weißen Kreis

    fill(255);

    ellipse(innerX, innerY, innerDiameter, innerDiameter);

  }

}

​