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
Last revisionBoth sides next revision
p5js-week-07 [2022/06/11 08:04] – renickp5js-week-07 [2022/06/11 08:15] – renick
Line 56: Line 56:
 Let's review the really big ideas first! Let's review the really big ideas first!
  
-  - encapsulation +  - **encapsulation** 
-  - generalization+  - **generalization**
  
-When we make a function which contains a procedure, we are using encapsulation.+When we make a function which contains a procedure, we are using **encapsulation**.
  
 <code>  <code> 
Line 71: Line 71:
 </code> </code>
  
-We studied procedures and encapsulation here: +When we add arguments to our function so that the function can be used in more cases, we are using **generalization**.
- +
-When we add arguments to our function so that the function can be used in more cases, we are using generalization.+
  
 <code>  <code> 
Line 85: Line 83:
 </code> </code>
  
-We learned about generalization here:  +We are also using **generalization** when we structure our data into a class and use a constructor with arguments.
- +
-We are also using generalization when we structure our data into a class and use a constructor with arguments.+
  
 <code> <code>
Line 361: Line 357:
 <iframe src="https://editor.p5js.org/renick/sketches/q_0zBGiPk" width=99% height=800></iframe> <iframe src="https://editor.p5js.org/renick/sketches/q_0zBGiPk" width=99% height=800></iframe>
 </HTML> </HTML>
- 
  
 ===== Now for something new: a shape function ===== ===== Now for something new: a shape function =====
 +
 +Let's get back to making random shapes, which we might used to make weird slices of toast.
  
 Now we have a Point class. Using that abstraction, let's make another abstraction, a function called shapeFromPoints, that takes an array of Points and draws a shape. Now we have a Point class. Using that abstraction, let's make another abstraction, a function called shapeFromPoints, that takes an array of Points and draws a shape.
Line 461: Line 458:
 </code> </code>
  
-Now we can put these together to make a function that give us a list of points to be used to make a non-intersecting polygon. Notice that it uses the map method for arrays. We studied that before here: +Now we can put these together to make a function that give us a list of points to be used to make a non-intersecting polygon. Notice that it uses the map method for arrays. 
- +
-https://renickbell.net/middleschool/doku.php?id=core:foreach +
- +
-https://renickbell.net/middleschool/doku.php?id=core:map&s[]=%2Amap%2A +
- +
-You can learn more about map here: +
- +
-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map+
  
 <code> <code>
Line 481: Line 470:
 pointsForConvexShape(new Point(200,200),6,50,100,30,330) pointsForConvexShape(new Point(200,200),6,50,100,30,330)
 </code> </code>
 +
 +===== map =====
 +
 +Like forEach, map is a method for arrays. The big difference is that map applies a function to each item in the array and then returns an array filled with the result of those function calls. Like forEach, it's common to use an arrow function with map. We often use it with a one-argument function. There are other possibilities which we might look at later.
 +
 +For example, if we have an array of numbers, we can do some math with those numbers and get a new array.
 +
 +<code>
 +let numberOfSlicesOfToast = [2,2,3,2,1];
 +
 +let lotsMoreToast = numberOfSlicesOfToast.map(t => t *10)
 +</code>
 +
 +That's a lot of toast, but it was pretty easy to get those numbers by using map. 
 +
 +You can learn more about map here:
 +
 +https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
  
 ===== a full example ===== ===== a full example =====
  • p5js-week-07.txt
  • Last modified: 12 months ago
  • by reina.chen