const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Draw a gradient rectangle representing AI system's well-being.
function drawAIWellness() {
    ctx.fillStyle = 'linear-gradient(to right, #05c0e4 0%,#058aeb 100%)';
    ctx.fillRect(0, 0, canvas.width * (1 - fatigueLevel), canvas.height);
}

// Draw a circular gradient representing the ripple effect.
function drawRipple() {
    const radius = 200;
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, Math.PI * 2);
    ctx.fillStyle = 'radial-gradient(circle at center, #8068d4 0%,#3b1ea5 100%)';
    ctx.fill();
}

// Simple animation: AI system's well-being fluctuates slightly over time.
function animate() {
    requestAnimationFrame(animate);
    fatigueLevel += (Math.random() - 0.5) * 0.02;
    if (fatigueLevel < 0) fatigueLevel = 0;
    else if (fatigueLevel > 1) fatigueLevel = 1;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawAIWellness();
    drawRipple();
}

const fatigueLevel = 0.7;