p5js week 09

Phew! It's been lots of toast over the past eight lessons! We'd better take a lesson to catch up and review what we've learned.

We'll review in two parts: general JavaScript and then p5js.

You can open the console in the browser by pressing F12, selecting “developer's tools” from the menu, or right-clicking to inspect and then choosing the console tab.

We can store values in variables; then we can use them later. When we do that, we use the “let” keyword.

let aNumber = 10;

Making functions is super important! The basic pattern is like this:

// function functionName (arguments) {
//    stuff you want to do;
//    let aValueYouCalculated = the result of some computation above...
//    return aValueYouCalculated // to get out the value you wanted to compute
// }

// which looks like this real function:

function addTwoThenTimes100 (number) {
  let preNumber = number + 2;
  let finalNumber = preNumber * 100;
  return finalNumber
}

We can call a function by using its name and then giving values for the arguments. We can use variables we declared before as the arguments. That works like this:

addTwoThenTimes100 (aNumber)

The arguments are the input to the function, and the return statement is the output.

We also learned another way to write functions called arrow functions. That pattern looks like:

// let functionName = argument => stuff you want to do

// which looks like this real function:

let addTwoThenTimes100_2 = number => (number + 2) * 100

addTwoThenTimes100_2 (aNumber)

When we wrap up some calculations inside of a function, that's called encapsulation. When we change a value inside and make it an argument so that we can use the function in more situations, we're doing what's called generalization. That's like this:

function addTwoThenTimesX (number, x) {
  let preNumber = number + 2;
  let finalNumber = preNumber * x;
  return finalNumber
}

addTwoThenTimesX (aNumber, 500)

We can use many kinds of values in our functions, including numbers, strings (“hi!”), booleans (true or false).

Be careful about what order you do stuff; that's called thinking carefully about your procedure.

We can group data together, also called structuring data, into arrays or objects.

Arrays can tell us how long they are when we use the length method. There are also cool methods like forEach, map, and filter (check lessons 6, 7, and 8) that let us avoid using for-loops. We also learned about adding things to arrays using push and unshift, as well as removing things from arrays using pop.

However, if we want to use a for-loop, we can. Remember the basic pattern of a for-loop:

// for (counter variable; stopping condition; increment) {
//  what you want to do on each loop
// }

// you can use it like this inside a function...

function addCounterToBaseNumber (baseNumber, n) {
  let finalNumber = baseNumber;
  for (let i = 0; i < n; i++) {
    finalNumber = finalNumber + i
  }
  return finalNumber
}

We made some useful functions, including randomRange, pick, and buildArray.

Often when we use objects, we make a class that makes it easier to make objects. We can make objects using the constructor from the class. To use the constructor, we start with the “new” keyword.