Tutorial2

Learning Objectives:

1. Writing your own functions
2. Function Parameters Variables
3. More functions written by other programmers
4. Writing Comments
5. Exercises

Essential Questions

1. How can algebra be applied to coding?
2. How can I better organize my computer code?

Try some sample code

Follow this Thimble link

Part I - Writing your own functions

In the previous tutorial we learned that we can write programming code in function setup and draw. In this tutorial I would like you to try writing your own functions. Functions are a way for us to organize our code to put it simply. We do this by putting only the code to draw a specific objects into a function with an appropriate name. Below you fill find the function code for a house.

function house()
{
  fill(255,0,0);
  stroke(0,0,0);
  // roof
  triangle(50,50,25,75,75,75); 

  // outer wall and floor
  line(25,75,25,125);
  line(75,75,75,125);
  line(25,125,75,125);

  // door
  line(40,125,40,100);
  line(60,125,60,100);
  line(40,100,60,100);
}

We can make use of our function by making a call to the function as follows. This can be done in either function draw or setup. In fact all the code that we have written so far are based on function calls written by other programmers!

function draw()
{
  background(255,255,255);
  house();
}

Part II - Functions Parameters Variables

As you can see there is nothing in between the brackets () of our function. As discussed previously, values in between the brackets are known as parameters. In our self-defined functions we will need to create a variable to store values sent from other parts of the program.

function sun(centerX, centerY)
{
  fill(244,255,74);
  ellipse(centerX,centerY,25,25); 

  stroke(0,0,0);
  line(centerX,centerY-15,centerX,centerY-30);
  line(centerX,centerY+15,centerX,centerY+30);
  line(centerX+15,centerY,centerX+30,centerY);
  line(centerX-15,centerY,centerX-30,centerY);
}

In the first example of the house, it is drawn in a fixed location as defined by all the coordinates in the function house. In this function for drawing a sun, all the values of the sun are defined with respect to a central X and Y location. By using some simple algebraic expressions we have generalized our image to fit anywhere on the screen. Not only that but call the function multiple times we can draw multiple suns anywhere on the screen.

function draw()
{
  background(255,255,255);
  sun(200,50);
  sun(100,75);
}

There are two points of view for a parameter variable. The parameter variable in your function sun receives information. In contrast when you are making a function call (using a function) you are sending data to the parameter variables in the function.

// receives data
function sun(centerX, centerY)
{
  fill(244,255,74);
  ellipse(centerX,centerY,25,25); 
  // ... other code
}

function draw()
{
  background(255,255,255);
  // sends data to function sun
  sun(200,50);
  sun(100,75);
}

A parameter variable is similar to a container which stores values. A real world example would be like a waiter at a restaurant taking your order. The waiter's notepad may be thought of as a parameter variable. When you tell the waiter what you want to eat, that is similar to calling a function such as having a steak. In ordering a steak you often specify how you want it cooked. Cooking the steak would be a function while specifying you want it down medium-rare would be sending data to a variable. The waiter then writes down that you want a steak specifically recording you want it done medium-rare. The writer's notepad it similar to a parameter variable. The chef then receives information from the notepad and cooks your steak according those specification.

Part III - Additional Computer Functions

line - has 4 parameters representing two coordinate pairs. The values are x1,y1,x2,y2. The example below draws a line at point 1 (10,50) to point 2 (10,100).

line(10,50,10,100);

triangle - has 6 parameters representing 3 vertices of a triangle. See example below:

triangle(50,50,25,75,75,75);

rect - has 4 parameters referencing the following things, top left corner X position, top left corner Y position, width (horizontal distance), height (vertical distance). See example below:

rect(50,100,25,25);

textStyle - has only 1 parameter. You may input any of the following 3 options: NORMAL, BOLD, ITALIC. See example below:

textStyle(NORMAL);
text("Hello World",10,50);
textStyle(BOLD);
text("Hello World",10,75);
textStyle(ITALIC);
text("Hello World",10,100);

textFont - has only 1 parameter. Allows you to change the font type. You must place the font type in double quotations "". See example below:

textFont("Times New Roman");
text("Hello World",10,50);
textFont("Arial");
text("Hello World",10,75);

textSize - has only 1 parameter. allows you to change the size of the font using any numerical value. See example below:

textSize(8);
text("Hello World",10,50);
textSize(12);
text("Hello World",10,75);
textSize(16);
text("Hello World",10,100);

Part IV - Writing comments

Comments can and should be written in your computer code. You should try to group your code together and write a general comment describing what that group of code does.

There are two ways for us to write comments.

Commenting Method 1

// This is an example of a comment

Commenting Method 2

/* This is an example of another comment */

/* You can write a really really really
   really really really really really
   really big comment on multiple lines */

See below for a sample of good coding

// Good commenting and coding example
// roof
triangle(50,50,25,75,75,75); 

// outer wall and floor
line(25,75,25,125);
line(75,75,75,125);
line(25,125,75,125);

// door
line(40,125,40,100);
line(60,125,60,100);
line(40,100,60,100);

In the example below, you can see six line instructions bunched together. The reason this is poor coding practice is because it is difficult to tell which line code is drawing which part of the house. All we know is that it is a house being drawn.

// Poor commenting and grouping example
// house
triangle(50,50,25,75,75,75); 
line(25,75,25,125);
line(75,75,75,125);
line(25,125,75,125);
line(40,125,40,100);
line(60,125,60,100);
line(40,100,60,100);

Other uses of comments

A pro tip for using comments is to remove code without deleting it from your program. Later when you start to discover errors in your code, commenting is a technique we can apply to solve problems. We would remove certain parts or specific lines of code to test for errors.

Part V - Exercises

Exercise 1: cloud function - For warming up you will create a cloud function which you can draw using a series of overlapping ellipses. Make both the border and the fill of the ellipses white. Your cloud function does not need to take in any parameters meaning you may use fixed values much like the house function example.

Exercise 2: windows function - You must create a windows function which draws a simple 2D window. The window must contain at least two cross sectional support beams. Your window function must contain two parameters representing the top left corner of your window. The rest of your window should be drawn algebraically with respect to it's top left corner. I recommend you draw a fixed version of the window first then convert that into an algebraic expression.

Exercise 3: stickman function - You must create a stickman function taking in two parameters. The parameters are the center of the stickman's head. Your stickman must contain arms, legs and a body. You have the freedom to choose how you want to create this. All parts of the stickman should be drawn algebraiclly with respect to the center of the head. I recommend you draw a fixed version of a stickman first then convert that into an algebraic expression.

Please write some comments to explain certain parts of your code and attempt to group your code together. You will be graded on this!

Further Challenges

Bonus Marks: Create a function for a fence and flowers. Decorate your sketch be using your function multiple times.