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

// set canvas dimensions
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// draw the stick figures
draw();

function drawStickFigure(x, y) {
    ctx.lineWidth = 3;
    ctx.strokeStyle = 'black';

    // draw the stick figure's head
    ctx.beginPath();
    ctx.arc(x, y - 30, 20, 0, Math.PI * 2);
    ctx.stroke();

    // draw the stick figure's left eye
    ctx.beginPath();
    ctx.arc(x - 7, y - 33, 1, 0, Math.PI * 2);
    ctx.stroke();

    // draw the stick figure's right eye
    ctx.beginPath();
    ctx.arc(x + 7, y - 33, 1, 0, Math.PI * 2);
    ctx.stroke();

    // draw the stick figure's mouth
    ctx.beginPath();
    ctx.arc(x, y - 25, 6, 0, Math.PI);
    ctx.stroke();

    // Body
    ctx.beginPath();
    ctx.moveTo(x, y - 10);
    ctx.lineTo(x, y + 50); // Length of body
    ctx.stroke();

    // Arms
    ctx.beginPath();
    ctx.moveTo(x - 30, y + 10); // Left arm
    ctx.lineTo(x + 30, y + 10); // Right arm
    ctx.stroke();

    // Legs
    ctx.beginPath();
    ctx.moveTo(x, y + 50); // Start at bottom of body
    ctx.lineTo(x - 20, y + 100); // Left leg
    ctx.moveTo(x, y + 50);
    ctx.lineTo(x + 20, y + 100); // Right leg
    ctx.stroke();
}

// Animation function
// function animate() {
//     ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
//
//     drawStickFigure(x, y); // Draw stick figure at current position
//
//     // Update position
//     x += dx;
//     y += dy;
//
//     // Check boundaries and reverse direction if necessary
//     if (x + 20 > canvas.width || x - 20 < 0) dx = -dx; // Horizontal boundary check
//     if (y + 100 > canvas.height || y - 50 < 0) dy = -dy; // Vertical boundary check
//
//     requestAnimationFrame(animate); // Recursive call to keep animation going
// }

// Start animation
// animate();

function draw() {
    // prompt the user to enter a number in a range and not continuing under a number in that range is selected
    let numberStickFigures = 5;
    // let numberStickFigures = 0;
    // while (numberStickFigures < 1 || numberStickFigures > 5) {
    //     numberStickFigures = prompt("Enter an integer between 1 and 5");
    // }

    for (let i = 1; i <= numberStickFigures; i++) {
        // place the stick figure randomly on the canvas
        const x = Math.floor(Math.random() * canvas.width);
        const y = Math.floor(Math.random() * canvas.height);

        drawStickFigure(x, y);
    }
}







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

// set canvas dimensions
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Store stick figure data
let stickFigures = [];

// Generate random number of stick figures between 1 and 5
let numberStickFigures = 5;

// Create stick figures with random positions and velocities
for (let i = 0; i < numberStickFigures; i++) {
    stickFigures.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        dx: (Math.random() - 0.5) * 8,
        dy: (Math.random() - 0.5) * 8,
        danceSpeed: Math.random() * 5,
        limbAngle: 0
    });
}

// Draw the stick figure
function drawStickFigure(x, y) {
    ctx.lineWidth = 3;
    ctx.strokeStyle = 'black';

    // Draw the stick figure's head
    ctx.beginPath();
    ctx.arc(x, y - 30, 20, 0, Math.PI * 2);
    ctx.stroke();

    // Draw the stick figure's left eye
    ctx.beginPath();
    ctx.arc(x - 7, y - 33, 1, 0, Math.PI * 2);
    ctx.stroke();

    // Draw the stick figure's right eye
    ctx.beginPath();
    ctx.arc(x + 7, y - 33, 1, 0, Math.PI * 2);
    ctx.stroke();

    // Draw the stick figure's mouth
    ctx.beginPath();
    ctx.arc(x, y - 25, 6, 0, Math.PI);
    ctx.stroke();

    // Body
    ctx.beginPath();
    ctx.moveTo(x, y - 10);
    ctx.lineTo(x, y + 50); // Length of body
    ctx.stroke();

    // Arms
    ctx.beginPath();

    // right arm
    ctx.moveTo(x, y + 10);
    ctx.lineTo(x + 30, y + 10);
    ctx.stroke();

    // left arm
    ctx.moveTo(x, y + 10);
    ctx.lineTo(x - 30, y + 10);
    ctx.stroke();

    // Legs
    ctx.beginPath();
    ctx.moveTo(x, y + 50); // Start at bottom of body
    ctx.lineTo(x - 20, y + 100); // Left leg
    ctx.moveTo(x, y + 50);
    ctx.lineTo(x + 20, y + 100); // Right leg
    ctx.stroke();
}

// Update the position of each stick figure and bounce off the boundaries
function updateStickFigures() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas

    stickFigures.forEach((figure) => {
        // Update position
        figure.x += figure.dx;
        figure.y += figure.dy;

        // Bounce off the boundaries
        if (figure.x + 20 > canvas.width || figure.x - 20 < 0) figure.dx = -figure.dx; // Horizontal boundary check
        if (figure.y + 100 > canvas.height || figure.y - 50 < 0) figure.dy = -figure.dy; // Vertical boundary check

        // Draw updated figure
        drawStickFigure(figure.x, figure.y);
    });

    requestAnimationFrame(updateStickFigures); // Recursive call for animation
}

// Start animation
updateStickFigures();