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-07 [2022/06/11 00:49] – [structuring data using arrays, and using push, pop, and unshift to add and remove items from those arrays] renickp5js-week-07 [2023/06/26 00:48] (current) – reina.chen
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 18: Line 27:
   - setup and draw functions   - setup and draw functions
   - background   - background
 +  - text
   - colors   - colors
   - shapes   - shapes
Line 39: 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 <color black/pink>encapsulation</color>.
  
 <code>  <code> 
Line 57: 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 <color black/pink>generalization</color>.
- +
-When we add arguments to our function so that the function can be used in more cases, we are using generalization.+
  
 <code>  <code> 
Line 71: Line 83:
 </code> </code>
  
-We learned about generalization here:  +We are also using <color black/pink>generalization</color> 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 88: 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 112: Line 130:
 ====making functions, including using arrow functions==== ====making functions, including using arrow functions====
  
-We make functions starting with the "function" keyword, followed by the function name, then the arguments, and finally the body of the function inside of curly braces.+We make functions starting with the <color black/yellow>"function"</color> keyword, followed by the function name, then the arguments, and finally the body of the function inside of curly braces.
  
-Remember, the arguments are the input to our function:+Remember, the <color black/pink>arguments</color> are the input to our function:
  
 <code> <code>
Line 123: Line 141:
 </code> </code>
  
-Don't forget the return to get some output from the function!+Don't forget the <color black/yellow>return</color> to get some output from the function!
  
-We can also make functions in the arrow function style. One way is to assign it to a variable:+We can also make functions in the <color black/pink>arrow</color> function style. One way is to assign it to a variable:
  
 <code> <code>
Line 149: 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====
  
-We've practice several operators like all of the ones for arithmetic (+, -, *, / ), and the remainder operator (%) and increment operator (++) as well.+We've practice several operators like all of the ones for arithmetic (+, -, *, / ), and the <color black/pink>remainder operator</color> (%) and <color black/pink>increment operator</color> (++) as well.
  
 We can use them to do math anywhere, like this: We can use them to do math anywhere, like this:
Line 162: Line 186:
 ====using booleans (true and false)==== ====using booleans (true and false)====
  
-One operator that we learned about when we studied for-loops is the  > (greater than) operator. There are also the < (less than) operator, the >= (greater than or equal) operator and the <= (less than or equal) operator. There's also the == (equal) operator. Try these:+One operator that we learned about when we studied for-loops is the  <color black/pink>> (greater than) operator</color>. There are also the <color black/pink>< (less than) operator</color>, the <color black/pink>>= (greater than or equal) operator</color> and the <color black/pink><= (less than or equal) operator</color>. There's also the <color black/pink>== (equal) operator</color>. Try these:
  
 <code> <code>
Line 172: Line 196:
 ====structuring data using arrays, and using push, pop, and unshift to add and remove items from those arrays==== ====structuring data using arrays, and using push, pop, and unshift to add and remove items from those arrays====
  
-We can collect data and put it into structure. One very important structure is arrays. We use push and unshift to add data to arrays. Let's do that for everyone's breakfast orders:+We can collect data and put it into structure. One very important structure is <color black/pink>arrays</color>. We use <color black/pink>push</color> and <color black/pink>unshift</color> to add data to arrays. Let's do that for everyone's breakfast orders:
  
 <code> <code>
Line 186: Line 210:
  
 everyonesToastOrder everyonesToastOrder
 +</code>
 +
 +Don't forget that you can get items from an array using the <color black/pink>indexes</color>. Each position in an array has a number, starting with 0.
 +
 +<code>
 +everyonesToastOrder[0]
 +everyonesToastOrder[1]
 +everyonesToastOrder[2]
 </code> </code>
  
 ====for-loops for repeating actions==== ====for-loops for repeating actions====
  
 +We have learned how to make for-loops to do things repeatedly. A <color black/pink>for-loop</color> has a first part in parentheses that describe the conditions for the for-loop: what number to start at (a <color black/pink>counter</color>), how long to run, and what to do with that counter. A for-loop has a second part in curly braces that says what you want to do on each loop.
  
-====structuring data using objects====+We can use one with the things we've made above. Let's find out how much toast we have to make to fill everyone's order. We'll use the for-loop to get the value at each index with the counter i.
  
 +<code>
 +function totalToast (toastArray) {
 +  let total = 0;
 +  for (let i = 0; i < toastArray.length; i++) {
 +    total = total + toastArray[i]
 +    }
 +  return total
 +}
 +<code>
  
-====making classes so that making objects is easier and making those objects more useful====+We can call that function like this:
  
 +<code>
 +totalToast (everyonesToastOrder)
 +</code>
  
 +====using forEach instead of a for-loop====
  
-===== p5js review =====+We can rewrite totalToast using <color black/pink>forEach</color> instead. Remember that forEach is a method to be used on arrays. Instead of the code inside the for-loop above, we can use an arrow function.
  
 +<code>
 +function totalToast2 (toastArray) {
 +  let total = 0;
 +  toastArray.forEach(x => total = total + x);
 +  return total
 +}
 +</code>
  
 +====structuring data using objects====
  
-====setup and draw functions====+We have another way to structure toast, not just as arrays. That is <color black/pink>objects</color>. Let's make an object for each toast order.
  
 +There are <color black/pink>properties</color> on the left, each of which has a value on the right. Remember to separate the properties with commas. 
  
-====background====+<code> 
 +let kateToast2 = { 
 +  name: "Kate", 
 +  quantity: howMuchToast(2), 
 +  type: "regular" 
 +  } 
 +</code>
  
 +====making classes so that making objects is easier and making those objects more useful====
  
-====colors====+Since we want to make a lot of objects like this, we can make a class. A <color black/pink>class</color> is like a factory for objects.
  
 +<code>
 +class ToastOrder {
 +  constructor (name, quantity, type) {
 +    this.name = name;
 +    this.quantity = howMuchToast(quantity);
 +    this.type = type
 +  }
 +}
 +</code>
  
-====shapes====+When we want to use the class, we call the constructor with the <color black/yellow>"new"</color> keyword. We can make all of the objects and then put them in an array like this:
  
 +<code>
 +let kateToast3 = new ToastOrder ('kate', 2, 'regular')
 +let ellaToast3 = new ToastOrder ('ella', 3, 'regular');
 +let lynnToast3 = new ToastOrder ('lynn', 1, 'light');
 +let toastOrders = [kateToast3, ellaToast3, lynnToast3]
 +</code>
  
-====rotate====+Have a look at one of the ToastOrders that we've made:
  
 +<code>
 +kateToast3
 +</code>
  
 +Remember, to get the value of a property, we just use its name with a dot after the object name.
  
-=====useful tools we've made=====+<code> 
 +kateToast3.quantity; 
 +lynnToast3.type 
 +</code>
  
 +We can then modify totalToast to work on the objects like this:
  
 +<code>
 +function totalToast3 (toastArray) {
 +  let total = 0;
 +  toastArray.forEach(x => total = total + x.quantity);
 +  return total
 +}
 +</code>
  
-====randomInteger====+Now try it out:
  
 +<code>
 +totalToast3 (toastOrders)
 +</code>
  
-====pick====+**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|}}
  
-====buildArray====+(photo from https://nypl.getarchive.net/media/daily-breakfast-held-by-mansion-at-buffalo-ny-coffee-shop-0a9467)
  
 +===== p5js review =====
  
-====a Point class====+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.
  
 +  - setup and draw functions
 +  - background
 +  - text
 +  - colors
 +  - shapes
 +  - buildArray
 +  - a Point class
  
 +<HTML>
 +<iframe src="https://editor.p5js.org/renick/sketches/YOLwhqGwR9" width=99% height=800></iframe>
 +</HTML>
 +
 +==== adding some other things to make it cuter ====
 +
 +Now we can use some of the other things that we've learned about to make the drawing cuter. Look for these things in this revised version. We'll also reorganize the code just a little so that it makes more sense.
 +
 +  - rotate (including angleMode)
 +  - randomInteger
 +  - pick
 +
 +Also notice the addition of noLoop to stop the animation.
 +
 +<HTML>
 +<iframe src="https://editor.p5js.org/renick/sketches/q_0zBGiPk" width=99% height=800></iframe>
 +</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 262: Line 386:
 You can see after you run this a few times that the shapes created aren't always great when the Points are random. You can think about some ways to solve this. Still, this will be easy to use if you specify the Points. You can see after you run this a few times that the shapes created aren't always great when the Points are random. You can think about some ways to solve this. Still, this will be easy to use if you specify the Points.
  
-This sometimes makes what is called a self-intersecting polygon. +This sometimes makes what is called a __self-intersecting polygon__. 
  
 https://en.wikipedia.org/wiki/Polygon#Convexity_and_non-convexity https://en.wikipedia.org/wiki/Polygon#Convexity_and_non-convexity
Line 272: Line 396:
 ===== algorithms ===== ===== algorithms =====
  
-We want either convex or concave polygons. We can write a set of rules to give us the output we want. We know one word for this: __procedure__. Another word we can use to call such sets of rules is __"algorithm"__. +We want either convex or concave polygons. We can write a set of rules to give us the output we want. We know one word for this: <color black/pink>procedure</color>. Another word we can use to call such sets of rules is <color black/pink>"algorithm"</color>. 
  
 https://simple.wikipedia.org/wiki/Algorithm https://simple.wikipedia.org/wiki/Algorithm
Line 288: Line 412:
 ===== turning our algorithm into an abstraction ===== ===== turning our algorithm into an abstraction =====
  
-We want an abstraction, a function that implements this algorithm, which means to actually put the algorithm into a function so that we can run it.+We want an <color black/pink>abstraction</color>, a function that implements this algorithm, which means to actually put the algorithm into a function so that we can run it.
  
 In this case, we need some components. We'll need to: In this case, we need some components. We'll need to:
Line 334: 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 354: 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, <color black/pink>map</color> 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 363: 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 371: 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.1654933743.txt.gz
  • Last modified: 3 years ago
  • by renick