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.
Ellipse
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.
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.
| Number | Description | Code Example |
|---|
| 13 | Coming Soon! | Coming Soon! |
|