let centerY = 250;

​

let circle1X = 250, circle1Y = 250;

let circle2X = 250, circle2Y = 250;

let circle3X = 250, circle3Y = 250;

​

function setup() {

  createCanvas(500, 500);

  noStroke();

}

​

function draw() {

  // Hintergrund zurücksetzen

  background(255);

​

  // Begrenze die Mausposition relativ zur Mitte (250, 250)

  let maxDistance = 450 / 2; // Radius des größten Kreises

  let dx = mouseX - centerX;

  let dy = mouseY - centerY;

  let distance = sqrt(dx * dx + dy * dy);

​

  if (distance > maxDistance) {

    let angle = atan2(dy, dx);

    dx = cos(angle) * maxDistance;

    dy = sin(angle) * maxDistance;

  }

​

  let constrainedX = centerX + dx;

  let constrainedY = centerY + dy;

​

  // Easing für die drei Kreise mit unterschiedlichem Delay

  circle1X += (constrainedX - circle1X) * 0.01;

  circle1Y += (constrainedY - circle1Y) * 0.01;

  circle2X += (constrainedX - circle2X) * 0.015;

  circle2Y += (constrainedY - circle2Y) * 0.015;

​

  circle3X += (constrainedX - circle3X) * 0.02;

  circle3Y += (constrainedY - circle3Y) * 0.02;

​

  // Zeichne die verschiedenen farbigen Kreise an unterschiedlichen Positionen

  drawGradientCircle(centerX, centerY, 450, color(100, 200, 200, 2));

  drawGradientCircle(circle1X + 10, circle1Y - 10, 300, color(100, 200, 200, 20));

  drawGradientCircle(circle2X - 20, circle2Y + 20, 250, color(100, 100, 255, 20));

  drawGradientCircle(circle3X + 5, circle3Y + 5, 200, color(50, 50, 150, 30));

}

​

function drawGradientCircle(x, y, d, c) {

  for (let r = d; r > 0; r -= 2) {

    fill(c.levels[0], c.levels[1], c.levels[2], map(r, 0, d, 0, c.levels[3]));

    ellipse(x, y, r, r);

  }

}

​