Create Index.html

Mateo-Johnson · Mar 31, 2024 · 85c5bc0 · 85c5bc0
commit 85c5bc0
Showing 1 changed file with 155 additions and 0 deletions.
diff --git a/Index.html b/Index.html
@@ -0,0 +1,155 @@
+<!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');
+
+    // 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 keyboard input
+        if (keys["ArrowUp"]) { // Move forward
+            robot.velocity.x += robot.forwardDirection.x * robot.acceleration;
+            robot.velocity.y += robot.forwardDirection.y * robot.acceleration;
+        }
+        if (keys["ArrowDown"]) { // Move backward
+            robot.velocity.x -= robot.forwardDirection.x * robot.acceleration;
+            robot.velocity.y -= robot.forwardDirection.y * robot.acceleration;
+        }
+        if (keys["ArrowLeft"]) { // Strafe left
+            const strafeDirection = { x: -Math.cos(robot.rotation), y: -Math.sin(robot.rotation) };
+            robot.velocity.x += strafeDirection.x * robot.acceleration;
+            robot.velocity.y += strafeDirection.y * robot.acceleration;
+        }
+        if (keys["ArrowRight"]) { // Strafe right
+            const strafeDirection = { x: Math.cos(robot.rotation), y: Math.sin(robot.rotation) };
+            robot.velocity.x += strafeDirection.x * robot.acceleration;
+            robot.velocity.y += strafeDirection.y * robot.acceleration;
+        }
+        if (keys["a"]) { // Rotate counterclockwise
+            robot.rotation -= Math.PI / 60; // Rotate by 1 degree
+            rotateForwardDirection(-Math.PI / 60); // Rotate forward direction
+        }
+        if (keys["d"]) { // Rotate clockwise
+            robot.rotation += Math.PI / 60; // Rotate by 1 degree
+            rotateForwardDirection(Math.PI / 60); // Rotate forward direction
+        }
+
+        // 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);
+    }
+
+    // Function to rotate the forward direction vector
+    function rotateForwardDirection(angle) {
+        const newX = Math.cos(angle) * robot.forwardDirection.x - Math.sin(angle) * robot.forwardDirection.y;
+        const newY = Math.sin(angle) * robot.forwardDirection.x + Math.cos(angle) * robot.forwardDirection.y;
+        robot.forwardDirection.x = newX;
+        robot.forwardDirection.y = newY;
+    }
+
+    // Start the simulation
+    update();
+</script>
+</body>
+</html>