Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
p5js-week-07 [2022/06/11 07:44] – renick | p5js-week-07 [2023/06/26 00:48] (current) – reina.chen | ||
---|---|---|---|
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 <color black/ |
< | < | ||
Line 71: | Line 71: | ||
</ | </ | ||
- | 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/ |
- | + | ||
- | When we add arguments to our function so that the function can be used in more cases, we are using generalization. | + | |
< | < | ||
Line 85: | Line 83: | ||
</ | </ | ||
- | We learned about generalization here: | + | We are also using <color black/ |
- | + | ||
- | We are also using generalization when we structure our data into a class and use a constructor with arguments. | + | |
< | < | ||
Line 134: | Line 130: | ||
====making functions, including using arrow functions==== | ====making functions, including using arrow functions==== | ||
- | We make functions starting with the " | + | We make functions starting with the <color black/ |
- | Remember, the arguments are the input to our function: | + | Remember, the <color black/ |
< | < | ||
Line 145: | Line 141: | ||
</ | </ | ||
- | Don't forget the return to get some output from the function! | + | Don't forget the <color black/ |
- | 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/ |
< | < | ||
Line 180: | Line 176: | ||
====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/ |
We can use them to do math anywhere, like this: | We can use them to do math anywhere, like this: | ||
Line 190: | 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' | + | One operator that we learned about when we studied for-loops is the |
< | < | ||
Line 200: | 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' | + | We can collect data and put it into structure. One very important structure is <color black/ |
< | < | ||
Line 216: | Line 212: | ||
</ | </ | ||
- | Don't forget that you can get items from an array using the indexes. Each position in an array has a number, starting with 0. | + | Don't forget that you can get items from an array using the <color black/ |
< | < | ||
Line 226: | Line 222: | ||
====for-loops for repeating actions==== | ====for-loops for repeating actions==== | ||
- | We have learned how to make for-loops to do things repeatedly. A for-loop has a first part in parentheses that describe the conditions for the for-loop: what number to start at (a counter), 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. | + | We have learned how to make for-loops to do things repeatedly. A <color black/ |
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' | 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' | ||
Line 248: | Line 244: | ||
====using forEach instead of a for-loop==== | ====using forEach instead of a for-loop==== | ||
- | We can rewrite totalToast using forEach 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. | + | We can rewrite totalToast using <color black/ |
< | < | ||
Line 260: | Line 256: | ||
====structuring data using objects==== | ====structuring data using objects==== | ||
- | We have another way to structure toast, not just as arrays. That is objects. Let's make an object for each toast order. | + | We have another way to structure toast, not just as arrays. That is <color black/ |
- | There are properties on the left, each of which has a value on the right. Remember to separate the properties with commas. | + | There are <color black/ |
< | < | ||
Line 274: | Line 270: | ||
====making classes so that making objects is easier and making those objects more useful==== | ====making classes so that making objects is easier and making those objects more useful==== | ||
- | Since we want to make a lot of objects like this, we can make a class. A class is like a factory for objects. | + | Since we want to make a lot of objects like this, we can make a class. A <color black/ |
< | < | ||
Line 286: | Line 282: | ||
</ | </ | ||
- | When we want to use the class, we call the constructor with the " | + | When we want to use the class, we call the constructor with the <color black/ |
< | < | ||
Line 324: | Line 320: | ||
</ | </ | ||
- | **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!** |
+ | |||
+ | {{: | ||
+ | |||
+ | (photo from https:// | ||
===== 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 355: | Line 357: | ||
<iframe src=" | <iframe src=" | ||
</ | </ | ||
- | |||
===== 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, | Now we have a Point class. Using that abstraction, | ||
Line 383: | 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 | + | This sometimes makes what is called a __self-intersecting |
https:// | https:// | ||
Line 393: | 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 __" | + | 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/ |
https:// | https:// | ||
Line 409: | Line 412: | ||
===== turning our algorithm into an abstraction ===== | ===== turning our algorithm into an abstraction ===== | ||
- | We want an abstraction, | + | We want an <color black/ |
In this case, we need some components. We'll need to: | In this case, we need some components. We'll need to: | ||
Line 455: | Line 458: | ||
</ | </ | ||
- | 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 | + | 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 |
- | + | ||
- | https:// | + | |
- | + | ||
- | https:// | + | |
- | + | ||
- | You can learn more about map here: | + | |
- | + | ||
- | https:// | + | |
< | < | ||
Line 475: | Line 470: | ||
pointsForConvexShape(new Point(200, | pointsForConvexShape(new Point(200, | ||
</ | </ | ||
+ | |||
+ | ===== map ===== | ||
+ | |||
+ | Like forEach, <color black/ | ||
+ | |||
+ | For example, if we have an array of numbers, we can do some math with those numbers and get a new array. | ||
+ | |||
+ | < | ||
+ | let numberOfSlicesOfToast = [2, | ||
+ | |||
+ | let lotsMoreToast = numberOfSlicesOfToast.map(t => t *10) | ||
+ | </ | ||
+ | |||
+ | 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:// | ||
===== a full example ===== | ===== a full example ===== | ||
Line 485: | Line 498: | ||
===== making your own class for your drawings ===== | ===== making your own class for your drawings ===== | ||
+ | |||
+ | {{: | ||
+ | |||
+ | (photo from https:// | ||
+ | |||
+ | Now you're ready to get back to your customized personal toast, uh, drawings... | ||
We've been working on these drawings: | We've been working on these drawings: |