xxxxxxxxxx81
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Train Passing Animation</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script></head><body> <script> let trainX = -300; // Train starts off-screen to the left let trainSpeed = 1; // Speed of the train function setup() { createCanvas(800, 400); } function draw() { background(200); // Light gray background // Draw the station platform fill(150); rect(0, height/2 + 50, width, 20); // Station platform // Draw the person standing on the platform drawPerson(600, height/2); // Person positioned on the right side of the canvas // Draw the train drawTrain(trainX, height/2 - 50); // Move the train to the right if (trainX < width) { // Train keeps moving until it goes off-screen trainX += trainSpeed; } else { trainX = -300; // Reset train position to start from the left again (loop effect) } } // Function to draw the train function drawTrain(x, y) { // Train body fill(100); // Gray color rect(x, y, 200, 100); // Main body of the train // Train windows fill(255); // White for windows for (let i = 0; i < 3; i++) { rect(x + 30 + i * 60, y + 20, 40, 30); // Three windows on the train } // Train wheels fill(50); // Dark gray for wheels ellipse(x + 40, y + 110, 40, 40); // Left wheel ellipse(x + 160, y + 110, 40, 40); // Right wheel } // Function to draw the person function drawPerson(x, y) { // Head fill(255, 220, 180); // Skin color ellipse(x, y - 30, 30, 30); // Head // Body fill(0, 0, 255); // Blue shirt rect(x - 10, y - 15, 20, 40); // Body // Arms rect(x - 20, y - 15, 10, 30); // Left arm rect(x + 10, y - 15, 10, 30); // Right arm // Legs fill(0); // Black pants rect(x - 10, y + 25, 10, 30); // Left leg rect(x, y + 25, 10, 30); // Right leg } </script></body></html>