An Animated Introduction To Computer Science
With Processing And Java

Thomas C. O'Connell


DRAFT 2024


Copyright © 2016, 2024 Thomas C. O'Connell, All Rights Reserved

Chapter 1 : Objects With Processing

1.1 Introduction

When we write computer software, we have to describe real, or even imaginary, objects to the computer so that those objects will act the way we want them to in the virtual world we are creating. For example, press start on the animation below. What do you see?

Your browser does not support the canvas tag.

There is a circle, a migraine-inducing rectangle, and a moving line. These are objects. If you were to describe these objects, you could talk about their size, shape, color, position on the screen, speed, and direction with which they are moving, etc. All of these things are attributes of the objects – stuff we can say about the objects, stuff the objects have. So, the first thing we have learned about objects is:

Objects have attributes.

There is actually at least one more object in this animation that is a little trickier to recognize – the window itself. This is the main Processing object. We are going to start by working with the main Processing object.

Monster

Let’s create a Monster. We can tell the main Processing object to do stuff by typing into the main Processing sketch. (This section assumes you are using the code editor that comes with Processing. It simplifies some things about programming with Processing and hides some of the details that can be confusing for beginners. As you advance, you will want to switch to a more full-featured development environment. )

Figure 1.1 shows some Processing code, while in Figure 1.2 you can run the animation by hitting the Start button. This gives you the same window that you would get by hitting the Play button on the Processing Editor.

size(800,400);

ellipse(100,125,50,50);
line(100,125,100,135);
ellipse(90,125,5,5);
ellipse(110,125,5,5);
rect(90,140,5,6);
rect(90,140,5,6);


Figure 1.1: The code to draw a Monster in the main Processing object.

Your browser does not support the canvas tag.



Figure 1.2: The Monster drawn in the window.

Each of the lines, or statements, that we typed in the editor tell the main Processing object to do something. The first statement, size(800,400);, tells the main Processing object that we would like the window to be 800 pixels wide and 400 pixels tall. A pixel is the smallest point to which we can draw on a computer display. The second line tells the main Processing object to draw an ellipse that is 50 pixels wide and 50 pixels tall at a point that is 100 pixels in from the left side of the window and 125 pixels down from the top.

This idea is simple but important:

You can tell objects to do things.

So not only do objects have attributes, they also have things they can do.

The things that an object can do are defined by methods. Each object includes a set of methods that specify what the object can do. We tell an object what we want it to do by calling the object’s methods. For example, to draw the Monster, we called four methods that are part of the main Processing object: size, ellipse, line, and rect. These methods work as follows:

Notice that in all of these calls to methods in the main Processing object, we have given the method some information. We haven’t, for example, just said, “Hey main Processing object, draw a rectangle.” Instead, we told the main Processing object where the rectangle belongs in the window and the rectangle’s dimensions. The information that we give to a method is referred to as the arguments passed to the method. The arguments are specified in parentheses and are separated by commas.

Notice also that each statement ends with a semi-colon. This is an annoying feature of many programming languages that makes it easier for the computer to read your program but harder for you to write your program. There are plenty of other examples of this general principle: Computers are stupid but they make us feel stupid.

Back To Top