126 lines
4.6 KiB
JavaScript
126 lines
4.6 KiB
JavaScript
const canvas = document.getElementById('myCanvas');
|
|
const context = canvas.getContext('2d');
|
|
|
|
// make canvas the same size as the window
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
|
|
// prompt user to enter a number between 1 and 5 and not continuing until one is selected
|
|
let numberStickFigures = 0;
|
|
while (numberStickFigures < 1 || numberStickFigures > 5) {
|
|
numberStickFigures = prompt("Enter an integer between 1 and 5");
|
|
}
|
|
|
|
// array to store position, speed etc of each stick figure
|
|
let stickFigures = [];
|
|
|
|
// 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) * 4,
|
|
dy: (Math.random() - 0.5) * 4,
|
|
angle: 0, // Initial limb angle
|
|
angleSpeed: (Math.random() * 0.05) + 0.02 // Speed of limb movement
|
|
});
|
|
}
|
|
|
|
// Draw the stick figure
|
|
function drawStickFigure(x, y, angle) {
|
|
context.lineWidth = 3;
|
|
context.strokeStyle = 'black';
|
|
|
|
// draw the head
|
|
context.beginPath();
|
|
context.arc(x, y - 30, 20, 0, Math.PI * 2);
|
|
context.stroke();
|
|
|
|
// left eye
|
|
context.beginPath();
|
|
context.arc(x - 7, y - 33, 1, 0, Math.PI * 2);
|
|
context.stroke();
|
|
context.fill(); // fill in circle
|
|
|
|
// right eye
|
|
context.beginPath();
|
|
context.arc(x + 7, y - 33, 1, 0, Math.PI * 2);
|
|
context.stroke();
|
|
context.fill();
|
|
|
|
// mouth
|
|
context.beginPath();
|
|
context.arc(x, y - 25, 6, 0, Math.PI);
|
|
context.stroke();
|
|
|
|
// torso
|
|
context.beginPath();
|
|
context.moveTo(x, y - 10);
|
|
context.lineTo(x, y + 50);
|
|
context.stroke();
|
|
|
|
// Arms with 2 parts (upper and lower arm)
|
|
const armLength = 30;
|
|
const upperArmAngle = Math.sin(angle) * Math.PI / 4; // Swinging angle for upper arms
|
|
const lowerArmAngle = Math.cos(angle) * Math.PI / -2; // Swinging angle for lower arms
|
|
|
|
context.beginPath();
|
|
// Left upper arm
|
|
context.moveTo(x, y + 10);
|
|
context.lineTo(x - armLength * Math.cos(upperArmAngle), y + 10 + armLength * Math.sin(upperArmAngle));
|
|
// Left lower arm
|
|
context.lineTo(x - armLength * Math.cos(upperArmAngle) - armLength * Math.cos(lowerArmAngle), y + 10 + armLength * Math.sin(upperArmAngle) + armLength * Math.sin(lowerArmAngle));
|
|
|
|
// Right upper arm
|
|
context.moveTo(x, y + 10);
|
|
context.lineTo(x + armLength * Math.cos(upperArmAngle), y + 10 + armLength * Math.sin(upperArmAngle));
|
|
// Right lower arm
|
|
context.lineTo(x + armLength * Math.cos(upperArmAngle) + armLength * Math.cos(lowerArmAngle), y + 10 + armLength * Math.sin(upperArmAngle) + armLength * Math.sin(lowerArmAngle));
|
|
context.stroke();
|
|
|
|
// Legs with 2 parts (thigh and calf)
|
|
const legLength = 40;
|
|
const upperLegAngle = Math.sin(angle) * Math.PI / 5; // Swinging angle for upper legs
|
|
const lowerLegAngle = Math.cos(angle) * Math.PI / 2; // Swinging angle for lower legs
|
|
|
|
context.beginPath();
|
|
// Left upper leg
|
|
context.moveTo(x, y + 50);
|
|
context.lineTo(x - legLength * Math.cos(upperLegAngle), y + 50 + legLength * Math.sin(upperLegAngle));
|
|
// Left lower leg
|
|
context.lineTo(x - legLength * Math.cos(upperLegAngle) - legLength * Math.cos(lowerLegAngle), y + 50 + legLength * Math.sin(upperLegAngle) + legLength * Math.sin(lowerLegAngle));
|
|
|
|
// Right upper leg
|
|
context.moveTo(x, y + 50);
|
|
context.lineTo(x + legLength * Math.cos(upperLegAngle), y + 50 + legLength * Math.sin(upperLegAngle));
|
|
// Right lower leg
|
|
context.lineTo(x + legLength * Math.cos(upperLegAngle) + legLength * Math.cos(lowerLegAngle), y + 50 + legLength * Math.sin(upperLegAngle) + legLength * Math.sin(lowerLegAngle));
|
|
context.stroke();
|
|
}
|
|
|
|
// Update the position and dance movements of each stick figure
|
|
function updateStickFigures() {
|
|
context.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
|
|
|
|
// Update limb angles for dancing
|
|
figure.angle += figure.angleSpeed;
|
|
|
|
// Draw the updated stick figure with animated limbs
|
|
drawStickFigure(figure.x, figure.y, figure.angle);
|
|
});
|
|
|
|
requestAnimationFrame(updateStickFigures); // Recursive call for animation
|
|
}
|
|
|
|
// Start animation
|
|
updateStickFigures();
|