Added a method of moving the grid in line with the robot's movement

script.js

@@ -190,21 +190,36 @@ const ctx = canvas.getContext('2d');
 // Get CSS variables for use in canvas
 const rootStyles = getComputedStyle(document.documentElement);
 
-function drawGrid(ctx, sideLength, gridSquareSize) {
+function drawGrid(ctx, sideLength, gridSquareSize, xOffset, yOffset, rotation) {
+    ctx.save();
+
+    // Apply rotation transform
+    ctx.rotate(-rotation);
+
     ctx.strokeStyle = rootStyles.getPropertyValue('--grid-color');
     ctx.lineWidth = 1;
+    const startX = (-sideLength / 2) - xOffset;
+    const endX = (sideLength / 2) - xOffset;
+    const startY = (-sideLength / 2) - yOffset;
+    const endY = (sideLength / 2) - yOffset;
 
-    for (let i = -sideLength / 2; i <= sideLength / 2; i += gridSquareSize) {
+    // Draw vertical lines
+    for (let i = startX; i <= endX; i += gridSquareSize) {
         ctx.beginPath();
         ctx.moveTo(i, -sideLength / 2);
         ctx.lineTo(i, sideLength / 2);
         ctx.stroke();
+    }
 
+    // Draw horizontal lines
+    for (let i = startY; i <= endY; i += gridSquareSize) {
         ctx.beginPath();
         ctx.moveTo(-sideLength / 2, i);
         ctx.lineTo(sideLength / 2, i);
         ctx.stroke();
     }
+
+    ctx.restore();
 }
 
 function drawModule(ctx, module) {
@@ -266,23 +281,29 @@ function drawRobot(ctx, robot) {
 let robot = new SwerveDrive(PresetConfigs.eightWheel(200));
 let xSpeed = -100;
 let xDir = 1;
+
 let ySpeed = -100;
 let yDir = 0.8;
+
+let turnSpeed = -1;
+let turnDir = 0.01;
+let robotRotation = 0; // Track cumulative robot rotation for grid display
+
+let gridSquareSize = 25;
+let xGridOffset = 0;
+let yGridOffset = 0;
 robot.drive(xSpeed, ySpeed, 0, 500);
 
-function animate(timestamp) {
+function animate() {
     // Clear and set up canvas
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     ctx.save();
     ctx.translate(canvas.width / 2, canvas.height / 2);
 
-    // Draw the robot and it's movement
-    drawGrid(ctx, 600, 50);
-    drawRobot(ctx, robot);
-
     // Animation for testing
-    xSpeed = xSpeed + xDir;
+    xSpeed += xDir;
-    ySpeed = ySpeed + yDir;
+    ySpeed += yDir;
+    turnSpeed += turnDir;
     if (xSpeed > 100)
         xDir = -1;
     else if (xSpeed < -100)
@@ -292,11 +313,32 @@ function animate(timestamp) {
         yDir = -0.8;
     else if (ySpeed < -100)
         yDir = 0.8;
-    robot.drive(xSpeed, ySpeed, 0, 500);
+
+    if (turnSpeed > 1)
+        turnDir = -0.01;
+    else if (turnSpeed < -1)
+        turnDir = 0.01;
+
+
+    // Animate the grid with robot movement
+    let offsetSpeedDivisor = (100 - gridSquareSize <= 0 ? 1 : 100 - gridSquareSize);
+    console.log(offsetSpeedDivisor);
+    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
+
+    // Draw the robot and it's movement. Grid should be oversized so movement
+    // doesn't find the edge of the grid
+    drawGrid(ctx, canvas.width * 2, gridSquareSize, xGridOffset, yGridOffset, robotRotation);
+    drawRobot(ctx, robot);
+
+    robot.drive(xSpeed, ySpeed, turnSpeed, 500);
 
     // Do it all over again
-    requestAnimationFrame(animate);
     ctx.restore();
+    requestAnimationFrame(animate);
 }
 
 animate();

styles.css

@@ -23,7 +23,7 @@
 
   --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 
-  --grid-color: #e4e4e733;
+  --grid-color: #e4e4e78c;
   --robot-frame-color: #1e81bf;
   --robot-fill-color: #5f9ec4;
   --swerve-module-color: #1e81bf;