
This week we mainly looked at three things:
- How data is organised on your computer
- Creating functions
- Using randomness to make things interesting
Data Organisation
Most of us had heard of a hard-disk before. This is a stack of metal disks inside your computer. Each metal disk has a special coating made of millions of tiny magnets (like you might find stuck to the fridge) that can be turned on and off.
We saw that able to turn something on and off, like a switch, was enough to count from zero to one, but the more switches we added, the higher we could count. Two switches can count from zero to three:
Switch 1 | Switch 2 | Total (Add)
[Off = 0, On = 1] | [Off = 0, On = 2] |
------------------+-------------------+-----------
Off = 0 | Off = 0 | 0
On = 1 | Off = 0 | 1
Off = 0 | On = 2 | 2
On = 1 | On = 2 | 3
With enough of these tiny switches, we can store anything we need. Each of these tiny switches is also known as a ‘bit’ and a 1 terabyte hard disk has a billion of them!
We also saw that the files on your disk are arranged with folders (also known as directories). Folders can contain both files and more folders. This allow us to keep our hard disk organised; without them all our files would be in the same place which would be difficult once we had more than a few. The location of a file is called its “path”. Looking at the highlighted file on the desktop of my Mac we can see the full path would be:

/Users/kierancoughlan/Desktop/Ball and Bat Sounds.m4a
This means that, reading backwards, the file called ‘Bat and Ball Sounds.m4a’ is in a folder called ‘Desktop’ which is itself inside a folder called ‘kierancoughlan’ which is, at the highest level, inside a folder called ‘Users’.
Functions
A function is a collection of commands that do a job together. We’ve already encountered them, even if you hadn’t especially noticed:
- Our P5 template already contains two functions called start() and draw()
- All of the P5 commands we have used, such as createCanvas() and rect() are functions themselves
We could add all our code to start() and draw(), in fact, that’s what we’ve done before this week. That’s fine starting out, but it does mean, once there are a lot of commands in those functions, that our code is gets harder to read and understand. Breaking out a few commands into a new function and giving it a name that describes what it is doing, really helps.
Once we’ve written a function, it can be called as many times, and from as many places, we as need.
Functions can do one other thing too: they can give back a value to the place where they were called from. For this we use the special word return. For example, let’s see what a function to pick the largest of two numbers, we’ll call it Max(), might look like:
function start(){
let a = 4;
let b = 10;
let c = Max(a, b);
}
function Max(n1, n2){
if (n1 > n2)
return n1;
else
return n2;
}
We give Max() the two numbers we are comparing. If the first one is bigger than the second, it gives back the first. Otherwise, if gives back the second. Note too that the names of the variables in Max() are different to those in start(), and that’s not a problem.
Random
Finally, we looked at the P5 function random(). We used it two different ways:
random(); // gives a number between 0...1
random(n); // gives a number between 0...n (where n is a number!)
In the first form, we used it to pick a random colour. In the second, we used it to pick a random position for our squares.
Files
As usual, all the code is on the creators github repository. Head there and download it!! The files for this week contain both the script we wrote (sketch.js) and a longer version that I wrote (sketch2.js). Feel free to take a look at both!