Dynamic Viewport Calculation

World Space vs. Screen Space: The Two Realities

First, we need to establish a core concept in any kind of rendering or visualization: the distinction between two coordinate systems.

• World Space (or Data Space): This is the coordinate system of your entire dataset. For our plotter, the x-axis represents the sample index (or timestamp), stretching from 0 to potentially millions. The y-axis represents the measured value. This is the "world" that our data lives in.
• Screen Space (or Viewport Space): This is the pixel-based coordinate system of the canvas or window where you are drawing. The x-axis goes from 0 to the canvas width, and the y-axis from 0 to the canvas height. This is the "camera lens" through which we view the world.

Our task is to define a mathematical mapping between these two spaces. Panning and zooming are simply operations that modify this mapping.

To get a clearer sense of these concepts, let's start with a foundational article.

The Mathematics of Transformation

To manage the mapping between world and screen space, we need two key state variables:

1. pan (or offset): An (x, y) vector that represents how much we've shifted our view. This corresponds to the top-left corner of our view in world coordinates.
2. zoom (or scale): An (x, y) scalar or vector that controls the magnification level. A larger scale value means we're more "zoomed in".

With these, we can define two fundamental transformation functions:

• World-to-Screen: screen_pos = (world_pos - pan) * zoom
• Screen-to-World: world_pos = (screen_pos / zoom) + pan

These equations are the heart of our interactive plot. The world-to-screen function will be used for drawing, while the screen-to-world function is what we'll use today to determine what is visible. The article you just read summarizes these equations nicely.

Implementing Panning and Zooming

Now let's see how to apply these concepts in practice. A fantastic video by javidx9 walks through building exactly this kind of system from scratch. We will use it as our guide.

First, watch this segment where the presenter introduces the concepts and implements basic panning.

As you saw, panning is relatively straightforward: the change in mouse position on the screen is used to update the world offset.

Zooming, however, introduces a classic problem. If you simply change the zoom variable, the view appears to "shoot away" from the mouse cursor, zooming towards the world origin (0,0). This is disorienting and not what users expect.

The Key: Mouse-Centered Zoom

To fix this, we need to ensure that the point in the world that is under the mouse cursor remains under the mouse cursor after the zoom. This creates a stable anchor point for the user.

The algorithm to achieve this is clever and essential:

1. Get the current mouse position in screen space.
2. Use our screenToWorld function to find out which world coordinate is under the mouse before we zoom. Let's call this world_pos_before.
3. Apply the zoom: update the zoom variable based on the mouse wheel scroll (zoom *= zoom_factor).
4. Now that zoom has changed, our screenToWorld function will give a different result. Use it again with the same screen position to find the new world coordinate under the mouse after the zoom. Let's call this world_pos_after.
5. The view has drifted. The world point that was at our cursor is now somewhere else. The difference, drift = world_pos_before - world_pos_after, tells us exactly how much we need to adjust our pan to counteract this drift.
6. Update the pan: pan += drift.

This sequence ensures the world "expands" or "contracts" around your mouse cursor. The following video segment explains and implements this perfectly.

To see this exact logic implemented in C++ using ImGui (which you'll be using), a Stack Overflow answer provides a beautifully concise example.

Finally: Calculating the Visible Data Range

Now that we have a robust transformation system, we can answer our original question: which data indices are visible on screen?

The visible data indices are simply the world-space x-coordinates that correspond to the left and right edges of our screen canvas. We can find them by using our screenToWorld function on the screen-space coordinates of the canvas corners.

Let's say our ImGui canvas starts at screen coordinate canvas_pos and has size canvas_size.

1. Find the world coordinate of the left edge:
   world_pos_left = screenToWorld(canvas_pos)
2. Find the world coordinate of the right edge:
   world_pos_right = screenToWorld({canvas_pos.x + canvas_size.x, canvas_pos.y})

The x-components of these two vectors, world_pos_left.x and world_pos_right.x, define the continuous range of data indices visible on screen.

To turn this into the discrete indices l and r for our MinMaxTree query, we do the following:

// Assume data_size is the total number of points in our dataset
float visible_start_f = world_pos_left.x;
float visible_end_f = world_pos_right.x;

// Convert to integer indices and clamp to the valid range of our data array
size_t l = std::max(0, static_cast<int>(floor(visible_start_f)));
size_t r = std::min(data_size - 1, static_cast<size_t>(ceil(visible_end_f)));

// Now we can query our tree!
if (l <= r) {
    MinMaxNode visible_range_data = min_max_tree.getMinMaxInRange(l, r);
    // ... use this to draw the plot
}

This final step connects our interactive controls directly to our optimized data structure.

Conclusion

Great job! This lesson was heavy on concepts and mathematics, but you've navigated it well. This is the logic that powers everything from 2D game cameras to CAD software to high-performance plotting tools.

Key Takeaways:

• Visualizations operate in two coordinate systems: World Space (for the data) and Screen Space (for the pixels).
• The transformation between them is controlled by pan (offset) and zoom (scale).
• screen_pos = (world_pos - pan) * zoom
• world_pos = (screen_pos / zoom) + pan
• Mouse-centered zoom is achieved by calculating the world-space "drift" caused by a change in zoom and correcting the pan accordingly.
• The visible data range [l, r] is found by applying the screenToWorld transformation to the left and right edges of your canvas.

What's Next?

We've come a long way. We have our MinMaxTree to query data efficiently, and now we know which slice of data to query based on user input.

But there's one final piece to the puzzle. If the visible range [l, r] still contains 10,000 data points but the canvas is only 800 pixels wide, we still can't just draw 10,000 points. In the next lesson, we will solve this. We'll learn how to implement a decimation algorithm to select representative points based on screen resolution. This algorithm will use our MinMaxTree to intelligently reduce the number of points we draw while preserving the visual characteristics of the data.