September 23-25

September 23-25

(updated by Michelle)

Exam update: If you are stressed about exam scores, take a deep breath. When the scores come out over the weekend, we will also be releasing a points-back packet. This is optional, but if you complete this packet by the end of the October 6th lab and hand it into your TA, you will get points back on the exam. How many points will depend on overall exam results and the correctness of your answers.

Functions using return values

We talked more about defining functions and using the return statement to return a value to the function call expression.

For example, suppose you write an expression with a function call, e.g. 1 + f(), and inside the definition of function f there is a return statement: return 5;. In this case, the value of the return expression, 5, becomes the value of f(), so after the return statement, we “return” to the original expression and compute 1 + 5.

So you now know about several types of functions. All functions do some sort of work like drawing something for you, printing something for you, or calculating something for you. Sometimes functions takes input, either using parameters or global variables. And you can mix and match the structure of these functions to create an appropriate behavior to your program.

Something to think about: Functions probably aren’t all that new to you. You see functions in math all the time that basically takes an input and then returns an output. You even see them in our everyday lives. For example, the human body is basically a program that uses many functions to do work. Eating is basically the function of taking in food, extracting what we need, and returning energy (amongst other things…) So look at the bigger picture of why it is important we have functions and really use them to give your code a meaningful structure.


Today we introduced arrays. Arrays are data structures that allow us to store multiple values of the same type. This goes hand-in-hand with iteration in for loops because you can traverse the array, get the value you need, and then do something with that value.

You should read about arrays in the textbook and w3schools readings, but here are some key things to remember:

  • You access the elements of the array by its index.
  • Arrays are zero-indexed so if you try to index into the array outside of the range 0 to the array length – 1, you will break everything. So watch your for loops carefully.
  • Arrays only take values of the same type, so don’t try to make one array store strings and numbers.

With that said, here is the code we went over in class.

We started with a simple program with a single moving rect:


We modified this program so that every number was replaced by an array of numbers and every computation on a set of variables was replaced by a for loop to do the computation on each element of each array.

Here’s the resulting program with 100 rects rather than 1 rect:


Here’s another use of arrays: A row of buttons where the “state” of the button is stored in an array of boolean (true/false) values. In this case if a button state is has the value true, then it should be red. Otherwise, is the value is false, then it should be green.

The code to click on buttons is crude and imprecise. It could be much better, but I kept in minimal in order to focus on the use of arrays.

A note about booleans: Booleans are types just like integers, floating points, and strings. They are not variables, but variables can be assigned the values of booleans. And just like numbers, booleans have their own operators. You’ve seen these before. Whenever you use &&, ||, or not, you are performing an operation on boolean values much like addition and subtraction work for number values. Actually every conditional expression that you write evaluates to a boolean. For example, the expression 100 != 0 would evaluate to true. In addition, the expression (100 != 0) && (100 % 2 == 1) would be false since 100 is not an odd number. This is a very important concept because booleans go hand in with conditionals. If you don’t understand this concept, please ask an instructor or TA soon!


A note about the break statement: In class we used something we haven’t used before. It’s called the break statement. It is extremely useful for loops because it immediately breaks out of a loop. You could put this in combination with an if statement so that, if a condition is met, you don’t need to continue with the rest of the for loop. In the case of our square button code from class, we used the break so that, once the right square is found, we don’t want to uselessly test the other squares, so we break out. This is a way to make your code more efficient.


You’ve strings vaguely used in print statements and in text that can appear on the canvas. You’ve also learned about concatenation and the toString() method to convert numbers into strings. Now we’ll introduce more string methods that can allow you to search for substrings, convert them to all caps or all lowercase, and etcetera. This is super important for formatting string values and parsing data the way you want them to. It is frequently used in handling data. For example, if you gat a huge list of the 104 students by “First Name, Last Name”, you can use the string methods to change them to “Last Name, First initial”, and etcetera.

Here are a few examples of string methods. In this example, str is just a generic variable that holds a string value. Try running this code in setup and seeing what the statements print out. I also recommend reading the w3schools page on string methods. Remember, just like arrays, strings are zero-indexed.

var str = "Hello, World!"

print ("World"));
print ("Pie"));
print (str.slice(1, 4));
print (str.substr(1, 4));
print (str.replace("Hello", "Goodbye"));
print (str.toUpperCase());

var arr = str.split(" ");
for (var i = 0; i < str.length; i++) {
    print (arr[i]);

Author: Roger Dannenberg

Roger B. Dannenberg is a pioneer in the field of computer music. His current work includes research on interactive music systems, content-based music retrieval, interactive media, and high-level languages for sound synthesis. His research on computer accompaniment led to a patent and eventually to the development of a commercial product, SmartMusic, in use by over 75,000 music students around the world. He has published over 100 research articles in books, journals, and conference proceedings. In 2006, he completed an installation, “Origin, Location, Direction,” with Barbara Bernstein. This sound and image installation explores the dependent relationships between the observer and the observed using multi-channel audio and video projections that are activated by microphones set up in the gallery space. Dr. Dannenberg is also an active trumpet player and composer. He has performed in concert halls ranging from the historic Apollo Theater in Harlem to the modern Espace de Projection at IRCAM in Paris. His most recent musical efforts involve real-time computer graphics and computer music systems that interact with live musicians. Dannenberg also performs regularly with the Roger Humphries Big Band and the Capgun Quartet in Pittsburgh.