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 05:47] – 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 9: Line 15:
   - p5js: drawing with your own class   - p5js: drawing with your own class
  
-Let's start new drawings this week. Can you make a drawing that does the following:+Can you make a drawing that does the following?
  
   - draw an animal, plant, or a complicated shape from your imagination   - draw an animal, plant, or a complicated shape from your imagination
-  - there should be many different versions of it, like sizes and colors+  - there should be many different versions of it, like different sizes and different colors
   - make a class to draw it   - make a class to draw it
   - use buildArray to fill an array of objects from your class; try to make 100 or more!   - 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   - 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 25: 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|}}
  
-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:+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. 
 + 
 +<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 43: Line 58:
 =====logical operators===== =====logical operators=====
  
-In addition to operators we have learned about before, like + and -, there are operators more operators that return booleans (true or false). Here are two of them: "and" and "or".+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 56: 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 70: 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 175: Line 194:
 </code> </code>
  
-===== p5js =====+===== using filter in p5js =====
  
-  - p5js: using filter to draw +Now we want to use filter in p5js to draw. Here's our plan: 
-  - p5js: drawing with your own class+ 
 +  - set up an example of drawing toast 
 +  - using filter to change our drawing 
 +  - drawing with your own class
  
 ====random toast in a grid==== ====random toast in a grid====
Line 192: Line 214:
 ====an example of using filter in p5js==== ====an example of using filter in p5js====
  
-Now we can use the same example but filter for certain types of toast.+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> <HTML>
  • p5js-week-08.1655556447.txt.gz
  • Last modified: 3 years ago
  • by renick