Drawing A Box In Processing

In the week 4 of KKB210: Computational Arts 1, we looked at Java, specifically Java and the Processing programming environment. Now as we are looking at it from a computational arts perspective rather than a software design perspective, we just focused on generating graphics with Java and using the rendering model built into Processing.

So the first thing we did was learn how to create a canvas and draw a box.

We are going to create a 800 x 500 pixel canvas to work with. So in a new sketch we use the following:

void setup(){
size(800,500);
}

This sets up the canvas to be 800 pixels wide by 500 pixels high. Remember, the x axis comes before the y axis, so size(x,y).

To my knowledge, indentation is not important in Processing as it is with say Python’s Idle, so whether you indent or not is up to you and your preferences.

If you just run the above you should get a blank canvas. On OS X it is just an empty grey box that is 800×500 pixels.

Now we want to tell Processing to draw something.

void draw() {
// This is where all the drawing is done.
}

You will notice if you run this now that it hasn’t changed anything at all. This is just establishing that something will be drawn within the braces.

As you may be aware or have figured out, anything that starts with // is a comment.

To begin drawing, we can either leave the canvas as the plain grey default, or we can customise it to whatever we like. In the tutorial we were shown a basic way to customise it.

size(800,500);
background(0); // Uses standard RGB (0,0,0)

This specifies that we want to fill the canvas of size(800,500) with a black background. The size command can be omitted in which case the background command will fill the entire canvas. If the size does not match the canvas size specified earlier, it will give you an error.

As I mentioned in the comment, the background command uses standard RGB amounts as the parameters, so 0 up to 255 in the format (red,green,blue). For monochrome, ie black through grey to white, you only need to use a single number instead of specifying the same number three times.

Now what?

Well, the next part of this exercise was to draw a box. This is really quite simple and the commands for it do pretty much what they sound like.

fill(255,0,0); // Standard RGB.
rect(10,10,200,250); // Position from the top left followed by the size.

So, first off, we tell it what colour to make it using the fill command. The colour is controlled the same way as the background colour, using standard RGB. So in this case, it is red.

Next up we told it to make a rectangle using rect. The first two parameters in rect are the top left corner, the origin, the last two parameters are the size, using the same format, (x,y), as earlier.

The last part of this exercise was to give the box a border. Now you could create another box underneath it if you wanted that is the right dimensions for the border you want, however, there is a built-in stroke function that adds a border, along with functions to control the appearance of the stroke.

Place the following before the fill function:

stroke(255,255,0); // Stroke colour using standard RGB.
strokeWeight(10); // Stroke width.
smooth(); // Anti-aliasing.

The stroke(255,255,0) function adds the stroke and gives it the colour you s