Jobs left to do

I need to finish off comments and put in the second bit of code.

Need to check through whole thing again and compare to surrounds.

First 1800 words

Lets begin by writing one line of what the cool people called ‘code’.

Open processing and you should be faced with a white blank area. This the text area where the text that makes up your program goes. Above it you should see a table and above that a tool bar with circlar and rectangular buttons.

Below the white text area is a grey message area and below that is the black ‘printing’ area. The white exiting area works like a basic wordproccessor one in which you can’t change the font or make things bold but you can type text and you can cut, paste and perform all the usual exotic stuff we have become familiar with when using a computer.

In the white area type the following line on its own.

println(“hello world!”);

Now press the first triangle in the round circle above the text area. Assuming you have typed it in exactly as you see it you should see a small window appear (it might be called sketch something ) and the message

Hello world!

Printed in white on the black background beneath the text area. Quit the window you made ( we will cover this in a moment). Congratulations you have made your first program. Most programmers call this the hello world moment. If you can get this to appear on the screen then after that everything else is relatively simple.

Lets go through the program and see what you have done. It began with the command or procedure or message ( they are currently synonymous) called println. This is short for PRINT LINE, and reaches far far back into the dawn of computing. Many many years ago computers where attached to teletype printers, a sort of electronically controlled typewriter. For example the hot line between America and the USSR during the cold war was a teletype (literally far type) a set of wires connecting two teletypes. Typing the letter H at one would make letter H be printed on the remote machine. By typing at each other two people or presidents could have a conversation. Once you had written you would press the return button to send it. Later during the development of the computer someone had the idea of hooking up a computer to a teletype and programming it to send text to the ‘printer’. This concept while wildly primitive does sit at the heart of all erasable programming languages. Begin able to print line or ‘println’ a message to your self is one of the last ditch ways you can check to see how a program is working. So you can see for most programmers once they figure out how to do the back stop ‘println’ then they can figure everything else out them selves.

So much for the println after the command comes a rounded bracket this says ‘I’m about add some descriptive terms or adjectives to the command. For example of we had a command called ‘throw’ we might have adverbs like hard, soft, up, down. The brackets say Ok I’m about to tell you something. If you have ever used a DOS prompt you might have said throw \down where \down is the argument to the program this is very similar to processing. In processing most the additions to a command come in a round bracket. So in the case of println the thing in the round bracket is what we are about to print.

We could say println(23) to say print the number 23. But in this case we are adding a text and we describe texts in double quote. If you have written a story text you might be used to writing

Barnaby said “Today the moon looks like a Banana”.

Where the text you want said is in the double quotes. Saying things in processing is just the same except println replaces said and the arguments ( what is said) is placed in the rounded bracket. Notice that in processing the quotes are old fashioned single quotes not the more clever opening and closing quotes (99’s and 66’s) you get in most word processors so be careful. Finally the line ends with the semicolon. Some languages like python end an ‘argument’ on one line. Processing takes the humble semincolone as the marker.

If your used to other languages you might find this rather minimal, there is no ‘main’ function or definition you just get on with the work. If you really don’t like this you can use this code

void setup()

{

println(" hello world " ) ;

}

This uses one of the two special functions name defined by processing. Don’t worry what I mean by functions this will be covered later.

OK lets move on to something a bit more complicated.

println(" hello world " )

size(640,580);

rect(72,72, 405 , 505 );

ellipseMode(CORNER);

ellipse( 135 , 135 , 108 , 99 );

ellipse( 306 , 135 , 108 , 99 );

triangle( 279 ,270 , 324 ,358 , 234 , 358 );

arc( 153 , 405 , 270 ,83, 0 , PI );

Type this into your code sketch and press the run button ( or choose from the run menu). This time you should see a window being created. This window should show the face. To quit this program press command Q on the mac ( to quit) or control x to eXit or what ever you do to close an application on your particular platform.

[Picture here]

So what happened?

The first line is the familiar println of hello world left over from the first program. I tend to put each instruction on its own line, as you have seen already the program starts from the top of the list and works its way down the list. This is arbitrary - there is no reason why they shouldn’t start from the bottom and work up but I’m not aware of any programming language that does this.

The next line is wonderful, size tells processing how bit a window should be created. If you building a web application then this will be the same as the area you ask for in the HTML embed code(perhaps I’m telling you more than you need to know but it is fun). You generally call size once and only one, the arguments to size are the dimensions in pixels you will ultimately use. If you make the values large ( 1000000, 100000 ) then you will get a window bigger than the screen. Wonderfully size will create an appropriate window no matter what platform you are working on. If you move your processing code from a Mac to a PC you will get a Windows window which does seem like magic the first time you do this.

The next line tells processing we want a rectangle from a point 72 pixels along ( from the left hand side of the screen as the user see it ), and it starts 72 pixels down from the top. Graphic co-ordinates will be covered later. You can find out more about rect by selecting the text and control clicking to get the contextual menu up and selecting ‘find in reference’ or using the find in reference help menu item, or you can go to the processing documentation that came with processing or the from the reference subsection of processing .org website. Next you tell processing how big a box you want to draw ( technically the dimensions).

The next command ellipseMode this doesn’t do any drawing but instead tells processing how to interpret the numbers coming afterwards. Generally ellipses are defined by saying the co-ordinates of the corners of the box which surrounds the ellipse. In processing speek this is in CORNERS ellipse mode. We want to change it to be more like the rectangle, We want to tell processing the top left hand corner and the dimensions of the rectangle containing the box.

[ picture here ]

To do this we use the ellipseMode mode function which then effects how processing uses all the elipse arguments. Again lets not get to up tight for now about what this means.

ellipse( 135 , 135 , 108 , 99 );

ellipse( 306 , 135 , 108 , 99 );

Now draws the eye ellipses notice they are the same size and hight from the top ( 135) but the distance from the left is different.

The next command is triangle which surprisingly creates a triangle. This requires the three co-ordinates one after another. So my nose has coronets from 279 pixels along and 270 pixels down, to a point 324 pixels along and 358 pixels down and finally with another corner at 234 pixels along and 357 pixels algon. This draws the nose.

triangle( 279 ,270 , 324 ,358 , 234 , 358 );

Finally the arc method is used to draw arcs imagine fragments of an ellipse. The arguments tell processing what size the larger ellipse should be and which angles you want for the top and start of the smile.

arc( 153 , 405 , 270 ,83, 0 , PI );

These angles are in radians ( one of the strange modes you find on many scientific calculators) generally a full circle is 360 degrees or 2*Pi radians half a circle is 180 or Pi radians. For fun try replacing the arguments with

arc( 153 , 405 , 270 ,83, PI ,0);

and re run the sketch to get a frown.

You noticed you just played with the numbers, why not carry on playing with changing some other numbers.

Some Comments on Comments.

As mentioned in processing we make sketches, like a sketch in sketchbook this is halfway between a note and something to think with. Most sketches are done quickly to explore one idea or another but they are also something else they are precious. Writing code is like learning to draw, and like drawing making code is about learning, thinking and reflecting. With a real sketch its hard to decided which is going to be important and which usless. When you do come to make something then you find your self constantly referring to other sketches to see how to did something.

For this reason its important to leave clues about what you have thought about when you make something. If I was making something I might type it like this

println(" hello world " ); // this is usless and you can remove it.

size(640,580);// this must come before any drawing stuff 1024x850 works too.

rect(72,72, 405 , 505 );// uses the default colours.

ellipseMode(CORNER);

ellipse( 135 , 135 , 108 , 99 ); // left eye

ellipse( 306 , 135 , 108 , 99 );// right eye

triangle( 279 ,270 , 324 ,358 , 234 , 358 );// nose

arc( 153 , 405 , 270 ,83, 0 , PI );// smile.

The worlds after the double black slash ‘//’ are called comments. These are notes you make in the code. For example you can label one shape ‘nose’ which is useful if you come back a month later and want to make the face wink.