Framing

Concept

Framing in FUDGE describes how to map a rectangle into a given frame. Basically it is a set of information and procedures used to calculate a rectangle or points within according to another rectangle of reference, called the frame, and points within that. Pass in data of the frame into the framing to retrieve a new rectangle. Pass the frame and a point within to retrieve a mapping of that point into the resulting rectangle, or, vice versa, a rectangle and a point to retrieve the mapping of that point into a calculated frame.

Usage in Viewport

Framing is used heavily to calculate the cascade of rectangles a viewport renders to until the image appears on the screen. Framing in this context starts with the client-rectangle of the canvas on the screen, as defined via CSS. The diagram shows the process from right to left.

1. The first framing calculates the actual size of the canvas. Reduction leads to a pixelated retro look since the canvas is smaller than displayed being scaled up by CSS
2. The next framing calculates which portion of the canvas the viewport renders to. It's a complex framing that considers absolute values (padding) and values relating to the size of the canvas (margin). The resulting rectangle is called the destination of the viewport
3. The source is calculated yet by another simpel scaled framing. As before, reduction leads to pixelation. However, if two viewports render on the same canvas, one may render high, the other low resolution, when reduction is defined here.
4. As of spring 2020, framing stops here and the source rectangle is what WebGL renders to. So when rendering, for each viewport and each frame the size of the offscreen canvas and the WebGL-Viewport change. It may be preferable to continue framing and have each viewport render on an area of a larger offscreen canvas with fixed size and changing only the render viewport of WebGL (see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/viewport).