Book Fragments: October 2008

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

What programming standards and commenting standards should I use? The same as in the Greenberg book.

Do we have to use a style sheet? No, just send in the text using your own style. We will use a style sheet of our own.

Can I email you at any time? Yes, if you have problems or any queries at any time then let me know. I will try and answer within two days. There will be times when I will be away from my computer; I shall, however, advertise them on my main blog. Only email me on MCT-Mass-Writing@open.ac.uk

I live on mainline Europe I can't get to Waterstones; what do I do? You let us know and we will ship the book to you by surface mail.

I have found the Greenberg book at a cheaper price than Waterstones at another outlet. Can I buy it there? The best thing to do is to buy it and then use your Waterstones voucher for yourself, for example by buying some Christmas presents.

What is the target audience? The target audience is readers who want to get involved in computer art but who have no programming expertise and little mathematics. Processing has two modes: procedural and OO. I would hope that we could get this sort of reader up to complicated procedural programs.

You mention that one program should be used to illustrate my 2500 odd words, is this a hard and fast rule? No, if you feel some shorter programs would do then please use them. The choice is up to you.

If I use diagrams what graphics format do I use? Any format that can be embedded within your word processor text. Don't forget to send the graphics separately in the zip file that you send us when you have completed your part of the book.

You say that you want a 100 line program to illustrate each chunk. What if I'm writing a chunk right at the beginning of the book and there's little scope for a large program? The best thing is to develop a collection of small programs and describe each one. Try and make them as visual as possible.

Can I write more than one chunk? We are hoping to get 85 volunteers. This is very ambitious so contact us in November/December if you have enjoyed writing your 2500 words and want to do more.

Do I get paid? Unfortunately not; you do get the book that you will work from and a presentation copy of the book that you helped write. Look on the project as a way of donating some time to the OU, rather than money.

Can I use text and diagrams from the Processing book that you give us? Definitely not this would give rise to all sorts of copyright problems. Don't even devise computer programs that look like the ones that are described in the book.

How do I insert diagrams into my blog? Diagrams are important and most of you will need to employ them. Use any graphics program you like as long as the end-product can be embedded within the text from the word processor that you use.

Does my English writing have to be perfect? No, as long as it is readable and understandable then it will do. All the contributions will be edited. However, don't use this fact to write sloppily and assume that someone will rescue you.

How long should I take over this task? Its up to you: some of you will have good writing experience and have used Java for a long time, so the task may take a few weeks. Some of you, however, may struggle a bit with writing and need longer and might even deliver just short of the deadline.

You ask us to load each version of the text into our blog, do you mean the first 500 words, then the first 1000 words etc? This is one option; another option would be to write an outline of your part of the book and each version would refine it. If you feel you can do this then it might be the better option as it will give others a good idea of what your text is all about.

How do you want us to post each version of the text? You can either do it by just having one post and continually editing it showing each version or by creating a post for each version. It is up to you. The first way will result in less text.

Can I look at other blogs? Yes you should. There are a number of reasons for this. First, it might give you ideas about what you write. Second, it would enable you to check that there is no major overlap with your material and others material. Third, it would enable you to comment on other blogs and help other writers.

Book Fragments

Friday, October 31, 2008

List of blogs

Tuesday, October 28, 2008

Book Fragment 24

Book Assignments

Wednesday, October 15, 2008

Welcome

FAQs

Followers

Blog Archive

About Me