This Digital Media Academy How-To project of writing a computer program using Processing will give you a new appreciation of programming, and challenge you creatively.
Through a simple project (drawing a smiley face), you’ll gain an understanding of programming basics using Processing, a programming language created as an iteration of Java™, with the goal of making learning computer programming an easy, fun and visual experience.
How Processing Works
Before we dig in, let’s cover some basic concepts related to computer programming:
- A function is whatever you’re trying to create by programming code. (For our purposes, let’s say that the function is an ellipse, or circle.)
- A command is an instruction you give to the program by writing it in the editor. Each command is unique and each does something different.
- For each unique function, there are parameters that you assign to that function and write in the editor. Parameters are values that let you assign very specific qualities to whatever function you’re trying to create. Typical parameters include:
i) X Coordinate
ii) Y Coordinate
- The syntax of the function expresses the function and describes the parameters and is written like this:
(Note: Remember to add a semicolon after the ending parenthesis that contains the parameters. Also, there should be no extra spaces within the syntax.)
- Keep in mind that function calls get executed in order from top to bottom, so if you want a shape to overlap another, you have to draw the topmost shape last.
Now let’s say you wanted to define the size of the canvas you’ll be working on in the editor. To define its size, you would set the total pixels along the X axis, along with the total pixels along the Y axis, and write it like this:
This would set the canvas size to 500 by 500 pixels.
With an open Processing IDE window, you can start programming visual shapes right away. There are no class structures, no graphics to import and no playing around with functions, inheritance or other programming commands.
Project Steps: Drawing a Smiley Face
There are 7 major steps to this project of drawing a simple smiling face, as well as a number of smaller steps:
STEP 1: Gather the project materials you will need
a) Visit the Processing website and download Processing. This is a free and open-source application.
b) Watch the Processing tutorial, starting with this introduction:
STEP 2: Set the size of the screen
Set the size of the screen by entering the following code:
STEP 3: Draw a circle
Draw a circle (ellipse) by entering the following code:
STEP 4: Create the eyes
Create the eyes by entering the following code:
ellipse (350, 150, 50, 50);
STEP 5: Set the color of the eyes
Set the color of the eyes to blue by entering the following code:
STEP 6: Create the mouth
Create the mouth by entering the following code:
STEP 7: Make the mouth smile
To make the face’s mouth smile, you’ll need to change the mouth from a line to an arc. To use an arc function to draw an arc instead of a line, enter the following code:
a: X Coordinate of the arc’s ellipse
b: Y Coordinate of the arc’s ellipse
c: Width of the arc’s ellipse by default
d: Height of the arc’s ellipse by default
start: Angle to start the arc (specified in radians)
stop: Angle to stop the arc (specified in radians)
Congratulations! You made a smiley face.
EXTRA: WHAT ELSE CAN YOU CREATE?
Take a look at the reference below for the syntax of many functions, and then try drawing your own face, creature or anything you can imagine! If you can’t think of anything, try drawing a house.
Use these commands to help you carry out the following functions:
- Setting the screen size: size (horizontal_width,vertical_height);
- Creating a line: line (x_start,y_start,x_end,y_end);
- Creating an ellipse: ellipse (x,y,width,height);
- Creating a rectangle: rect (x,y,width,height);
- Creating a triangle: triangle (x1,y1,x2,y2,x3,y3);
- Setting the fill color: fill (red,green,blue);
- Setting the line color: stroke (red,green,blue);
- Setting the background color: background (red,green,blue);
Processing is excellent for giving students their first step to text-based programming, as an intermediate step after something like Scratch and before jumping into something like Java™.
Processing’s ability to give instant visual output makes it fabulous for learning programming. And since it actually is Java™, you get an introduction to programming with Java™, and what it can do – including creating arrays, complex data structures and objects.