Hi Stella and Leila - Welcome back to Processing - week 2. Let’s review a few of the things we went over last time:

We worked together to create a single pacman:.

Now to cement a few of the things that we learned last week, work together to make this drawing:

Before you write actual code, think about what components we need, i.e.

Once you have those sketched or written down, write some pseudo-code, i.e.

Draw a pacman with its mouth open
Draw an eye
draw another pacman to the right of the first one; change its mouth angle
draw another with a closed mouth
etc.

Now get to it! Write some code, and let me know what you come up with.

In chapter 4, we learned about variables and loops. Sketch out how you could use an assigned variable in the munching pacman drawing. In particular, if you assigned a variable to the location of a pacman, what would it be? Which of the location dimensions changes? How could you change them if you assigned a variable?

Looping is a fundamental concept in coding, and depending on the language, it’s something you will use all the time. Some languages are very fast in loops, i.e. C++, while some are slow, i.e. R. Computers are very good at doing things over an over again - even with slight modifications each time.

The basic idea of a loop is to take advantage of this feature of computers. You essentially tell the computer, “for some amount of time, do some stuff, and then stop.” In code this can look as follows:

for(i in 1:10){
  print(i)
}
## [1] 1
## [1] 2
## [1] 3
## [1] 4
## [1] 5
## [1] 6
## [1] 7
## [1] 8
## [1] 9
## [1] 10

Loops can be very efficient because it shortens your code. Compare the previous block of code with this block:

print(1)
print(2)
print(3)
print(4)
print(5)
print(6)
print(7)
print(8)
print(9)
print(10)

Ugh! That is ugly, and leaves you open to typing mistakes. With the loop I can go from 10 lines of code to 3. In fact in R, you can do this with one line of code:

for(i in 1:10){ print(i) }

In addition to leaving you open to typing mistakes, coding outside of the loop is very rigid and inflexible. For example, what if instead of looping over 1:10, you wanted to loop over 11:20? In the first block, you just make one change, but in the second, you make 10 changes. One key concept in being a good coder is:

DO NOT REPEAT YOURSELF

which I will repeat, because it’s important:

DO NOT REPEAT YOURSELF

So if you can print 1:10 with only one call to print() why do it with 10 calls to print()? You are more efficient this way. Cool right?

So let’s look at a loop in Processing. You should be roughly familiar with these after reading through chapter 4. Let’s look at example 4-10. This code:

size(480, 120);
background(0);
smooth();
noStroke();

for (int y = 0; y <= height; y += 40) {
  for (int x = 0; x <= width; x += 40) {
    fill(255, 140);
    ellipse(x, y, 40, 40);
  }
}

Produces this figure:

So break down the code in the two for loops and tell me what is going on between the ().

Ok, now that we’ve covered that, what if we wanted to change the fill colour for each horizontal line of circles without having to type fill with 4 different values? How could we take advantage of the loop to dynamically update the parameter value for fill() each time through the loop?

In particular if we wanted to have the colours range from black for the first horizontal line of circles to white for the last, i.e. this figure (note that I’ve changed the background to a light grey):

How would we do that? Have a go at it in Processing to see how you get on.