You are here

Writing Mathlets II: A Call to Math Professionals - Basic Graphing -- Two Dimensions

Tom Leathrum

As a warm-up, consider the mathematics behind basic two-dimensional graphics. The applet shown here allows movement of the red dot by clicking and dragging it with the mouse. As the dot is moved, its position is given both in graph coordinates (as indicated by the axes shown) and in pixel position (which is how the computer represents position within the applet). The initial position of the dot is at the coordinate origin, where the shown axes intersect.

The formulas for the transformations between graph coordinates and pixel position are fairly straightforward. For the formulas given below, the graph coordinates of the red dot are given by the pair of values (x,y), its pixel position by the pair of integers (xpix,ypix). The pixel height and width of the applet's graph panel are given by the integer values ht and wd, respectively -- in the applet, the height and width are both 200 pixels. The x-axis shows coordinate values in the range from xmin to xmax (in the applet, -5 to 5), and the y-axis shows values from ymin to ymax (also -5 to 5 in the applet). The scaling factors given first provide coefficients for the affine transformation.

scaling factors: xsc = wd/(xmax - xmin) ysc = ht/(ymax ymin)

graph coordinates to pixels: xpix xsc(xmin) ypix = ysc(ymax y)

pixels to graph coordinates: = (xpix/xsc) + xmin y = ymax  - (ypix/ysc)

Keep in mind: For pixel position, the point (xpix,ypix) = (0,0) is in the upper left hand corner of the graph. Positive values of xpix correspond to positions to the right of this point, and positive values of ypix give positions below this point.

Tom Leathrum, "Writing Mathlets II: A Call to Math Professionals - Basic Graphing -- Two Dimensions," Loci (November 2004)


Journal of Online Mathematics and its Applications