1.

0 Basic Concepts in Processing

Welcome to the first lesson — woohooo! In this lesson, you will learn how to use shapes
and colors in Processing, and in the end, you will be able to make the interface of the
Pong game (Figure 1.0). So let’s get started! Now, let’s go over some basic concepts in
Processing that make it easy to use. As my boss always says, “if it doesn’t work on paper,
it doesn’t work in real life”. So I’ll advise you to pick up a pencil, an eraser, and a sheet of
paper, preferably a graph sheet if you have one, and let’s begin!

Figure 1.0: Pong Interface

Coordinate System
Remember coordinate systems from secondary/high school (Figure 1.1)? If you said no,
don’t worry. Just take a look at the picture below to jog your memory. You are probably
used to the coordinate system with the origin (0,0) point at the center, as shown on the
left. However, in the computer or phone system, the coordinate system is such that the
origin is at the top left with x increasing horizontally to the right, and y increasing
vertically downward shown on the right in Figure 1.1

1
 Figure 1.1: Regular Coordinate System (left) and Computer Coordinate
System (Right)

Now choose and run the screen_grapher program by pressing the play button after
opening it from the main menu. Refer to the “Course Apps Setup” doc if you don’t
know how to find the screen_grapher program within APDE. You should see a
similar screen like the one below in Figure 1.2 but with different maxX and maxY
values and a slightly different axis.

2
 Figure 1.2: Snapshot of my graph sheet

Now draw the graph on your sheet of paper. The value maxX represents the highest x
value you can use on your screen. The value maxY represents the highest y value you
can use on your screen. Pay attention to your graph and note the maxX and maxY
values, so you know how to position objects on your screen. Note that maxX and maxY
are your phone's full screen width and height respectively in pixels. Hence the point
(maxX, maxY) corresponds to the bottom right of your screen.

Note 1.1: My numbers might be different from yours because my phone has a
different screen size, so all the coordinates I use in this course could be different from
yours. Focus on understanding the concepts being explained as you will be writing
your code with your phone’s coordinates later.

Processing Program Structure

In Processing, lines of code are generally organized into two components: setup() and
draw(). All the code that needs to run only once like setting the screen size of your
program output is put in setup() whereas all the code that needs to run continuously,
like drawing of objects is put in draw(). Several lines of code together make a
program. In Processing, a program is called a Sketch.

3
Window Size
Sets window size
fullScreen(); //sets full screen

This line of code above is called a statement and it sets your program to run in
fullscreen mode. We would use this line of code in every program we will write in this
course.

The words highlighted in blue are called functions. Note the two forward slashes “//”.
They are used to write comments. The computer doesn’t run comments as part of the
program but it helps you the programmer and other readers understand the code. Make
sure you always write descriptive comments like the one written above. Also, note the
semicolon at the end of the code is required, else the program won’t work and you will
get an error. Mistakes such as forgetting the semicolon cause errors are these mistakes
are called bugs. Also, note that there is space before the statement. It is called an
indentation which is created with 2 spaces or the tab symbol (follow the steps in the
image below) in the keyboard in APDE. You need to indent your code to make it look
clean. You will see more of these in the upcoming code examples.

4
Action 1.1: Now open the example program called Intro from within APDE. Replace
the parts of the code that has *** with the appropriate values. If you don’t know the
appropriate values to replace the *** with, look at the code below. I’ve replaced my
*** on the first line, which is a comment, with the maxX and maxY values I got when
I run the screen_grapher application.

My intro program before I put in maxX and maxY

//maxX = ***, maxY = ***

void setup() //runs once

{

5
 fullScreen(); //Sets the program to run in full screen mode
}
void draw() //runs continuously until the program is stopped
{

Then I replaced the *** with my maxX and maxY. For example, on my phone, my
maxX is 1920 and my maxY is 1080. So my code now looks like below.

//maxX = 1920, maxY = 1080

void setup() //runs once

{
fullScreen(); //Sets the program to run in full screen mode
}

void draw() //runs continuously until the program is stopped

{

Note 1.2: Moving forward, anytime you open any of the programs in your APDE app,
replace the *** in the first comment at the start of the file with your maxX and
maxY like I’ve done above.

Shapes
Now open the shapes program, and of course, replace the *** in the first comment at
the start of the file with your maxX and maxY like I’ve done above. Ok, now will be the
last time I will remind you about replacing the *** in the code. We will go over all the
code you see in there.

Drawing various shapes

6
To draw a rectangle, use the function rect(). You first need the top-left point: specified
by the first two parameters, x and y. (Parameters are the letters, words, and numbers
that you write in brackets “()” of functions. We will learn about functions in lesson 4.)
Then the width of the rectangle and height of the rectangle: specified by the last two
parameters, w and h (Figure 1.3).

Figure 1.3: Drawing a rectangle

To draw an ellipse with the function ellipse(), you need the center point specified by
the first two parameters x and y. Then you’ll need the width of the ellipse and height of
the ellipse: specified by the last two parameters, w, and h (Figure 1.4).

7
 Figure 1.4: Ellipse in a computer’s coordinate system

To write text on the screen using the function text(), the first parameter is a set of
words put in quotes or a number (which doesn’t need quotes). The next two parameters
are the x and y positions of the text. The x and y positions specify the position of the left
bottom corner of the text (Figure 1.5). We set the size of the text using textSize() with
the parameter being a number.

Figure 1.5: Text in a computer’s coordinate system

My “shapes” Program
We can draw various shapes such as ellipse, rectangle, and text using the following
statements:

8
 Figure 1.6: Snapshot of shapes

The code below draws the shapes in Figure 1.6.

//maxX = 1920, maxY = 1080

void setup() //runs once

{
fullScreen(); //Sets the program to run in full screen mode
}

void draw() //runs continuously until the program is stopped

{
background(200); //sets the background grey

rect(0, 30, 960, 135); //draws a rectangle

ellipse(480, 540, 50, 50); //draws an ellipse

textSize(20); //set text size to 20

text("This is my first program", 20, 270); //writes text on screen
}

9
Another way to think of the statements that draw these shapes are with x and y being
the x and y positions, and w and h being width and height respectively:

rect(x, y, w, h); //draws a rectangle

ellipse(x, y, w, h); //draws a circle
textSize(some number) //set the size of the text
text("some text", x, y); //writes text on screen

We haven’t talked about the background function yet, so you can ignore it for now.
Just keep it in the code of the shapes program like I’ve done below.

Action 1.2: Program a replica of the rectangle, text, and circle shown in Figure 1.6
in the shapes program on your phone. Draw the shapes on your paper and indicate
the right coordinates and the dimensions of the shapes. Then write the code that can
draw it on the screen. You’ll basically replace the *** with the appropriate coordinates
and dimensions from your graph sheet.

Question 1.1: How would you draw a circle with an ellipse function, and a square with
the rectangle function?

Color
Now that we have drawn some shapes, won’t it be cool if we can add some colors to
make our drawings look pretty? Yes, it would! We will look at an example that sets the
colors for our previous drawing.

We can specify the background color of our screen using the function background().
And we can specify the color of the (1) Outlines of our shapes using the function
stroke() and (2) Interior of our shapes using the function fill().

10
Now let’s try to understand what exactly the parameters in the coloring functions mean
and how to set specific colors. There are two color models available: (1) Grayscale (black
and white) and (2) RGB (red-green-blue).

For the grayscale model, you specify one number between 0 (black) and 255 (white). As
the number increases from 0, the color gets lighter and lighter, until it’s completely
white at 255 (Figure 1.5).

Figure 1.7 Grayscale Model

For the RGB model, we specify a set of three values, each in the range from 0 (none of
that color) to 255 (full on) for each of the three colors: red, green, and blue. Various
colors can be derived by combining these three colors like the picture on the right in
Figure 1.4. For example, (255,0,255) gives purple.

Figure 1.8: RGB Model

11
Using one parameter tells Processing to use the grayscale model, for example,
background(0) sets the background to be black. And using three parameters tells
Processing to use the RGB model. For example, fill(0,255,0) sets our shapes’ colors to
be green.

Note 1.3: To set the color for a shape, write out your coloring functions fill() or
stroke() before your shape. It’s like how when painting, you dip your brush in a
specific color before you start painting. So to assign different colors to different shapes
(eg shape 1 and shape 2), set the color for shape 1, draw shape 1, and then set the color
for shape2 and draw shape 2. Also, background() needs to be called before drawing
any shapes.

The code below colors the shapes in Figure 1.5

//maxX = 1920, maxY = 1080

void setup() //runs once
{
fullScreen(); //Sets the program to run in full screen mode
}

void draw() //runs forever

{
background(200); //sets the background grey
stroke(0, 255, 0); //sets the color of the outline of shapes drawn below this code
below green

fill(255, 0, 0); //sets the color of shapes drawn below this code red
rect(0, 30, 960, 135); //draws a rectangle

fill(0, 255, 255);//sets the color of shapes drawn below this code blue
ellipse(480, 540, 50, 50); //draws an ellipse

textSize(20); //set text size to 20

fill(0); //sets the color of text drawn below this code black

12
 text("This is my first program", 20, 270); //writes text on screen
}

Figure 1.9: Snapshot of shapes with colors

Note 1.4: You can select a specific color in APDE to use in your program. If you need
more parameters to choose from for various color combinations, you can use the
Color Selector option under Tools section in APDE. Remember to see Tools, press
the 3 dots on the top right corner (Figure 1.10)

13
 Figure 1.10: Screenshots for using APDE’s color selector

Action 1.3: Now in your shapes program, color the rectangle, circle, and text you
drew earlier. Try different colors too. You can also change the background color with
background() and the outline of the shapes with stroke(). If you get stuck, look at
the code above and pay attention to where I use the fill(), stroke(), and
background() functions. Try using APDE’s color selector also.

Potential Issues
Your code may not work and produce an error because of the following reasons:
● Not putting a semicolon “;” at the end of a statement
● Processing is case-sensitive which means that for example, text and Text though
contain the same letters, are different from the computer’s point of view since the
second word starts with a capital “T”. So your program might not work because
instead of draw() you used Draw()
● Not putting corresponding closing braces “}” or brackets “)” after using an
opening brace “{” or bracket “(”

14
 ○ To avoid this issue, it’s best to write the closing brace or brackets right
after you write the opening braces so you don’t forget

Note 1.5: Several issues could be prevented by always using the Auto Format option
available in APDE under Tools section before running your program. You just have to
highlight or select all your code in a Sketch and then click Auto Format.)

Finding bugs in your code called debugging is an important skill to develop as a

programmer. Several times, you will make mistakes and your code won’t work and
produce errors. It’s important to be patient, read the error messages carefully and also
take a look at the line highlighted which points to the location of the bug.

Note 1.6: Adopt the good programming style used in the examples provided
above for all your programs. Note the way comments were concise and descriptive,
line of space in between statements that perform different functions, proper
indentation and so on.

Action 1.4: Now go back and play with all the programs you used in this lesson.
Modify parts of it, play with it till you understand all the concepts in the summary
below.

Summary
In this lesson, you learned how to:
1. Structure your program using setup() and draw()
2. Set the size of your program by using fullScreen()
3. Draw shapes using ellipse(), rect() and text()
4. Set the color of your shapes and screen using fill(), stroke() and
background()
5. New programming terms such as statements, parameters, functions,
comments, bugs, debugging, indentation
○ If you don’t remember what any of these terms are, make sure to reread
those sections of the notes as we will use these terms a lot!

15
Congratulations! Now you can make the interface for your Pong game as described in
Assignment 1. Now, complete Quiz 1 next, and then Assignment 1. See you later in lesson
2!

Extra resources
● Introduction - Processing Tutorial
● Introduction - Drawing with Pixels
● Flow (setup and draw) - Processing Tutorial

16