Book Fragment 24

I have joined the writing team and have written fragment 24. It is reproduced below. It shows the general style that I would like you to aim at. I hope to do no more writing. There are some points to be made about the fragments themselves and which are illustrated in the text below:

• Try and use a bit of white space in your programs indentation etc.
• Use 'we' in the text. After all there are a large number of authors.
• Always try and back reference or forward reference bits of the book as in 'you will remember in page xx'; don't worry about page numbers I will fix them up when I edit the text.
• There's no harm in repeating a bit of program code.

There are some specific points to be made about the painful process of transferring your text to Blogger:

• First its quite a painful process transferring from MS Word, be warned.
• Second, figures are quite tricky to get into Blogger. When they are inserted they tend to be put into the top of your blog and you will then need to cut and paste.
• When you add a picture to your blog use the left option.
• There are only a few graphic formats that Blogger accepts; they are: jpg, gif, bmp and png.
• Indentation is a pain. As you will see in my entry I gave up indenting the Java programs. If anyone has a simple solution please let me know.
• Another pain is symbols such as 'less than' or 'greater than'. The best thing to do is to insert the HTML versions of the symbols. Click here for a list. Blogger will not process your blog if you have less than, greater than etc symbols in it.
  

Geometry and computer art

So far in this book we have concentrated on a number of introductory ideas, mainly concerned with programming. We are now going to change tack and look at some mathematics, although we will present some programs later. In order to develop interesting and sophisticated computer art you need to know a bit about geometry. In this and the next two sections we will give you something of a primer. You will also need to know a little about algebra to understand the text up to page xx. The good news is that there is not a lot of it.

Dimensions

In mathematics we talk about dimensions. Normally we talk about one-dimensional, two -nsional and three-dimensional figures. A point is one-dimensional and a line is two-dimensional. A point represents a location in space.

Figure 1 shows what we mean by a point and how we can uniquely identify individual points.

Figure 1: Two points and how to identify them

Imagine what you see is a very small computer screen which contains 49 pixels (7 by 7). If you are unsure about what a pixel is then have a look at page x. The screen is delineated by a pair of vertical lines and a pair of horizontal lines. The horizontal line at the bottom is known as the x-axis and the horizontal line at the leftmost position is known as the y-axis.

Each of the axes contain whole number that represent the position of a point on the screen; for example the point (3,5) is shown. This represents a position of 3 along the x-axis and a position of 5 along the y-axis. Similarly the point (2,3) represents the point which has a position of 2 along the x-axis and a position 3 along the y-axis. The key point to make here is that the coordinates uniquely fix the pixels in space and specify where they are.

In reality a computer screen and other digital devices will have hundreds of pixels, for example a HD video camera has 11 mega (million) pixels.

So these are points, what then are lines and how are they specified? Clearly a line cannot be specified by an x-coordinate and a y-coordinate. Look at Figure 2. This shows a line in the same coordinate system that was used in Figure 1.

Figure 2: A line joining two coordinates

Here we see a line that joins the coordinates (1,3) and (3,5). The two points specify the line. They show that it’s a short line and has two end points in that it does not continue on past the two end points. The line has an important property: its slope. This is the angle that it makes with the x-axis. In Figure 2 the angle is 45 degrees.

So is there anything more we need to know about lines? The first thing is that a line can be infinite it can stretch infinitely from one coordinate to another. The line in Figure 2 is quite short. So how can we specify a line that is infinite (or at least is bounded by a computer screen)?

We do this via an equation. The general form of the equation of a line is

y = mx+c

Here x is the coordinate of the x axis, y is the coordinate of the y axis, m is the slope and c is the point in the y axis where the x coordinate is zero (we call it the intercept). Let’s see how that works with a longer line. Have a look at Figure 3. The value of c is 2; this where it the line intercepts the y axis. The slope is 45 degrees. However, the value of m is not 45, why is this? The answer is based on trigonometry and that m is the tan of the angle. However, you don’t need to know this so if you know nothing about trigonometry it is worth describing m in another way.

Figure 3: An 'infinite' line

This is that m is represents by the ratio of the difference of any two x points and the corresponding y points. For example, since the line goes through the points (0,2) and (2,4). the slope can be calculated as

(4-2)/(2-0)=1

this gives an equation of

y=1x+2

remember that the intercept is 2; this can be easily simplified to

y=x+2

This is all you need to know about lines: that they can be expressed by a simple equation and the equation is defined in terms of a slope and a y intercept. The line relates x and y.

Once you have the equation of a line you can determine any point on it given an x value and a y value, for example in the line we have been looking at if the value of x was 3 then the value of y will be 5.

It is worth looking at a simple program to illustrate some of the ideas here; I will then look at a more complicated program. Here I use the Processing function line. This takes four arguments: the first two are the x and y coordinates of a point and the third and fourth arguments are the x and y coordinates of a second point. The function draws a line between them. A simple program that uses the function is shown below:

size(300,300);
background(255);
line(25,40,280,90);

There are three statements here. The first sets up a window that is 300 by 300 pixels in size. The second statement sets the colour of the background to be white. The final statement draws a line from the point (25,40) to the point (280,90). The display from the program is shown as Figure 4.

Figure 4: A line drawn by Processing

Have a look at the display and figure what is going on here. The line that has been drawn might be a surprise to you.

The line looks wrong. It should start at (25,40) which should be at the bottom left-hand side of the window. You may remember that the answer to this conundrum is that Java has a coordinate system which is completely different to those in use in mathematics. The point (0,0) does not start at the bottom left-hand corner but at the top left-hand corner. If you look at Figure 4 you will see that the leftmost part of the line is 25 pixels across but 40 pixels down and the rightmost part of the line is 280 pixels across and 90 pixels down. Always bear this in mind when developing graphics programs in Processing.

Now that we have given you enough information about drawing lines it is about time that we showed you the development of a rather more complicated program.

The program will draw a series of squares in different colours with the colour, the side of the square and the top leftmost coordinates being random. The main steps in the program are as follows:

Set up the window with a size and background colour
For a number of times
Randomly generate the length of a square
Randomly generate a colour
Randomly generate the top leftmost x and y coordinates
Draw the square

This is a simple design for the program. It leaves a number of questions open. The main one is how many squares will be generated? We shall assume that 20 will be generated. Rather than use the function rect that you met before on page xx we shall use line drawing instructions to generate the square. Another important question is what to do when an attempt is made to draw a square outside the drawing window? You will see a programmatic solution to this soon.

We will use a function random that generates a random number within a certain range.

Our program is shown below

//Set up drawing window
size(400,400);
background(255);
strokeWeight(2);

int noSquares = 20;
int xPosition, yPosition, squareLength;

//Generate a series of random squares
for (int j=0;j‹noSquares;j++){
stroke(random(255), random(255), random(255));
xPosition = round(random(200));
yPosition = round(random(200));
squareLength = round(random(200));
line(xPosition,yPosition,xPosition+squareLength, yPosition);
line(xPosition+squareLength,yPosition,xPosition+squareLength,yPosition+squareLength);
line(xPosition+squareLength,yPosition+squareLength,xPosition,yPosition+squareLength);
line(xPosition, yPosition+squareLength,xPosition,yPosition);
}

The first chunk of code sets up the window as being 400 pixels by 400 pixels in length and height, sets the background colour to be white (255) and specifies that the width of any line drawn will be two pixels.

size(400,400);
background(255);
strokeWeight(2);

The next part of the code just sets up some variables that are used to establish each square’s dimensions and position and define the number of squares that are to be drawn.

int noSquares = 20;
int xPosition, yPosition, squareLength;

The heart of the program is the loop that iterates twenty times generating random numbers and drawing the squares.

//Generate a series of random squares
for (int j=0;j
stroke(random(255), random(255), random(255));
xPosition = round(random(200));
yPosition = round(random(200));
squareLength = round(random(200));
line(xPosition,yPosition,xPosition+squareLength, yPosition);
line(xPosition+squareLength, yPosition,xPosition+squareLength,
yPosition+squareLength);
line(xPosition+squareLength, yPosition+squareLength,xPosition,
yPosition+squareLength);
line(xPosition, yPosition+squareLength,xPosition,yPosition);
}

The function stroke sets up the colour of the lines that are to be drawn; it takes the red, green and blue components of the colour. Since these are generated randomly a value between (0,0,0) (black) to (255,255,255) (white) can be generated. You will remember that the argument within the random function gives the range of the random number to be generated; in our case this is 255; this means that a random number between 0 and 255 is capable of being generated.

The next two lines determine the position of the top left-hand coordinates of the square. It is worth looking at these two statements in a little more detail. They are

xPosition = round(random(200));
yPosition = round(random(200));

Here the function round is used to convert (round up) the result of the random function (a float) to an int. If the round function was not included then Processing would have indicated a syntax error.

An interesting question that it might be worth your while stopping and thinking about is why I did not use the round function within the code

stroke(random(255), random(255), random(255));

that sets up the colour of the lines used to draw the square? The answer is that inside the stroke function you will almost certainly find the function round being employed.

The remainder of the code just displays the square using the randomly generated values for the length, x coordinate and y coordinate of each square. Notice that we have generated a length of no more than 200 and an x and y coordinate of no more than 200. This ensures that when a square is drawn it is not drawn outside the window since the window as a length of 400 pixels and height of 400 pixels. The display from the program is shown in Figure 5. It has a nice sixties feel to it.

Figure 5: The 20 squares drawn using Processing

It might now be worth modifying the program in some way. There are a number of simple modifications that you might like to try, for example varying the number of squares that are drawn or the thickness of the drawing lines. Another modification is to make it loop endlessly in animation mode. You remember this mode from page xx. Here the functions setup and draw are employed to produce a continually moving picture. The program is shown below

void setup(){
//Set up drawing window
size(400,400);
background(255);
strokeWeight(2);
}

int noSquares = 20;
int xPosition, yPosition, squareLength;

//Generate a series of random squares public void draw(){
stroke(random(255), random(255), random(255));
xPosition = round(random(200));
yPosition = round(random(200));
squareLength = round(random(200));
line (xPosition,yPosition,xPosition+squareLength, yPosition);
line (xPosition+squareLength, yPosition,xPosition+squareLength, yPosition+squareLength);
line (xPosition+squareLength, yPosition+squareLength,xPosition, yPosition+squareLength);
line (xPosition, yPosition+squareLength,xPosition,yPosition); }

Here the code that sets up the window is placed in the function setup and the code that draws the squares is placed in the function draw. There are two differences between this program and the first one. The first difference is, of course, the definition of the two functions setup and draw. The second difference is that the for loop in the first program has not been replicated in the second program. The reason for this is that the function draw continually loops around endlessly. A snapshot of the drawing window during the running of this program is shown in Figure 6.

Figure 6: The drawing program in animation mode

To conclude we shall describe one further program. This program uses the line drawing facilities within Processing to produce an animation that involves the continual drawing of a series of random lines. Each line will have two sets of random end-points, a random colour and a random thickness or stroke. The program is shown below

void setup(){
//set up a white window background and size 400x400
size(400,400);
background(255);
}

int startX, finishX, startY, finishY, lineColour;

void draw(){
//Draw a set of random lines
startX = round(random(400));
startY = round(random(400));
finishX = round(random(400));
finishY = round(random(400));
strokeWeight(random(10));
stroke(random(255),random(255),random(255));
line(startX, startY,finishX, finishY);
}

Here the functions setup and draw are used again. The heart of the program is again in draw. Here the endpoints of the lines are randomly generated (the maximum values are 400; this matches the size of the window) and then the width (stroke) of the line is set followed by a random value of colour for the line. Finally the line is drawn using the line function.

Figure 7 shows the output from this program during its running. It shows a wide range of colours and a series of line widths.

Figure 7: The line drawing program