Browse Source

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.
refactor/sync-centralize
RUSHIL AMBARISH KADU 2 months ago
parent
commit
d5f7ef02f7
  1. 3
      steps/src/p5/radarSketch.js
  2. 3
      steps/src/p5/zoomSketch.js

3
steps/src/p5/radarSketch.js

@ -90,6 +90,9 @@ export const radarSketch = function (p) {
} }
p.setup = function () { 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 // Create the p5.js canvas and attach it to the specified DOM element
let canvas = p.createCanvas( let canvas = p.createCanvas(
canvasContainer.offsetWidth, canvasContainer.offsetWidth,

3
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) appState.zoomLeadFactor = 0.2; // Control how much the circle "leads" the camera (0.0 = smooth, 1.0 = instant)
p.setup = function () { 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. // Optimization: Increase target frame rate.
// p5.js often defaults to 60fps. On 75Hz+ screens, this causes frame skipping and judder. // p5.js often defaults to 60fps. On 75Hz+ screens, this causes frame skipping and judder.
p.frameRate(144); p.frameRate(144);

Loading…
Cancel
Save