-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
12b1771
commit 991e39b
Showing
1 changed file
with
140 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |