jsbeeb 1.14.0 → 1.16.0

package/src/canvas.js

@@ -2,10 +2,12 @@
 import webglDebug from "./lib/webgl-debug.js";
 import { PALCompositeFilter } from "./video-filters/pal-composite.js";
 import { PassthroughFilter } from "./video-filters/passthrough-filter.js";
+import { XbrFilter } from "./video-filters/xbr-filter.js";
 
 const DISPLAY_MODE_FILTERS = {
     pal: PALCompositeFilter,
     rgb: PassthroughFilter,
+    xbr: XbrFilter,
 };
 
 export function getFilterForMode(mode) {
@@ -13,8 +15,9 @@ export function getFilterForMode(mode) {
 }
 
 export class Canvas {
-    isWebGl() {
-        return false;
+    /** The 2D canvas draws the framebuffer as-is, which is what this filter is. */
+    get filterClass() {
+        return PassthroughFilter;
     }
 
     constructor(canvas) {
@@ -27,24 +30,29 @@ export class Canvas {
         this.backBuffer.height = 625;
         this.backCtx = this.backBuffer.getContext("2d", { alpha: false });
         this.imageData = this.backCtx.createImageData(this.backBuffer.width, this.backBuffer.height);
-        this.canvasWidth = canvas.width;
-        this.canvasHeight = canvas.height;
+        this.canvas = canvas;
 
         this.fb32 = new Uint32Array(this.imageData.data.buffer);
     }
-    paint(minx, miny, maxx, maxy, _frameCount) {
+
+    /** Nothing to release: the 2D context owns no objects of ours. */
+    dispose() {}
+
+    paint(minx, miny, maxx, maxy, _frame) {
         const width = maxx - minx;
         const height = maxy - miny;
         this.backCtx.putImageData(this.imageData, 0, 0, minx, miny, width, height);
-        this.ctx.drawImage(this.backBuffer, minx, miny, width, height, 0, 0, this.canvasWidth, this.canvasHeight);
+        // Read the size each time: it can change when the window is resized.
+        this.ctx.drawImage(this.backBuffer, minx, miny, width, height, 0, 0, this.canvas.width, this.canvas.height);
     }
 }
 
 const width = 1024;
 const height = 1024;
 export class GlCanvas {
-    isWebGl() {
-        return true;
+    /** The filter actually built, which may not be the one that was asked for. */
+    get filterClass() {
+        return this.filter.constructor;
     }
 
     constructor(canvas, filterClass) {
@@ -74,6 +82,10 @@ export class GlCanvas {
         const program = this.filter.program;
         checkedGl.useProgram(program);
 
+        // Filters that pick their own samples want the texels they asked for,
+        // not a hardware blend of the ones either side.
+        const sampling = filterClass.getDisplayConfig().nearestSampling ? checkedGl.NEAREST : checkedGl.LINEAR;
+
         this.fb8 = new Uint8Array(width * height * 4);
         this.fb32 = new Uint32Array(this.fb8.buffer);
         this.texture = checkedGl.createTexture();
@@ -81,8 +93,8 @@ export class GlCanvas {
         checkedGl.pixelStorei(checkedGl.UNPACK_ALIGNMENT, 4);
         checkedGl.texParameteri(checkedGl.TEXTURE_2D, checkedGl.TEXTURE_WRAP_S, checkedGl.CLAMP_TO_EDGE);
         checkedGl.texParameteri(checkedGl.TEXTURE_2D, checkedGl.TEXTURE_WRAP_T, checkedGl.CLAMP_TO_EDGE);
-        checkedGl.texParameteri(checkedGl.TEXTURE_2D, checkedGl.TEXTURE_MAG_FILTER, checkedGl.LINEAR);
-        checkedGl.texParameteri(checkedGl.TEXTURE_2D, checkedGl.TEXTURE_MIN_FILTER, checkedGl.LINEAR);
+        checkedGl.texParameteri(checkedGl.TEXTURE_2D, checkedGl.TEXTURE_MAG_FILTER, sampling);
+        checkedGl.texParameteri(checkedGl.TEXTURE_2D, checkedGl.TEXTURE_MIN_FILTER, sampling);
         checkedGl.texImage2D(
             checkedGl.TEXTURE_2D,
             0,
@@ -98,8 +110,8 @@ export class GlCanvas {
 
         const vertexPositionAttrLoc = checkedGl.getAttribLocation(program, "pos");
         checkedGl.enableVertexAttribArray(vertexPositionAttrLoc);
-        const vertexPositionBuffer = checkedGl.createBuffer();
-        checkedGl.bindBuffer(checkedGl.ARRAY_BUFFER, vertexPositionBuffer);
+        this.vertexPositionBuffer = checkedGl.createBuffer();
+        checkedGl.bindBuffer(checkedGl.ARRAY_BUFFER, this.vertexPositionBuffer);
         checkedGl.bufferData(checkedGl.ARRAY_BUFFER, new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]), checkedGl.STATIC_DRAW);
         checkedGl.vertexAttribPointer(vertexPositionAttrLoc, 2, checkedGl.FLOAT, false, 0, 0);
 
@@ -112,14 +124,42 @@ export class GlCanvas {
         checkedGl.activeTexture(gl.TEXTURE0);
         checkedGl.bindTexture(gl.TEXTURE_2D, this.texture);
 
+        this.checkedGl = checkedGl;
+        this.viewportWidth = this.viewportHeight = 0;
         this.uvFloatArray = new Float32Array(8);
         this.lastExtent = {};
 
         console.log("GL Canvas set up");
     }
 
-    paint(minx, miny, maxx, maxy, frameCount) {
+    /**
+     * Release the GL objects this canvas owns.
+     *
+     * Switching display mode builds a new canvas over the same element, and a
+     * canvas only ever hands out one WebGL context — so the new one inherits
+     * the old one's context and the old one's objects stay resident unless
+     * they are deleted here. That is a megabytes-per-switch leak: the
+     * framebuffer texture alone is 1024x1024 RGBA.
+     */
+    dispose() {
+        const gl = this.checkedGl;
+        this.filter.dispose();
+        gl.deleteTexture(this.texture);
+        gl.deleteBuffer(this.vertexPositionBuffer);
+        gl.deleteBuffer(this.uvBuffer);
+        this.texture = this.vertexPositionBuffer = this.uvBuffer = null;
+    }
+
+    paint(minx, miny, maxx, maxy, frame) {
         const gl = this.gl;
+        // The drawing buffer can be resized under us — modes that scale to the
+        // display do it on every window resize — and the viewport does not
+        // follow it.
+        if (gl.drawingBufferWidth !== this.viewportWidth || gl.drawingBufferHeight !== this.viewportHeight) {
+            this.viewportWidth = gl.drawingBufferWidth;
+            this.viewportHeight = gl.drawingBufferHeight;
+            gl.viewport(0, 0, this.viewportWidth, this.viewportHeight);
+        }
         // We can't specify a stride for the source, so have to use the full width.
         gl.texSubImage2D(
             gl.TEXTURE_2D,
@@ -157,7 +197,17 @@ export class GlCanvas {
             gl.bufferData(gl.ARRAY_BUFFER, this.uvFloatArray, gl.DYNAMIC_DRAW);
         }
 
-        this.filter.setUniforms({ width, height, frameCount });
+        this.filter.setUniforms({
+            width,
+            height,
+            frameCount: frame.frameCount,
+            lineGrid: frame.lineGrid,
+            // How much of the framebuffer each output pixel covers, which sets
+            // how wide an edge-smoothing ramp should be. `extent` holds texel
+            // counts; the scaling into texture coordinates above applies only
+            // to the local copies that go into the UV buffer.
+            texelsPerOutputPixel: (extent.maxx - extent.minx) / gl.drawingBufferWidth,
+        });
 
         gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
     }
@@ -167,11 +217,20 @@ export function bestCanvas(canvas, filterClass) {
     try {
         return new GlCanvas(canvas, filterClass);
     } catch (e) {
-        console.log("Unable to use OpenGL: " + e);
-        if (filterClass.requiresGl()) {
-            const config = filterClass.getDisplayConfig();
-            console.warn(`${config.name} requires WebGL. Falling back to standard 2D canvas.`);
+        // Either WebGL is unavailable or this particular filter declined it.
+        console.log(`Unable to use ${filterClass.getDisplayConfig().name} with WebGL: ${e}`);
+    }
+
+    // A canvas that has handed out a WebGL context can never hand out a 2D one,
+    // so if the failure came from the filter rather than from WebGL itself, the
+    // 2D fallback below would throw and take the emulator with it.
+    if (filterClass !== PassthroughFilter) {
+        try {
+            return new GlCanvas(canvas, PassthroughFilter);
+        } catch (e) {
+            console.log("Unable to fall back to the passthrough filter: " + e);
         }
     }
+
     return new Canvas(canvas);
 }

package/src/config.js

@@ -1,7 +1,14 @@
 "use strict";
-import { allModels, findModel } from "./models.js";
+import { allModels, findModel, tubeModelFor } from "./models.js";
 import { getFilterForMode } from "./canvas.js";
 
+const round = (value) => Number(value.toFixed(2));
+
+/** @returns {string} the speed a multiplier gives this machine's co-processor, e.g. "1.6x (4.8MHz)". */
+export function tubeCpuSpeedLabel(multiplier, model) {
+    return `${round(multiplier)}x (${round(multiplier * tubeModelFor(model).clockMhz)}MHz)`;
+}
+
 /**
  * The sideways ROMs the optional fittings need, in the order they claim banks.
  *
@@ -100,6 +107,7 @@ export class Config extends EventTarget {
             if (!link) return;
             this.changed.model = link.dataset.target;
             this.setDropdownText(link.textContent);
+            this.showTubeCpuMultiplier(this.tubeCpuMultiplier, findModel(link.dataset.target));
             this.showRestartPending();
         });
 
@@ -113,8 +121,8 @@ export class Config extends EventTarget {
         }
 
         document.getElementById("tubeCpuMultiplier").addEventListener("input", () => {
-            const val = parseInt(document.getElementById("tubeCpuMultiplier").value, 10);
-            document.getElementById("tubeCpuMultiplierValue").textContent = val;
+            const val = parseFloat(document.getElementById("tubeCpuMultiplier").value);
+            this.showTubeCpuMultiplier(val);
             this.changed.tubeCpuMultiplier = val;
         });
 
@@ -193,7 +201,11 @@ export class Config extends EventTarget {
     setTubeCpuMultiplier(value) {
         this.tubeCpuMultiplier = value;
         document.getElementById("tubeCpuMultiplier").value = value;
-        document.getElementById("tubeCpuMultiplierValue").textContent = value;
+        this.showTubeCpuMultiplier(value);
+    }
+
+    showTubeCpuMultiplier(value, model = this.model) {
+        document.getElementById("tubeCpuMultiplierValue").textContent = tubeCpuSpeedLabel(value, model);
     }
 
     setDropdownText(modelName) {

package/src/disc-drive.js

@@ -33,6 +33,11 @@ export class BaseDiscDrive extends EventTarget {
         throw new Error("Not implemented: headPosition getter");
     }
 
+    /** @returns {boolean} */
+    get isSideUpper() {
+        throw new Error("Not implemented: isSideUpper getter");
+    }
+
     /** @returns {boolean} */
     get indexPulse() {
         throw new Error("Not implemented: indexPulse getter");
@@ -240,6 +245,10 @@ export class DiscDrive extends BaseDiscDrive {
         return this._track;
     }
 
+    get isSideUpper() {
+        return this._isSideUpper;
+    }
+
     get positionFraction() {
         return (this._headPosition + this._pulsePosition / 32) / this.trackLength;
     }

package/src/disc-hfe.js

@@ -190,9 +190,8 @@ export function loadHfe(disc, data, onChange) {
         }
     }
 
-    // Set up write track callback if onChange is provided
     if (onChange) {
-        disc.setWriteTrackCallback((_side, _trackNum, _trackObj) => {
+        disc.addTrackWriteListener((_side, _trackNum, _trackObj) => {
             // Generate a complete HFE image from the current disc state
             const hfeData = toHfe(disc);
             // Call the onChange handler with the updated HFE data

package/src/disc-surface.js

@@ -0,0 +1,350 @@
+"use strict";
+
+// Pure geometry and colour mapping, free of the DOM; disc-visualiser.js owns the canvases.
+
+import { IbmDiscFormat } from "./disc.js";
+
+/** One FM byte, or two MFM bytes; 2us a slot. */
+export const PulsesPerWord = 32;
+
+/**
+ * Both FM and MFM put between eight and sixteen flux transitions in a formatted word, so the ramp
+ * spans exactly that and gets one step per count.
+ */
+export const MinDensity = 8;
+export const MaxDensity = 16;
+
+/** Dark to light, for a dark surface. */
+export const DensityRampHex = [
+    "#1c5cab",
+    "#256abf",
+    "#2a78d6",
+    "#3987e5",
+    "#5598e7",
+    "#6da7ec",
+    "#86b6ef",
+    "#9ec5f4",
+    "#cde2fb",
+];
+
+export const UnformattedHex = "#2a2a28";
+
+export const Region = {
+    Unformatted: 0,
+    Gap: 1,
+    Header: 2,
+    Data: 3,
+    Deleted: 4,
+};
+
+/**
+ * Indexed by {@link Region}. Gap and unformatted are recessive neutrals; header, data and deleted
+ * carry identity.
+ */
+export const RegionStyles = [
+    { name: "unformatted", hex: UnformattedHex },
+    { name: "gap", hex: "#3f3f3c" },
+    { name: "header", hex: "#d95926" },
+    { name: "data", hex: "#3987e5" },
+    { name: "deleted data", hex: "#199e70" },
+];
+
+/** Reserved status colour, never used as a fill. */
+export const ErrorHex = "#d03b3b";
+
+/** Canvas pixel buffers are little-endian ABGR, as in bbc-palette.js. */
+function hexToAbgr(hex) {
+    const value = parseInt(hex.slice(1), 16);
+    const r = (value >>> 16) & 0xff;
+    const g = (value >>> 8) & 0xff;
+    const b = value & 0xff;
+    return ((0xff << 24) | (b << 16) | (g << 8) | r) >>> 0;
+}
+
+const UnformattedColour = hexToAbgr(UnformattedHex);
+
+/** Indexed by pulse count. */
+export const DensityPalette = Uint32Array.from({ length: PulsesPerWord + 1 }, (_, density) => {
+    if (density === 0) return UnformattedColour;
+    const step = Math.min(Math.max(density - MinDensity, 0), DensityRampHex.length - 1);
+    return hexToAbgr(DensityRampHex[step]);
+});
+
+export const RegionPalette = Uint32Array.from(RegionStyles, ({ hex }) => hexToAbgr(hex));
+
+/**
+ * @param {number} pulses one word of surface data
+ * @returns {number} flux transitions it holds
+ */
+export function pulseDensity(pulses) {
+    let bits = pulses - ((pulses >>> 1) & 0x55555555);
+    bits = (bits & 0x33333333) + ((bits >>> 2) & 0x33333333);
+    return (((bits + (bits >>> 4)) & 0x0f0f0f0f) * 0x01010101) >>> 24;
+}
+
+/**
+ * @param {Track} track
+ * @returns {Uint8Array} flux transitions in each word of the track
+ */
+export function trackPulseDensity(track) {
+    const density = new Uint8Array(track.length);
+    for (let word = 0; word < track.length; ++word) density[word] = pulseDensity(track.pulses2Us[word]);
+    return density;
+}
+
+/** Address mark aside, a sector header is four bytes of identity and two of CRC. */
+const HeaderBytes = 6;
+const CrcBytes = 2;
+
+/**
+ * Pick the sectors out of a track and say what each word of it holds.
+ *
+ * @param {Track} track
+ * @param {function(string): void} [warn] where to send the decoder's complaints
+ * @returns {{codes: Uint8Array, sectorNumbers: Int16Array, errors: {firstWord: number, lastWord: number, kind: string, sectorNumber: number}[]}}
+ */
+export function trackRegions(track, warn) {
+    const codes = new Uint8Array(track.length);
+    const sectorNumbers = new Int16Array(track.length).fill(-1);
+    const errors = [];
+    for (let word = 0; word < track.length; ++word)
+        codes[word] = track.pulses2Us[word] === 0 ? Region.Unformatted : Region.Gap;
+
+    /** Marks the words a bit range covers, wrapping at the index. */
+    const fill = (startBit, endBit, code, sectorNumber) => {
+        for (let word = Math.floor(startBit / PulsesPerWord); word < Math.ceil(endBit / PulsesPerWord); ++word) {
+            const index = ((word % track.length) + track.length) % track.length;
+            codes[index] = code;
+            sectorNumbers[index] = sectorNumber;
+        }
+    };
+
+    for (const sector of track.findSectors(warn)) {
+        const pulsesPerByte = sector.isMfm ? PulsesPerWord / 2 : PulsesPerWord;
+        const noteError = (kind, startBit, endBit) =>
+            errors.push({
+                firstWord: Math.floor(startBit / PulsesPerWord) % track.length,
+                lastWord: Math.ceil(endBit / PulsesPerWord) % track.length,
+                kind,
+                sectorNumber: sector.sectorNumber,
+            });
+
+        // A region starts at its address mark, which sits one byte before the offset the reader
+        // was handed.
+        const idStart = sector.idPosBitOffset - pulsesPerByte;
+        const idEnd = sector.idPosBitOffset + HeaderBytes * pulsesPerByte;
+        fill(idStart, idEnd, Region.Header, sector.sectorNumber);
+        if (sector.hasHeaderCrcError) noteError("header CRC", idStart, idEnd);
+
+        if (sector.dataPosBitOffset === null) continue;
+        // A failed CRC leaves no confirmed length, so fall back to what the header claimed.
+        const bytes = sector.byteLength ?? 128 << Math.min(sector.header[3], 4);
+        const dataStart = sector.dataPosBitOffset - pulsesPerByte;
+        const dataEnd = sector.dataPosBitOffset + (bytes + CrcBytes) * pulsesPerByte;
+        const code = sector.isDeleted ? Region.Deleted : Region.Data;
+        fill(dataStart, dataEnd, code, sector.sectorNumber);
+        if (sector.hasDataCrcError) noteError("data CRC", dataStart, dataEnd);
+    }
+    return { codes, sectorNumbers, errors };
+}
+
+/** Enough to fill the view with a couple of tracks. */
+export const MaxZoom = 32;
+
+export const clampZoom = (zoom) => Math.min(Math.max(zoom, 1), MaxZoom);
+
+const OuterRadiusFraction = 0.97;
+const InnerRadiusFraction = 0.36;
+const HubRadiusFraction = 0.26;
+
+/**
+ * Maps between a square canvas and the surface of a disc drawn on it. Disc space is the canvas at
+ * rest, with the platter filling a `size` square; zoom and pan move the canvas over it.
+ */
+export class DiscGeometry {
+    /**
+     * @param {number} size canvas edge in device pixels
+     * @param {number} numTracks
+     */
+    constructor(size, numTracks = IbmDiscFormat.tracksPerDisc) {
+        this.size = size;
+        this.numTracks = numTracks;
+        this.centre = size / 2;
+        this.outerRadius = this.centre * OuterRadiusFraction;
+        this.innerRadius = this.centre * InnerRadiusFraction;
+        this.hubRadius = this.centre * HubRadiusFraction;
+        this.trackPitch = (this.outerRadius - this.innerRadius) / numTracks;
+        this.zoom = 1;
+        this.originX = 0;
+        this.originY = 0;
+    }
+
+    /**
+     * @param {number} zoom canvas pixels per disc pixel, at least 1
+     * @param {number} originX disc-space coordinate shown at the canvas's left edge
+     * @param {number} originY disc-space coordinate shown at the canvas's top edge
+     */
+    setView(zoom, originX, originY) {
+        this.zoom = clampZoom(zoom);
+        // Holding the window inside the platter's square keeps the disc from being panned away.
+        const slack = this.size - this.size / this.zoom;
+        this.originX = Math.min(Math.max(originX, 0), slack);
+        this.originY = Math.min(Math.max(originY, 0), slack);
+        return this;
+    }
+
+    /** The origin is in disc pixels, which scale with the canvas. */
+    adoptView({ zoom, originX, originY, size }) {
+        return this.setView(zoom, (originX * this.size) / size, (originY * this.size) / size);
+    }
+
+    toDisc(x, y) {
+        return { x: x / this.zoom + this.originX, y: y / this.zoom + this.originY };
+    }
+
+    get screenCentreX() {
+        return (this.centre - this.originX) * this.zoom;
+    }
+
+    get screenCentreY() {
+        return (this.centre - this.originY) * this.zoom;
+    }
+
+    screenRadiusOf(track) {
+        return this.radiusOf(track) * this.zoom;
+    }
+
+    /** Track 0 is the outermost, as on the real thing. */
+    trackAt(radius) {
+        const track = Math.floor((this.outerRadius - radius) / this.trackPitch);
+        return track >= 0 && track < this.numTracks ? track : null;
+    }
+
+    radiusOf(track) {
+        return this.outerRadius - (track + 0.5) * this.trackPitch;
+    }
+
+    /** Index sits at twelve o'clock, with the surface running clockwise from there. */
+    angleOf(fraction) {
+        return fraction * 2 * Math.PI - Math.PI / 2;
+    }
+
+    /**
+     * @param {number} dx offset from the centre
+     * @param {number} dy offset from the centre
+     * @returns {number} how far round from the index, in [0, 1)
+     */
+    fractionAt(dx, dy) {
+        const fraction = (Math.atan2(dy, dx) + Math.PI / 2) / (2 * Math.PI);
+        return fraction - Math.floor(fraction);
+    }
+
+    /** @returns {{x: number, y: number}} where on the canvas that point of the surface is drawn */
+    pointAt(track, fraction) {
+        const angle = this.angleOf(fraction);
+        const radius = this.screenRadiusOf(track);
+        return { x: this.screenCentreX + radius * Math.cos(angle), y: this.screenCentreY + radius * Math.sin(angle) };
+    }
+
+    /**
+     * @returns {{track: number, fraction: number}|null} what the surface holds under a canvas point
+     */
+    positionAt(x, y) {
+        const disc = this.toDisc(x, y);
+        const dx = disc.x - this.centre;
+        const dy = disc.y - this.centre;
+        const track = this.trackAt(Math.hypot(dx, dy));
+        return track === null ? null : { track, fraction: this.fractionAt(dx, dy) };
+    }
+}
+
+const Supersample = 2;
+const InvTwoPi = 1 / (2 * Math.PI);
+
+/** Math.hypot's overflow scaling is pure cost at canvas coordinates, and this is the hot path. */
+function distance(dx, dy) {
+    return Math.sqrt(dx * dx + dy * dy);
+}
+
+/**
+ * Paint a range of tracks into a square ABGR pixel buffer. Only pixels whose centres fall in the
+ * band those tracks occupy are written.
+ *
+ * @param {Uint32Array} pixels size * size ABGR pixels
+ * @param {DiscGeometry} geometry
+ * @param {(Uint8Array|null)[]} codes one value per word, indexed by track
+ * @param {Uint32Array} palette ABGR for each code
+ * @param {number} firstTrack
+ * @param {number} lastTrack inclusive
+ * @param {number} [supersample] samples per pixel edge; 1 trades the smoothed edges for speed
+ */
+export function renderTracks(pixels, geometry, codes, palette, firstTrack, lastTrack, supersample = Supersample) {
+    const { size, outerRadius, trackPitch, numTracks, zoom } = geometry;
+    // Work in canvas pixels throughout: zooming and panning scale and shift the radius, and leave
+    // the angle alone.
+    const centreX = geometry.screenCentreX;
+    const centreY = geometry.screenCentreY;
+    const bandOuter = (outerRadius - firstTrack * trackPitch) * zoom;
+    const bandInner = (outerRadius - (lastTrack + 1) * trackPitch) * zoom;
+    const bandOuterSquared = bandOuter * bandOuter;
+    const bandInnerSquared = bandInner * bandInner;
+    const samplesPerPixel = supersample * supersample;
+    const subStep = 1 / supersample;
+
+    /** @returns {number} the pixel's ABGR, averaged over its samples, or zero if no track covers it */
+    const samplePixel = (x, y) => {
+        let covered = 0;
+        let red = 0;
+        let green = 0;
+        let blue = 0;
+        for (let subY = 0; subY < supersample; ++subY) {
+            const sampleY = y + (subY + 0.5) * subStep - centreY;
+            for (let subX = 0; subX < supersample; ++subX) {
+                const sampleX = x + (subX + 0.5) * subStep - centreX;
+                const at = (outerRadius - distance(sampleX, sampleY) / zoom) / trackPitch;
+                if (at < 0 || at >= numTracks) continue;
+                const trackCodes = codes[at | 0];
+                if (!trackCodes || trackCodes.length === 0) continue;
+                let fraction = Math.atan2(sampleY, sampleX) * InvTwoPi + 0.25;
+                if (fraction < 0) fraction += 1;
+                const word = Math.min((fraction * trackCodes.length) | 0, trackCodes.length - 1);
+                const colour = palette[trackCodes[word]];
+                red += colour & 0xff;
+                green += (colour >>> 8) & 0xff;
+                blue += (colour >>> 16) & 0xff;
+                covered++;
+            }
+        }
+        if (covered === 0) return 0;
+        const alpha = ((255 * covered) / samplesPerPixel) | 0;
+        return (
+            ((alpha << 24) |
+                (((blue / covered) | 0) << 16) |
+                (((green / covered) | 0) << 8) |
+                ((red / covered) | 0)) >>>
+            0
+        );
+    };
+
+    const firstRow = Math.max(0, Math.floor(centreY - bandOuter));
+    const lastRow = Math.min(size, Math.ceil(centreY + bandOuter) + 1);
+    for (let y = firstRow; y < lastRow; ++y) {
+        const dy = y + 0.5 - centreY;
+        const halfWidth = Math.sqrt(Math.max(0, bandOuterSquared - dy * dy));
+        const low = Math.max(0, Math.floor(centreX - halfWidth));
+        const high = Math.min(size, Math.ceil(centreX + halfWidth) + 1);
+        const holeHalfWidth = Math.abs(dy) < bandInner ? Math.sqrt(bandInnerSquared - dy * dy) : 0;
+        const pastHole = Math.ceil(centreX + holeHalfWidth - 0.5);
+        for (let x = low; x < high; ++x) {
+            const dx = x + 0.5 - centreX;
+            if (Math.abs(dx) < holeHalfWidth) {
+                x = Math.max(x, pastHole - 1);
+                continue;
+            }
+            const radiusSquared = dx * dx + dy * dy;
+            if (radiusSquared < bandInnerSquared || radiusSquared >= bandOuterSquared) continue;
+            const colour = samplePixel(x, y);
+            if (colour !== 0) pixels[y * size + x] = colour;
+        }
+    }
+}