X limits and markers logic upgraded to variable basis constants defined in script.

steps/src/constants.js

@@ -3,9 +3,9 @@ export const MAX_TRAJECTORY_LENGTH = 50;
 // Frames per second for the video playback.
 export const VIDEO_FPS = 30;
 // Minimum X-coordinate for the radar plot in meters.
-export const RADAR_X_MIN = -20;
+export const RADAR_X_MIN = -25;
 // Maximum X-coordinate for the radar plot in meters.
-export const RADAR_X_MAX = 20;
+export const RADAR_X_MAX = 25;
 // Minimum Y-coordinate for the radar plot in meters.
 export const RADAR_Y_MIN = 0;
 // Maximum Y-coordinate for the radar plot in meters.

steps/src/drawUtils.js

@@ -121,7 +121,12 @@ export function drawAxes(p, plotScales) {
       y * plotScales.plotScaleY
     );
   // Draw vertical grid lines.
-  for (let x = -15; x <= 15; x += 5) {
+  const xGridStep = 5;
+  for (
+    let x = Math.ceil(RADAR_X_MIN / xGridStep) * xGridStep;
+    x <= RADAR_X_MAX;
+    x += xGridStep
+  ) {
     if (x === 0) continue;
     p.line(
       x * plotScales.plotScaleX,
@@ -156,7 +161,11 @@ export function drawAxes(p, plotScales) {
     p.pop();
   }
   // Draw X-axis labels.
-  for (let x = -15; x <= 15; x += 5) {
+  for (
+    let x = Math.ceil(RADAR_X_MIN / xGridStep) * xGridStep;
+    x <= RADAR_X_MAX;
+    x += xGridStep
+  ) {
     if (x === 0) continue;
     p.push();
     p.translate(x * plotScales.plotScaleX, -10);