From 1da4636e1d88d48bcb0443285768c995c43083f7 Mon Sep 17 00:00:00 2001 From: Jeff Parsons Date: Wed, 4 May 2016 09:15:15 -0700 Subject: [PATCH] New blog post: The Sharpening --- _posts/2016-05-04-the-sharpening.md | 84 +++++++++++++++++++ .../ibm/ega/1984-09-13/128kb-autolockfs.xml | 1 + devices/pc8080/machine/invaders/machine.xml | 2 +- docs/pcjs/video/README.md | 10 ++- versions/c1pjs/1.22.0/common.xsl | 6 +- 5 files changed, 97 insertions(+), 6 deletions(-) create mode 100644 _posts/2016-05-04-the-sharpening.md diff --git a/_posts/2016-05-04-the-sharpening.md b/_posts/2016-05-04-the-sharpening.md new file mode 100644 index 000000000..0756a2878 --- /dev/null +++ b/_posts/2016-05-04-the-sharpening.md @@ -0,0 +1,84 @@ +--- +layout: post +title: The Sharpening +date: 2016-05-04 08:00:00 +permalink: /blog/2016/05/04/ +--- + +This was the week of The Sharpening. + +A month or two ago, I updated most of the machines to use higher-resolution "screens". For example, a typical +[EGA video configuration](/devices/pc/video/ibm/ega/1984-09-13/128kb-autolockfs.xml) 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 or its EGA card, 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" (ie, HTML canvas), +less interpolation is happening when a machine's fairly low-resolution 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](/devices/pc/machine/5160/ega/640kb/array/machine.xml) (used by the +[EGA Machine Array Demo](/devices/pc/machine/5160/ega/640kb/array/)) is limited to an overall *width* of 680 pixels, +no matter how large you make your browser window: + +```xml + +``` + +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*. + +Less interpolation is a good thing, if you want the screens to look less "fuzzy." Unfortunately, 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 already touched on, and an *off-screen* canvas -- also called the +*buffer* canvas, because it's where detected changes to the machine's frame buffer are, um, buffered. + +So to recap: the *buffer* canvas has the same dimensions as the machine's frame buffer, whereas the *screen* canvas +has generally higher dimensions, as defined by the video configuration, which your browser may then be stretching to +even higher dimensions, depending on your monitor resolution and browser size. + +Roughly 60 times per second, if anything has changed in the *buffer* canvas, it is copied to the *screen* canvas. +And that is where The Sharpening now occurs. + +All the browsers I've tested so far (ie, Chrome, Firefox, and Safari) support a +[Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) +[Context](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) property named +[imageSmoothingEnabled](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/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. I liked what I saw, so I added a new [Video](/docs/pcjs/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 matter of taste, because less fuzziness necessarily means more pixelation (ie, you +can see individual pixels more clearly). So I've also added a URL *smoothing* parameter that you can use to override +a machine's default setting; eg: + + http://www.pcjs.org/devices/pc8080/machine/invaders/?smoothing=true + +--- + +The *smoothing* property joins another recent [Video](/docs/pcjs/video/) property, *aspect*, that was added in a +[release](https://github.com/jeffpar/pcjs/releases/tag/v1.21.5) last month. + +To recap: aspect ratio is display width divided by display height, but the choice of aspect ratio is complicated by +the fact that none of the early IBM video card/monitor combinations (with the exception of the VGA) displayed square +pixels, and (with the exception of the MDA) they could display text and graphics at a variety of resolutions. + +So, for those users who either 1) don't like the aspect ratios that PCjs has chosen, or 2) just want to squeeze or +stretch a machine's screen a bit more, there is now an *aspect* parameter you can append to the URL of any page +containing one or more PCjs machines. + +For example: + + http://www.pcjs.org/disks/pc/dos/ibm/1.00/?aspect=2.0 + +will modify the height of the machine's screen to conform to the requested aspect ratio of 2.0. The screen should still +be responsive to any browser resizing while still retaining that aspect ratio. + +--- + +That's all for now. Work continues on the new [PC8080](/modules/pc8080/) component and +[Space Invaders](/devices/pc8080/machine/invaders/). More on that later, when it's finished. + +*[@jeffpar](http://twitter.com/jeffpar)* +*May 4, 2016* diff --git a/devices/pc/video/ibm/ega/1984-09-13/128kb-autolockfs.xml b/devices/pc/video/ibm/ega/1984-09-13/128kb-autolockfs.xml index 6573b57a0..a2924d916 100644 --- a/devices/pc/video/ibm/ega/1984-09-13/128kb-autolockfs.xml +++ b/devices/pc/video/ibm/ega/1984-09-13/128kb-autolockfs.xml @@ -8,6 +8,7 @@ But testing reveals that round images appear roundest when we stick with a screen size proportional to 640x350. Also note that 1280x700 produces crisper results than 640x350, and 2560x1400 is sharper still (at least when using Chrome). I'm going to split the difference and go with 1280x700. + UPDATE: With the new smoothing option (set to false), sharpness is even better (hopefully on all browsers). IBM Enhanced Color Display diff --git a/devices/pc8080/machine/invaders/machine.xml b/devices/pc8080/machine/invaders/machine.xml index 3c2ed75fa..01e6a1681 100644 --- a/devices/pc8080/machine/invaders/machine.xml +++ b/devices/pc8080/machine/invaders/machine.xml @@ -3,7 +3,7 @@ Space Invaders - + diff --git a/docs/pcjs/video/README.md b/docs/pcjs/video/README.md index 69cc1370d..d4129a446 100644 --- a/docs/pcjs/video/README.md +++ b/docs/pcjs/video/README.md @@ -48,14 +48,20 @@ Attributes The EGA uses font data stored in its system ROM, which is loaded by the ROM component, so do not use this setting with model "ega". + * *aspect* (optional) + + Defines an aspect ratio that overrides the default aspect (ie, width-to-height) ratio normally determined + by the *screenWidth* and *screenHeight* parameters; can also be present as a URL parameter. + * *scale* (optional; default is false) - true scales text modes to fill the canvas; + true scales text modes to fill the canvas (eg, scales 40-column modes to fill 80-column screens); false centers text modes on the canvas (this generally provides the sharpest rendering). * *smoothing* (optional; default depends on the browser) - true enables HTML5 canvas image smoothing, false disables it; if not specified, then the browser's default is used. + true enables HTML5 canvas image smoothing, false disables it (if not specified, the browser's default is used); + can also be present as a URL parameter. Also supports the attributes of *[Component](/docs/pcjs/component/)*. diff --git a/versions/c1pjs/1.22.0/common.xsl b/versions/c1pjs/1.22.0/common.xsl index 9d3c9a648..0ac8be741 100644 --- a/versions/c1pjs/1.22.0/common.xsl +++ b/versions/c1pjs/1.22.0/common.xsl @@ -30,10 +30,10 @@