Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
p5js-week-08 [2022/06/18 04:48] – renickp5js-week-08 [2023/06/26 00:59] (current) – reina.chen
Line 1: Line 1:
 ====== p5js week 08 ====== ====== p5js week 08 ======
  
-things to do this week:+{{:various-toast.jpeg?600|}} 
 + 
 +(photo from https://www.foodnetwork.com/how-to/packages/food-network-essentials/tips-on-toast) 
 + 
 +Now you're able to represent toast in more and more sophisticated ways. You can put that toast into arrays and then process it with forEach and map. You can draw your toast in p5js. You can draw lots of other stuff as well! You've made at least two drawings, and probably a lot more. Now let's learn one more way to process arrays called filter, and then let's use that and everything else we've learned to make a new drawing. 
 + 
 +Here's a list of things to try this week:
  
   - making your own class   - making your own class
Line 8: Line 14:
   - p5js: using filter to draw   - p5js: using filter to draw
   - p5js: drawing with your own class   - p5js: drawing with your own class
 +
 +Can you make a drawing that does the following?
 +
 +  - draw an animal, plant, or a complicated shape from your imagination
 +  - there should be many different versions of it, like different sizes and different colors
 +  - make a class to draw it
 +  - use buildArray to fill an array of objects from your class; try to make 100 or more!
 +  - use filter to change your drawing in some way
 +
 +Before we start drawing, let's learn some more about JavaScript. By the end of the next section, we'll have made a toast chef simulator! We'll use JavaScript to simulate chefs making toast, then we'll write some functions to score them to find out which toast chefs pass our test!
  
 ===== JavaScript ===== ===== JavaScript =====
  
-  - making your own class+{{:korean-street-toast.jpg?600|}} 
 + 
 +(photo from https://www.maangchi.com/wp-content/uploads/2020/04/street-toast-insta-scaled.jpg) 
 + 
 +So that we can do new things with our code-toast, we want to learn the filter method for arrays. Then we'll practice using it by combining it with our other useful functions, forEach, and map to make our toast chef simulator. 
   - filter   - filter
   - combining methods for arrays   - combining methods for arrays
Line 17: Line 38:
 ===== a new method for arrays: filter ===== ===== a new method for arrays: filter =====
  
-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.+{{:french-toast-row.jpg?600|}} 
 + 
 +We can use <color black/pink>forEach</color> as an alternative to a for-loop to do a lot of things with arrays. We can use <color black/pink>map</color> 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:+<color black/pink>Filter</color> 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:
  
 <code> <code>
Line 34: Line 57:
  
 =====logical operators===== =====logical operators=====
 +
 +In addition to operators we have learned about before, like + and -, there are operators more operators that return <color black/pink>booleans</color> (true or false). Here are two of them: "and" and "or".
  
 ==== logical and ==== ==== logical and ====
Line 46: Line 71:
   1 <=  1 && 0 > 0.1    1 <=  1 && 0 > 0.1 
      
-This operator is called the "logical and" operator. What does the && operator do?+This operator is called the <color black/pink>"logical and" operator</color>. What does the && operator do?
  
 ==== logical or ==== ==== logical or ====
Line 60: Line 85:
   1 <=  2 || 0 < 0.1   1 <=  2 || 0 < 0.1
  
-This operator is called the "logical or" operator. Explain what it does.+This operator is called the <color black/pink>"logical or" operator</color>. Explain what it does.
  
 ===== a procedure to simulate chefs making toast and then grade the chefs ===== ===== a procedure to simulate chefs making toast and then grade the chefs =====
 +
 +{{:ramsay.jpg?600|}}
 +
 +(photo from https://www.flickr.com/photos/54397539@N06/5034956030)
  
 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? 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?
Line 114: Line 143:
  
 // functions for our toasting simulator // functions for our toasting simulator
 +
 +// our toasting process
  
 function toastBread (person, n) { function toastBread (person, n) {
Line 131: Line 162:
     return toastSession     return toastSession
 } }
 +
 +// find out which chefs have passed our test
  
 function passingChefs (toastSessions, passingLevel) { function passingChefs (toastSessions, passingLevel) {
Line 137: Line 170:
     return chefs     return chefs
 } }
 +
 +// bring everything together
  
 function toastChefSimulator (people, numberOfToast, passingLevel) { function toastChefSimulator (people, numberOfToast, passingLevel) {
Line 148: Line 183:
 } }
  
-// run the simulation +// run the simulation; each time you run this, you'll get different results
  
 let toastingSimulation = toastChefSimulator (toastChefs,10,5) let toastingSimulation = toastChefSimulator (toastChefs,10,5)
  
 toastingSimulation toastingSimulation
 +
 +// print out the passing chefs with a nice English sentence
  
 toastingSimulation.passingChefs.forEach(c => console.log("Chef " + c + " passed the toast test!")) toastingSimulation.passingChefs.forEach(c => console.log("Chef " + c + " passed the toast test!"))
 </code> </code>
  
-===== p5js =====+===== using filter in p5js =====
  
-  - p5js: drawing with your own class+Now we want to use filter in p5js to draw. Here's our plan: 
 + 
 +  - set up an example of drawing toast 
 +  - using filter to change our drawing 
 +  - drawing with your own class 
 + 
 +====random toast in a grid==== 
 + 
 +First, let's have a drawing of toast that we can work with. We'll use different pieces of things that we've done before to make a grid of toast, from uncooked to burnt. 
 + 
 +Read through the code below; the comments explain what each section of the code is doing. You should be able to recognize all of the parts. 
 + 
 +<HTML> 
 +<iframe src="https://editor.p5js.org/renick/sketches/4dK_0OjHO" width=99% height=800></iframe> 
 +</HTML> 
 + 
 +====an example of using filter in p5js==== 
 + 
 +Now we can use the same example but filter for certain types of toast. Look at line 70. We take the array of Toast objects and then filter for only two colors using the filter method and the logical or operator. That's why only some of the toast appears in the drawing, unlike the previous one. Be sure that you draw the array of filtered Toast, not the original arrray, like in line 76. 
 + 
 +<HTML> 
 +<iframe src="https://editor.p5js.org/renick/sketches/bkE95gCYh" width=99% height=800></iframe> 
 +</HTML> 
 + 
 +====use filter in your own drawing==== 
 + 
 +At the beginning of the lesson, we talked about doing a new drawing according to these instructions: 
 + 
 +  - draw an animal, plant, or a complicated shape from your imagination 
 +  - there should be many different versions of it, like sizes and colors 
 +  - make a class to draw it 
 +  - use buildArray to fill an array of objects from your class; try to make 100 or more! 
 +  - use filter to change your drawing in some way 
 + 
 +Now you should be able to try to use filter. Give it a try!
  • p5js-week-08.1655552906.txt.gz
  • Last modified: 3 years ago
  • by renick