The Sharpening

This was the week of The Sharpening.

A while back, I updated most of the machines to use higher-resolution "screens". For example, a typical EGA video configuration now specifies a screenWidth of 1280 and screenHeight of 700, dimensions which are exactly twice the standard EGA resolution.

That change had no effect on the machine's operation, but it did improve the machine's appearance, because most people are using much higher resolution monitors today, so by using a higher-resolution "screen" (canvas), less interpolation is happening when a machine's screen image is scaled up to fill your browser window.

The amount of scaling also depends on whether the machine allows itself to be stretched to fill the browser window. For example, this machine (used by the EGA Machine Array Demo) is limited to an overall width of 680 pixels, no matter how large you make your browser window:

<machine id="ibm5160" class="pc" border="1" width="680px" float="left" background="#FAEBD7">

but most machines don't specify a (maximum) overall width, so their screen canvas is allowed to stretch far beyond the initial screenWidth and screenHeight, thanks to some additional CSS settings.

Larger screens mean less interpolation, which is a good thing if you want the screens to look less "fuzzy." However, interpolation also happens at a deeper level, because internally, PCjs uses two canvases to move pixels from the machine's frame buffer to your browser: the screen canvas, which I've already discussed, and another canvas called the buffer canvas, where changes to the machine's frame buffer are, um, buffered.

The buffer canvas has the same dimensions as the machine's frame buffer, whereas the screen canvas has generally higher dimensions (as explained above), which your browser may then be stretching to even higher dimensions, depending on your monitor resolution and browser size.

The differential between the buffer canvas and screen canvas is where additional interpolation (fuzziness) creeps in. That is where The Sharpening now occurs.

All the browsers I've tested so far (Chrome, Firefox, and Safari) support a Canvas Context property named imageSmoothingEnabled, which eliminates much of the fuzziness that would occur when copying pixels from the lower-resolution buffer canvas to the higher-resolution screen canvas.

So I've added a new Video property named smoothing that can be set to "true" or "false", and I've set it to "false" for most machines in the project. If smoothing is not set, your browser continues to use its default interpolation method.

For some people, this might be a matter of taste, because less fuzziness necessarily means more pixelation (ie, you can see individual pixels more clearly), which becomes more noticeable when switching a machine Full Screen. So I've also added a URL smoothing parameter you can use to override a machine's default setting; eg:

http://www.pcjs.org/devices/pc8080/machine/invaders/?smoothing=true