Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
| p5js-week-09 [2022/06/25 11:29] – renick | p5js-week-09 [2023/06/29 22:48] (current) – reina.chen | ||
|---|---|---|---|
| Line 19: | Line 19: | ||
| You can open the console in the browser by pressing F12, selecting " | You can open the console in the browser by pressing F12, selecting " | ||
| - | We can store values in variables; then we can use them later. When we do that, we use the " | + | We can store <color black/ |
| < | < | ||
| Line 44: | Line 44: | ||
| </ | </ | ||
| - | We can call a function by using its name and then giving values for the arguments. We can use variables we declared before as the arguments. That works like this: | + | We can <color black/ |
| < | < | ||
| Line 50: | Line 50: | ||
| </ | </ | ||
| - | The arguments are the input to the function, and the return statement is the output. | + | The <color black/ |
| - | We also learned another way to write functions called arrow functions. That pattern looks like: | + | We also learned another way to write functions called |
| < | < | ||
| Line 65: | Line 65: | ||
| </ | </ | ||
| - | When we wrap up some calculations inside of a function, that's called encapsulation. When we change a value inside and make it an argument so that we can use the function in more situations, we're doing what's called generalization. That's like this: | + | When we wrap up some calculations inside of a function, that's called |
| < | < | ||
| Line 77: | Line 77: | ||
| </ | </ | ||
| - | We can use many kinds of values in our functions, including numbers, strings (" | + | We can use many kinds of values in our functions, including numbers, |
| Be careful about what order you do stuff; that's called thinking carefully about your procedure. | Be careful about what order you do stuff; that's called thinking carefully about your procedure. | ||
| - | We can group data together, also called structuring data, into arrays or objects. | + | We can group data together, also called |
| - | Arrays can tell us how long they are when we use the length method. There are also cool methods like forEach, map, and filter (check lessons 6, 7, and 8) that let us avoid using for-loops. We also learned about adding things to arrays using push and unshift, as well as removing things from arrays using pop. | + | <color black/ |
| - | However, if we want to use a for-loop, we can. Remember the basic pattern of a for-loop: | + | However, if we want to use a <color black/ |
| < | < | ||
| Line 107: | Line 107: | ||
| We made some useful functions, including randomRange, | We made some useful functions, including randomRange, | ||
| - | Often when we use objects, we make a class that makes it easier to make objects. We can make objects using the constructor from the class. To use the constructor, | + | Often when we use objects, we make a <color black/ |
| ===== p5js ===== | ===== p5js ===== | ||
| Line 115: | Line 115: | ||
| (photo from https:// | (photo from https:// | ||
| - | You've learned about the setup and draw functions. | + | You've learned about the <color black/ |
| You know how to use some basic shapes like rect and ellipse; these use x and y coordinates for their positions. | You know how to use some basic shapes like rect and ellipse; these use x and y coordinates for their positions. | ||
| Line 121: | Line 121: | ||
| We made a Point class to make positions and changing them easier. | We made a Point class to make positions and changing them easier. | ||
| - | You've learned about fill and stroke, and you know how to use a color picker to find the numbers for colors that you want to use. We learned about RGB color values and HSL color values (go back and review lesson 2). | + | You've learned about fill and stroke, and you know how to use a color picker to find the numbers for colors that you want to use. We learned about <color black/ |
| You know how to draw text in p5js, including adding text that tells you where the mouse is. | You know how to draw text in p5js, including adding text that tells you where the mouse is. | ||
| - | We also learned how to make not only triangles but other shapes using our own randomShape function. That required using beginShape and endShape. | + | We also learned how to make not only triangles but other shapes using our own randomShape function. That required using <color black/ |
| - | We learned how to move the shapes and rotate them using transform and rotate, and we also learned how to get back to the original rotation and size using resetMatrix. | + | We learned how to move the shapes and rotate them using <color black/ |
| ===== finishing your latest drawing and getting all your work on the wiki ===== | ===== finishing your latest drawing and getting all your work on the wiki ===== | ||