Now if we hit run we'll get the window at the left.
Not too exciting yet but we haven't done anything yet ;)
Lets specify some basic parameters -- and since setup() is called once by processing (processing looks for a setup - and uses a default one if we don't specify one ourselves) its a great place to put some basic settings.
With those two lines we set our window size and the initial background color to (r,g,b) (red, green, blue) to 0,0,0 (which is black).
Another thing to note is that every line, when we are writing code in processing, should be terminated by semicolons. Kind of like periods at the end of a sentence this lets the compiler (the interpreter from this language we're writing -- processing -- into machine readable code) know where one thought ends and another begins.
Not too exciting yet but we haven't done anything yet ;)
Lets specify some basic parameters -- and since setup() is called once by processing (processing looks for a setup - and uses a default one if we don't specify one ourselves) its a great place to put some basic settings.
01
02
03
04
02
03
04
void setup(){ size(500,500); background(0,0,0); }
Another thing to note is that every line, when we are writing code in processing, should be terminated by semicolons. Kind of like periods at the end of a sentence this lets the compiler (the interpreter from this language we're writing -- processing -- into machine readable code) know where one thought ends and another begins.
Now when we run that we get a 500x500 pixel window with a black background.
Now with this basic foundation we can begin to look at writing our first program, a hello world program.
First we can print "hello world" via the "println" function, which will print whatever we put into the console of our processing window.
Now with this basic foundation we can begin to look at writing our first program, a hello world program.
First we can print "hello world" via the "println" function, which will print whatever we put into the console of our processing window.
01
02
03
04
05
02
03
04
05
void setup(){ size(500,500); background(0,0,0); println("hello world"); }
When I run the code above, we get the "hello world" text we specified to the println (print line) function. The println is a handy tool to debug or troubleshoot problems or to check the value of elements in your code, for instance when we start using variables next you can use println to check the value of your variable throughout your code by using println.
So lets next look to use a variable, which is a reference to a value you can set and manipulate throughout your code to achieve animations or store data.
For now, we'll just use a variable to store the value "hello world" and then print it again. Variables can be called anything you want so long as they don't conflict with something processing uses (like setup or println) and that it doesn't contain spaces. Also, as general practice variables don't contain numbers, but underscores "_" or "camelCaps" are commonly used to make reading them easier. Lets create one called ourNewVariable capitalizing each word for clarity.
In Processing each variable has a type, which specifies what kind of value it holds or can hold. So when we create or variable "ourNewVariable" we know we want it to hold a piece of text, and the corresponding type for text is known as a string. Think of it as a line of text is a group of letters or characters strung together, therefore we call them strings.
Some examples types we'll use are int for integers float for floating point or decimals and boolean for true or false values.
Also, lets use a new function called draw, which like setup is known by processing (and is therefore highlighted orange). Processing looks for our draw function, and if it finds one calls it repeatedly at a set rate -- by default 60 frames a second. Processing works like video or other types of animated media by using frames to depict movement. Motion Perception is an interesting and still somewhat unknown process.
So lets next look to use a variable, which is a reference to a value you can set and manipulate throughout your code to achieve animations or store data.
For now, we'll just use a variable to store the value "hello world" and then print it again. Variables can be called anything you want so long as they don't conflict with something processing uses (like setup or println) and that it doesn't contain spaces. Also, as general practice variables don't contain numbers, but underscores "_" or "camelCaps" are commonly used to make reading them easier. Lets create one called ourNewVariable capitalizing each word for clarity.
01
02
03
04
05
06
07
08
09
10
02
03
04
05
06
07
08
09
10
String ourNewVariable; void setup(){ size(500,500); background(0,0,0); ourNewVariable = "hello world"; } void setup(){ println(ourNewVariable); }
Some examples types we'll use are int for integers float for floating point or decimals and boolean for true or false values.
Also, lets use a new function called draw, which like setup is known by processing (and is therefore highlighted orange). Processing looks for our draw function, and if it finds one calls it repeatedly at a set rate -- by default 60 frames a second. Processing works like video or other types of animated media by using frames to depict movement. Motion Perception is an interesting and still somewhat unknown process.
Now when we run our sketch we see in the console our variable ourNewVariable (that has the value of "hello world") being printed repeatedly via the pintln. Using this technique we can begin to develop rich animations by manipulating a variable which represents an aspect of an object.
Lets now integrate a font so that we can actually print our "hello world" to the screen rather than just the console.
Lets now integrate a font so that we can actually print our "hello world" to the screen rather than just the console. To do this we need to add the font to our processing sketch:
In the menu bar under tools you should see an option called create font (shown at the left). When you select this the following popup window should appear with a list of fonts and some other options.
To use a font in our sketch we can choose one from the list, edit the size (48 px for now) and copy the file name in text field for use in our sketch.
So above we've added quite a few lines to start drawing our text to screen.
First we added a new variable font (which could be any name we wanted, e.g. helloWorldFont since its a variable we created) with the type PFont (processing font).
Then in our setup function we assign the font variable to the loadFont("our font name.vlw") function which returns the font we first created via the tools > create font dialogue.
Then we called the textFont() method to install the font so that when we call text() in our draw it knows which font to use.
Finally, in the draw function we're using the font we installed to draw the value of the variable ourNewVariable (which we set to "hello world" in our setup) at the x and y position of (50,50). We need to call the fill() which acts like the paint bucket in image editors to fill any shape we have drawn to the specified (r,g,b) color. We're also calling background() to clear our background every frame -- we'll see why we need to do this once we start moving things but for now its good practice.
In the menu bar under tools you should see an option called create font (shown at the left). When you select this the following popup window should appear with a list of fonts and some other options.
To use a font in our sketch we can choose one from the list, edit the size (48 px for now) and copy the file name in text field for use in our sketch.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
String ourNewVariable; PFont font; void setup(){ size(500,500); background(0,0,0); // load the font we created font = loadFont("Serif-48.vlw"); // install it and set the size to 48 textFont(font,48); ourNewVariable="hello world"; } void draw(){ background(0,0,0); fill(255,255,255); text(ourNewVariable,50,50); // println(ourNewVariable); }
First we added a new variable font (which could be any name we wanted, e.g. helloWorldFont since its a variable we created) with the type PFont (processing font).
Then in our setup function we assign the font variable to the loadFont("our font name.vlw") function which returns the font we first created via the tools > create font dialogue.
Then we called the textFont() method to install the font so that when we call text() in our draw it knows which font to use.
Finally, in the draw function we're using the font we installed to draw the value of the variable ourNewVariable (which we set to "hello world" in our setup) at the x and y position of (50,50). We need to call the fill() which acts like the paint bucket in image editors to fill any shape we have drawn to the specified (r,g,b) color. We're also calling background() to clear our background every frame -- we'll see why we need to do this once we start moving things but for now its good practice.
To the left is what we get when we run our sketch.
To finish up, lets make a couple adjustments.
First we can center our text by using the textAlign() function to specify that we want our text to be centered (by default its x,y position is the top left hand corner) and then by referencing the width and height attributes of our window (built in variables -- which we assigned when we set our size in the setup()) so that if we draw our x,y position to the width/2 and the height/2 we get the center-point of our window.
To finish up, lets make a couple adjustments.
First we can center our text by using the textAlign() function to specify that we want our text to be centered (by default its x,y position is the top left hand corner) and then by referencing the width and height attributes of our window (built in variables -- which we assigned when we set our size in the setup()) so that if we draw our x,y position to the width/2 and the height/2 we get the center-point of our window.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
String ourNewVariable; PFont font; void setup(){ size(500,500); background(0,0,0); // load the font we created font = loadFont("Serif-48.vlw"); // install it and set the size to 48 textFont(font,48); ourNewVariable="hello world"; textAlign(CENTER); } void draw(){ background(0,0,0); fill(255,255,255); text(ourNewVariable,width/2,height/2); // println(ourNewVariable); }
Our hello world sketch is done!