Some Programming Concepts - Griffith-ICT/1701ICT-Creative-Coding GitHub Wiki

Syntax

I could ask you the following:

Could you get some milk

Pick up the milk from the store

The two statements mean basically the same thing, however they use different words and different ordering of words. This is the syntax of the sentence. What the sentence means is the semantics of the sentence.

Computer scientists could make programming languages just as flexible, but they don't, they have very strict rules where there is very little variation in how you type the instructions, and if one character is incorrect it will most likely generate an error.

Function syntax

We mentioned function syntax last week. For example the setup() function:

function setup()
{
}

We don't need to know too much about function syntax at the moment except that we need to type the setup and draw functions as they are. One slight variation you might see is that some people like to put the open curly brace { at the end of the line instead of the next line:

function setup() {
}

Syntax Errors

If the syntax is not correct we will get an error. The p5.js Web Editor will highlight using orange in the left gutter if there is an error. For example if I delete the opening curly brace from the draw() function and hover over the orange highlight in the gutter it will display the error:

Unfortunately in this case the error is not all that understandable! That unfortunately is not uncommon with syntax errors but at least it gives the location of the error (some error messages are better).

Calling Functions

setup() and draw() are functions we created (although we have to call them setup and draw as p5.js will be calling them).

p5.js provides a whole library of functions we can call or execute to do things for us. Last week we looked at the createCanvas() and background() functions which set the canvas size in pixels and set the background colour respectively.

Calling a function is simpler, we simply specify the name of the function, any parameters (in parentheses), and optionally followed by a semicolon:

background(200, 0, 0);

Note that if there is more than one parameter, they are separated by commas.

The semicolon in JavaScript is actually optional, it will work with or without it. Why is it optional? Some programming languages require it, whilst some don't. JavaScript allows you to work the way you feel most comfortable. It is best to be consistent for readability, either use semicolons throughout, or don't use them at all.

Function calls are placed on separate lines:

background(200, 200, 200);
background(100, 0, 0);

Sequence, Selection, Iteration

When learning to program there are three basic concepts: sequence, selection, and iteration.

Sequence is calling things in order. The above example sets the background colour twice. It will set it to grey first, followed by dark red. Sequence is all about order. I hypothetical example:

putOnSock();
putOnShoe();
tieShoeLaces();
leaveHouse();

We can see in this example order is important. By simply listing function calls in a certain order will cause them to be executed in that order.

We will discuss selection and iteration later.