UAL CCI: Introduction to Creative Computing Intensive 2022: 🤔 & 🔁: Lecture 4: Deciding and Looping.
Back to slide index.

By the end of this lecture, we'll have learnt about:

• Logic in humans and computers
• Some more about functions, namely recursion (a function that calls itself)
• How to use logic and functions together in p5.js code
• How to use everything we've learnt so far to make real time interaction happen using p5.js
• Iteration - which is the obsfucatory term for repeating something several times
• Loops - another word for iteration and the term you'll hear the most in coding
• The four different kinds of loops in p5.js
• A whole series of examples of looping in p5.js
• The concept of scope in coding, and particularly in p5.js

Computers use something called logic to decide what to do. Coding is all about refining sets of rules and consequences to tell a computer how to decide what to do and what do once the decision has been made.

• Boolean algebra, named after George Boole. The Boolean data type is common to most programming languages, it only has two values: True (or 1) or False (or 0). One is true, nothing is false is how I remember it. What does something with only two values remind you of?
• Control flow in programming is how you control the flow of which part of the program is executed next. Inside your control flow statements you'll use comparisons to decide how to compare things.
• Boolean operators allow you to combine or invert boolean data types - AND (or &&), OR (or ||) and NOT (or !).
• Conditional statements, such as if/else statements are very common. You might also see something called a switch statement - which is conceptually the same as lots of if statements in one place. BTW that new way of console.log()'ing variables uses something called Template literals - I use them all the time.

This example demonstrates the use of an if statement. Let's try it cut and pasted into the p5.js editor. It's important to use { and } to enclose both functions AND if (or switch) statements. Those curly brackets help the computer decide something called scope, which is all about what values variables have.

• Remember from previous lecture - instead of writing long lists of commands, one after another, functions allow programmers to package up functionality into smaller mini programs, known as functions or subroutines.
• Functions take input(s) and return output(s) - an example might be a function that returns the square of an input number, or as complicated as the answer to everything.
• Recursion is when something is defined in terms of itself. Recursive humour is funny. Recursion is also found in graphic design, art and cooking. In computer science recursion is when a function calls itself repeatedly. The method of working out the Factorial of any number is a classic example.
• A fractal is a good example of something that is visually recursive.

Let's look at a p5.js numbers example to refresh our memory on the use of if statements and logical comparisons to decide how a program should behave.

Let's take a look at a p5.js example that makes use of three new functions - noLoop(), mousePressed() and redraw().

Let's take a look at a drawing continuous lines p5.js example - what does this new === thing mean? And what about pmouseX? If you ever see something unknown in p5.js, where do you look it up?

Let's take a look at this p5.js example on 1 dimensional distance that makes a simple but pleasing mouse interaction.

To finish up with, let's work through the p5.js tutorial on interactivity - combining all we've learned about using variables and logic to make experiences that react to users in real time. As I always say, "real time or it didn't happen" - or if that was pre-rendered, it's not interactive, it's just a film!

Iteration or looping or repeating is one of the most powerful tools for getting things done in coding. Loops let you repeat the same recipe or set of instructions or commands or block of code as many times as you like. You can set loops to run a set number of times, or for a certain period of time, or to run for every piece of information in a certain place (like for every entry in an address book) or even to run an interactive number of times (until the user presses a certain key for example).

Let's look at the definition of Iteration - the obsfucatory term for repeating something several times.

Loops are just a part of the wider coding world of Control Flow. We've already encountered some control flow with if/else statements and switch statements. Another way of thinking about loops is doing things many times, but using logic to stop. Boolean logic in our case.

The two most common kinds of loops are while loops and for loops.

Let's venture into the p5.js tutorial on program (or control) flow, specifically the section on four different kinds of loops in p5.js. BTW - the structure of for loops is going to take a bit of time to get used to - before you know it you'll be typing them out automatically!

Let's take a look at p5.js's control iteration example, remember - iteration is just another word for repeating, or doing the same thing several times.

Let's take a look at a p5.js example that combines loops and if statements. BTW: what does this % thing do? Where should we look? There is a whole universe of thinking about number systems that loop.

An example that makes extensive use of logical operators (like AND, OR and NOT - or &&, || and !).

An example that combines for loops with a custom function.

A beautiful example of using interactivity and a loop within a loop to generate a grid of ellipses (or circles).

As always, Daniel Shiffman has some great videos all about loops.

BTW: it took me ages to realise, but most games are just one big while loop - "while the user hasn't pressed the ESC key (or Apple Q), keep running the main game loop" - this is true even for operating systems!

Let's take a look at a common bug that comes up when you are writing loops - issues around the scope of variables. Let's take a look at a p5.js example about scope.

Remember we saw push() and pop() this morning? Now see what we can do with a for loop too: check out this advanced Kaleidoscope for some push() and pop() action.

Thanks! Time for a short break!
Back to slide index.