First 500 words (draft)

Coordinate Systems and Pixels
A pixel (from the words picture element) is generally thought to be the smallest part of a digital image, be that a picture or text. Although this isn't strictly true (as there is such as thing as a sub-pixel) it is the smallest part over which we have control when creating a digital image. Each pixel is a block of colour that, when combined with many others, make up an image. Digital cameras have brought the word 'pixel' into popular use by describing the quality of the images the camera produces in terms of 'megapixels'. A megapixel is 1 million pixels – the greater the number of pixels that constitute an image, the greater the quality of that image.

Computer displays are often described in terms of their 'resolution' which is measured in the number of pixels horizontally and vertically. For example, a resolution of 1920 x 1200 would contain 2,304,000 pixels. In Processing, the viewable area is also defined in this way using the size() function, which takes 2 arguments: the number of horizontal pixels and the number of vertical pixels (there is also an optional 3rd argument that sets the display mode, but we shall use the 2 argument version) for example

 size(600, 400);

If the size() function is not used, Processing uses a default size of 100 x 100 pixels. The displayed screen is like a map of pixels. Each pixel is defined as its position along each axis – the horizontal (x) axis and the vertical (y) axis in the form (x, y), for example the pixel at (100,200) is 100 pixels along the horizontal axis, and 200 pixels along the vertical axis

Figure 21.1

The displayable area is like a grid, with the number of pixels measured from the top-left point, position (0, 0). As shown in figure 21.1, the coordinates of any single pixel can ascertained by providing the x and y coordinates in relation to the starting point at position (0, 0). As examples, the bottom right of a 600 x 400 display is at position (600, 400) and the middle is at position (300, 200).

We can use the coordinates to draw a point by providing them as the arguments to the point() function in the form point(x, y). For example

 size(600, 400);
 point(300, 200);

will draw a point in the middle of the screen. Any set of coordinates can be used to draw a point. Provided the coordinates are within the range of those of the screen, then the point will be visible. If coordinates are used that are not within that range, for example a negative number or a number greater than the greatest x or y position, the point will not be visible. The coordinates at the limit of the screen's displayable area are available in 2 of Processing's built-in variables; height and width. These are set automatically after the size() function, as shown above, so can be used to find out what the limit of the coordinates are. Therefore the point

 point(width, height);

is the point at the bottom-right of the screen