Rick's Home PageAbout MeResearch InterestsResearch ProjectsPublicationsWhy Do Research?TeachingResourcesPeopleLinks Of InterestContact Me

Graphics Programming with Processing: Code Examples

At the New England Regional Developers (NERD) Summit 2015, Marvin Jones and I taught a session to introduce youths to programming and simple graphics development using the Processing programming language. The example code we wrote during the workshop is provided on this site with detailed comments to explain each step so that anyone may use them to learn, and we plan to later include more advanced tutorials for additional practice and further study. To view and run the each tutorial, download the corresponding .zip file, unzip it, and save it somewhere on your computer. Then when you run Processing and select "Open...", look for the folder with the same name as the example, then select the .pde file with the same name inside it. All the .pde files should open as tabs in a new Processing window ready for you. So read over the code and press the play button. Have fun!

For a supplement, a recording of our lecture and other NERD Summit 2015 presentations are available on YouTube. To install Processing, go to the programming language's website. There is also a detailed reference manual of all the Processing commands here.

Hello World

Hello World is usually the first program one learns in any programming language. It simply writes a welcome message to the screen. However, because Processing can display graphics as easily as it can print messages, there are multiple versions of Hello World that show all the basic features of programming and graphics in Processing.
NumberDescriptionCode Example
AllAll steps in one downloadHello_World_All.zip
1The usual Hello World programHello_World_1.zip
2Processing 101: setup() vs. draw()Hello_World_2.zip
3Graphical version of Hello WorldHello_World_3.zip
4Graphical view: setup() vs. draw()Hello_World_4.zip
5Using clear() for updating graphicsHello_World_5.zip


Once the basics are understood, it is time to start learning how to program using graphics! An ellipse is the formal word for an oval which is like a circle that has two different radii. We will start with a circle (both radii are the same value) and watch what happens to it as we update the code in each example. Sometimes the results will be the same, but the code will be different to introduce new programming ideas.
NumberDescriptionCode Example
AllAll steps in one downloadEllipse_All.zip
1Drawing the ellipseEllipse_1.zip
2Ellipse following the mouseEllipse_2.zip
3Changing the ellipse's colorEllipse_3.zip
4Adjusting the frame rateEllipse_4.zip
5Storing information with variablesEllipse_5.zip
6Storing information with arraysEllipse_6.zip
7Simple animation using arraysEllipse_7.zip
8Conditional statements for casesEllipse_8.zip
9Introducing classes and objectsEllipse_9.zip
10Functions to organize and reuse codeEllipse_10.zip
11Classes make two ellipses easyEllipse_11.zip
12Simplified code with arrays and loopsEllipse_12.zip

Programming a Simple Game

At the NERD Summit, we completed the tutorial with the Ellipse example, but we mentioned that it is possible to extend this program to make a game. This extends the basic ideas covered in the previous examples and begins to introduce more interactivity with the graphics we create. Because we continue from the Ellipse code examples, we continue numbering from the example files above.
NumberDescriptionCode Example
13Coming Soon!Coming Soon!

Rick's Home PageAbout MeResearch InterestsResearch ProjectsPublicationsWhy Do Research?TeachingResourcesPeopleLinks Of InterestContact Me