WELCOME TO RATIO CLUB

Week 1:

[ Shapes, Colours, Properties, Functions ]

What are Functions?

Functions are what make all the magic of coding happen by allowing you to make things change.
They make things dynamic.

They also allow you to quickly reuse code again and again.

A Function is declared with the key word function
and given a name.

Functions are passed arguments and return a value.

function name( arguments ) {
 return value;
};

Like variables, they must be given a unique name - but they can also be stored in variables:

var name = function( arguments ) {
 return value;
};

Both of these formats are valid and while the second is very useful,
it is less commonly used, being more useful for certain situations.

Finally, in order to run and execute, a function must be called:

name(arguments);

Arguments

Arguments are variables that you pass into a function to use inside.
The can be anything you want, and confusingly, can also be other functions.

Here is an example of a variable being passed into a function:

function addEnthusiasm( message ) {
 return message + "!";
}

Functions return a value:

function multiply( x, y ) {
 return x * y;
}

Functions can also take no arguments:

function sayHello(){
 console.log("hello");
}

These are simple, but functions can become very complicated,
so it is good to try to break things up into multiple functions.

p5.js: a library

p5 is a library made to try and make coding fun and easy for artists and visually minded people.

The people behind p5 have tried to take care of as much of the things that can be tricky early on, so you can get on with making art whilst learning to code.

A Library is a whole bunch of premade functions and objects that has been made to make your life quicker and easier.

They mean that you don't have to keep reinventing the wheel, and luckily there are libraries for almost anything!

A p5 Sketch

In p5, the drawings you can make are called sketches.

Every p5 sketch has two essential functions.
You write these yourself and then the library looks for them in order to make the sketch run.

The two functions must be named setup and draw.

function setup(){

}

function draw(){

}

When the library finds either of these, they get called for you.

The p5 Reference Page

When learning to code, and once you've learnt to code, it's important to know how to find answers when you get stuck.

Above is the documentation for p5.js
It tells you how to use functions and gives descriptions of each.

Exercise:

Objects

Objects are a way of storing properties and functions together.

This means that something that has a size and a colour and multiple parts, it can be held together in one place and used quickly.

Object Notation consists of name:value pairs

var obj = {
 firstName: value1,
 secondName: value2
};

and the value can be accessed in two ways

obj.firstName

or

obj[firstName]

a stored function can also be accessed using the dot notation

obj.nameOfFunction(arguments);

Here is an example of a kettle object written in code:

var kettle = {
 waterLevel: 0.3,
 temp: 10,
 boil: function(){
  while (this.temp < 100) {
   this.temp++;
  }
  if ( this.temp >= 100) {
   return boiledWater;
  }
 }
};

kettle.waterLevel = 0.7;
kettle.boil();

Scope

When making functions and objects, it is important to think about scope.

If you use multiple versions of the same Object, each will have the same sets of variables with the same names.

How do we get around this problem? By keeping in mind scope.

{ }

Curly Brackets separate the different levels of scope.

The most basic principle is that there are two basic levels of scope:

Global and Local

Global variables can be accessed anywhere in your programme.
To do this, they must be declared outside all functions and Objects,

ie: outside all sets of curly brackets.

Local variables can only be used with the function or Object they are declared in.

They will work inside the outermost set of curly brackets they were declared in.

this.variable

The keyword this is used to make sure an object or function refers to only its own version of a local variable.

to summerise:

<script>
 var global;

 function globalFunction(argument) {
  var argument;
  argument;
  var functionLocal;
  global = 10;
 }

 var obj = {
  objectLocal: "value",
  function objectFunction() {
   var functionLocal;
   objectLocal;
   functionLocal;
   this.objectLocal;
   this.functionLocal;
   global;
  }
 };


functionLocal;
globalFucntion.functionLocal;
objectLocal;
this.objectLocal;
objectFunction();
this.objectFunction();
 obj.objectLocal;
 obj.objectFunction();
 global;
<\script>

Homework:

See if you can move your sketch into an object so we can reuse it next week.