xxxxxxxxxx
89
let centerX = 260;
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 };
}