Processing Tutorial 1

Drawing pictures with code? Yes!


This exploration will function like a hunt for answers.

If you haven’t already installed Processing on your computer, you can download it for free here.


Lesson 1. Pixel Grid System:

First just a recap on the pixel grid: every point on the screen is a pixel and each point is specified by a location:  (x, y). 
Important Reminder: 

The pixel grid system has its 0,0 coordinate in the upper left corner.

This is a different position from the conventional math grid which has it in the bottom left corner.


Lesson 2. Canvas is Coded as Size

Your computer screen is your workspace and in Processing you have two windows to work with. The coding instructions you enter are input into the main code window and the canvas that shows your design is called the Sketch window. 




You must specify the dimensions of your canvas first and in Processing the code term for this is size.


Lesson 2.5    Do you know how to make a line? 


Try this code:


Code Vocabulary Reminders:

The blue words are called functions (or commands).

The numbers in parenthesis are called arguments and they are the instructions/specifications on how to make a particular function().


This is how a line works.



Now, replace the 3rd and 4th  arguments in the previous line() function above with the words, “width” and “height” – like this:

Look at the two code pictures below and compare.



They produce the same results but something is different.

What do you think the code words “width” and “height” refer to by looking at the code?

They use the same values as somewhere else in the code. Where?



It turns out that whenever you see the words “width” and “height” in your code that these two words refer back to the size() of the canvas always.

So, in the previous case:

“width” = 200


“height” = 100


And, in this case:

“width” = 400


“height” = 200


And, in this case:

“width” = 300


“height” = 50



et cetera…



Exercise #1

a. Using the code model from the box above, make an X with two black lines on a gray background. If you need to review how a line works, click here.

b. Now, replace the arguments in your two lines using the new commands: “width” and “height.


Lesson 3: Simple Shapes


We are going to create more simple designs in the pixel grid system.  We will create these shapes with point coordinates just like we did with the line above. Each shape works differently but sometimes there are similarities. 

In the images below, what information could you specify so that you can tell the computer to draw the various shapes?




Point: X (horizontal) position, Y (vertical) position of one point.

Line: X (horizontal) position and Y (vertical) position of each end point.

Rectangle & Ellipse: location in horizontal and vertical axis, width and height of shape.


Lesson 4. Recap Functions and Arguments

Now you are thinking like a coder! By describing shapes with vector points on the pixel grid system you are on your way. Formally, in Processing, we program shapes with…

Functions(), which work as action commands.


Arguments, which are the specifications for the action command.


Regular Language Example:

Jump (function/action) from the ground (argument) to the ceiling (argument).


Exercise #2

a. Code the 4 shapes below, list which parts are functions and what parts are arguments?

b. Explain in your own words each function and argument does specifically?


Lesson 5: Shades of Gray

Screen shot 2013-07-10 at 3.52.08 PM

You designate gray tones very simply by specifying a number from

0 (zero – the darkest black) all the way to 255 (the lightest white).


Lesson 6: Syntax & Comments

When using code to make the computer do something, the syntax of a computer language is the set of rules that defines the proper order and combinations of letters, numbers and symbols. The syntax rules must be strictly followed or the code will not work. If you misspell words, miss punctuation, or capitalization then your code might break.

Comments are notes to self to help you understand your chunks of code. We use two forward // to indicate a comment. 


Example code with correct syntax and comments // after  

background(255);          // Sets background to white
stroke(0);                       // Sets outline color to black
fill(150);                        // Sets color interior of a shape to grey
rect(50,50,75,100); // Draws shape with most recent settings



Exercise #3

Based on the many clues from the above information. Code the following canvas:



Lesson 7. Coloring Pixels with Reds, Greens and Yellows (RGB)



In art class and elementary school, the primary colors were red, yellow and blue.

Primary Colors



In the digital environment our primary colors are red, green and blue.

Digital Color Mixing 101:
Red + Green = Yellow
Red + Blue = Purple
Green + Blue = Cyan (blue-green)
Red + Green + Blue = White
no colors = Black

RGB Values:
Each color has a value between 0 and 255
0 means NONE of that color
255 means MAX of that color

Exercise #4

See if you can figure this out without coding it first. Which line of code matches which colored dot?  

After guessing, code it to check your answers and leave a comment on how you figured things out in the code.

Tip: Processing has a color selector to aid in choosing colors. 

Access this via TOOLS (from the menu bar) → COLOR SELECTOR.


Use the values from R, G, B  to help you specify your

color choice in a 3 argument command such as fill() or stroke().


Lesson 8. Adding Transparency Values

When considering the above formulations for RGB color, there are 3 values you must enter: the R value, the G value and B value. If you would like a color to not be opaque (solid) then you must add a fourth value to your color formulation to specify the opacity. The number range for opacity is the same as color, 0-255.

Exercise #5

5A. Type the following code for this image and explain how opacity works as a fourth argument after testing your ideas.

5B. Replace two arguments in your code with the built-in commands width and height.


Screen shot 2013-07-10 at 6.16.17 PM



Lesson 9: The Processing Reference – Important Resource!

The Processing Online Reference is a complete library of commands that will help you do more and improve upon your code project.  Here’s the link:

It looks like this:

Under 2D Primitives find the quad() function and click to open it. 

The following explanation shows you how to understand the reference when using new code commands:

Exercise #6

Make a new sketch window and using the Processing Reference make a new design with two quad() shapes, one triangle() shape, and few other shapes that are all different colors and on different parts of the canvas.

If the above concepts aren’t clicking for you or if you would like a fun review of these coding ideas, then try watching the very animated and informal free video tutorials by NYU professor and Processing champion, Daniel Shiffman.

Screen shot 2013-08-15 at 11.31.22 AM

The videos which reference this webpage:

How to Use Processing

Drawing with Pixels

RGB Color


Screen shot 2013-08-14 at 10.26.55 AM