Processing

An Introduction to Processing

Processing is an easy language to use. It is essentially just a layer over Java that simplifies things. Commands are very simple to use, and the programs produced are often interactive objects (surprise, surprise, it's object-oriented programming). In order to properly take this course, you must download Processing at this link. It is a free download, and is available for Windows, Mac OS X, and Linux. The majority of this course is based on Learning Processing by Daniel Shiffman. This is essentially our textbook, and if you'd like, go out and buy it. As this course will only cover an introduction (Chapters 2-9 in Learning Processing), if you would like to further your knowledge, you should buy the book, or you can just wait for my next course, Intermediate Object-Oriented Programming With Processing. At any time, should you need to get a quick refresher on any functions and/or their parameters, visit The Processing Reference, also known as The Bible in this course.

Lesson 1 - Humble Beginnings

In Processing, as with every other computer program, and pretty much everything in life, we need a blank page to start our creation on. In Processing, this is called a sketch. For now, we will be drawing simple static sketches. For these, we will begin our sketch with the size() and background(). Why are those parentheses empty? Excellent question! That's where the parameters go. Parameters are what describe how the function should operate.
Size has two parameters, which work similar to a coordinate pair on a Cartesian plane. The first parameter describes the width of the window, and the second describes the height, both measured in pixels. For further reference, the origin (0,0) is at the top left corner of the window.
Background tells the program what color to make the background (I know, I was surprised too). This works in one of two ways; you can either state a) the brightness of the window background, with 0 being black, and 255 (the maximum [2^8 - 1]) being white, or b) you can state RGB values, separated by commas. This means that background can have one or three parameters.

For example, the following code would create a window 200 pixels wide, 200 pixels high, and set the background to red. Note two basic necessities of processing: each line is finished with a semicolon, and the words are all lowercase. Processing is extremely case sensitive, and all of the commands you learn here will be in the proper form of capitalization.

size(200,200);
background(255,0,0);

Essentially, this is our first program in Processing. I did not give you code for a hello world, because text is more complicated. We will delve into text at a later point. I wanted to use this first program to give you an extremely basic understanding of how Processing interprets commands.

Lesson 2 - Getting in Shape

Shapes are arguably the most important part of this course. Without drawing shapes, it'd be impossible to create things to interact with! (Well, we could import things, but that's intermediate/advanced stuff.) Anyway, the commands to draw shapes are quite self explanatory. From this point on in the course, I will be giving you a brief summary of each command I mention followed by an example of that code in action. In order to describe what these commands do, I will be using comments.

Commenting

In order to comment, you use a double slash //like this. The remainder of the text on that line will turn gray, and after your next enter/return, you will return to writing code. This enables you to talk to humans reading your code, but will tell the computer to skip over this line (or fragment of a line).

Example:

In order to describe what this line does; //I can comment and tell humans what it does, but not the computer.
//I can also put comments before a section of code
to describe what the block doesl
in my opinion, that comment describes everything until the next comment;
//Note on line 1 that the semicolon follows the function, not the comment. if you put the semicolon after the slashes, it will turn gray

You can also comment out multiple lines, by starting the comment with a /* and ending it with a */ . this can also comment out part of a line.

/*this is
a multiple
line comment*/
I can also comment out /*the middle*/ of a line

Now it's time to see those comments in action.

Drawing Shapes

Shapes are greatly simplified in Processing. For example, the command for a rectangle is rect();, the command for an ellipse is ellipse();. and the command for triangle is triangle(); Again, however, it seems we are confronted by a stunning void between our parentheses. Let's fill those in now.

Rectangles

Everyone knows what a rectangle is, so I'll spare the definition and cut straight to the syntax: rect(cornerX,cornerY,width,height);

cornerX: the x coordinate of the top left corner (can use word width, which is the width of the window)

cornerY: the y coordinate of the top left corner (can use word height, which is the height of the window)

width: the width of the rectangle

height: the height of the rectangle (If you want a square, simply make the width equal to the height.)

rect(width/2,height/2,40,60); //Draws a 40*60 rectangle with the top left corner at the center of the window

Say we want to center the square on our point though? we can specify the mode of the rect(); function. We do this by using the function rectMode();, and yes, it is case sensitive. rectMode(); has one parameter, and can either be set to rectMode(CORNER); (which is the default) or rectMode(CENTER);. The point specified by cornerX and cornerY become centerX and centerY. Note that this must be specified prior to the rect(); command, or it will use the last specified rectMode(); setting (It defaults to CORNER).

Ellipses

Ellipses are to circles what rectangles are to squares, in case you didn't know. Now onto the syntax: ellipse(centerX,centerY,width,height);

The parameters are the same meanings as their rectangular counterparts

ellipse(100,100,50,50); //Draws a circle with a diameter of 50 centered at (100,100) The mode is specified in ellipseMode();, and most commonly uses CENTER (default) or CORNER, which is useful for drawing circles inside squares. RADIUS also exists, in which you specify half the width and half the height. For more modes, see The Bible.

Triangles

Everyone knows what a triangle is. If you don't, it's a shape with three angles and three sides. Now you do. Syntax time: triangle(x1,y1,x2,y2,x3,y3);

x1: the x coordinate of the first point of junction

y1: the y coordinate of the first point of junction

x2: the x coordinate of the second point of junction

y2: the y coordinate of the second point of junction

x3: the x coordinate of the third point of junction

y3: the y coordinate of the third point of junction

triangle(100,200,200,300,300,400); //Draws a triangle with points at (100,200),(200,300), and (300,400)

Although it seems daunting at first due to the 6 parameters, it isn't that hard. This is the only simple mode for triangles.

Bonus: Lines

After teaching you those three "very hard" shapes, I thought you deserve a treat - an extremely easy but handy shape. I know what you're thinking, "LINES? SHOULDN'T WE HAVE LEARNED THESE FIRST?!" While that may be so, I'm writing the course, so I call the shots. I saved the easiest for last so that you could relax. The syntax for a line is as follows: line(x1,y1,x2,y2);

The parameters are the same as they are for a triangle.

line(50,100,100,200); //Draws a line from (50,100) to (100,200)

Lesson 3 - Variability is the Spice of Life

If you are intelligent enough to have gotten up to lesson 3, you probably have some understanding of algebra. In algebra, variables play a key factor. They act as representatives of a number, and are titled as such because of their ability to change. In programming, variables are used to store data, frequently numbers or pieces of data that need to be repeated. An analogy for variables in programming that I particularly like is a piece of paper with someone's phone number written on it in pencil. The paper is the variable, not the number. You can change the phone number by erasing it and rewriting it, or adding to it, but you can not change the paper. This ability to change will be crucial as we progress with making our programs interactive.

System Values

The kind folks that brought us Processing took it upon themselves to make our lives even easier than they already had. They created variables of their own that come prestored in the environment. You saw two examples of these earlier, width and height. When we call the size function, the two numbers are automatically stored by Processing into width and height. From that point on, we can work with those two values. By now you are probably thinking "we could store those ourselves, why would they make those?" The answer is that some other system values are not so easily created. For example, certain numbers have been stored for us, like PI, and TWO_PI. Another example is dynamic values, like the values mouseX and mouseY, which, oddly enough, are the X and Y location of the mouse RELATIVE TO THE WINDOW. This is absolutely NOT the mouse X and Y location on the screen. These values would be difficult for us to create ourselves. However, we'll learn more about mouseX and mouseY in the next lesson when we learn all about the wonderful world of interactivity. For now, let's get you started with making your own variables.

Storing Variables

Variables make our lives easier. It is a whole lot simpler to remember one letter or word than a long number or sentence. Why remember "The Quick Brown Fox Jumped Over The Lazy Dog" when you could simply remember longSentence? To create these variables, we require three different pieces of info: the Information Type, which is the type of information to be stored in the variable, the Variable Name, which is how you will refer back to your piece of paper, and the Value, which can either be stated with the variable "declaration," or later on in the program. Let's further examine these.

Information Types

Information types are the first thing we tell a computer about a variable. We will be working with three variable types: int, float, and boolean. There are more, but these are the only ones we will be using in the introductory course.

Integers

The int info type declares that a variable is intended to store whole numbers. This means that it can only store numbers such as, 1, 2, and -1. It can not hold decimals. If you declare an int, then attempt to store a decimal in it, you will receive the error message "can not convert from float to int".

Decimals

Decimals are stored in a type of variable called floats. Essentially, float can store any real number, including irrational numbers. You can store integers in floats without receiving an error message.

Boolean

Booleans are true/false statements, named after the mathematician who came up with the concept of logic. These act like switches, which can either be on or off. Booleans are used extensively in conditionals, which we will examine later.

Variable Naming

Conventionally, variables are named in a way that makes sense. For example, if we were creating a variable to describe how wide a rectangle is, we would probably store it as rectWidth, as opposed to pizzaSize. This makes our code exponentially easier to understand. Note two things. One, that when a name has two or more words compounded, we leave the first word lowercase, and capitalize all other words. Second, note that you can not store variables to the same name as system values.

Setting the Value

So far, we've declared a variable by stating the info type and variable name. This is what our variable should look like:

int exampleInteger

But what does that variable represent? Right now, the variable has no value. This is referred to as null. Not zero, zero exists. Null. This means that the variable is void of any meaning. If we want to fill it in, we use the statement variableName = value;. We can also do this in the declaration, keeping everything in one line, by stating int exampleInteger = 8. This sets the value of our variable to 8. Note that if you are using width or height to define your variable, you MUST use two lines. This is because if you declare a variable inside a blob (next lesson), it only applies to that section, but if you declare the variable before size();, it is set to 0. Having variables set will enable us to interact, which you will learn about in the next lesson.