Add small animation for testing

script.js

@@ -177,6 +177,12 @@ maxSpeedSlider.addEventListener('input', (e) => {
     maxSpeedOutput.textContent = parseFloat(e.target.value).toFixed(1);
 });
 
+
+
+/*
+* BEGIN ANIMATION CODE
+*/
+
 // Get the canvas and context as constants
 const canvas = document.getElementById('swerve-canvas');
 const ctx = canvas.getContext('2d');
@@ -204,6 +210,7 @@ function drawGrid(ctx, sideLength, gridSquareSize) {
 function drawModule(ctx, module) {
     const x = module.position.x;
     const y = module.position.y;
+    const arrowLength = Math.max(module.speed * 1.5, 5);
 
     ctx.save();
     ctx.translate(x, y);
@@ -217,6 +224,22 @@ function drawModule(ctx, module) {
     ctx.lineWidth = 4;
     ctx.stroke();
 
+    // Draw velocity arrow if module is moving
+    if (module.speed > 0.01) {
+        ctx.strokeStyle = rootStyles.getPropertyValue('--swerve-arrow-color');
+        ctx.fillStyle = rootStyles.getPropertyValue('--swerve-arrow-color');
+        ctx.lineWidth = 4;
+
+        const endX = arrowLength * Math.cos(module.angle);
+        const endY = arrowLength * Math.sin(module.angle);
+
+        // Arrow line
+        ctx.beginPath();
+        ctx.moveTo(0, 0);
+        ctx.lineTo(endX, endY);
+        ctx.stroke();
+    }
+
 
     ctx.restore();
 }
@@ -240,9 +263,40 @@ function drawRobot(ctx, robot) {
     modules.forEach(module => drawModule(ctx, module));
 }
 
-const robot = new SwerveDrive(PresetConfigs.eightWheel(200));
-robot.drive(100, 0, 1, 500);
+let robot = new SwerveDrive(PresetConfigs.eightWheel(200));
+let xSpeed = -100;
+let xDir = 1;
+let ySpeed = -100;
+let yDir = 0.8;
+robot.drive(xSpeed, ySpeed, 0, 500);
 
-ctx.translate(canvas.width / 2, canvas.height / 2);
-drawGrid(ctx, 600, 50);
-drawRobot(ctx, robot);
+function animate(timestamp) {
+    // 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;
+    ySpeed = ySpeed + yDir;
+    if (xSpeed > 100)
+        xDir = -1;
+    else if (xSpeed < -100)
+        xDir = 1;
+
+    if (ySpeed > 100)
+        yDir = -0.8;
+    else if (ySpeed < -100)
+        yDir = 0.8;
+    robot.drive(xSpeed, ySpeed, 0, 500);
+
+    // Do it all over again
+    requestAnimationFrame(animate);
+    ctx.restore();
+}
+
+animate();