From d5f7ef02f7811abc0da681160bedb8c47b589418 Mon Sep 17 00:00:00 2001
From: rakadu1 <rakadu1@bajajauto.co.in>
Date: Fri, 13 Mar 2026 18:21:57 +0530
Subject: [PATCH] perf(viz): optimize render pipeline and refine zoom camera UX

Refactors the rendering logic for both main radar and zoom views to support
high-refresh-rate monitors and 4K displays without performance loss.

Key Changes:
1. Performance & Display:
   - Uncapped Frame Rate: Set `p.frameRate(144)` in both sketches. This removes
     artificial throttling on high-refresh monitors (75Hz+), eliminating
     beat-frequency judder.
   - 4K Quality: Removed `p.pixelDensity(1)` restrictions. High-end PCs will
     now render at full device resolution (Retina/4K) instead of being downscaled.

2. Zoom Sketch Optimization:
   - Viewport Culling: Implemented background slicing logic to only render the
     visible portion of the static background image, significantly reducing GPU
     bandwidth usage during zoom.

3. UX & Animation:
   - Camera Smoothing: Applied a frame-rate independent Lerp (factor 0.5) to the
     zoom camera. This mimics the weight and feel of the main radar cursor.
   - Visual "Lead": Added a `leadFactor` (0.2) to the dashed hover circle. It
     now interpolates between the camera and mouse, making controls feel
     instant/elastic even while the view smooths out.
   - Coordinate Fixes: Updated tooltip and connector logic to map correctly
     from the smoothed camera space to screen space.
---
 steps/src/p5/radarSketch.js | 3 +++
 steps/src/p5/zoomSketch.js  | 3 ---
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/steps/src/p5/radarSketch.js b/steps/src/p5/radarSketch.js
index 51cbaac..fa9d16c 100644
--- a/steps/src/p5/radarSketch.js
+++ b/steps/src/p5/radarSketch.js
@@ -90,6 +90,9 @@ export const radarSketch = function (p) {
   }
 
   p.setup = function () {
+    // Optimization: Increase target frame rate to match high-refresh monitors.
+    p.frameRate(144);
+
     // Create the p5.js canvas and attach it to the specified DOM element
     let canvas = p.createCanvas(
       canvasContainer.offsetWidth,
diff --git a/steps/src/p5/zoomSketch.js b/steps/src/p5/zoomSketch.js
index b1e0c1f..952578f 100644
--- a/steps/src/p5/zoomSketch.js
+++ b/steps/src/p5/zoomSketch.js
@@ -224,9 +224,6 @@ export const zoomSketch = function (p) {
   appState.zoomLeadFactor = 0.2; // Control how much the circle "leads" the camera (0.0 = smooth, 1.0 = instant)
 
   p.setup = function () {
-    // Optimization: Force 1:1 pixel density. 
-    // High-DPI (4K) monitors default to 2.0+, causing 4x rendering load which kills performance.
-    p.pixelDensity(1);
     // Optimization: Increase target frame rate.
     // p5.js often defaults to 60fps. On 75Hz+ screens, this causes frame skipping and judder.
     p.frameRate(144);