The primary goals of the tutorial are to provide an introduction to computer programming within the context of visual media in a way that encourages future exploration and creates enthusiasm for coding. This tutorial was created to allow people to make their way through at their own pace, but it can also be used in a structured classroom envionment. This set of tutorials will take about an hour. Each section is a video introduction followed by time to write and modify a program. The screen is divided into three sections: video tutorial, code editor, code display window.
The primary material for each section is described below. For discussion or questions about this tutorial, please visit the Processing Forum.
1. Hello
What is computer programming and why is it interesting? A series of examples demonstrate how code is used within the visual arts in areas including animation, cartography, performance, architecture, and fashion design.
2. Shapes
Shapes are drawn to the screen with the ellipse() and rect() code functions. A series of parameters define the position and size of the shapes. These numerical parameters relate to the coordinate system.
3. Color
Shapes are colored with the fill() and stroke() functions. The three parameters for these functions define how much red, green, and blue light to use to fill and outline the shapes that follow. The numbers for the parameters range from 0 (0%) to 255 (100%) of each light color. For example, the code fill(0, 0, 255) will define 0% red, 0% green, and 100% blue. In the code editor, click on the fill() and stroke() function names to open the color selector tool.
4. Interact
Input is used to animate shapes. Unlike the earlier examples that execute once and then stop, the code in this section runs continuously. The setup() and draw() functions are introduced to enable continuous execution. The location of the cursor on screen controlled by a mouse or finger is used to set the position of ellipses and rectangles. The x-coordinate of the cursor is captured as the mouseX variable in the program and the y-coordinate of the cursor is the mouseY variable. These positional values are used to define the location of shapes on screen. As the cursor moves, the shapes respond.
5. Questions
Touch and/or mouse click events decide if the code does one thing or another. For example, will the color be green or blue; will an ellipse be drawn, or a square? The program asks a question through a short relational expression and if the answer is true, the code inside the block, the line(s) of code between the { and } symbols, runs.
6. Goodbye:
Congratulations! The tutorial is finished. Participants can share their work with others.
To learn more about programming and Processing, we suggest the following resources:
rect(a, b, c, d)
Draw a rectangle to the screen. The parameters follow:
a — X (horizontal) location of the shape's upper-left corner
b — Y (vertical) location of the shape's uppper-left corner
c — width of the shape
d — height of the shape
ellipse(a, b, c, d)
Draw an ellipse to the screen. The parameters follow:
a — X (horizontal) location of the shape's center
b — Y (vertical) location of the shape's center
c — width of the shape
d — height of the shape
fill(r, g, b)
Defines the interior color of shapes. The parameters follow:
r — amount of red, from 0 (none) to 255 (maximum)
g — amount of green, from 0 (none) to 255 (maximum)
b — amount of blue, from 0 (none) to 255 (maximum)
stroke(r, g, b)
Defines the outline color of shapes. The parameters follow:
r — amount of red, from 0 (none) to 255 (maximum)
g — amount of green, from 0 (none) to 255 (maximum)
b — amount of blue, from 0 (none) to 255 (maximum)
background(r, g, b)
Fills the canvas with a background color. The parameters follow:
r — amount of red, from 0 (none) to 255 (maximum)
g — amount of green, from 0 (none) to 255 (maximum)
b — amount of blue, from 0 (none) to 255 (maximum)
setup()
The code inside the setup() block runs once when the program starts.
draw()
The code inside the draw() block runs continuously while the program is running.
void
This keyword is required to be written in front of setup() and draw(). It means that the setup() and draw() functions do not "return a value."
mouseX
This variable stores the x-coordinate of the cursor.
mouseY
This variable stores the y-coordinate of the cursor.
mousePressed
This variable is true if a mouse button is pressed and it is false if a button is not pressed.
if
The if structure allows a program to make a decision to run the code inside the block. When the relational expression associated with the if is true, the code inside the { and } will run.
block
A list of code statements enclosed within braces, the { and } characters.
coordinate system
A system of numbers that define the location of positions on screen. The Processing coordinate system uses the upper-left corner as the origin (0,0) with the x-coordinates increasing to the right and y-coordintes increasing down the screen. Positions within the coordinate system are defined in units of pixels. For example, (100, 20) is 100 pixels from the uppper-left corner of the display window and 20 pixels to the right.
false
The opposite of 'true', which means an expression has evaluated to false. For example, 1 > 5 is false.
function
A program element with a specific purpose, a function often has parameters to define its behavior. For example, the rect() function draws a rectangle to the screen. The parameters placed within the function's parentheses define the location and dimensions of the shape. In other programming tutorials, functions are sometimes called methods, subroutines, commands, or procedures.
relational expression
A code expression that compares two values with a relational operator. For example, greater than (>) or less than (<).
true
The opposite of 'false', which means an expression has evaluated to true. For example, 5 > 1 is true.
variable
A container to store data that has a name and value. For example, the mouseX variable will have a value of 200 when the cursor is 200 pixels from the left edge of the display window.