When math is wrong

I have a device that has an HDMI connector and can output to monitor and I have the image that I need to be displayed at the center of the screen as big as possible while keeping its aspect ratio. The device can output a picture that is 1920 by 1080 and the image has resolution 640 by 480.

Effectively we need to find a single ratio that we will multiply the width and height of that image and that image will fill the whole vertical or horizontal space. It must be a single ratio because we need to keep the aspect ratio of the image and not stretch or shrink it in a single dimension.

Firstly, we divide 1920 by 640 and 1080 by 480 to find two ratios. The first one will be 3 and the second is 2.25. Obviously, if we multiply both dimensions by 3 or by 2.25 then the picture will be maximized on screen. But if we multiply the height of the image by 3 then the height of the picture will be 1440 and it obviously will not fit into the screen.

So we have to use the smallest aspect ratio – 2.25. In this case, the image will be stretched to 640 * 2.25 by 480 * 2.25 or 1440 by 1080. Clearly picture is maximized because it will take up the whole vertical space of the screen and it is also clear that we cannot stretch the image anymore because we will lose part of the picture if we want to keep the aspect ratio.

It took me way longer to explain this than to do it. Let's forget about placing the image in the center of the screen because we want to solve one problem at a time. I wrote code that scales the image from 640 by 480 to 1440 by 1080. I didn’t place any calculations and just put hardcoded values.

Typically you will use some function that does this for you and also typically it is very trivial and it is almost impossible to make a mistake there. Anyway, I called that function and then I saw my image on the screen. And it was stretched vertically.

Initially, I wasn’t sure so I created an image of a circle and then I measured the width and height of that picture of the screen with a piece of paper. I measured width, and put my finger there and then I measured height and it was clear that height was bigger than width.

Ok, it must be something simple, probably I mistyped something, even though I did my calculations in Excel and I can clearly see all the numbers. I double and triple-checked them, and then I used a regular calculator and I confirmed that the numbers were correct, but the screen still showed a stretched image. I double-checked the parameters to scale function but it was so trivial that it is impossible to make a mistake. But I still double-checked that I placed the width in the place of the width parameter and the same for the height.

Then I checked what resolution the device was rendering and it was 1920 by 1080. I even confirmed with the monitor because it displays the current resolution in its menu. Then I rendered a rectangle that starts at (0, 0) and has a width of 1920 and a height of 1080. It was exactly at the edge of the screen. Then I double-checked that the image was 640 by 480 and it was.

Magic. Then I asked somebody else to do calculations without looking at my number. It is useful because sometimes numbers can deceive and the second person will make exactly the same mistake. In this case, it is much better if they calculate everything on their own. Anyway, the second person got exactly the same numbers. We spent a little bit of time arguing about the source of the problem but we both had to switch to a different task.

And after a few hours, I got an eureka moment. While my device outputs 1920 by 1080, we don’t have monitors like that because they are quite bad for software developers. All our monitors are at least 1920 by 1200. So effectively my monitor was stretching the picture vertically.

And here is a lesson. I checked the device output format, I checked that my monitor displaying that resolution and I also checked the dimensions of the image. I thought I checked everything but I didn’t check the monitor’s native resolution and I missed the fact that it does upscaling. Silly me.

I hope it helps someone.