search

Class myphysicslab.lab.view.CoordMap

Provided By

Provides the mapping between screen (canvas) coordinates and simulation coordinates; this is an immutable object.

  • Screen coordinates corresponds to pixels on an HTML canvas; the vertical coordinate increases going down, with zero usually being the top of the canvas.

  • Simulation coordinates the vertical coordinate increases going up; units can be any size.

To create a CoordMap you specify translation and scaling factors for going between screen and simulation coordinates. The CoordMap constructor maps the bottom-left point on the canvas to the given bottom-left point in simulation space and then uses the given scaling factors.

The static method #make calculates the translation and scaling factors in order to fit a certain rectangle in simulation coords into another rectangle in screen coords.

From David Flanagan, JavaScript: The Definitive Guide, 6th Edition page 869:

By default, the coordinate space for a canvas has its origin at (0,0) in the upper left corner of the canvas, with x values increasing to the right and y values increasing down. The width and height attributes of the <canvas> tag specify the maximum X and Y coordinates, and a single unit in this coordinate space normally translates to a single on-screen pixel.

Note however that a canvas actually has two coordinate systems:

The <canvas...> element is unlike almost all other HTML/HTML5 elements in using two different coordinate system scales simultaneously. The model coordinate system scale is used whenever you want to draw anything on the canvas. The display coordinate system scale is used to control how much physical screen space is dedicated to the canvas. You should explicitly specify both, the model coordinate size as attributes in your HTML, and the display coordinate size in your CSS.

Essentially the display coordinates can be used to stretch a canvas to fit the screen as desired. Here we ignore display coordinates and regard screen coordinates to be what is called model coordinates in the above quote.

See also 'Coordinate System When Drawing An Image' in myphysicslab.lab.view.DisplayShape.

new CoordMap( screen_left, screen_bottom, sim_left, sim_bottom, pixel_per_unit_x, pixel_per_unit_y )

Parameters
screen_leftnumber

the left edge of the canvas in screen coordinates

screen_bottomnumber

the bottom edge of the canvas in screen coordinates

sim_leftnumber

the simulation coordinate corresponding to screen_left

sim_bottomnumber

the simulation coordinate corresponding to screen_bottom

pixel_per_unit_xnumber

canvas pixels per simulation space unit along x axis

pixel_per_unit_ynumber

canvas pixels per simulation space unit along y axis

Instance Methods

Static Functions