p5js week 08

things to do this week:

1. making your own class
2. filter
3. combining methods for arrays
4. p5js: using filter to draw
5. p5js: drawing with your own class

1. making your own class
2. filter
3. combining methods for arrays

We can use forEach as an alternative to a for-loop to do a lot of things with arrays. We can use map to do a calculation based on each item in an array and return a new array. When we use map, we will get an array which is the same length as the array that we call map on. Sometimes, we just want some of the items in an array. In that case, we use another method for arrays called filter.

Filter lets us choose some of the items from an array based on a function that returns a boolean; finally it returns a new array. We can test each item in an array using this function; if it returns true, it will include the item in the new array. If that function returns false, the item will be excluded or filtered out. Try this code:

let allTheToast = ["regular toast", "burnt toast", "regular toast", "regular toast", "burnt toast", "regular toast", "burnt toast"]

let goodToast = allTheToast.filter(x => x == "regular toast")

goodToast

You can learn more about filter at this link.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Try these expressions:

1 == 1 && 2 == 2
1 == 1 && 2 == 3
1 == 9 && 0 == 4
1 < 2 && 2 < 3
1 <=  1 && 0 < 0.1
1 <=  1 && 0 > 0.1 

This operator is called the “logical and” operator. What does the && operator do?

Here's another one. What does it do?

1 == 1 || 2 == 2
2 == 3 || 1 == 1
1 == 9 || 0 == 4
2 < 2 || 2 < 3
1 <=  1 || 0 < 0.1
1 <=  2 || 0 > 0.1
1 <=  2 || 0 < 0.1

This operator is called the “logical or” operator. Explain what it does.

We can use all of the methods for arrays that we've learned together to do interesting things. One interesting thing we could do is to simulate some chefs trying to make good toast. Then we could grade the chefs to determine if they pass our standard as “a chef of good toast”. What are the steps?

1. several chefs make toast
2. we organize the toast into categories of “acceptable toast” and “unacceptable toast”
3. we decide how many pieces of acceptable toast they need to make to pass our test
4. we check all of the toast to see how much acceptable toast they have made
5. we print out a list of chefs of good toast

How can we code all of that? It's possible using some of our useful functions plus forEach, map, and filter.

//--------------------------------------------------------------------------
//-- toastChefSimulator.js
//--------------------------------------------------------------------------

// some useful functions

function randomInteger (min, max) {
      return Math.floor(min + ((max-min) * Math.random()))
}

function pick (inputArray) {
      return inputArray[randomInteger(0,inputArray.length)]
}

function buildArray (n, fillFunction) {
      let outputArray = [];
      for (let i = 0; i < n; i++) {
              outputArray.push(fillFunction(i))
            }
      return outputArray
}

// our chefs

let toastChefs = ['Kate','Ella','Lynn'];

// functions for our toasting simulator

function toastBread (person, n) {
    let typesOfToast = ["regular toast", "burnt toast","untoasted bread","perfect toast"];
    let generatedToast = buildArray (n, i => pick (typesOfToast));
    let acceptableToast = generatedToast.filter (t => t == "regular toast" || t == "perfect toast");
    let unacceptableToast = generatedToast.filter (t => t == "burnt toast" || t == "untoasted bread");
    let toastSession =  {
        chef: person,
        numberOfPieces: n,
        totalToastArray: generatedToast,
        acceptableToastArray: acceptableToast,
        numberOfAcceptableToast: acceptableToast.length,
        unacceptableToastArray: unacceptableToast, 
        numberOfUnacceptableToast: unacceptableToast.length 
    };
    return toastSession
}

function passingChefs (toastSessions, passingLevel) {
    let passingSessions = toastSessions.filter (t => t.numberOfAcceptableToast >= passingLevel);
    let chefs = passingSessions.map (s => s.chef);
    return chefs
}

function toastChefSimulator (people, numberOfToast, passingLevel) {
    let toastSimulationSessions = people.map(t => toastBread (t, numberOfToast))
    let passed = passingChefs (toastSimulationSessions, passingLevel)
    console.log (passed);
    return {
        sessions: toastSimulationSessions,
        passingChefs: passed
    }
}

// run the simulation 

let toastingSimulation = toastChefSimulator (toastChefs,10,5)

toastingSimulation

toastingSimulation.passingChefs.forEach(c => console.log("Chef " + c + " passed the toast test!"))

1. p5js: drawing with your own class