Translation and Rotation sliders now function effectively, had to fix display slightly

This commit is contained in:
2025-10-27 22:51:24 -04:00
parent 6a7f071c17
commit 73a386fe5a

View File

@ -45,6 +45,10 @@ class SwerveModule {
// Swerve drive class to represent the robot as a whole // Swerve drive class to represent the robot as a whole
class SwerveDrive { class SwerveDrive {
constructor(modulePositionsAndNames) { constructor(modulePositionsAndNames) {
this.setModules(modulePositionsAndNames);
}
setModules(modulePositionsAndNames) {
// Take an array of module positions with a name and create an array of SwerveModule objects // Take an array of module positions with a name and create an array of SwerveModule objects
this.modules = modulePositionsAndNames.map(module => this.modules = modulePositionsAndNames.map(module =>
new SwerveModule(module.x, module.y, module.name) new SwerveModule(module.x, module.y, module.name)
@ -62,7 +66,10 @@ class SwerveDrive {
if (maxCalculated > maxSpeed) { if (maxCalculated > maxSpeed) {
const scale = maxSpeed / maxCalculated; const scale = maxSpeed / maxCalculated;
this.modules.forEach(module => { this.modules.forEach(module => {
module.speed *= scale; module.velocity.x *= scale;
module.velocity.y *= scale;
module.speed = module.velocity.magnitude();
module.angle = module.velocity.angle();
}); });
} }
} }
@ -225,7 +232,7 @@ function drawGrid(ctx, sideLength, gridSquareSize, xOffset, yOffset, rotation) {
function drawModule(ctx, module) { function drawModule(ctx, module) {
const x = module.position.x; const x = module.position.x;
const y = module.position.y; const y = module.position.y;
const arrowLength = Math.max(module.speed * 1.5, 5); const arrowLength = Math.max(module.speed / 2, 5);
ctx.save(); ctx.save();
ctx.translate(x, y); ctx.translate(x, y);
@ -300,22 +307,25 @@ function animate() {
ctx.save(); ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2); ctx.translate(canvas.width / 2, canvas.height / 2);
// Animation for testing // Update speeds based on sliders
xSpeed = vxSlider.value; xSpeed = parseFloat(vxSlider.value);
ySpeed = vySlider.value; ySpeed = parseFloat(vySlider.value);
turnSpeed = omegaSlider.value; turnSpeed = parseFloat(omegaSlider.value);
// Animate the grid with robot movement // Animate the grid with robot movement
let offsetSpeedDivisor = (100 - gridSquareSize <= 0 ? 1 : 100 - gridSquareSize); let offsetSpeedDivisor = (100 - gridSquareSize <= 0 ? 1 : 100 - gridSquareSize);
console.log(offsetSpeedDivisor);
// Accumulate grid offset and wrap it to create infinite grid effect
xGridOffset = (xGridOffset + (xSpeed / offsetSpeedDivisor)) % gridSquareSize;
yGridOffset = (yGridOffset + (ySpeed / offsetSpeedDivisor)) % gridSquareSize;
// Accumulate robot rotation based on turn speed (convert to radians)
robotRotation += turnSpeed * 0.01; // Scale factor for reasonable rotation speed robotRotation += turnSpeed * 0.01; // Scale factor for reasonable rotation speed
// Convert robot velocities to world velocities for grid movement
const cosRot = Math.cos(robotRotation);
const sinRot = Math.sin(robotRotation);
const worldVx = xSpeed * cosRot - ySpeed * sinRot;
const worldVy = xSpeed * sinRot + ySpeed * cosRot;
// Update grid offsets based on robot movement
xGridOffset = (xGridOffset + (worldVx / offsetSpeedDivisor)) % gridSquareSize;
yGridOffset = (yGridOffset + (worldVy / offsetSpeedDivisor)) % gridSquareSize;
// Draw the robot and it's movement. Grid should be oversized so movement // Draw the robot and it's movement. Grid should be oversized so movement
// doesn't find the edge of the grid // doesn't find the edge of the grid
drawGrid(ctx, canvas.width * 2, gridSquareSize, xGridOffset, yGridOffset, robotRotation); drawGrid(ctx, canvas.width * 2, gridSquareSize, xGridOffset, yGridOffset, robotRotation);