1. Installing Processing
1.1. Learning Outcomes
Students will be able to:
-
Download and install Processing
-
Open a processing project folder
-
Execute a provided Processing project
1.3. Tutorial Video for Downloading and Installing Processing
How to download and install Processing on Windows 10 (recorded by a previous GGC student):
Note that sometimes the operating system’s search will not find the Processing app, since Processing’s "installation" does not register the app with the system. You will need to remember where the Processing app is to find and execute the app. Another way to start Processing is to open a Processing code file (see below).
1.4. Test Run the Example Project
After you’ve successfully downloaded and installed Processing following the video above, you can test whether the Processing has been installed properly by executing an example project.
Download the Square.zip and extract it into a folder called Square. Go into the folder and double-click on the file Square.pde. If Processing is installed properly, you should be able to open the file in Processing’s IDE (see the image below).
Click on the Run button to see the animation. You should see a green rectangle in the center of the display window, The rectangle will disappear with a mouse click and reappear with a click to any key on keyboard. Study the code and see whether you could understand it.
For Processing, the file name and the folder name must match. For this example, since the file name is Square.pde, the folder must be named Square. |
How to download and install Processing on Windows and create a very simple Processing program (recorded more recently by a professor):
2. Basics - Variables, Assignments, Expressions
2.1. Learning Outcomes
Students will be able to:
-
Students will be able to explain what variables are, why they are used, and how they are used in programming.
-
Students will be able to declare variables and initialize them with values.
-
Students will learn how to manipulate variables to calculate position and size circles/ellipses in processing.
2.2. Definition
A variable is a named storage location in computer memory that holds a value. In programming, it is important to create variable name meaningfully because that help us understand what each variable is used for and we can make our code easier to maintain. For example, if we are storing a person’s age, we might name the variable "personAge."
The folliwng is an example of how we could declare and use a variable.
A fast way to test the code: Download a blank project Blank.zip and extract it into a folder called Blank. Copy the code in the editor and run the the code. |
// Declare a variable named "personAge" for a person's age
int personAge;
// Assign a value 25 to the variable
personAge = 25;
// Print the value of the variable using "println()" function/method
println("The person's age is " + personAge);
2.3. Tutorial
We will use a fun example to introduce how to use variables in Processing to change the visual effect. It uses the sine math function to scale the size of circles smoothly. Enter the following code block by block into your code editor. Please read the comments embedded in the code, which are intended for teaching the concepts.
The following video will guide you through the tutorial:
//a comment about this program.
/**
* ThreeCirclesSine.
*
* Smoothly scaling size with the sin() function for three circles
*/
//these two lines declare two float variables: "diameter" and "angle"
float diameter; //diameter will store the size of the circle
float angle = 0; //angle will control the size of circles.
//setup() function is called at the beginning of the program
void setup() {
size(640, 360); //size() function creates a window of size 640 by 360 pixels.
//diameter variable is defined to be the height of the window minus 10 pixels. This represents the size of the circle to the drawn.
diameter = height - 10;
noStroke(); //noStroke() function does not create the outline of the circle
fill(255, 204, 0); //the circle sets the color to yellow.
}
/**
* draw() function gets executed called repeatedly to
* create the animation effect. Each time it get executed
* is like the Processing "paints a frame in a movie".
* The follwing draw() function draws three circles and
* updates their size based on the current value of the
* "angle" variable.
*/
void draw() {
background(0); //paint the black background
/**
* d1 is used to store the diameter of the first circle. It is
* calculated using the "sin()" function and the "angle" variable.
* The sin() funtion takes angle as a parameter and it returns/generates
* a value between -1 and 1. Then this value will be scaled by "diameter/2"
* to generate a value between "- diameter/2" and "diameter/2". Then, add
* "diameter/2" to generate a value between "0" and "diameter". Last, add
* "10" to generate a value between 10 and diamter + 10.
*/
float d1 = 10 + ((sin(angle) * diameter/2) + diameter/2 );
//d2 is calculated in a similar way to d1 but with a different angle value
float d2 = 10 + (sin(angle + PI/2) * diameter/2) + diameter/2;
//d3 is calculated in a similar way to d1 and d2 but with a different angle.
float d3 = 10 + (sin(angle + PI) * diameter/2) + diameter/2;
//ellipse() function draws each circle
ellipse(0, height/2, d1, d1); //circle 1
ellipse(width/2, height/2, d2, d2); //circle 2
ellipse(width, height/2, d3, d3); //circle 3
//angle variable is incremented by 0.02 to create a smooth animation effect.
angle += 0.02;
}
When you run the program, you will see three circles, one with center in the middle of the left edge, one with the center in the middle, and one with the center in the middle of the right edge of the window.
![](images/ch2/ThreeCirclesSine.png)
2.3.1. A complete program
/**
* ThreeCirclesSine.
*
* Smoothly scaling size with the sin() function for three circles
*/
float diameter;
float angle = 0;
void setup() {
size(640, 360);
diameter = height - 10;
noStroke();
fill(255, 204, 0);
}
void draw() {
background(0);
float d1 = 10 + (sin(angle) * diameter/2) + diameter/2;
float d2 = 10 + (sin(angle + PI/2) * diameter/2) + diameter/2;
float d3 = 10 + (sin(angle + PI) * diameter/2) + diameter/2;
ellipse(0, height/2, d1, d1);
ellipse(width/2, height/2, d2, d2);
ellipse(width, height/2, d3, d3);
angle += 0.02;
}
2.4. Exercise 1: Spiral Movement
-
Declare variables
-
Declare "diameter" with an initial value of 10 (type: float)
-
Declare "angle" with an initial value of 0 (type: float)
-
Declare "radius" with an initial value of 0 (type: float)
-
Declare "angleStep" with an initial value of 0.1 (type:float)
-
-
Set up the canvas - copy following code
void setup() {
size(640, 340);
diameter = 10;
noStroke();
fill(255, 204, 0);
}
-
Draw the circle in a spiral form (Please use the starter code below based on the following description inside of draw() function)
void draw() {
1. call background() function to set the background color to black. background() function takes 0 for black.
2. compute x and y coordinates of the point on the ellipse/circle using the width, height, radius, and angle variables.
by using the cos() and sin() functions. Copy two lines.
float x = width/2 + radius * cos(angle);
float y = height/2 + radius * sin(angle);
3. use the ellipse() function to draw a circle on the canvas.
ellipse() function takes four arguments: the x-coordinate of the center of the ellipse,
the y-coordinate of the center of the ellipse, the width of the ellipse, and the height of the ellipse.
4. angle variable is incremented by angleStep.
5. radius variable is incremented by 0.2. This will create the spiral movement.
}
![](images/ch2/Spiral.png)
2.5. Exercise 2: Sprial Movement and Gradual Larger
Building on Exercise 1, declare a new float variable named gradualIncrement and initialize it with a value of 0.1. Inside the draw() function, add the line diameter += gradualIncrement to gradually increase the diameter of the circle by gradualIncrement on each iteration of the loop. Test your program to ensure that the circle grows gradually and moves in a spiral pattern.
float diameter;
float angle = 0;
float radius = 0;
float angleStep = 0.1;
void setup() {
size(640, 340);
diameter = 10;
noStroke();
fill(255, 204, 0);
}
void draw() {
background(0);
float x = width/2 + radius * cos(angle);
float y = height/2 + radius * sin(angle);
ellipse(x, y, diameter, diameter);
angle += angleStep;
radius += 0.2;
}
![](images/ch2/SpiralGradual.png)
3. Data Visualization
3.1. Learning Outcomes
Students will be able to:
-
Students will learn the basics of reading, displyaing, and interacting with a data set in processing.
3.2. Tutorial 1
We will visualize a set of data values over a map using the following code in Tutorial 2. To prepare for that, we first need to display the map. The following code display the map image. You can also download the code MapRender.zip, which contains map.png.
PImage mapImage;
/*
* The setup() method executes once after click Run button
*/
void setup( ) {
size(640, 400);
mapImage = loadImage("map.png"); //load an image from the data folder
}
void draw( ) {
background(255);
image(mapImage, 0, 0);
}
The program should display the following:
3.3. Tutorial 2
We will visualize a set of data values over a map using the following code. We will load in the position data of the map so that we can use them to determine where to render our visualizeion against the map.
You can also download the code MapVisualization.zip, which contains the image and data files map.png, locations.tsv, and random.tsv.
PImage mapImage;
Table locationTable;
int rowCount;
void setup( ) {
size(640, 400);
mapImage = loadImage("map.png");
// Create a Table object with the provided coordinates data file.
locationTable = loadTable("locations.tsv");
// The row count will be used a lot, so store it globally.
rowCount = locationTable.getRowCount();
}
void draw( ) {
background(255);
image(mapImage, 0, 0);
// Drawing attributes for the ellipses.
smooth( );
fill(192, 0, 0);
noStroke( );
// Loop through the rows of the locations file and draw the points.
for (int row = 0; row < rowCount; row++) {
float x = locationTable.getFloat(row, 1); // column 1
float y = locationTable.getFloat(row, 2); // column 2
ellipse(x, y, 9, 9);
}
}
The program should display the following:
![](images/data_visualization_map0.jpg)
PImage mapImage; Table locationTable; int rowCount; Table dataTable; float dataMin = MAX_FLOAT; float dataMax = MIN_FLOAT; void setup( ) { size(640, 400); mapImage = loadImage("map.png"); // Create a Table object with the provided coordinates data file. locationTable = loadTable("locations.tsv"); // The row count will be used a lot, so store it globally. rowCount = locationTable.getRowCount(); dataTable = loadTable("random.tsv"); for(int row = 0; row < rowCount; row++){ float value = dataTable.getFloat(row, 1); if (value > dataMax) { dataMax = value; } if (value < dataMin) { dataMin = value; } } } void draw( ) { background(255); image(mapImage, 0, 0); // Drawing attributes for the ellipses. smooth( ); fill(192, 0, 0); noStroke( ); // Loop through the rows of the locations file and draw the points. for (int row = 0; row < rowCount; row++) { float x = locationTable.getFloat(row, 1); // column 1 float y = locationTable.getFloat(row, 2); // column 2 drawData(x, y, row); } } void drawData(float x, float y, int row){ float value = dataTable.getFloat(row, 1); float mapped = map(value, dataMin, DataMax, 2, 40); ellipse(x, y, mapped, mapped); }
The program should display the following: