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 04:48] – renickp5js-week-07 [2022/06/11 08:15] – renick
Line 1: Line 1:
 ====== p5js week 07 ====== ====== p5js week 07 ======
  
-We're halfway through our course, so it's a good time to review before we take on some new techniques for improving our coding and our drawing. So what have we studied?+{{:dark-toast.jpg?600|}} 
 + 
 +(photo from https://www.trustedreviews.com/reviews/hotpoint-si9-s8c1-sh-ix-h) 
 + 
 +We're halfway through our course. We've talked a lot about toast and JavaScript, so it's a good time to review before we take on some new techniques for improving our coding and our drawing. After we review, we want to try once more to polish up these drawings that we've been working on recently: 
 + 
 +  - hearts, stars, and smiley faces, 100+ of each 
 +  - three types of aliens/monsters, 100+ of each 
 + 
 +Let's review first. So what have we studied?
  
   - assigning variables   - assigning variables
Line 40: Line 49:
  
 =====big ideas===== =====big ideas=====
 +
 +{{:french-toast-syrup.jpg?600|}}
 +
 +(photo from https://www.flickr.com/photos/djwtwo/14033143291)
  
 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 58: 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 72: 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 89: Line 98:
 ===== JavaScript review ===== ===== JavaScript review =====
  
-Let's take a quick look at the various JavaScript that we have learned.+{{:toast-closeup.jpg?600|}} 
 + 
 +(photo from https://upload.wikimedia.org/wikipedia/commons/a/af/DryToast.jpg) 
 + 
 +Now we want do the more close-up review of the various JavaScript that we have learned.
  
 ==== assigning variables ==== ==== assigning variables ====
 +
 +{{:two-pieces-of-toast.png?600|}}
 +
 +(photo from https://www.flickr.com/photos/91261194@N06/51708375114)
  
 Remember, variables are names that we can give to pieces of data, like this: Remember, variables are names that we can give to pieces of data, like this:
Line 150: Line 167:
 howMuchToast3(numberOfPiecesOfToast) howMuchToast3(numberOfPiecesOfToast)
 </code> </code>
 +
 +All of these functions can tell us how much toast we're having for breakfast.
 +
 +{{:beautiful-breakfast_toast.jpg?600|}}
 +
 +(photo from https://pxhere.com/en/photo/872146)
  
 ====various operators==== ====various operators====
Line 297: Line 320:
 </code> </code>
  
-**And that is a quick review of all of the JavaScript that we've learned!**+**And that is a quick review of all of the JavaScript that we've learned!** Now that we have a class for ToastOrders, we're ready to open a restaurant! 
 + 
 +{{:menu-toast.png?600|}} 
 + 
 +(photo from https://nypl.getarchive.net/media/daily-breakfast-held-by-mansion-at-buffalo-ny-coffee-shop-0a9467)
  
 ===== p5js review ===== ===== p5js review =====
 +
 +Now that we've reviewed how to code __the data of toast__, let's review how to program __a drawing of that toast__.
  
 Here's an example in p5js that uses **everything above plus a lot of the things that we've studied before about p5js and some tools we've made**. See if you can find each of these things in the code below. Here's an example in p5js that uses **everything above plus a lot of the things that we've studied before about p5js and some tools we've made**. See if you can find each of these things in the code below.
Line 328: 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 428: 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 448: 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 =====
  
-Then we can use our shapeFromPoints function to draw it.+Then we can use our shapeFromPoints function to draw it. You'll notice that we still sometimes get a self-intersecting polygon, but it's much less common. We could keep working on this algorithm to get one that is perfect, but let's stop here for this lesson.
  
 <HTML> <HTML>
Line 457: Line 497:
 </HTML> </HTML>
  
-===== making your own class =====+===== making your own class for your drawings ===== 
 + 
 +{{:avacado-toast.png?600|}} 
 + 
 +(photo from https://www.flickr.com/photos/160866001@N07/44019575945) 
 + 
 +Now you're ready to get back to your customized personal toast, uh, drawings... 
 + 
 +We've been working on these drawings: 
 + 
 +  - hearts, stars, and smiley faces, 100+ of each 
 +  - three types of aliens/monsters, 100+ of each 
 + 
 +Now we have some more useful tools to apply to those drawings.
  
-Now we have some more useful tools. It's time to use these tools to make your own class if you haven't already:+Make your own class if you haven't already:
  
   - give your class a name to describe what you are drawing; be sure to capitalize the first letter: class Alien, class Heart, etc.   - give your class a name to describe what you are drawing; be sure to capitalize the first letter: class Alien, class Heart, etc.
Line 465: Line 518:
   - add a draw method that we can call inside of the p5js draw function in order to draw the objects   - add a draw method that we can call inside of the p5js draw function in order to draw the objects
  
 +Be sure to put your drawing on your page on the wiki and share screen shots in the chat rooms!
  
  • p5js-week-07.txt
  • Last modified: 12 months ago
  • by reina.chen