Visual Programming for Programming Fundamentals

Students will be able to:

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).

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.

How to download and install Processing on Windows and create a very simple Processing program (recorded more recently by a professor):

Students will be able to:

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.

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:

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.

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.

Students will be able to:

Boolean expressions use relational operators such as < (less than), < = (less than or equal), > (greater than), >= (greater than or equal), != (not equal) to compare variables against certain values.

For example, for a student to pass a class, the grade must be greater than or equal to 70; that is, we need to compare a student’s grade with 70. The boolean expression that represents this comparison is grade >= 70. A boolean expression will evaluate as either true or false and used in if statement so the code block belongs to that if statement will only be executed when the condition (boolean expression) is true.

For more detailed information about boolean expression and relational operators, please click here.

The code below uses an if statment to detect which key has been pressed and change the color of a rectangle accordingly, with R for red, G for green and B for blue. At the start, the rectangle is grey rectangle.

If you need help understand RGB color values, please visit https://processing.org/tutorials/color .

In this tutorial, you will learn how to use an if statement to change the moving direction of an object with left and rigth arrow keys.

Now, run Tutorial 2 code again and do not change the moving direction of the square and observer what will happen when the rectange approaches the border. You will notice that the square will move outside of the window. Let’s add an if statment so it moves to the opposite direction when hitting the left or right border.

Since the size of the window is 900 by 900, the square will touch the right border when its x coordinate is 900 - recWidth. It will touch the left border when its x coordinate is 0. Let’s check the location using the following if statement. If the boolean expression is true, indicating the square is hitting the border, change the moving direction to the opposite.

Here’s the complete code for Tutorial 3.

Add additional if statements so the square also moves up and down with border control.

Allow a user to choose the shape they want by using the keyboard: 1 for circle, 2 for triangle and 3 for rectangle. Here’s the code to draw the three shapes. You can use them directly in the if statement. Feel free to change the numbers to understand how the shapes were created in Processing.

Students will be able to:

We are going to use the following example to understand what a loop is and how it works. The starter code can also be downloaded from Squares.zip. Open Squares.pde and you will see a code as follows:

If you run the code, you will see a window as follows.

The code draws five squares using five lines of code. If we need to fill up the window with the same-sized squares, we will need five total rows. That is, we will need to draw 5 squares per row for five rows, that is, a total of 25 squares, which will require 25 lines of code.

If we change the square size from 100 x 100 to 10 x 10, to fill up a row, we will need to draw 500 / 10 = 50 squares. We will need to draw 50 rows to fill up the window. That is, we need to draw a total of 50 x 50 = 2500 squares. Using the same approach as in the starter code, we would need 2500 lines of code.

If the window size becomes 2000 x 2000 and the square size is 10 x 10, we will need to draw 40,000 squares. Using the same approach as in the starter code, we will need to use 40,000 lines of code. We can see that it would be a very tedious, boring and error-prone task.

The good news is that we have a new tool - loop - that will allow us to do things repetatively. Let’s get started. Let’s transform the starter code to one as shown below:

If you run the code, you will see that it draws the same five squares. Let’s examine the above code. We introduced a variable x. It starts with 0. After the each square is drawn, its value is increased by 100. We can see x takes on the values from 0, 100, 200, 300, to 400, the same as the x-coornates of the squares in the starter code, thus drawing the same squares.

You might ask why we bother to use a variable. That’s a good question! With a variable introduced, we can see that something interesting has happened. We can see that the following code is repeated five times in the program.

Now it is a good time to introduce loop. We will introduce a while loop (also called a while statement) as shown below. A while loop is very similar to an if statement. Just like an if statement, the boolean expression is first evaluated, if it is true, the statements below will be executed. In the example code below, a 100 x 100 square is draw and x is incremented by 100. An if statement will be done, but a while statement will go back to check the boolean expression again. If it is still true, it will execute the statements below again. This process will repeat until the boolean expression becomes false.

Now what the boolean expression should be in order to draw the five squares?

Let’s first go to Java Visualizer and copy the following following code into the main method and visualize the execution and observe how x's value changes.

Ok. I think by now you have figured out that the boolean expression for drawing five squares should be x ⇐ 400 or x < 500. They will have the same effect for this program, since x is incremented by 100 each iteration of the loop.

Java and most programming languages offer another type of loop, called for loop. It does the same thing as a while loop but has a different format. The following is an equivalent for loop as the while loop in step 2. Pay attention to where x is intialized to 0 and where x is incremented by 100 are in the for loop.

We can see the for loop is more compact.

You can stop here, but if you are curious about how to fill out the whole window using the squares, you can read on.

For the remainder of Tutorial 1, we will use for loop. Let’s add another variable y and initialize y to 0. After drawing a row of squares, we will increase y by 100.

If you run the code above, you will see that the window is covered with square as follows:

Again we can see that the following code is executed repetatively:

Treating the above block code as a unit and using the same approach as how we have converted the step-1 code to the step-2 code, we can use another loop to make this code execute five times and draw the five rows:

Converting the while loop in step-5 code to a for loop, we have the following code that is more compact:

Change the code further so that it uses 10x10 squares to cover the first row or the whole window.

The following code plots two sine waves.

You may notice a similar phenomenon inside the drawOneWave method to that in Tutorial 1 - Step 1, where a segment of code is repeated over and over again, in this case, 20 times. This indicates that you can use a loop to remove the duplicated code.

In this exercise, you will first study the starter code that draws the rectangles as follows.

You will figure out the pattern of the locations of the rectangles and convert it into a loop based solution.

In this exercise, you will write a program that draws a gradual change of color from black to white and shows the gray scale value of the color where the mouse points to. See the following image for a reference. Note that the text color should be white when the mouse points to anywhere on the left half of the window and black when the mouse points to anywhere on the right half of the window.

Students will be able to:

Simply speaking, we create a method by putting codes that focus on acehieving one specific task into one block and give this block a name, referred to as method name. Later on, the same code in places we need it without having to re-write it. (Over-simplified)

A method always has a method header and a method body. Once a method has been created, it needs to be invoked when you need to use it. Tutorial 1 will show you examples of defining a method and invoking methods.

Run Tutorial 1 code below in Processing, and draw an image by moving your mouse. The size of the circle is determined by the speed of your mouse movements.

In this program, a method variableEllipse() was created. The method header is:

void means this method will not return any data. variableEllipse is the method name. x, y, px, py are the parameters with integer data type.

This method is invoked in draw() method.

Take a look at the method body of variableEllipse: It invokes abs() method, stroke() method and ellipse() method. All these three methods are already defined in the Processing library and we just need to invoke them when needed.

The code was provided by Processing

Look at the starter code provide below. Pay attention to the parameters of polygon() method. Invoke the method three times to create the three shapes similar to the ones shown in the picture.

Students will be able to:

An array in Java is a way to store a collection of elements of the same type. It is like a container that can hold multiple items of the same kind, such as a collection of numbers, letters, or even objects.

For example, imaging you are collecting the scores of games. Instead of creating separate variables for each score, you can use an array to store all the scores in one place. Then, you can access and manipulate the scores as needed.

Here’s a example of how to declare an array of integers in Java:

To access an element in the array, you use the index of the element, which starts from 0. The following code access the first element in the array and then assign it to a new value.

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.

The program should display the following:

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.

The program should display the following:

How can we use arrays in Processing to create a Dippin' Dots style rainbow ice cream that fills a cup?

Create an array called xPositions that stores 10 integer values between 0 and the width of the screen. Use a for loop to draw 10 circles with random y positions and a fixed size at each x position in the array.

Create an array called colors that stores 5 color values of your choice. Use a for loop to draw 5 rectangles of equal size 40 x 40 on the diagonal of a window 200 x 200 with each being filled with a different color from the colors array.

Create an array called yPositions that stores 50 integer values between 0 and the height of the screen, evenly distributed. Use a for loop to draw 50 lines of varying lengths with a fixed x position (the middle of the window) and a y position determined by each value in the yPositions array. The length of the line should be a random value between 10 and 50.

Create an array called textStrings that stores 4 string values of your choice. Use a for loop to draw 4 text strings, each string being centered horizontally and spaced vertically with the height of the screen divided by the number of elements in the textStrings array.

Create an array called circleSizes that stores 6 increasing integer values of your choice between 10 and 100. Use a for loop to draw 6 circles of equal spacing and varying sizes, each size being determined by an element in the circleSizes array.

Students will be able to:

We are going to use the following example to understand what class is, how to create objects from a class, and the advantages of using object-oriented programming. Download Balls.zip and extract it into a folder called Balls. Read and understand this starter code.

Starter code is given below. It can also be downloaded Birds.zip.

Convert the starter code into an object-oriented solution. Define a class for Bird that has six attributes, a constructor method, update method, and display method. Update the main program Birds.pde so that it uses one array to store all the bird information.