For our first Processing program, we are going to draw a simple square. If you haven't already done so, download a copy of Processing. First start Processing and click on the “new” button.

Next we need to type the command to draw our square into the text editor.

Type in: rect(20,20,20,20);

;

To see the output of our program we click the “run” button.

;

A small window should appear next to the Processing window that looks like this:

;

Now, let’s take a look at our program again. The command rect() takes four parameters. The first two parameters are the x and y coordinates of where the rectangle should be drawn. The x coordinate determines the distance from the left side of the canvas and the y coordinate the distance from the top of the canvas.

;

The second two parameters for rect() determine the width and height of the rectangle.

;

Another important point to note is that our command ended with “;”. Every command you enter into Processing must end with a semi-colon. The reason is that every command you are typing is really Java. Java requires that every statement end with a semi-colon.

What about if you want to change the color of the border of the rectangle? To do that we need to add a command to our program. To tell Processing what color to draw lines, we use the stroke() command. The easiest way to use stroke() is to tell it the red, green, and blue values of the color you want.

stroke(100,100,255);

rect(20,20,20,20);

creates a square with a blue border:

;

To change the color of the inside of the rectangle, we use the fill() command. Again, we tell it the red, green, and blue components of the color we want.

stroke(100,100,255);

fill(100,200,100);

rect(20,20,20,20);

produces a square filled with green:

;

What if you don’t want a border? To get rid of the border, you call the noStroke() command.

noStroke();

fill(100,200,100);

rect(20,20,20,20);

removes the border around the screen:

;

If you just want the border for the rectangle without any fill color, you use the noFill() command. One thing to remember is that once you change the stroke or fill, it remains changed. Everything drawn after stroke or fill is called will use the new settings.

Now that we have a handle on how basic drawing works, we can easily use several other commands.

point() - Draws a point a the x,y coordinates you specify. point(20,20) would draw a dot at 20,20

line() –Draws a line between the two points you specify.

triangle() – Draws a triangle using the points you specify as vertexes.

Now that we have completed some basic drawing, let’s make something more interesting happen. Our new program will make the square move across the screen. To move the square we are going to need to redraw it several times in progression. We can use the loop() method to do this.

loop() is different from the commands…it is a Java method. To use loop() you write:

void loop(){

}

Here loop() isn’t doing very much. What we want is to tell loop() to execute a command over and over.

void loop(){

rect(20,20,20,20);

}

This loop continually draws a square in the same place. To make the square move, we will need to use some variables. To create a variable that stores an integer we write:

int x = 0;

Here we have created a variable named “x” that can store integers. We can perform basic arithmetic and other computations using x. We can also give x a new value.

x = x + 2;

This would give x the value of x + 2 or 2.

Now let’s create a new loop that makes the square move:

int x = 10;

void loop(){

rect(x,10,20,20);

x = x + 1;

}

Run the program and you should see the square move across the screen. loop() can only appear once in your program. This is because loop() is a Java method.

You can think of methods as groups of instructions that you want to use over and over. You give the group a name and then when you want to use it, you tell Processing to execute it. Methods can also be thought of as commands. By declaring a new method, you are creating a new command. Here is a basic method:

void drawGreenSquare(){

noStroke();

fill(100,200,100);

rect(20,20,20,20);

}

If we declare this method, we can simply type:

drawGreenSquare();

instead of:

noStroke();

fill(100,200,100);

rect(20,20,20,20);

But what if we want to draw the square in different places? We can do this by passing parameters to the method.

void drawGreenSquare(int x){

noStroke();

fill(100,200,100);

rect(x,20,20,20);

}

Notice that we now have drawGreenSquare(int x).

The “int x” is a parameter that the method takes. Later in the method body we refer to the variable x:

rect(x,20,20,20);

What this means is that instead of just typing drawGreenSquare(), you can now type drawGreenSquare( 30 ) and it will use the value 30 for x. If you want to use more than one parameter for your method, you separate them with commas like this:

void drawGreenSquare(int x, int y){

noStroke();

fill(100,200,100);

rect(x,y,20,20);

}

Using this method you can now call drawGreenSquare() and just tell it the x and y coordinates of where you want it.

Let's rewrite our moving square program using the drawGreenSquare method. Our new program is going to look like this:

int x = 10;

void loop(){

drawGreenSquare(x,20);

x = x + 1;

}

void drawGreenSquare(int x, int y){

noStroke();

fill(100,200,100);

rect(x,y,20,20);

}

Run the program and you should see a green square move across the screen. The program doesn’t run very long before the square is off the screen. Next we are going to modify the program so that it loops.

int x = 10;

void loop(){

drawGreenSquare(x,20);

if(x >= 100){

x = 0;

}

else{

x = x + 1;

}

}

void drawGreenSquare(int x, int y){

noStroke();

fill(100,200,100);

rect(x,y,20,20);

}

The square should now return to its starting place once it leaves the canvas.