Retro/pcjs
Watch
1
0
Fork
You've already forked pcjs
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New blog post: The Sharpening

Browse source
This commit is contained in:
Jeff Parsons 2016-05-04 09:15:15 -07:00
commit 1da4636e1d
5 changed files with 97 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

84
_posts/2016-05-04-the-sharpening.md Normal file
View file

@ -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
<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*.
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*

1
devices/pc/video/ibm/ega/1984-09-13/128kb-autolockfs.xml
View file

@ -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).
</comment>
<menu>
<title>IBM Enhanced Color Display</title>

2
devices/pc8080/machine/invaders/machine.xml
View file

@ -3,7 +3,7 @@
<machine id="invaders" class="pc8080" border="1" pos="center" background="#FAEBD7">
<name pos="center">Space Invaders</name>
<computer id="computer" busWidth="16"/>
<cpu id="cpu8080" model="8080" cycles="2000000"/>
<cpu id="cpu8080" model="8080" cycles="2000000" autoStart="true"/>
<rom id="romH" addr="0x0000" size="0x0800" file="/devices/pc8080/rom/invaders/INVADERS-H.json"/>
<rom id="romG" addr="0x0800" size="0x0800" file="/devices/pc8080/rom/invaders/INVADERS-G.json"/>
<rom id="romF" addr="0x1000" size="0x0800" file="/devices/pc8080/rom/invaders/INVADERS-F.json"/>

10
docs/pcjs/video/README.md
View file

@ -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/)*.

6
versions/c1pjs/1.22.0/common.xsl
View file

@ -30,10 +30,10 @@
<div class="common-top">
<div class="common-top-left">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/apps/pc/">Apps</a></li>
<li><a href="/">PCjs</a></li>
<li><a href="/apps/pc/">Demos</a></li>
<li><a href="/devices/">Devices</a></li>
<li><a href="/disks/pc/">Disks</a></li>
<li><a href="/devices/pc/machine/">Machines</a></li>
<li><a href="/docs/">Docs</a></li>
<li><a href="/pubs/">Pubs</a></li>
<li><a href="/blog/">Blog</a></li>