Code Toolkit: Python, Spring 2024

Week 6 — Wednesday, February 28 — Class notes

Review: loops
New concept: working with many things
Background and examples
Lists

I. Review: loops

Last week we covered loops, and in particular, while loops.

Loops allow us to create repetition, which in coding is often called iteration.

Prior to last week we'd already seen one kind of repetition: the def draw() block, which runs all the code in that block and then repeats many times per second. (The number of repetitions per second is defined by the frame rate, and indicated by the special variable frameRate.) But this repetition with def draw() unfolds in time, and so is not typically referred to as iteration.

The repetition that we call iteration is how you would go from drawing one thing on the screen to drawing several, or hundreds, or millions, or a dynamic number of things that you don't know in advance.

The syntax for while loops looks like this:

i = 0
while i < 10:
    println("i = " + str(i))
    rect(i,i,5,5)
    i = i + 1

Which is comprised of: the initial variable assignment of what I call the looping variable, a boolean expression, and a variable increment.

If the boolean expression in the while statement returns True, all the code in the while block will run, and then Python will check the boolean expression again. If the expression is still True, the code will run again. And the code keeps running as long as the expression returns True, or we might say while it is True.

Remember: Don't forget your variable incremeent or you might end up with an infinite loop, which repeats forever without ever stopping.

I also talked briefly about how while loops are functionally equivalent to for loops, which offer you an option of a different syntax that effectively does the same thing. for loops look like this:

for i in range(10):
    println("i = " + str(i))
    rect(i,i,5,5)

There are times when you may need to use one type of loop over the other, but in general these are equivalent and you can use the one that is more clear to you.

Homework review. We took a look at Leen's homework (Thanks, Leen, for sharing!) to see a few things:

Using two independent loops — notice how this creates repetition linearly.
Using two loops with one nested inside the other — notice how this creates repetition in two dimensions.
Using nested loops to create a Sol Lewitt experiment. Nice work!

Working with the first two parts above, we talked about how you can use modulo to create alternating colors for elements drawn within loops. Here's how to do that with a single, linear loop, modifying part 1 above:

i = 50
while i <= 550:
    if i % 100 == 0:
        fill(100,210,0)
    else:
        fill(210,100,0)
    rect(i,300, 20,20)
    i = i + 50

And here is how to do that with a nested loop, modifying part 2 above:

i = 50
while i <= 500:
    
    j = 50
    while j <= 500:
        if (i+j) % 100 == 0:
            fill(100,210,0)
        else:
            fill(210,100,0)

        rect(j,i, 40,40)
        j = j + 50

    i = i + 50

lerpColor(). We didn't talk about this in class but loops allow you to use several different techniques for creating interesting color gradients. Many of you in your homework used using looping variables with the fill() command to acheive this. Another technique is to use looping variables with lerpColor(), which allows you to create a gradient that fades smoothly between two previously defined colors. Again, we didn't discuss this in class, but here's an example of how you might use lerpColor() in a loop to create a gradient:

start_color = color(252,98,255,150)
end_color = color(250,174,103,150)
i = 0
while i < 25:
    c = lerpColor(start_color,end_color,i/25.0)
    fill(c)
    ellipse(350,100+i*20,200,30)
    i = i + 1

And here is how you might try a similar technique in a nested loop:

start_color = color(252,98,255,150)
end_color = color(250,174,103,150)
i = 0
while i < 50:
    j = 0
    while j < 50:
        c = lerpColor(start_color,end_color,(i+j)/100.0)
        fill(c)
        ellipse(100+j*10,100+i*10,12,12)
        j = j + 1
    i = i + 1

If you'd like to experiment with this feel free to reach out with any questions.

(jump back up to table of contents)

II. Working with may things

Today we will learn about working with many things.

Last week (week 5) we learned how to draw many items using loops, but you couldn't move each item around individually. Thus far, if you wanted to move many things, you would have had to hard code new variables for each one. Today we will learn how to draw many things and move many things, using a thing called lists.

In Python, a list is like a collection of variables. In a way, this topic is like a mashup of variables and loops:

» With loops, instead of drawing many things line-by-line, you can create a loop which draws many things at once, even a dynamic number of things.

» With lists, instead of declaring each variable line-by-line, you can create one list that declares many variables at once, and can even allow you to work with a dynamic number of variables.

This topic is an introduction to one of the most interesting and important aspects of computer science: data structures. The term data structure refers to a way of organizing many variables together for efficient and convenient use. The type of variable organization that you'll need to use in a given situation (i.e., the type of data structure) depends on the problem that you are trying to solve. In addition to lists, Python provides many other data structures, such as: sets, tuples, and dictionaries, among others. And beyond these data structures that come "built-in" to Python, in computer science there are many other more complex kinds of data structures that go by names like: stacks, queues, linked lists, and trees. But in a certain sense, lists are the most fundamental data structure: we could think about ways to implement all these other more complicated data structures using just lists, so maybe we can think about lists as underlying all these others.

Data structures allow you to start to think about modeling: how to organize your variables and other code in a way that matches the thing that you're trying to do. A good data structure could make your program much easier to implement and to read, while an inappropriately chosen data structure could make the thing that you're trying to do very hard and potentially less efficient in terms of computing resources.

(jump back up to table of contents)

III. Background and examples

Gene Kogan

Since lists are used to manage many things, they are often used to implement things like swarms, or herds of objects that behave as if they are acting independently or on their own.

Daniel Shiffman, a professor at NYU in the Interactive Telecommunications Program (ITP) graduate program, uses lists and other data structures to implement swarms that are used to simulate natural phenomenon like animals, plants, clouds, flowing liquids, and others.

For example, here is a video that demonstrates a simulation of "flocking", like birds or fish moving together. (It's a very cute video.) Shiffman's book Nature of Code offers detailed lessons in how to achieve affects like this.

Another, more aesthetically developed, example is this flocking demo by Gene Kogan, using a well-known algorithm developed by Craig Reynolds known as "Boids".

And another great example is the project We Feel Fine by Jonathan Harris and Sep Kamvar. This project was made in 2006 using Processing and unfortuntely can be a bit difficult to run that now. (You will probably need to install Java for your browswer and OS version.) But there is documentation online, like this video that demonstrates how the project functioned.

(jump back up to table of contents)

IV. Lists

When we first looked at variables, we saw how you could use them to add "variance" or "change" into your composition. You replace a hard-coded number with a placeholder like x, and then you could change the value of that placeholder, modifying your sketch. In this context, each variable stores one value.
Back during week 2, when variables were introduced, we talked about how to think about how many variables you might need to create a given composition — for example, how many variables you would need to implement the game Pong. (Then during week 4 we saw how to implement this using if statements and keyboard interaction.)

Do you remember how many variables we decided we would need to implement Pong? Remember that the ball moves in two directions, horizontal and vertical, there are two paddles that each move vertically, and there are two scores:
- ballX,
- ballY,
- leftPaddleY,
- rightPaddley,
- scoreLeftPlayer, and
- scoreRightPlayer.
But as we learned when we talked about making things move (also week 4), the ball direction is not a hard-coded value and instead it can change. In other words, the ball is not always moving to the right — it is not always x = x + 1 and instead sometimes might be x = x - 1, to move to the left. And because of this, we need a variable for the ball direction in horizontal and vertical dimensions. So:
- ballXDirection, and
- ballYDirection
So, 8 variables in total.

What if you wanted 2 ping-pong balls? You could add another four variables (for x, y, x direction, y direction). But what if you wanted 3, or hundreds? What if you wanted a dynamic number? How could you have a dynamic number of variables? 🤯

This is precisely what lists allow you to do. Instead of regular variables for x and y position and direction, you would use lists.

many_ball_pong.pyde

Have a look at this example if you'd like, but don't be intimidated. There's a lot going in there, and we'll work through it today bit-by-bit.

Let's start with a simple example that just draws 4 squares:

def setup():
    size(500, 500)
    fill(150, 150, 250)
    rectMode(CENTER)

def draw():
   background(255)
   rect(100, 250, 100, 100)
   rect(200, 250, 100, 100)
   rect(300, 250, 100, 100)
   rect(400, 250, 100, 100)

Now what if we want each one of these squares to move up and down randomly? Well to start, let's just add a variable for each one:
```
a = 200
b = 200
c = 200
d = 200

def setup():
    size(500, 500)
    stroke(50, 50, 250)
    fill(150, 150, 250)
    rectMode(CENTER)

def draw():
    background(255)

    rect(100, a, 100, 100)
    rect(200, b, 100, 100)
    rect(300, c, 100, 100)
    rect(400, d, 100, 100)
```
Nothing new yet, I've just swapped out a hard-coded number for a variable placeholder. Note that I don't need to add global inside the draw() block yet because so far I am only using these variables there, I am not yet assigning or modifying them within the draw() block.
Now to make each square move, we could change the value of each variable in draw(). Let's change it by a random amount, so they just kind of shake there.
```
a = 200
b = 200
c = 200
d = 200

def setup():
    size(500, 500)
    stroke(50, 50, 250)
    fill(150, 150, 250)
    rectMode(CENTER)

def draw():
    global a, b, c, d
    background(255)

    rect(100, a, 100, 100)
    rect(200, b, 100, 100)
    rect(300, c, 100, 100)
    rect(400, d, 100, 100)
    
    a = a + random(-5,5)
    b = b + random(-5,5)
    c = c + random(-5,5)
    d = d + random(-5,5)
```
Note that now I am modifying the variables inside the draw() block, so now I do have to add global because otherwise Python would think that my assignment statements were creating new local variables. Hopefully this global is getting clearer for you, but I agree that it can be confusing.
Looking at that code, notice that I'm doing the same thing several times: drawing a rect(). And the paramters to each one follow a simple and direct pattern. Hopefully that makes you want to replace those four lines with something else. What is it? Think back to week 5 ... What if we wanted to have 8 or 100 or 1000 squares?
So hopefully you realized that we could replace those four rect() commands with one while loop that draws all four:
```
a = 200
b = 200
c = 200
d = 200

def setup():
    size(500, 500)
    stroke(50, 50, 250)
    fill(150, 150, 250)
    rectMode(CENTER)

def draw():
    global a, b, c, d
    background(255)

    i = 100
    while i <= 400:
        rect( i, a, 100, 100)
        i = i + 100

    a = a + random(-5, 5)
    b = b + random(-5, 5)
    c = c + random(-5, 5)
    d = d + random(-5, 5)
```
If you step through that loop, you'll see that it is replicating the four rect() statements from the previous snippet.

BUT WAIT — what about the variables b, c, and d?! As you can see from running that, the vertical position of each square is now being controlled by a. Changing the value of a changes the position of each square in the same way. But we can't use a, b, c, and d independently because we are in a loop.
This is precisely why we need lists. To keep track of many things in a situation like a loop.

And we might even have a dynamic number of things. Think for example what would happen if I used mouseX in my while conditional.
So what we're about to do is: replace those four variables with one variable, a list, and that one list variable will hold all four values within it and will let us reference them inside a loop.
New syntax:
- x = [] These square brackets create a new kind of variable, which is a list. It does not have any values yet, but we've just told Python that this one variable can hold many values. I suggest reading this code like: "Create a variable called x and set it to an empty list".
- Now to actually add values to this new list variable, we use a command called append(). Like this:
```
x.append(5)
x.append("Hello")
x.append(True)
```
  As you see, a list can contain any of the other values that we've been working with so far: numbers, text strings, and Boolean values. You can view the contents of a list with print():
```
print(x)
# This would print to the console:
# [5, 'Hello', True]
```
- But the really new, weird, and exciting thing is how we actually reference, or in other words, how we use those values.
  
  Lists are ordered. The values in a list are held and stored there in order in which they were added to the list. That means that you can reference those values by number, using a new syntax, square brackets:
```
print( x[0] )
# This would print to the console
# 5
```
  This is called the list index. The word index (like the index in a book or your index finger) has etymology related to pointing. So you can think of the 0 above as pointing to a specific value, in this case, the first value. (In other parts of computer science, this is actually called a pointer, but pointers are a slightly different and more complicated topic common in C and C++ programming.)
  
  You can use an indexed list anywhere that you would use a regular variable, so any of the following would be valid:
```
rect( x[0], 5, 100, 100)
fill( 155, 155, x[0] )
if x[5] < 10:
    # do something
```
  (Obviously this snippet probably wouldn't make much sense altogether.)
- You also use the assignment operator = to set values in a list like this:
```
x[0] = 5
```
  But you cannot use the assignment operator to add new values to the list, or in other words to make the list longer. For example, this will get an error:
```
y = [] # Make a new empty list
y[0] = 5 # Try to set a value into the list

# Displays an error in the console saying:
# IndexError: list assignment index out of range

# But this would work:
y.append(5)
# And then you could change the value later like this:
y[0] = 6
```
- The exciting thing is that now we have a list of values, and they are referenced or indexed using a number. That allows us to do things like reference those values in a loop or have a dynamic number of values.
- Important note. You may have noticed something a little weird: lists are always indexed starting with 0. So the first item of this list would be x[0], and if a list had ten items, the last would be indexed as x[9].
- You can ask Python for the length of a list like this: len(x). This is a very important and extremely common thing to do.
- So we can say that the index of a list called x ranges from 0 to len(x)-1
Let's put this to use in our example, but start by first by going back to the version without a while loop:
```
y = []
y.append(200)
y.append(200)
y.append(200)
y.append(200)

def setup():
    size(500, 500)
    stroke(50, 50, 250)
    fill(150, 150, 250)
    rectMode(CENTER)

def draw():
    background(255)

    rect(100, y[0], 100, 100)
    rect(200, y[1], 100, 100)
    rect(300, y[2], 100, 100)
    rect(400, y[3], 100, 100)
    
    y[0] = y[0] + random(-5,5)
    y[1] = y[1] + random(-5,5)
    y[2] = y[2] + random(-5,5)
    y[3] = y[3] + random(-5,5)
```
We're using a list! Notice that instead of creating four independent variables, a, b, c, and d, I am now creating one variable called y, which is a list, initially set to an empty list, and then expanded by appending the value 200 four times. Then I reference those values using the square bracket index notation, as items 0, 1, 2, and 3. So instead of saying a, I'm saying y[0].

This doesn't have any apparent advantage yet, but let's keep going ...
Remember that my goal was to use a loop to draw and move my squares, so that I could have a dynamic number. Here's where it gets exciting and a little tricky.

Since we use numbers to index lists, we can also use a variable for the list index. In other words, we can use a variable to specify which item in the list we are referring to. For example:
```
n = []
n.append(350)
i = 0
print( n[i] )
# Prints to the console:
# 350
```
Pause and make sure you can wrap your head around that. What is the value of i?

Step through this example:
```
clouds = []
clouds.append(700)
clouds.append(800)
clouds.append(900)
i = 0
print( clouds[i] ) # What would this print? 700 (Highlight to see.)
i = i + 1
print( clouds[i] ) # What would this print? 800
```
Now that we can use variables to index our list, we're almost there. Let's go back to our loop, but we have to change one thing first.

Remember how last week we talked about different ways of specifying our looping varible in a while loop? Compare the below two examples to see how they are equivalent:
```
i = 100
while i <= 400:
    rect(i, a, 100, 100)
    i = i + 100
```
```
i = 0
while i <= 3:
    rect(100 + i*100, a, 100, 100)
    i = i + 1
```

We can finally put everything together:

y = []
y.append(200)
y.append(200)
y.append(200)
y.append(200)

def setup():
    size(500, 500)
    stroke(50, 50, 250)
    fill(150, 150, 250)
    rectMode(CENTER)

def draw():
    background(255)

    i = 0
    while i <= 3:
        rect(100 + i*100, y[i], 100, 100)
        i = i + 1
    
    y[0] = y[0] + random(-5,5)
    y[1] = y[1] + random(-5,5)
    y[2] = y[2] + random(-5,5)
    y[3] = y[3] + random(-5,5)

We can also move the code that changes the y values into the same loop:

y = []
y.append(200)
y.append(200)
y.append(200)
y.append(200)

def setup():
    size(500, 500)
    stroke(50, 50, 250)
    fill(150, 150, 250)
    rectMode(CENTER)

def draw():
    background(255)

    i = 0
    while i <= 3:
        rect(100 + i*100, y[i], 100, 100)
        y[i] = y[i] + random(-5,5)
        i = i + 1

And we can also make a loop that initializes the list values. Note that I've moved the first 5 lines of the code snippet above into the setup() block and replaced them with a loop:

def setup():
    size(500, 500)
    stroke(50, 50, 250)
    fill(150, 150, 250)
    rectMode(CENTER)

    global y
    y = []
    i = 0
    while i <= 3:
        y.append(200)
        i = i + 1

def draw():
    background(255)

    i = 0
    while i <= 3:
        rect(100 + i*100, y[i], 100, 100)
        y[i] = y[i] + random(-5,5)
        i = i + 1

(Note that since I am creating y inside the setup() block (by saying

y =
	  []

) I need to declare it global so that it can be accessed inside the draw() block.)

Now we have a loop that uses repetition to create many things and and one list that holds many values, one for each of those things.

This means that now we could relatively easily modify this so that instead of 4 squares, we had 8, 100, or 1000. Change the 3 to 4 to see how easy it is to add one more:

def setup():
    size(500, 500)
    stroke(50, 50, 250)
    fill(150, 150, 250)
    rectMode(CENTER)

    global y
    y = []
    i = 0
    while i <= 4:
        y.append(200)
        i = i + 1

def draw():
    background(255)

    i = 0
    while i <= 4:
        rect(100 + i*100, y[i], 100, 100)
        y[i] = y[i] + random(-5,5)
        i = i + 1

Or change it to 10 (for this, I'll make each one less wide):

Example: Homework starting point

def setup():
    size(500, 500)
    stroke(50, 50, 250)
    fill(150, 150, 250)
    rectMode(CENTER)

    global y
    y = []
    i = 0
    while i <= 10:
        y.append(200)
        i = i + 1

def draw():
    background(255)

    i = 0
    while i <= 10:
        rect(100 + i*25, y[i], 25, 100)
        y[i] = y[i] + random(-5,5)
        i = i + 1

What if we only wanted to move the even-numbered rectangles? We could add an if statement inside that last loop:

i = 0
while i <= 3:
    rect(100+i*100, y[i], 100, 100)
    if i == 0 or i == 2:
        y[i] = y[i] + random(-5,5)
    i = i + 1

But then if we wanted to change our list size, we'd have to keep adding additional checks into that if statement. So to do this more concisely, we could use a thing called the modulo which is like division, but only returns the remainder.

Here are some examples that help demonstrate how modulo works:

# Regular division:
print( 10 / 2 ) # Prints 5

# The remainder when dividing 10 by 2:
print( 10 % 2 ) # Prints 0

# Python ignores the decimal when you're using whole numbers:
print( 10 / 3 ) # Prints 3 

# Using the decimal tells Python not to ignore it:
print( 10.0 / 3 ) # Prints 3.3333

# The remainder when dividing 10 by 3:
print( 10 % 3 ) # Prints 1

# 10 goes in to 11 once, with remainder 1:
print( 11 % 10 ) # Prints 1

# So this expression would print True whenever x was an even number:
print( x % 2 == 0 )

And here's how you could use that in the above loop:

i = 0
while i <= 3:
    rect(100+i*100, y[i], 100, 100)
    if i % 2 == 0: # if dividing by 2 gives remainder 0, it's even
        y[i] = y[i] + random(-5,5)
    i = i + 1

That conditional inside the while loop can also be interactive based on mouse input:
```
i = 0
while i <= 3:
    rect(100+i*100, y[i], 100, 100)
    if mouseX > i*100-50 and mouseX < i*100+50:
        y[i] = y[i] + random(-5,5)
    i = i + 1
```
(If you're working through the math on that remember that I'm using rectMode(CENTER) in these examples.)
To conclude, what should we do if we want these squares to move around in space, like in the flocking examples? In other words, to move horizontally as well as vertically?

We would need an x value for each square. So? Add a new list!
```
x = [] # in setup
```
And go from there: set initial values, use them with the rect() command, and change the values in some way.
If you wanted each square to have other properties (like size and color), simply add more lists in the same way. Here is an example in which each square has its own x and y position, as well as size and color: list_example.pyde

If you wanted them to move in a way that was more sophisticated than just random, what would you do? Well each square would need its own x and y direction. More lists!
Here's a basic version of the game Breakout that puts it all together: breakout.pyde