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;

      // Überprüfe, ob der weiße Kreis den schwarzen Kreis überschneidet und korrigiere gegebenenfalls die Position

      let distanceToEdge = dist(whiteX, whiteY, circle.x, circle.y);

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

      if (distanceToEdge > correctionFactor) {

        let factor = correctionFactor / distanceToEdge;

        whiteX = circle.x + (whiteX - circle.x) * factor;

        whiteY = circle.y + (whiteY - circle.y) * factor;

      }

      fill(255);

      ellipse(whiteX, whiteY, innerDiameter, innerDiameter);

      // Berechne den Abstand zwischen dem Mittelpunkt des weißen Kreises und der Mausposition

      let distFromWhiteCenter = dist(mouseX, mouseY, whiteX, whiteY);

      // Berechne die Position des inneren blauen Kreises basierend auf der Position des weißen Kreises

      let blueDiameter = innerDiameter * 0.7; // Der Durchmesser des blauen Kreises ist 70% des Durchmessers des weißen Kreises

      let blueMaxOffset = (innerDiameter - blueDiameter) / 2;

      let blueOffsetX = constrain(whiteX - circle.x, -blueMaxOffset, blueMaxOffset);

      let blueOffsetY = constrain(whiteY - circle.y, -blueMaxOffset, blueMaxOffset);

      fill(0, 0, 255);

      ellipse(whiteX + blueOffsetX, whiteY + blueOffsetY, blueDiameter, blueDiameter);

    }

  }

}

​