Hello Display Window: Hello World 1.1
In the revised version of our Hello World Program we will start using the Display Window, firstly to display the original character set “Hello World” then to display a few shapes too.
The text() function is the first function we will use to draw to the Display Window. The text() function accepts parameters in various formats of which the simplest format is:
text(data, x, y);
For the data parameter in our sketch we will use a string of characters that spell the phrase “Hello World” and as you’ve probably already guessed the X and Y parameters tell Processing where in the Display Window we would like to draw the text in terms of X and Y coordinates relative to the Cartesian graph (superimposed on top of the Display Window, with a bit of imagination).
So let’s give it a try, add the following statement to the bottom your Hello World 1.0 sketch and Run it to see the results. If you already have a sketch running you can press the “Stop” button (next to the “Run” button) to stop the currently running sketch, pressing the “Run” button again will include any changes you have made to your sketch:
text(“Hello World”, width/2, height/2);
You’ll notice that the sketch is now making use of the Display Window, which is the first step towards creating visual representations of your code. We used the string of text “Hello World” in the data parameter. This kind of string is known as a literal string because it does not require any further processing, within the program you are creating, to output it’s final form of representation, kind of like the concept of “what you see is what you get”. The term string, in general, refers to a list of characters that when grouped together form the contents of a single string, for example in our case we have a literal string which consists of several characters ‘H’, ‘e’, ‘l’, ‘l’, ‘o’, ‘ ‘, ‘w’, ‘o’ …etc.
The X and Y parameters are however, looking a little different particularly if you were expecting them to be numbers. In fact they are representations of numbers in the sense that instead of inputting a specific number for the X and Y parameters, we used an expression and in this case the expression evaluates to a number. It is this number that Processing reads and accepts as the parameter. But what exactly do the expressions mean and what do they do?
Amongst the many things that Processing is, it is also a very sophisticated calculator. It has the ability to calculate very complex mathematical formulae and also is able to do very simple mathematical calculations too.
The above expression is asking Processing to get the width of the Display Window and divide (/) it by 2. As you can see Processing has formatted the word width in blue by use of syntax highlighting, this should immediately indicate to us that we are not using an arbitrary word but in fact a special word known as a keyword. “Keyword” is a generic term we use to describe words that have a specific meaning for the language we are using that word in. As a result keywords within Processing do not appear formatted in black. A list of keywords and other features making up the Processing language can be found in the Processing Reference (mentioned earlier). The keyword width is a special type of data known as a system variable. Basically the width system variable stores information set by the first parameter in the size() function, and as you are aware the first parameter in the size() function determines the width of the Display Window. In our program we set the size() function to read:
How this relates to the width system variable is that every time Processing sees the keyword width it replaces it with whatever we set the width value to be in the size() function. In this case since we set the width to 640 the text statement as Processing reads it would look like this:
text(“Hello World”, 640/2, 480/2);
The height system variable has the same effect but relates to the second parameter of the size() function.
So the question is why did we not just simply type the values 640 and 480 instead of using the keywords width and height respectively? Even further still why didn’t we just type the values 320 for the width parameter and 240 for the height parameter of the text() function, so that it looks like this:
text(“Hello World”, 320, 240);
Although this is a perfectly valid methodology, it is not very versatile. Currently there is not too much maintenance involved in updating the code if we were to decide that the Display Window needs to be smaller, however when it comes to creating the rest of the sketch which is going to involve drawing shapes to the Display Window of which each shape will need to have it’s own set of coordinates, if we had typed in a specific value for each X and Y position or width and height parameter, updating the code to reflect the change of dimensions to the Display Window would mean changing each statement where we input specific X, Y, width or height values. That could mean a lot of extra and unnecessary work. By using an expression with the keywords width and height we can place whatever we are drawing relative to a position determined by the size() function. So all we need to do is update the size() function and those expressions that use the width and height system variables will also update to reflect these changes. This is a programming methodology that is used often to create versatile and scalable programmatic interfaces and is referred to as implicit programming. Although it might not seem entirely obvious to you at this point why it is a recommended methodology it should become more clear as we explore programming through the introductory Hello World 1.1 and 1.2 programs.