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:
i) X Coordinate
ii) Y Coordinate
(Note: Remember to add a semicolon after the ending parenthesis that contains the parameters. Also, there should be no extra spaces within the syntax.)
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:
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.