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
The displayable area is like a grid, with the number of pixels measured from the top-left point, position (0, 0) and increasing along each axis. 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).
Figure 21.1 Coordinates of the Processing screen
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.
To help us identify the coordinates of a pixel, we can write a small program that will allow us to click inside the window and have it tell us the coordinates of where we clicked.
void draw() {
}
void mouseClicked() {
// draw the point
point(mouseX, mouseY);
// output the coordinates
println(mouseX + "," + mouseY);
}
The mouse functions are explained later in the book, so you don't need to understand them now, other than that mouseX and mouseY hold the current coordinates of the mouse pointer. If you click the mouse inside the window, a dot will be printed at the coordinates and the coordinates themselves will be printed in the output text area of the Processing window. You can click as many times as you want and see the coordinates of the point you just created
Figure 21.2 Creating points on the screen
Figure 21.3 The Processing window
As each point is a single pixel, it is also the smallest part of an image for which we can specify the colour. The stroke() function can be used to set the colour of the next pixel drawn by providing a set of arguments that specify the colour. Colour in Processing is explored fully later in the book, so for now all you need to know is that the colour can be set by providing 3 arguments to the stroke() function. We can alter our program above to display different colour points by adding the stroke() function above the point() function call.
void setup() {
// set background to black
background(0);
}
void draw() {
}
void mouseClicked() {
// create a random colour
stroke(random(255), random(255), random(255));
// draw the point
point(mouseX, mouseY);
// output the coordinates
println(mouseX + "," + mouseY);
}
As you can see, we have added the stroke() function call and, to make it a little more interesting, randomised the colours. Each time the mouse is clicked, a new random colour is generated and the point is drawn in that colour. The only other change is that we have set the background to be black as it makes the colours easier to see
Figure 21.4 Pixels in random colours
Processing offers another way of changing individual pixels. As we explained before, the pixels in the displayable area are like a grid. The grid is the size of the number of pixels that are displayed, so a 600 x 400 screen will have 240,000 pixels. The grid of pixels can be retrieved and altered using the loadPixels() and updatePixels() functions. Using the loadPixels() function means that an array of pixels, called pixels[], can be accessed.
Each element in the pixels[] array contains the colour of the associated pixel, where element pixels[0] is the top-left pixel, and element pixels[pixels.length -1] is the bottom-right pixel (where pixels.length is the size of the pixels[] array – we need to remove 1 because the array starts from 0, so the last element is 1 less that the size).
We can use this to access and update the pixels by altering the colour value of pixels, as we have done below
// set background to black
background(0);
// create the colour magenta
color magenta = color(255, 0, 255);
// load the pixels
loadPixels();
// loop through half of the pixel array
for (int i = 0; i < pixels.length/2; i++) {
// set the pixel to be magenta
pixels[i] = magenta;
}
// update the pixels so they are displayed
updatePixels();
If you run this, you will see that we have changed half of the pixels to a lovely magenta colour, which has the affect of changing half of the screen to that colour, and leaving the rest as the colour of the background. To be able to do this, you need to both load and update the pixels. Attempting to access the pixels[] array without first loading them will result in an error. To display your changes to the pixels[] array, they must then be updated in order to tell Processing to display them – if you miss this out then the changes are simply not displayed.
Figure 21.5 Half the pixels altered
In order to draw images, such as a square, the relative coordinates of the lines would need to be calculated. Processing has a specific function for drawing shapes such as squares, which are covered later in the book, so we won't explain how it works, but we will use it to draw a square 100 pixels wide and then explain how it works in terms of pixels.
size(400, 400);
rect(100, 100, 100, 100);
The above will result in a square being drawn at coordinates (100,100) of size 100 x 100 (the 4 arguments to the rect() function above).
Figure 21.6 A square drawn at coordinates (100, 100)
The size of the square, determined by the arguments, is also specified in pixels, so the square we drew above is 100 pixels wide by 100 pixels high. We have specified that the square should be drawn at coordinates (100, 100). By default, Processing will take that to mean the top-left corner of the square
As a final way of demonstrating coordinates and pixels, we will create a small program that will allow you to click the coordinates of a quadrilateral (4 sided) shape, which will then be drawn on the screen. Again, you needn't understand all of this code at this point in the book, except to understand that it stores the coordinates you click with the left mouse button until you have clicked 4 times, then draws a shape using the coordinates you have clicked.
// arrays for storing the coordinates
int[] xCoordinates;
int[] yCoordinates;
// the current stored coordinate
int currentCoordinate;
void setup() {
// set the window size
size(400, 400);
// black background
background(0);
// white lines
stroke(255);
// initialise the arrays
xCoordinates = new int[4];
yCoordinates = new int[4];
// set the current coordinate to less than 0 to show none
currentCoordinate = -1;
// smooth lines
smooth();
}
void draw() {
// if we have entered all 4 coordinates
if (currentCoordinate == 3) {
// draw a 4-sided shape using the coordinates
quad(xCoordinates[0], yCoordinates[0], xCoordinates[1], yCoordinates[1], xCoordinates[2], yCoordinates[2],
xCoordinates[3], yCoordinates[3]);
}
}
void mouseClicked() {
// if the left mouse button is clicked
if (mouseButton == LEFT) {
// advance the current coordinate by 1
currentCoordinate++;
// store the coordinates
xCoordinates[currentCoordinate] = mouseX;
yCoordinates[currentCoordinate] = mouseY;
// print the clickec coordinates
println(mouseX + ", " + mouseY);
// if the right button is clicked
} else if (mouseButton == RIGHT) {
// clear the screen
background(0);
// reinitialise the shape
currentCoordinate = -1;
}
}
If you run this you will see that that you can click any 4 coordinates (which are displayed in the text area in the Processing window) and a shape will be drawn using the coordinates you clicked. You can right-click the mouse to clear the current shape and start again
Figure 21.7 A 4-sided shape drawn using coordinates
