h
Window and Coordinate Resizing
So we have seen how to draw the basic shapes and how to get user input to build some more interesting programs. Now let’s figure out how to modify our coordinate window and the physical window size.
Setting the Coordinate System
If you remember from before, our default coordinate system is (0, 0) in the bottom left corner, and (10, 10) in the top right corner.
We do have a function for changing the coordinate system:
win.coord(double ll_x, double ll_y, double ur_x, double ur_y);
Example:
- win.coord(0, 0, 10, 10); //Default coordinate system
- win.coord(0, 0, 50, 50);
- win.coord(-124.5, 76, 92.4, -33.7);
So for example three up there, our coordinate system would be this after that call:
So the first two values of win.coord(ll_x, ll_y, ur_x, ur_y) are the X and Y of the lower left corner of the coordinate system on the screen and the second two values are the X and Y of the upper left corner.
Changing the Screen Size
As you have probably noticed, our default physical window is a square:
The default size of our window is 500 pixels for the width and 500 pixels for the height.
If you ever want to change the size of your window, (not the coordinate system), you can use this function: win.set_window_size(int width, int height);
Example:
- win.set_window_size(500, 500); //Default window size
- win.set_window_size(800, 600);
- win.set_window_size(1280, 720);
If you are looking for a decent wide window size, standards like 800 x 600, 1024 x 768, 1280 x 720 are good sizes to use.
To get an idea of what resizing the window would do, here is what the window would look like after running the second example above (800 x 600):
Ut oh! The window looks bigger but the circle no longer looks correct. The reason is because we stretched the window without changing our coordinate system.
Choosing Coordinate Systems for Certain Window Sizes
To get the best results, you should use window sizes and coordinate sizes that are of the same ratio.
The reason the default window size and coordinate size look alright is because both are ratio 1 : 1.
- Default Coordinate System: 10 by 10. 10 / 10 => 1 / 1 => 1 : 1
- Default Window Size: 500 by 500. 500 / 500 => 1 / 1 => 1 : 1
Since both the coordinate system and window size are of the same ratio 1 : 1, everything drawn looks normal.
But why did it look stretched when we changed the window size to 800 x 600?
- Default Coordinate System: 10 by 10. 10 / 10 => 1 / 1 => 1 : 1
- New Window Size: 800 by 600. 800 / 600 => 4 / 3 => 4 : 3
The reason the circle looked stretched was because the coordinate size and window size had different ratios. 1 : 1 and 4 : 3
Solution? Choose a coordinate system that has the same ratio as your window.
win.coord(0, 0, 40, 30); //Change the coordinate system
- New Coordinate System: 40 by 30. 40 / 30 => 4 / 3 => 4 : 3
- New Window Size: 800 by 600. 800 / 600 => 4 / 3 => 4 : 3
Now our coordinate system and window size have the same ratio 4 : 3! Draw a circle in the center of our new coordinate system.
- win << Circle(Point(20, 15), 5, BLUE, true);
Viola! Everything looks normal again! So now you know how to change your coordinate window and your physical window size. And remember! Try to use the same ratios for both to make things draw proportionally correct!
- 
