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 [1]" 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.