We'll use the programming language Processing to build some interactive animations of cool geoscience concepts. Processing is ideal for what we want to do because it is free, platform-independent, and open source. It is also a great language for a novice programmer to learn because you will not have to deal with all the libraries, compilers, and other system-level functions that usually have to be set up correctly by an experienced user for other programming languages to run.

The tutorial you'll work through in this course is one way to learn Processing. Another great reference is the Processing website [1].

I also suggest you invest in a good reference book as well. Here are my three favorites:

• Getting Started with Processing by Casey Reas
• Processing: A Programming Handbook for Visual Designers and Artists by Casey Reas and Ben Fry
• Processing for Visual Artists: How to Create Expressive Images and Interactive Art by Andrew Glassner

I cannot emphasize enough that in order to learn to program you really have to practice doing it. In my experience, that means typing the commands in yourself, not just cutting and pasting them and not just reading over my sample programs. While it is true that you could copy and paste my sample programs into your editing window and then run them, I recommend that instead, you follow along with my examples by actually writing each one of them or better yet, writing an interesting modification to each one of them.

Overview

This lesson introduces you to the programming language Processing. We will also read and discuss a news article about teaching computer programming in schools.

Learning Outcomes

By the end of this lesson, you should be able to:

• print output to the screen
• make a composition with an assortment of shapes

Note about my sample programs

The content pages in this lesson and most of the other ones contain programs for you to copy, modify, and test out. This course is part of Penn State's Open Educational Resources initiative and I am committed to user accessibility. Therefore, wherever possible I have written out the plain text of the program or command using syntax highlighting and a font that looks like computer code. I have also taken a screenshot of the display window created by the output of the program. In the case of a more complicated program, I have made a narrated screencast explanation of its guts as well as a close-captioned version of the screencast.

If you want to learn to program, don't try to copy-and-paste all of the sample programs. Build muscle memory and increase your cognitive load threshold by typing them yourself. Your neurons will thank you later.

What is due for Lesson 1?

This lesson will take us 1 week to complete. Participate multiple times in the reading discussion in a discussion board 17 - 25 May, and turn in Exercises 1.4 and 1.5 to the appropriate assignment dropboxes in Canvas by 25 May 2021.

Questions?

If you have any questions, please post them to our Questions? discussion forum (not e-mail). I will check that discussion forum daily to respond. While you are there, feel free to post your own responses if you, too, are able to help out a classmate.

You will find this article linked from the discussion in the Lesson 1 Module in Canvas.

As you are reading, think about the following questions for our discussion:

• Does your school have computer science classes?
• What do you think about the apparent disconnect between programming and "ICT"?

In this lesson, you downloaded Processing and wrote your first programs! Getting started is always the highest hurdle with anything new.

Reminder - Complete all of the Lesson 1 tasks!

You have reached the end of Lesson 1! Double-check the to-do list on the Lesson 1 Overview page to make sure you have completed all of the activities listed there before you begin Lesson 2.

About Lesson 2

Two things are going to happen in Lesson 2. First of all, we are going to read and discuss two papers (details on the next page) that give some insight into the inspiration for this course. Also, we are going to tackle the next level of programming in Processing. One thing that computers are very good at is repetitive tasks. That's why they were invented in the first place, to save time and increase accuracy when performing the same calculations over and over again. In this lesson we'll learn some basic syntax -- the for loop -- that will allow us to streamline repeated calculations.

Lesson 2 Learning Outcomes

By the end of this lesson, you should be able to write more complicated programs that involve modifying attributes of default shapes, drawing custom shapes, and performing repeated calculations.

What is due for Lesson 2?

This lesson will take us one week to complete. We will finish Lesson 2 on 1 June 2021.

1. Submit Exercise 2.6 to its assignment dropbox in Canvas by 1 June 2021.
2. Discussion of two papers in the Lesson 2 paper discussion forum in Canvas during the week spanning 26 May - 1 June 2021

Questions?

If you have any questions, please post them to our Questions? discussion forum (not e-mail), located in Canvas. I will check that discussion forum daily to respond. While you are there, feel free to post your own responses if you, too, are able to help out a classmate.

This week we will read and discuss the two papers below. They are linked from the discussion in Canvas.

The first paper discusses the fact that successful geoscientists need to be adept at what cognitive scientists term "object visualization" and "spatial visualization." One of the challenges of designing successful learning materials for teaching geoscience concepts effectively is to recognize that these visualization skills are needed and to try to address them deliberately.

I think it is fair to say that K-12 science education is rather more focused on building vocabularic and conceptual knowledge (i.e. "List the three types of plate boundaries") rather than honing the skills used by scientists, such as the visualization skills brought up in this paper. One of my goals for this course is to explore and teach visualization skills through the medium of computer programming, so keep that in mind when you read the first paper.

The second paper is by a team of neuroscientists and my take-away from it is that even in adulthood, learning a new skill changes your brain for the better. That discovery addresses my second goal for this course which is to teach you a new skill set that will hopefully be useful to you. Even if it is not directly useful, my intent is that the learning process will be beneficial in and of itself.

Questions for discussion

As you read, consider the following questions, which we will discuss as a class:

1. What's the difference between object and spatial visualization? Do you identify with one or the other more strongly?
2. Can you think of some lessons you teach or previous lessons in this program that address visualization skills?
3. What are the significant conclusions of the Draganski et al. paper?

Grading criteria

You will be graded on the quality of your participation. See the grading rubric [2] for specifics.

Initialization

Here's what it looks like when you write two for loops and the only difference between them is the initialization variable:
 

Screenshot of program output in which two for loops differ only by their initial variable

program written by E. Richardson in Processing

The top line of circles were placed by starting at a horizontal position of zero, and a vertical position of 20. Then the horizontal position in increased by 50 and the vertical position is unchanged, and another same-sized circle is drawn. Then the horizontal position is increased by 50 more, the vertical position is unchanged, and another same-sized circle is drawn. This goes on until we reach a horizontal position of 400.

The loop says:

That first loop is the equivalent of:

See how much typing you save with a loop, and also the chance of making an error is less because the computer is doing the computation for you.

The second loop in the program only differs from the first one in the initialization variable (and we shifted the vertical position down so we could see both sets of circles more easily). The second loop says:

That second loop is the equivalent of:

Again, this would be a long program if we had set each of these circles by hand. Rule of thumb: If you find yourself typing a few commands in a row that look very repetitive, then a loop is probably a good idea. Note that when you are constructing a program, sometimes you don't start out realizing you want a loop until you notice that you've just typed a bunch of repetitive commands.

The Test

Here's what for loops look like when the only difference between them is the test.

Screenshot of the output of program above with 5 loops. Demonstrates different ways the "test" part of the loop affects the output.

program by E. Richardson in Processing

The program above has 5 loops. The first one draws four circles, with origins at (0,20), (50,20), (100,20), and (150,20). It does not draw a circle at x = 200 because the test says to execute the loop only in cases where the increment variable is less than 200. The second loop does draw a circle at (200,40) because the the test says to execute the loop in cases where the increment variable is less than or equal to 200. The third loop draws a couple more circles because the test says to execute up to and including 300. The fourth loop has the initialization variable exactly equal to the test, so the loop executes once and then stops. (No need to write a loop in this case, and the increment doesn't even matter here. It's just for demonstration purposes.)

The 5th loop doesn't plot anything because the initialization variable fails the test right off the bat. So the loop doesn't execute at all. Note that Processing won't give you an error message in a case like this one because nothing you wrote has incorrect syntax. Writing a relational test that always fails is a mental error, but not officially a programming error, so just keep that in mind when troubleshooting your code when you get unexpected results.

Increment

Here's an example of what happens when you change the increment variable from one loop to another, but leave the rest alone.

Screenshot of the output of the program above in which the looping increment is changed

program by E. Richardson in Processing

The only difference between the two loops is that I made the increment smaller in the second one. This results in more circles, spaced closer together. If I had made the increment bigger, there would be fewer circles spaced farther apart.

Negative increments

You can start at some initial value and work backwards to a lower value, as in the program below.

Annotated screenshot of the program above. The numbers in the circles tell you the order in which the loop plots them.

program by E. Richardson in Processing

In the first loop, we start at (200,20), and make evenly-spaced circles that shift to right by 50 pixels, until we get to x=400, then we stop. So the first loop is the equivalent of:

In the second loop, we start at (200,40), and make evenly-spaced circles that shift to the left by 50 pixels each time until we get to x=0. Note that not only do we have to change the increment, but we have to change the test portion of the loop as well in order to make this work. The second loop is the equivalent of:

Beware the infinite loop!

When you set up a for loop pay attention so that you don't write a loop that will never terminate. For example, what if I wrote the following loop:

Bad trouble! Why? The initial value of i is 10, and then I am decreasing the value of i by 10 in the increment portion. But, my test checks whether or not the value of i is less than 200 and if it is, to go ahead and execute the loop. The value of i will never exceed 200 since i is getting more negative all the time, so this loop will never end because the test will never fail.

Nested loops

You can write for loops inside of other for loops. I think of this kind of thing kind of like tiling a cookie tray with the dough for a batch of cookies. Let's say you've made enough dough for 1 dozen cookies and you have a cookie tray. Here's a way to think of a pair of nested loops that explains how to put the dough blobs on the tray into 4 columns of 3 blobs each. (I think following along with my written description is a spatial visualization exercise, what do you think?)You go to first position in the upper left corner of the tray, then you execute a loop 3 times so that at the end of the loop, you have put 3 dough blobs on the tray in a column. That loop finishes and then you move one position to the right. You execute the same loop three more times so that you make a new column of dough blobs next to the first column. Keep going until you've got four columns with three cookies in each column. Here's how you'd write in Processing what I just explained in English.

I put the println() command in there so that when the program runs, you can check that the loops are doing what you thought they were doing. In general, sticking a println() command into your code somewhere is a good idea when you get unexpected output or an error and you want to double check that variables have the values you thought they did.

Let me break down the syntax println("xpos =" + xpos, "ypos =" + ypos);

The part that goes "xpos =" says to print the string xpos =

The part that goes + xpos says to print the value assigned to the variable named xpos

The comma tells Processing to put in a white space

The part that goes "ypos =" says to print the string ypos =

The part that goes + ypos says to print the value assigned to the variable named ypos

The commands are executed very fast but that println command gets executed 12 times, and each time the value of xpos and ypos have changed so it prints the new value to the screen. If you look at all the values in the console and cross-check that information with the display window output, you should be able to see the order in which the position of each dough blob was determined, even though they all get plotted at once in the blink of a human eye.

A screenshot of the program and its output:

A program demonstrating a nested for loop. Click for text.

Code Displayed

?

//12 cookies on a tray   int doughBlobSize=20;   for (int xpos=10;xpos<100;xpos=xpos+25) {    for (int ypos=10;ypos<100;ypos=ypos+40){       println("xpos=" +pos, "ypos=" +ypos);       ellipse(xpos,ypos,doughBlobSize,doughBlobSize);    } }

Output Displayed

?

xpos=10 ypos=10 xpos=10 ypos=50 xpos=10 ypos=90 xpos=35 ypos=10 xpos=35 ypos=50 xpos=35 ypos=90 xpos=60 ypos=10 xpos=60 ypos=50 xpos=60 ypos=90 xpos=85 ypos=10 xpos=85 ypos=50 xpos=85 ypos=90

There is also a pop-up window displayed showing 3 rows of 4 white circles (or 4 columns of 3 white circles, depending on your point of view).

One more example

This program first draws a white vertical line, then it starts a loop in which it draws a diagonal series of circles, each one lighter in color that the last. Then it leaves the loop and draws another vertical white line. This program demonstrates loops and command order. You can tell that the first white line was set before the loop started because the circles plot on top of it. The second white line came after the loop because it is drawn on top of the circles. The circles go in a diagonal line instead of tiled because I am incrementing both x and y at the same time instead of nesting one loop inside another loop.

Reminder - Complete all of the Lesson 2 tasks!

You have reached the end of Lesson 2! In this lesson you learned about variables and for loops, and a little bit about how to troubleshoot a loop with the println command. These will all be useful building blocks for the more complicated programs we'll learn in Lesson 3.

Double-check the to-do list on the Lesson 2 Overview page to make sure you have completed all of the activities listed there before you begin Lesson 3.

Recap of the Lesson 2 Exercises:

2.1 Create a composition out of two or more differently colored overlapping shapes

2.2 Modify Exercise 2.1 above to change the color and thickness of the outlines of the shapes and the background color of the composition.

2.3 Create your own custom shape with vertex(), beginShape(), and endShape().

2.4 Draw your own custom shape using variables to set the vertices.

2.5 Rewrite the dough blob program so that you place the blobs in the same configuration, but you start from the bottom right corner and work upwards and to the left.

2.6 Use at least one for loop to draw your custom shape from Exercise 2.4 several times. [Turn this one in]

Overview

Lesson 3 contains our first foray into animation. We'll also have a teaching/learning discussion which does not involve reading a set of published papers, but instead, involves some reflection about the skills we've learned and how you might teach them if you ever wanted to.

Learning Outcomes

By the end of this lesson, you should be able to write a program that simulates the movement of an object on the screen, write an "if statement" correctly, write a program that includes setup() and draw() blocks, and use comments to clarify your code.

What is due for Lesson 3?

This lesson will take us one week to complete, 2 June - 8 June 2021. You will turn in Exercise 3.2, as detailed later on, at the end of the lesson. We will also have a teaching/learning discussion that will span the entire week devoted to Lesson 3.

Questions?

If you have any questions, please post them to our Questions? discussion forum (not e-mail) in Canvas. I will check that discussion forum daily to respond. While you are there, feel free to post your own responses if you, too, are able to help out a classmate.

This page serves as a placeholder to remind you to go visit the first Teaching/Learning discussion for this course, which can be found linked from the Lesson 3 Module in Canvas. Please visit that discussion board often during the week devoted to Lesson 3 to offer your opinion and to reply to your classmates regarding how/why/what to teach your own students about the topics and skills that have come up so far in this course.

0. Other games you can play

What if we want to make the lightning bolt move faster? Change the line where we are incrementing the value of x to something like:

What if we want to make the lightning bolt move slower? Change the line where were are incrementing the value of x to something like:

x = x + 0.5;

If you haven't programmed before, then it may take some extra thinking to grasp the meaning of an expression such as x = x + 5;. If this were math class, then you'd quickly realize that there is no such value of x that will make the equation x = x + 5 work. You'd collect like terms and be left with the expression 0 = 5 which is no good. But this isn't math class.

Two things to remember here:

1. Recall what I said before about equals signs. One is telling, two is asking.
2. Math and math-like actions are done right to left in pretty much all procedural programming languages, including this one.

So the expression x = x + 5; is not there to ask the computer to solve for x. What it is saying is: take the value of x that you have in memory right now, add 5 to it, and then take whatever answer you get and reassign that number to x. (Tell x to be the new value you just computed.)

If x were 1, then after performing the command x = x + 5, the value of x will be 6. Any other command or expression performed from here on out will substitute "6" every time x shows up in the program, until x gets reassigned to something else.

1. Float variables

There's no rule that says we have to use whole numbers, except for the fact that when we first declared x in our program, we declared it as an integer. That means we cannot give it a fractional part. Therefore if you write x=x+0.5 like I suggested you try out, you will get an error telling you "cannot convert from float to int." What's that about?

If we want to be able to allow x to have a fractional part, we need x to be a floating point number instead of an integer. These are called "floats" in Processing. A float is a floating-point number, which is a number that is not an integer, such as 1.5 or PI (π). Why bother with the difference between ints and floats? Why not just call them all “numbers” or something? Well, one difference between a float and an int is the amount of memory your computer has to allocate to store it. Also, integers are precise and floats are not.  
Let’s say I have a cookie. I can declare int numCookie = 1 to tell Processing that I have exactly one cookie. If I’m going to share it with 6 other friends of mine I will break it into seven pieces. If I am really accurate at cookie-breaking we will all get exactly one seventh of the cookie. We can write this precisely as 1/7 on paper. However, if we wanted to express that in a Processing program, we’d probably declare something like

If we add up all the floats we get 0.98, not 1. We could write out each number to more decimal places. 1/7 is actually 0.142857 . . .  but it is a repeating decimal. We can’t write an infinite number of digits past the decimal because we don’t want our entire computer’s memory taken up by deciding how much of a cookie each person is getting. The computer has to truncate the number at some point, and it will probably be good enough, but it is not perfect. That's the difference between an int and a float.

In our lightning bolt program, we'll change the declaration of the variable x up at the top to say

and then we are all set to increment x by a float later on in the program.

We also don't have to make the lightning bolt move from right to left. It can go wherever we want, limited by imagination only.

To make it go down instead of sideways, increment y instead of x, like so:

If you want the lightning bolt to move diagonally, change both x and y with each loop through draw.

If you want the lightning bolt to move back and forth, you have to find a way to use the if test to change the direction of motion in x or y or both. Try it yourself and then check my screencast below to see how I did it.

Here's a screencast example of a program in which the lightning bolt moves back and forth horizontally across the screen (3:15).

Whether to put background() inside of setup() or draw()?

Simply put, if you place a call to background() inside draw(), then it is the equivalent of erasing the screen with each run through draw(), which makes it look like the object is moving because the human eye can't refresh as fast as your computer display and Processing makes a run through draw() with each new frame your computer draws to its screen. On the other hand, if you put the call to background() inside setup(), you will draw over your previous iterations, without erasing them, essentially leaving a trail of an object's previous positions. Check out the program below. It draws a pink display window on which an orange circle is moving back and forth while a black line moves up and down.

Screenshot of the program above running. The call to background() is inside the draw() block

program by E. Richardson, in Processing

Quiz yourself

What would it look like if you cut and pasted the line that says background(234, 128, 128); out of draw() and into setup()?

Click for answer...

The background turns black as the line makes it first downwards pass because the background doesn't get refreshed. The orange circle is still visible because it draws after the line. (The screenshot is on infinite loop here. In the real program the orange circle will continue to go back and forth, but the background will stay black after the line moves down once).

What it looks like running:

Screenshot of program above running. A black circle moves from left to right tracing out a sine wave. A black square moves from right to left tracing out a sine wave.

program by E. Richardson in Processing

Behind the scenes of this program

Let me explain the thought process behind building the program above. I could go through the program from top to bottom, but I didn't really write it in that order. I kind of wrote it from the middle to the outsides. First came the idea: I want to make a shape move across the window according some functional form other than a straight line, and I want it to stay on the screen so I have to make it turn around and go backwards when it gets to the side.

We haven't really talked about this yet, but Processing can make mathematical calculations such addition, subtraction, multiplication, division, exponentiation, logarithms, and trig functions. For my example I decided to draw a shape that traces out a sine wave across the screen. I decided to make it a circle, but I could have made it any shape I wanted. So the meat of the program is going to be something like this:

This will make an ellipse of some diameter at the initial (x,y) position given by (x, sin(x)). Then we increment x by 1 with each run through draw() and so the circle will trace out a sine wave. So then I'll write some stuff around these lines that will make a runnable program, to see what it looks like so far. I need to write  setup block that has the window dimensions in it, and I'll set the values of x and diameter while I'm at it.

This works, except the circle doesn't go back and forth, and also it looks jittery. We can fix the back-and-forth problem by using an if test that tests where the circle is and what direction it is going and then changes the direction when we exceed the dimensions of our display window. We know how to do that. We just went over that in the previous couple of pages.

The jittery "problem" (I'm calling it a problem because I think it looks ugly. If you like it, then we're all done here!) arises because trig functions in Processing are in radians, not degrees. So the value of sin(x) is sweeping over its entire range very fast. One cycle of sine takes 360 degrees which is 2pi, a number between 6 and 6 and a half. How about if we make this shape sweep out exactly 2 cycles of sin(x) over the whole window? That would look cool. So we'll do a little math inside of where we wrote sin(x). While we're at it let's increase the amplitude so it looks nicer, too. In order to convert radians to degrees you do radians*PI/180. We want 2 cycles so let's multiply by PI/90 instead, and then let's help ourselves out by making the width of the window 360, so that each pixel is like 2 degrees of arc for our sine wave. I basically just trial-and-errored it until I got something that looked nice to me:

Now let's make it go back and forth. I'll do it with an if test, like this:

And then I'll change the line that says x++; to x = x + direction;. That way when direction is negative, x will decrement, and when direction is positive x will increment.

Great, I did it. But now that I got that to work, I realized that it would look even better if the bounceback on the window edges traced sin(-x) instead, so it looks like the ellipse grazes the side of the display window and turns in an arc instead of retracing its exact path. And while I'm at it, I'll change it so it's a square on the way back. The way I'm going to do this is to write another if test. This one in pseudo-English, will do the following:

if(I'm going from left to right){

draw a circle that goes like sin(x)

}

else if (I'm going from right to left){

draw a square that goes like sin(-x)

}

else {do some error handling in case of unexpected results}

Here's how it looks now:

When I added the square, I changed rectMode to CENTER because otherwise there would be a jump when the shape changed from circle to square. Instead of doing sin(x) and sin(-x) I took advantage of the fact that direction was going from positive to negative so I could just use that variable to set which kind of sine function I wanted, and then I could write the same line both times. I could have just done an if and an else to do the switching between circle and square since direction can only be 1 or -1 in this program. However, it's not a bad idea to get in the habit of putting an else in there to mop up in case you made a mistake somewhere else in your code and there is actually an option that gets triggered that you didn't count on.

Now you can expertly move a shape you drew around your screen at different speeds! Cool!

Exercises:

3.1 Write a program that moves a custom shape around the screen (your choice about what path it follows: straight line or some other function). It should stay on the screen and change direction if it encounters any of the sides of the display window.

3.2 Modify your program from Exercise 3.1 so that the shape also changes color if it hits any of the sides of the display window

Turning in your work:

Submit Exercise 3.2 to its appropriate assignment in the Lesson 3 module in Canvas. Name your file lastname3_2.pde

What I'm looking for:

Your program should demonstrate correct usage of an if statement to change the direction and fill and/or stroke color of your shape. Your shape should be a custom shape drawn using beginShape() and endShape(). Extra creativity such as using a for loop to set the vertices, or creating a composition with more than one shape is encouraged!

Reminder - Complete all of the Lesson 3 tasks!

You have reached the end of Lesson 3! Double-check the to-do list on the Lesson 3 Overview page to make sure you have completed all of the activities listed there before you begin Lesson 4.

You should have been participating in the teaching/learning discussion and you should have submitted Exercise 3.2 to the Lesson 3 dropbox.

Overview

Our first foray into writing interactive programs in which you can make what's going on in the display window respond to the mouse or keyboard while it is running.

Learning Outcomes

By the end of this lesson, you should be able to:

1. Write a program in which an object responds to input from the mouse or keyboard
2. Write a program that uses the random() function
3. Write your own function

What is due for Lesson 4?

This lesson will take us one week to complete, 9 - 15 June 2021. This lesson involves two graded items:

1. Paper discussion using a discussion forum in Canvas, detailed on the next page
2. Programming exercises, detailed on the pages after that. You will submit Exercises 4.8, 4.11 and 4.12 to assignment dropboxes in Canvas.

Questions?

If you have any questions, please post them to our Questions? discussion forum (not e-mail) in Canvas. I will check that discussion forum daily to respond. While you are there, feel free to post your own responses if you, too, are able to help out a classmate.

The articles we'll read for this week's discussion are linked from the Lesson 4 discussion board in Canvas.

The first paper discusses the fact that contemporary school curricula do not specifically address spatial visualization skills but that innovative teachers could quite easily incorporate activities that speak to these skills while still meeting the various standards of learning. Teaching kids some computer programming is specifically mentioned. If anybody wants to, go to the program called  "Scratch [12]" and play around.

The second paper is by educational psychologists who are trying to discover what kind of person benefits from what kind of educational presentation. The idea is that while technology has enabled us to produce whiz-bang animations and graphics, research into whether these techniques actually help people learn hasn't quite caught up yet. So they ran some experiments to try to figure this out.

Questions for discussion

As you read, consider the following questions, which we will discuss as a class:

1. What about the link between creativity and spatial skills? Can we teach creativity better?
2. It seems to me that the Mayer and Sims paper talks about verbal v. spatial thinking but not really the object visualization pathway discussed by Kastens. Is that your sense, too? Is it worth teasing apart all these categorizations anyway?
3. From more recent papers I think the jury is still out regarding whether animations lead to better understanding. Possibly because there doesn't seem to be any kind of way to measure how good an animation is at what it is trying to do. How would you go about measuring that?

Grading criteria

You will be graded on the quality of your participation. See the grading rubric [2] for specifics.

Example 4.2: Interactivity via the keyboard

Here's another example of user input that involves both the mouse and the keyboard. This program draws a line on the screen that follows the mouse if you also hold down the "r" key or the "k" key. See the demonstration of pmouseX and pmouseY and also the variable keyPressed.

Snapshot is a still from the running program to draw a colored line in the display window with the mouse.

Below is a screencast of this program. You can see it running and also I talk about boolean variables a little bit (1:44).

Example 4.3 More with the keyboard

Here's a program that combines keyboard input with moving a shape across the screen, so we are reviewing bits of Lesson 3 while adding Lesson 4 skills here:

The beginning position is just a black circle drawn to the middle of the display window. It doesn't do anything unless you type the u, d, l, or r keys, in which case the circle jumps up, down, left, or right, and changes color. If no key is being pressed, the circle just sits still in its most recent position with its most recent color.

Screenshot of program above in which a circle moves around the screen based on keyboard input.

E. Richardson

Exercise

4.6 Make a virtual Etch-a-Sketch in which you use the keyboard to draw a black line on a grey background.

syntax introduced: random()

The random function is a fun way to produce unpredictable results in a drawing. It works two ways. The first way is that you specify one number inside the parentheses, such as random(100), and a float variable will be created between zero and the number you wrote, in this case 100. The second way is that you specify two numbers inside the parentheses, and a float variable will be created between the two numbers. For example, random(2,5) will output a float between 2 and 5.

Example 4.3: Unpredictable placement of shapes

Test out the code below to draw circles on the display window, for example:

Screenshot from running program in which white circles are drawn to the display window in random locations and at a random size between 0 and 20.

E. Richardson

The code above continuously draws circles to the screen in a variety of places because each time it loops through draw(), the x and y values are reset to a random value in between 0 and the number specified, which is width for x and height for y. The radius of each circle is a randomly generated number between 0 and 20.

Example 4.4: Unpredictable placement of shapes in unpredictable colors

We can modify that code in a fun and more visually interesting way by also choosing the color of each circle with the random() function, like this:

Screenshot of the program running in which the fill value of the circles is set with a random number generator.

E. Richardson

The only difference between the two programs is that I added a line that sets the fill() in the second program. Now every time the program loops through draw() each value of red, green, and blue is randomized, too. The default is for random() to produce a float, but you can make it an int instead by enclosing the call to random() inside int(). For example, int x = int(random(4)) will initialize the variable x and set it to an integer between 0 and 4.

Below is a screencast of me walking you through the randomly colored circles program (0:37).

Syntax introduced: noLoop() triangle() color

We’ve already learned how to write a for loop to make a repetitive sequence of commands more compact to write. Another great utility that can save writing is a function.

You’ve already worked with some functions that are intrinsic to Processing, such as random() that you just learned.

Functions take arguments to control their behavior. For example, the ellipse() function draws an ellipse. ellipse() takes four arguments. They are: 1. the x-coordinate, 2. the y-coordinate, 3. the width of the ellipse, and 4. the height of the ellipse. So, when you want to draw an ellipse, you have to specify these four things in that order.

You can create your own functions and name them yourself. Here are some examples that show you why you’d want to do this and how to do it.

Example 4.5: The dumb house

This program draws a figure to the screen in a not-so-smart way by setting each shape explicitly with numbers. I included what the house looks like in the screenshot.

Code and image of a dumb way to draw a house.

E. Richardson

Example 4.6: The slightly smarter house

Now, let’s be a little smarter and use some variables to set the positions of the shapes that make up the figure relative to each other, like this:

Code and image of a slightly smarter way to draw a house.

E. Richardson

The example above draws the exact same house as before, but now we can control where the house goes just by changing x and y instead of going into each line and recalculating. (Recall this concept from Lesson 2.) There are 15 lines of code inside draw(). What if we wanted to draw two houses? We could declare two more variables and write those same 15 lines again, but then our code inside draw() will be 30 lines long. If we wanted ten houses our code would suddenly be 150 lines long. That would be really annoying. If we write a function that has the 15 lines needed to make the house inside it, then we can just call the function with one line of code, so we only have to write those 15 lines one time.

Example 4.7: The clever house

Here’s an example below in which I define the house() function. You can make up any name for your own functions but don’t make up a name that Processing already uses, such as ellipse() or something like that. My house() function will take two arguments: the x and y position.

Clever House drawn using a function.

E. Richardson

The program above draws the exact same house as in the previous two programs, and at first glance it doesn’t look like we have gained too much from creating a function. However, now we can make a bunch of houses very easily -- see below:

Example 4.8: The clever house easily makes friends nearby

The program below draws four houses in different places on the screen, but I only had to write the function containing the details of the house one time.

Clever house gets friends nearby.

E. Richardson

Now that you’ve got the basic idea, it’s pretty easy to add something to your function. For example, what if we wanted to choose the color of each house, too? We can add that as an argument to the function, like this:

Example 4.9: The clever house gets new siding

Clever house and friends get new siding.

E. Richardson

So now that we have made this function, if we ever want to draw some houses in another program, we can just copy and paste this function in without worrying about what each line does. All we have to think about is where to put the house and what color to make it.

We've progressed pretty far at this point. You can make interactive art with your computer!

Exercises (This is a repeat; these were already written in the lesson pages earlier)

4.1 Draw a series of points in a trail following the mouse position.

4.2 Draw a shape that follows the mouse but does not leave a trail.

4.3 Draw a shape that follows the mouse but in reverse (reverse x and y or reverse the response to changes in directions of x and y)

4.4 Draw a shape that changes size depending on the mouse position.

4.5 Draw three different shapes of three different colors to the screen and have them move in an interesting relationship to the mouse when the mouse is moved, and have them change color when the mouse is clicked.

4.6 Make a virtual Etch-a-Sketch in which you use the keyboard to draw a black line on a grey background.

4.7 Modify my "random circles" program so that the aspect ratio of each ellipse is also randomized

4.8 Modify my "random circles" program so that the top half of the screen gets filled with randomly-placed rectangles and the bottom half gets filled with randomly-placed circles.

4.9 Take your custom shape from previous exercises (or make a new one) and write it as a function.

4.10 Modify your program in 4.9 so that your function is drawn to the screen with a random color scheme.

4.11 Choice!: Modify your program in 4.9 so that your shape is drawn to the display window at the position where you click your mouse.

OR modify your program so that your shape follows your mouse around the display window

OR modify your program so that the display window fills up with your shape in randomized locations. (NOTE: why not do them all? But you only have to submit one. See below)

4.12 Review: Modify your program so that your shape moves back and forth across the screen.

Reminder - Complete all of the Lesson 4 tasks!

You have reached the end of Lesson 4! Double-check the to-do list on the Lesson 4 Overview page to make sure you have completed all of the activities listed there before you begin Lesson 5. You should have submitted three programs to the dropbox: exercises 4.8, one of the 4.11 options, and 4.12. Also, you should have been participating all week in the reading discussion.

Learning Outcomes

By the end of this lesson, you should be able to:

1. Write a program involving interactive typography
2. Write a program that involves translate() and scale(), rotate(), pushMatrix(), and popMatrix()

What is due for Lesson 5?

This lesson will take us one week to complete. 16-22 June 2021. This lesson involves the following graded items:

1. Teaching/Learning discussion, detailed on the next page
2. Programming exercises, detailed on the pages after that

Questions?

If you have any questions, please post them to our Questions? discussion forum (not e-mail) in Canvas. I will check that discussion forum daily to respond. While you are there, feel free to post your own responses if you, too, are able to help out a classmate.

Directions

For this activity, I want you to reflect on what we've covered so far and consider, not necessarily how you might adapt these materials to your own classroom, but more like how any of this gets at the spatial visualization and various other cognitive skills discussed in some of the papers we read. Is your grey matter changing?! Since this is a discussion activity, you will need to enter the discussion forum more than once to read and respond to others' postings. This discussion will take place over the whole week of this lesson.

Grading criteria

You will be graded on the quality of your participation. See the grading rubric [2] for specifics on how this assignment will be graded.

New syntax introduced: Font, loadFont, textFont, textAlign, text, String, char, textLeading

Loading a font, writing text to the display window

If you want to write text to the screen, Processing has many fonts to choose from. You can pick one by choosing “Create Font” from the Tools drop-down menu. Then in your program, you declare the font variable, load the font, and use the text() function to write text to the screen using the font you created.

Note: Even though Processing itself is platform independent, different operating systems have different fonts. I am a Mac user. If you are a PC user, you might not have the exact fonts I demo in my examples below, but the point is that there are lots to choose from and the way you work them into a program is the same.

Example 5.0

Here is an example of a short program I wrote at the end of the 2011 baseball season using text():

?

// Load a font // Write text to the screen   PFont font1;   void setup() {   size(400, 200);   font1 = loadFont("Futura-CondensedExtraBold-36.vlw");   textFont(font1);   textAlign(CENTER); }   void draw() {   background(252, 143, 143);   fill(160, 8, 8);   text("Cards win!", width/2, height/2); }

Display output from the code in Example 5.0.

E. Richardson

Here's a screencast walk-through of the program above [13]. (and a captioned version [14].) In the program in Example 5.0, I created the font called “Futura-CondensedExtraBold-36.vlw” by choosing it with the Create Font tool. I have to declare the variable of type PFont at the beginning before the setup() block. Inside the setup() block, I load the font. The function text(data,x,y) in the draw() block takes three arguments: data, which is the thing it will write, and x, and y, which are the coordinates that tell it where to write the data. If you want the text to be colored something other than black, specify the color with fill(). It is a little counterintuitive to some folks that fill(), not stroke(), is how this is accomplished, but that's the way it is. Roll with it. Note that in my program, the sentence, “Cards win!” is enclosed in double quotes because it is a String. The text() function doesn’t need to take String data, it can also be a char, int, or float. You can also have more than one font per program.

Example 5.1

Here’s an example with multiple fonts.

?

// Load more than one font // Write text to the screen   PFont font1; PFont font2; PFont font3;   void setup() {    size(600, 200);    font1 = loadFont("BankGothic-Medium-32.vlw");    font2 = loadFont("Baskerville-BoldItalic-32.vlw");    font3 = loadFont("CenturyGothic-Bold-32.vlw"); }   void draw() {    background(252, 143, 143);    textFont(font1);    textAlign(CENTER);    fill(160, 8, 8);    text("Carpenter blanked the Astros", width/2, 50);    textFont(font2);    fill(0);    text("and", width/2, 80);    textFont(font3);    fill(22, 8, 160);    text("The Braves choked again", width/2, 110); }

Example source code and output window with pink background and different fonts

E. Richardson

Notice that in the program in Example 5.1 I placed each line of text by hand because I specified its x and y coordinates. An alternative to doing this is to define all the text you want to display as a String and then use optional parameters in text() to define a box within which the text is written. This is a nice option because you don’t have to mess with the spacing manually. The syntax for setting text in a box is text(string, xTopLeftCoordinate,yTopLeft Coordinate,width,height).

Example 5.2

Here is an example of setting the text within a box.

Output window with white background and red text from Example 5.2

E. Richardson

Notice how in the above program, the text was automatically broken up over several lines to fit into a box. Processing is also smart enough to break things up at the blank spaces instead of in the middle of words. I set the vertical spacing between lines of text with textLeading(dist) in which dist sets the number of pixels between each line. That keeps the text from being squished too much. Sometimes you just have to use trial and error to get things to look the way you want.