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 08:04] – renickp5js-week-08 [2023/06/26 00:59] (current) – reina.chen
Line 1: Line 1:
 ====== p5js week 08 ====== ====== p5js week 08 ======
 +
 +{{: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. 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.
Line 11: Line 15:
   - p5js: drawing with your own class   - p5js: drawing with your own class
  
-Like I said, 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!
Line 23: Line 27:
 ===== JavaScript ===== ===== JavaScript =====
  
-The new JavaScript we want to learn is 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.+{{: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
Line 30: 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 48: 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 61: 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 75: 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|}} {{: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 182: 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====
  • p5js-week-08.1655564678.txt.gz
  • Last modified: 3 years ago
  • by renick