Differences

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

--- p5js-week-08 [2022/06/18 08:25] – renick
+++ p5js-week-08 [2023/06/26 00:59] (current) – reina.chen
@@ Line 15: / Line 15: @@
   - 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
-  - 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
   - use buildArray to fill an array of objects from your class; try to make 100 or more!
@@ Line 40: / Line 40: @@
 {{:french-toast-row.jpg?600|}}
-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.
+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>
@@ Line 58: / Line 58: @@
 =====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 ====
@@ Line 71: / Line 71: @@
 <=  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 ====
@@ Line 85: / Line 85: @@
 <=  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 =====
@@ Line 194: / Line 194: @@
 </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====