Windowing is the process of transforming co-ordinates from one space to another. It is used when scaling and transforming the view of a program. For example: when you zoom into an image, the original image data is transformed to fill the current screen. This is done through an area referred to as the “window”.
Diagram: showing how a set of co-ordinates can be transformed to the screen through a view window.
In the diagram above you can see windowing in action. The window acts as a go-between, rendering objects from infinite space into a finite area called the “screen”. Moving or scaling the window dimensions keeps the original co-ordinates of the image intact, but affects co-ordinates of the image being rendered.
The following JavaScript code demonstrates a method for transforming co-ordinates to the screen through a window:
(You can click on the example here to see this code running in your web browser now.)
[javascript]
/*
* Windowing Transformations
* – F1LT3R
*/
(function(){
var object = { x1: 5, x2: 7 } // The Object is a shape in infinite space.
, window = { x1: 2, x2: 12 } // The Window is the current zoom & offset view-port.
, screen = { width: 100 } // The Screen is the finite area into which the view-port is rendered.
;
object.width = object.x2 – object.x1; // The object’s width
window.width = window.x2 – window.x1; // Calc width of Window
screen.aspect = screen.width / window.width; // Calc render aspect ratio
var context = document.getElementById( ‘canvas’ ).getContext( ‘2d’ );
function calc( x ){
return (x – window.x1) * screen.aspect;
};
context.fillStyle = “#FFA500”;
console.log( calc(object.x1), calc(object.x2) );
context.fillRect( calc(object.x1), 0, object.width * screen.aspect, 20 );
})();
[/javascript]
If you save the previous JavaScript code as “windowing.js”, you can use the following HTML to test the functions:
[html]
<canvas id=”canvas” width=”100″ height=”20″ style=”border: 1px solid black;”>
</canvas>
<script type=”text/javascript” src=”windowing-transformations.js”>// <![CDATA[
// ]]></script>
[/html]
You can click on the example here to see this code running in your web browser now.
Above: The JavaScript Windowing functions applied to an HTML5 Canvas
