05functions_loops

Functions and loops

DSDN 142 Creative Coding

LOOPSLoops are a very quick and easy way to excecute code repeatedly. If you are wanting to do something like draw a 1000 lines you could easily write out line() 1000 times with slightly different numbers each time. This would be severly inefficient, however, and rather pointless. Using a loop, however, you could draw 1000 or even 1000000000 lines with exactly the same amount of code! An important thing to understand though is that loops deal with numbers, nothing else. You can use these numbers for anything though as the numbers are inside variables.

If you haven't yet done the variables presentation, go do it now! It is essential you understand variables before trying to tackle loops!

WHILE LOOPS:While loops are the bread and butter of any programmers diet. They are the most fundamental form of loop and are an easy way to achieve most repetititive task. There are two parts of a while loop: The condition and the body (the code contained by the loop). The condition of the loop is essentially what tells the loop when to stop running, if the loop never stops running your computer will crash!

while(condition goes here){

//code goes here}

This is the basic syntax for a while loop, it is very similar to a function (as you will soon see) the condition goes between the brackets and the code goes between the braces.

Functions and loops


CONDITIONS:A condition is a statement, if you read the loop as plain english it would say: while( this condition is true){ keep running this code} so a condition is simply anything that can either be TRUE or FALSE. An example of this would be while (x < 10) the statement x is smaller than 10 is either true or false right? If x is infact 11 then the statement is false, if it is 9 the statement is true!The important part of this is that if x is getting incremented (getting bigger) within the loop then x < 10 will be true for a while, but will eventually become false.

int x = 0;

while(x < 10){

line(10*x, 0, 10*x, height);x = x+1;

}

The highlighted line is important! Without it the computer would freeze. How this code works: a variable called x is created and set to 0. The computer then sees this while loop, it looks at what is within the brackets and says “is this true?” if it is it runs the code attached to the loop. When it gets to the bottom of the code attached to the loop it goes back to the top and checks if the if condition is true again. If it is it re runs the code. This continues until the computer sees that the condition is no longer true ( in this case if x is no longer smaller than 10) Every time this particular loop is run, the red line makes x bigger by 1. This means that after 10 loops through, x wil be equal to 10! 10 is not smaller than 10 so the loop will stop running and will continue whatever code is below.

Copy paste this code into processing and change things! See what happens.

Functions and loops


Symbol Translation

> Greater than

< Smaller than

== Equal to

!= Not equal to

>= Greater than or equal to

<= Smaller than or equal to

TABLE OF CONDITIONAL OPERATORS

Functions and loops


BEFORE copying these into processing, see if you can work out what they will do! How many times will they loop? Work with the people in your group if you are struggling!

int var = 0;

while(var < 20){

println(var+””);var = var + 2;

}

int myNumber = 100;

while(myNumber > 50){

ellipse(myNumber, myNumber, myNumber, myNumber);myNumber = myNumber - 10;

}

Functions and loops


FUNCTIONSFunctions are an essential component of most programming languages. In essence they are a way of “packaging” up a bit of code for multiple uses. You have already used functions in the last couple of days, both void setup() and void draw() are functions, and so was redRectancle (redRectangle was a custom function from one of the examples).

CREATING FUNCTIONS:Creating a function is fairly easy they consist of 4 things; a type declariation (like variables functions have a type). For example: void, int, float, string, char etc etc...), a name, some brackets for parameters (parameters will be explained later) and then the code that the function contains.

Functions and loops


TYPES:The first part of the function declaration is the type declaration, or the “return type”. What this says is simply what kind of data am I going to get OUT of this function, or what am I going to get back if I call this function. The type you have seen so far “void” simply means nothing, if you declare a function with void it means you will get nothing back. If you replace void with int, it means you have to send back an integer at the end of the function, float means you will send back a float etc etc......

Functions and loops


If you remember from the presentation on variables, a String is simply a collection of characters (a sentence usually).In this example a function called saySomething is created, and is given the return type String. This function MUST return a string, which it does. The returned string is then put into the variable called output which is then printed onto the screen.

Copy this code and have a play with it rename things and experimenting with what you can do.

12

3

Functions and loops


FUNCTION NAMES:The name of the function is simply a label, just like the name of a variable is a label. It doesn't matter what you call your function, as long as you follow the same naming rules as variables.To invoke a function (run the code inside it) you simply type the name of the function followed by brackets (the brackets only contain things if you have added parameters to your function... this is explained next).

This creates a function called doStuff, doStuff isn't ever run unless it is called from within another function (in this case it is called from run) try this example out, and write another function. Try calling this second function from within doStuff. Does this work? What happens when you delete “doStuff();” from draw?

Functions and loops


PARAMETERSAs was explained earlier, return types are the way to get things out of a function. Parameters are how you get data INTO a function. If you create a variable inside of the draw function, and then write a new function (lets call it myFunc) you can't use that variable inside of myFunc. If you try your program won't start and you'll get a nasty error. (try it out). What happens if you create a variable inside of one function and need to use it within another? Well this is where parameters come in. You have already used functions that require parameters, line() or ellipse() are examples of this. Remember how you put 4 numbers between the brackets? Those 4 numbers are the parameters of the line function.

If you could see the line function it would look something like this. Notice the 4 variables between the brackets? Those corrospond to the 4 numbers you enter when drawing a line!

If I were to say line(50, 60, 70,100) x1 would now contain 50, y1 would contain 60, x2 would contain 70 and y2 would contain 100. (within the line function

As shown in the code above, you can declare variables between the brackets of a function. You can make as many as you want, you just need to seperate them with commas.These variables corrospond with the things you put between the brackets when you call the function. This is a somewhat confusing concept at first, try making a few functions with parameters and see if you can work them out. If you are struggling ask others in your group for help.

Functions and loops


What will this code do? The arrows show how this works. Type out the code and see what it does! Is it what you expected? Change the two numbers between the brackets of sum(...) what happens?The only way to fully understand all that has been explained is to experiment for yourself!

AN EXAMPLE:

Functions and loops


Exercise 1: Try it on your own: use variables and a loop to create the same result

void setup(){ size(100,100); strokeWeight(3); background(255);}

void draw(){ int space=10; line(0*space,0,0*space,100); line(1*space,0,1*space,100); line(2*space,0,2*space,100); line(3*space,0,3*space,100); line(4*space,0,4*space,100); line(5*space,0,5*space,100); line(6*space,0,6*space,100); line(7*space,0,7*space,100); line(8*space,0,8*space,100); line(9*space,0,9*space,100); line(10*space,0,10*space,100);}

Functions and loops


Please only proceed if you figured out the answer on your own!

Functions and loops


Solution 1: Using variables and a loop


void draw(){ int space=10; line(0*space,0,0*space,100); line(1*space,0,1*space,100); line(2*space,0,2*space,100); line(3*space,0,3*space,100); line(4*space,0,4*space,100); line(5*space,0,5*space,100); line(6*space,0,6*space,100); line(7*space,0,7*space,100); line(8*space,0,8*space,100); line(9*space,0,9*space,100); line(10*space,0,10*space,100);}


void draw(){ line(0,0,0,100); line(10,0,10,100); line(20,0,20,100); line(30,0,30,100); line(40,0,40,100); line(50,0,50,100); line(60,0,60,100); line(70,0,70,100); line(80,0,80,100); line(90,0,90,100); line(100,0,100,100);}

=void setup(){ size(100,100); strokeWeight(3); background(255);}

void draw(){ int space=10; int count=0; while(count<12) { line(count*space,0,count*space,height); count=count+1; }}

=

Using loops properly is the difference between hours and minutes of effort!

Functions and loops


Exercise 2

Modify this codeUse progressive spacing ie. Have the spacing between the lines increase as the lines get closer to the right hand side.


void draw(){ int space=5; int count=0; while(count<width) { line(count,0,count,100); count = count + space; }}

Functions and loops



Functions and loops


Solution 2


void draw(){ int space=5; int count=0; while(count<width) { line(count,0,count,100); space = space + 1; count = count + space; }}

Functions and loops


Exercise 3

Modify this code• Have equally spaced lines Progressively scale the stroke weight• Always keep at least one white pixel between the lines.


void draw(){ int space=10; int count=0; while(count<16) { line(count*space,0,count*space,100); count = count + 1; }}

Functions and loops



Functions and loops


Solution 3void setup(){ size(100,100); strokeWeight(3); background(255);}

void draw(){ int space=10; int count=0; while(count<16) { strokeWeight(count); line(count*space,0,count*space,100); count = count + 1; }}

Functions and loops


Exercise 4• Modify this code• Change the code so that it looks the same as the screenshot• ie. ensure that the lines cover the whole window


void draw(){ int space=10; int count=0; while(count<width) { line(0,count,count,0); count=count+space; }}

Functions and loops



Functions and loops


Solution 4void setup(){ size(100,100); strokeWeight(3); background(255);}

void draw(){ int space=10; int count=0; while(count<width*2) { line(0,count,count,0); count=count+space; }}

Functions and loops


for loops

The for loop is a shortened version of the while loop. They are completely identical in what they do. The reason the for loop exists is to make the typing of loops easier and quicker for you.


void draw(){ int space=10; int count=0; while(count<16) { line(count*space,0,count*space,100); count=count+1; }}


void draw(){ int space=10; for (int count=0; count<16; count=count+1) { line(count*space,0,count*space,100); }}

=

Functions and loops


Exercise 5

Modify this code• Replace the while loop with a for loop• The sketch should still look the sameint space = 25;

void setup(){ size(250, 250); smooth(); noStroke();}

void draw(){ translate(space/2,space/2); background(0);

int x = 0;

while (x < 10) { ellipse(x * space, 0 * space, space, space); x = x + 1; }}

Functions and loops



Functions and loops


Solution 5

int space = 25;int diameter = space;



for (int x = 0; x < 10; x = x + 1) { ellipse(x * space, 0 * space, diameter, diameter); }}

for loops are the building blocks of any type of pattern you can think of

Functions and loops


Exercise 6: Nested loops

Modify this code• Instead of drawing one row of circles draw 10 rows of circles• Note: translate() was used so that the circles could fit properly.• Try looking up translate() in the Processing Reference

int space = 25;



for (int x = 0; x < 10; x = x + 1) { ellipse(x * space, 0 * space, space, space); }}

Functions and loops



Functions and loops


Solution 6: Nested loopsint space = 25;



for (int x = 0; x < 10; x = x + 1) { for (int y = 0; y < 10; y = y + 1) { ellipse(x * space, y * space, space, space); } }}

It is completely OK to put a for loop inside another for loop.

Documents

05functions_loops