Loops 1

This section is titled “Looping and Arrays”. Briefly, looping lets you run blocks of code more than once, over and over. Arrays are a kind of variable that can store multiple values at the same time. Loops and arrays work really well together but it would be hard to learn both at once. We will start with loops and some examples and activities that will seem contrived. Trust us, your patience will be rewarded when you get to arrays.

As we were saying, looping is a way to get a block of code to run one or more times. So far, if you wanted to have something run more than once, you write more code. Three rectangles and an ellipse for example:

rect(100,50,30,30);
rect(200,50,30,30);
rect(300,50,30,30);
ellipse(100,100,30,30);

rect(100,50,30,30);

rect(200,50,30,30);

rect(300,50,30,30);

ellipse(100,100,30,30);

could also be written (rather strangely) as:

var x=100;
rect(x,50,30,30);
x = x + 100;
rect(x,50,30,30);
x = x + 100;
rect(x,50,30,30);
ellipse(100,100,30,30);

var x=100;

rect(x,50,30,30);

x = x + 100;

rect(x,50,30,30);

x = x + 100;

rect(x,50,30,30);

ellipse(100,100,30,30);

but could also be written as:

var numRects = 3;
var i = 1;
var x = 100;
while (i <= numRects) {
    rect(x * i, 50, 30, 30);
    i = i + 1;
}

ellipse(100,100,30,30);

var numRects = 3;

var i = 1;

var x = 100;

while (i <= numRects) {

rect(x * i, 50, 30, 30);

i = i + 1;

}

ellipse(100,100,30,30);

This is an example of a “while loop”. What it does is that “while” whatever is in the expression in parenthesis is true, do the stuff in the curly braces. When the expression is false, the while loop stops running and the ellipse is drawn. Note, if the variable “i” didn’t have 1 added to it each time though the loop, the loop would never stop. That is called an infinite loop and isn’t normally what you want.

Here is another example:

var i=0;
var total = 0;
var limit = 5;

while(i <= limit) {
    total = total + i;
    i = i + 1;
}

var i=0;

var total = 0;

var limit = 5;

while(i <= limit) {

total = total + i;

i = i + 1;

}

And the end of that, total will contain the sum of all of the values for i.

Complete Activity 36

So loops are useful for repetitive work. For the next assignment, I want to display a series of random numbers on the screen but to do that nicely we need to go back to a discussion of functions.

I want to display 10 random numbers on the screen so the display looks like this:

Random number 1 is 23
Random number 2 is 42
Random number 3 is 5
…

However, Processing doesn’t have a way to automatically print a series of lines of text to screen. You can print() to the console but I want the output on the main display because it looks better. You can draw to the screen using the text() function. I’m not going to discuss how to use text() in detail, look it up here: https://p5js.org/reference/#/p5/text

I also recommend you also look at the textAlign() and textSize() functions. There is even a textWidth() function to return how many pixels wide some text is.

textWidth() is called like this:

var x;
x = textWidth("the quick brown fox jumped over the lazy snail");

1 2	var x; x = textWidth("the quick brown fox jumped over the lazy snail");

Note that the function textWidth returns a value we can assign to a variable. After that code, the variable x holds the number of pixels wide that text will be on screen.

Annoyingly, there is no equivalent “textHeight()” function. However, looking at the p5js reference, I see there are two functions textAscent() and textDescent() which return the maximum height of the current font above and below the font baseline.

That is, you are displaying text to the screen using some font. There is a symbol in that font which is the tallest above some point and that height is returned by textAscent(). Similarly, there is a symbol which goes lowest below some point (like ‘g’) whose height below is returned by textDescent.

We can create this function:

function textHeight() {
    return textAscent() + textDescent();
}

function textHeight() {

return textAscent() + textDescent();

}

Which happens to be the maximum vertical height of a character in the current font. We can use this to control vertical positioning of text on the screen. It even works if you change the text size (using textSize() ).

The following will print “Howdy!” on 3 consecutive lines and the current value of i. Try putting this in a sketch to see what it does:

var i=0;
while(i<3) {
  text("Howdy! " + i, 50, 100 + (i*textHeight()));
}

var i=0;

while(i<3) {

text("Howdy! " + i, 50, 100 + (i*textHeight()));

}

Note the weird use of “+” between “Howdy!” and i. The text is added to the variable. This is how you stick pieces of text together. It is called “concatenation”. Here are more examples:

var a = "Hello";
var b = "There";
text(a + " " + b, 100,100);

var c = 123;
var d = " some number";
text(c + d, 100,130);

var e = 123;
var f = 456;
text(e + f, 130, 150); // this of course prints the sum of 123+456.

var a = "Hello";

var b = "There";

text(a + " " + b, 100,100);

var c = 123;

var d = " some number";

text(c + d, 100,130);

var e = 123;

var f = 456;

text(e + f, 130, 150); // this of course prints the sum of 123+456.

Processing is smart enough to know if you are “adding” a string and a number together that you mean to convert the number to a string and then make a combined string of them. You don’t need to understand that yet but other programming languages make a bigger deal of that. In case you start looking at other languages.

Complete Activity 37