Added the two regions of interest on radar sktech through static buffer. for Visual confirmation of tracks.

steps/src/constants.js

@@ -10,3 +10,15 @@ export const RADAR_X_MAX = 25;
 export const RADAR_Y_MIN = 0;
 // Maximum Y-coordinate for the radar plot in meters.
 export const RADAR_Y_MAX = 80;
+
+// Region of Interest 1 (Tracks Region)
+export const ROI_TRACKS_X_MIN = -10;
+export const ROI_TRACKS_X_MAX = 10;
+export const ROI_TRACKS_Y_MIN = 0;
+export const ROI_TRACKS_Y_MAX = 80;
+
+// Region of Interest 2 (Close Region)
+export const ROI_CLOSE_X_MIN = -10;
+export const ROI_CLOSE_X_MAX = 10;
+export const ROI_CLOSE_Y_MIN = 0;
+export const ROI_CLOSE_Y_MAX = 20;

steps/src/drawUtils.js

@@ -4,6 +4,14 @@ import {
   RADAR_Y_MAX,
   RADAR_Y_MIN,
   MAX_TRAJECTORY_LENGTH,
+  ROI_TRACKS_X_MIN,
+  ROI_TRACKS_X_MAX,
+  ROI_TRACKS_Y_MIN,
+  ROI_TRACKS_Y_MAX,
+  ROI_CLOSE_X_MIN,
+  ROI_CLOSE_X_MAX,
+  ROI_CLOSE_Y_MIN,
+  ROI_CLOSE_Y_MAX,
 } from "./constants.js";
 import { appState } from "./state.js";
 import {
@@ -61,7 +69,7 @@ export const movingColor = (p) => p.color(255, 0, 255); // Magenta
  */
 export function drawStaticRegionsToBuffer(p, b, plotScales) {
   b.clear();
-  b.push();
+  drawRegionsOfInterest(p, b, plotScales);  b.push();
   // Translate to the bottom center of the buffer.
   b.translate(b.width / 2, b.height * 0.95);
   // Flip the Y-axis to match radar coordinates (Y increases upwards).
@@ -703,3 +711,45 @@ export function drawEgoVehicle(p, plotScales) {
   p.rect(0, -10, carWidthPixels, carLengthPixels, 5);
   p.pop();
 }
+
+/**
+ * Draws the defined regions of interest (ROI) onto the canvas buffer.
+ * @param {p5} p - The p5 instance.
+ * @param {p5.Graphics} b - The p5.Graphics buffer to draw on.
+ * @param {object} plotScales - The calculated scales for plotting.
+ */
+export function drawRegionsOfInterest(p, b, plotScales) {
+  const isDark = document.documentElement.classList.contains("dark");
+  // Define semi-transparent colors for the regions
+  const tracksRegionColor = isDark ? p.color(137, 207, 240, 20) : p.color(173, 216, 230, 50); // Light blue
+  const closeRegionColor = isDark ? p.color(255, 182, 193, 25) : p.color(255, 182, 193, 60); // Light pink
+
+  b.push();
+  b.translate(b.width / 2, b.height * 0.95);   // Translate to the bottom center of the buffer, same as other static elements
+  b.scale(1, -1); // Flip Y-axis
+
+  b.noStroke();
+  b.strokeWeight(1);
+  b.noFill(); // No outlines for the shaded regions
+  b.rectMode(p.CORNERS); // Draw rectangles by specifying two opposite corners
+
+  // --- Draw Tracks Region ---
+  b.fill(tracksRegionColor);
+  b.rect(
+    ROI_TRACKS_X_MIN * plotScales.plotScaleX,
+    ROI_TRACKS_Y_MIN * plotScales.plotScaleY,
+    ROI_TRACKS_X_MAX * plotScales.plotScaleX,
+    ROI_TRACKS_Y_MAX * plotScales.plotScaleY
+  );
+
+  // --- Draw Close Region ---
+  b.fill(closeRegionColor);
+  b.rect(
+    ROI_CLOSE_X_MIN * plotScales.plotScaleX,
+    ROI_CLOSE_Y_MIN * plotScales.plotScaleY,
+    ROI_CLOSE_X_MAX * plotScales.plotScaleX,
+    ROI_CLOSE_Y_MAX * plotScales.plotScaleY
+  );
+
+  b.pop();
+}

steps/src/p5/radarSketch.js

@@ -25,6 +25,7 @@ import {
   handleCloseUpDisplay,
   drawCovarianceEllipse,
   ttcColors,
+  drawRegionsOfInterest
 } from "../drawUtils.js";
 
 export const radarSketch = function (p) {
@@ -162,8 +163,8 @@ export const radarSketch = function (p) {
     if (toggleTracks.checked) {
       p.image(
         trackLegendBuffer,
-        p.width - trackLegendBuffer.width - 10,
-        p.height - trackLegendBuffer.height - 10
+        p.width - trackLegendBuffer.width - 0,
+        p.height - trackLegendBuffer.height - 20
       );
     }
 
@@ -195,7 +196,8 @@ export const radarSketch = function (p) {
 
     // Draw semi-transparent background for the legend
     b.fill(bgColor);
-    b.noStroke();
+    b.stroke(1);
+    b.strokeWeight(0.25);
     b.rect(0, 0, b.width, b.height, 8); // Rounded corners
 
     b.fill(textColor);