xxxxxxxxxx46
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #b0b0b0; } </style> </head> <body> <script> let numCircles = 5; let colors = []; let baseAngle = 0; function setup() { createCanvas(400, 400); noStroke(); for (let i = 0; i < numCircles; i++) { let shade = map(i, 0, numCircles - 1, 50, 10); colors.push(color(shade)); } } function draw() { background(176); let maxDiameter = width * 0.75; // Maximum size of the largest circle for (let i = numCircles - 1; i >= 0; i--) { let angle = baseAngle + i * 0.2; // Adding delay based on circle index let diameter = maxDiameter * 0.5 * (1 + 0.5 + sin(angle) * 0.25); // Ensuring minimum size fill(colors[i]); ellipse(width / 2, height / 2, diameter); maxDiameter *= 0.8; } baseAngle += 0.01; // Slower animation } </script> </body></html>