let centerY = 260;

​

let circle1X = centerX, circle1Y = centerY;

let circle2X = centerX, circle2Y = centerY;

let circle3X = centerX, circle3Y = centerY;

let circle4X = centerX, circle4Y = centerY;

let circle5X = centerX, circle5Y = centerY;

​

function setup() {

  createCanvas(500, 500);

  noStroke();

}

​

function draw() {

  // Hintergrund zurücksetzen

  background(255);

​

  // Begrenze die Mausposition relativ zur Mitte des vierten Kreises (260, 260)

  let maxDistance = 300 / 2; // Radius des vierten 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 fünf Kreise mit unterschiedlichem Delay

  circle1X += (constrainedX - circle1X) * 0.015;

  circle1Y += (constrainedY - circle1Y) * 0.015;

​

  circle2X += (constrainedX - circle2X) * 0.01;

  circle2Y += (constrainedY - circle2Y) * 0.01;

​

  circle3X += (constrainedX - circle3X) * 0.019;

  circle3Y += (constrainedY - circle3Y) * 0.019;

​

  circle4X += (constrainedX - circle4X) * 0.025;

  circle4Y += (constrainedY - circle4Y) * 0.025;

​

  circle5X += (constrainedX - circle5X) * 0.029;

  circle5Y += (constrainedY - circle5Y) * 0.029;

​

  // Begrenze die Position der fünf Kreise auf den Radius des vierten Kreises

  let constrainedCircle1 = limitWithinCircle(centerX, centerY, circle1X, circle1Y, maxDistance);

  let constrainedCircle2 = limitWithinCircle(centerX, centerY, circle2X, circle2Y, maxDistance);

  let constrainedCircle3 = limitWithinCircle(centerX, centerY, circle3X, circle3Y, maxDistance);

  let constrainedCircle4 = limitWithinCircle(centerX, centerY, circle4X, circle4Y, maxDistance);

  let constrainedCircle5 = limitWithinCircle(centerX, centerY, circle5X, circle5Y, maxDistance);

​

  // Zeichne die verschiedenen farbigen Kreise an unterschiedlichen Positionen

  drawGradientCircle(250, 250, 450, color(100, 200, 200, 2));

  drawGradientCircle(270, 230, 400, color(100, 100, 255, 5));

  drawGradientCircle(230, 270, 350, color(100, 80, 150, 10));

  drawGradientCircle(260, 260, 300, color(100, 140, 180, 20));

  drawGradientCircle(constrainedCircle1.x, constrainedCircle1.y, 250, color(100, 100, 255, 10));

  drawGradientCircle(constrainedCircle2.x, constrainedCircle2.y, 200, color(50, 50, 150, 20));

  drawGradientCircle(constrainedCircle3.x, constrainedCircle3.y, 150, color(50, 50, 150, 30));

  drawGradientCircle(constrainedCircle4.x, constrainedCircle4.y, 100, color(50, 50, 150, 40));

  drawGradientCircle(constrainedCircle5.x, constrainedCircle5.y, 50, color(50, 50, 150, 50));

}

​

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

  }

}

​

function limitWithinCircle(cx, cy, x, y, radius) {

  let dx = x - cx;

  let dy = y - cy;

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

​

  if (distance > radius) {

    let angle = atan2(dy, dx);

    dx = cos(angle) * radius;

    dy = sin(angle) * radius;

  }

​

  return { x: cx + dx, y: cy + dy };

}

​