Create index.html

Mateo-Johnson · Mar 31, 2024 · 991e39b · 991e39b
1 parent 12b1771
commit 991e39b
Showing 1 changed file with 140 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FRC Robot Simulator</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+
+        canvas {
+            display: block;
+            background-image: url('https://mateo-johnson.github.io/hosted-assets/aa745548020a507cf4a07051dcd0faa446607840.png');
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+        }
+    </style>
+</head>
+<body>
+<canvas id="robotCanvas" width="1298" height="638"></canvas>
+<script>
+    // Constants
+    const canvas = document.getElementById('robotCanvas');
+    const ctx = canvas.getContext('2d');
+    const ROTATION_SPEED = Math.PI / 30; // Rotation speed constant (in radians per frame)
+
+    // Robot parameters
+    let robot = {
+        x: canvas.width / 2, // Initial x position
+        y: canvas.height / 2, // Initial y position
+        width: 55.99992, // Initial width of the robot in inches
+        height: 60, // Initial height of the robot in inches
+        color: 'white', // Robot color
+        outlineColor: 'black', // Robot outline color
+        mass: 1, // Mass of the robot
+        velocity: { x: 0, y: 0 }, // Initial velocity
+        acceleration: 5, // Initial acceleration rate
+        maxSpeed: 9, // Maximum speed in m/s
+        rotation: 0, // Initial rotation
+        forwardDirection: { x: 0, y: -1 }, // Initial forward direction (upwards)
+        frictionCoefficient: 0.1 // Friction coefficient
+    };
+
+    // Convert inches to pixels
+    const inchesToPixels = (inches) => inches * 24;
+
+    // Keyboard input
+    const keys = {};
+    window.addEventListener("keydown", function (e) {
+        keys[e.key] = true;
+    });
+    window.addEventListener("keyup", function (e) {
+        delete keys[e.key];
+    });
+
+    // Update function
+    function update() {
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Apply friction
+        robot.velocity.x *= 1 - robot.frictionCoefficient;
+        robot.velocity.y *= 1 - robot.frictionCoefficient;
+
+        // Update velocity based on joystick input
+        const gamepads = navigator.getGamepads();
+        if (gamepads[0]) { // Make sure a gamepad is connected
+            const gamepad = gamepads[0];
+            const leftStickX = gamepad.axes[0]; // Left stick horizontal axis
+            const leftStickY = gamepad.axes[1]; // Left stick vertical axis
+            const rightStickX = gamepad.axes[2]; // Right stick horizontal axis
+
+            // Control translation with left stick
+            robot.velocity.x += leftStickX * robot.acceleration;
+            robot.velocity.y += leftStickY * robot.acceleration;
+
+            // Control rotation with right stick
+            robot.rotation += rightStickX * ROTATION_SPEED; // Adjust rotation
+        }
+
+        // Update forward direction based on rotation
+        robot.forwardDirection.x = Math.cos(robot.rotation);
+        robot.forwardDirection.y = Math.sin(robot.rotation);
+
+        // Limit velocity to max speed
+        const speed = Math.sqrt(robot.velocity.x ** 2 + robot.velocity.y ** 2);
+        if (speed > robot.maxSpeed) {
+            const scale = robot.maxSpeed / speed;
+            robot.velocity.x *= scale;
+            robot.velocity.y *= scale;
+        }
+
+        // Update position
+        robot.x += robot.velocity.x;
+        robot.y += robot.velocity.y;
+
+        // Ensure the robot stays within the canvas boundaries
+        robot.x = Math.max(robot.width / 2, Math.min(canvas.width - robot.width / 2, robot.x));
+        robot.y = Math.max(robot.height / 2, Math.min(canvas.height - robot.height / 2, robot.y));
+
+        // Draw robot
+        ctx.save(); // Save the current transformation matrix
+        ctx.translate(robot.x, robot.y); // Translate to the robot's position
+        ctx.rotate(robot.rotation); // Rotate the canvas
+        ctx.fillStyle = robot.color;
+        ctx.strokeStyle = robot.outlineColor; // Set outline color
+        ctx.lineWidth = 2; // Set outline width
+        ctx.fillRect(-robot.width / 2, -robot.height / 2, robot.width, robot.height); // Draw the robot
+        ctx.strokeRect(-robot.width / 2, -robot.height / 2, robot.width, robot.height); // Draw the outline
+        ctx.restore(); // Restore the saved transformation matrix
+
+        // Draw front indicator with a red dot at the end
+        ctx.save(); // Save the current transformation matrix
+        ctx.translate(robot.x, robot.y); // Translate to the robot's position
+        ctx.rotate(robot.rotation); // Rotate the canvas
+        ctx.beginPath();
+        ctx.moveTo(0, 0); // Start at the robot's center
+        ctx.lineTo(0, -50); // Draw a line 50 pixels in front of the robot
+        ctx.strokeStyle = 'red'; // Set the stroke color to red
+        ctx.lineWidth = 2; // Set the stroke width
+        ctx.stroke(); // Stroke the line
+        ctx.beginPath(); // Start a new path for the dot
+        ctx.arc(0, -50, 5, 0, 2 * Math.PI); // Draw a red dot at the end of the line
+        ctx.fillStyle = 'red'; // Set the fill color to red
+        ctx.fill(); // Fill the dot
+        ctx.restore(); // Restore the saved transformation matrix
+
+        // Request next frame
+        requestAnimationFrame(update);
+    }
+
+    // Start the simulation
+    update();
+</script>
+</body>
+</html>