Differences

This shows you the differences between two versions of the page.

--- p5js-week-09 [2022/06/25 10:23] – renick
+++ p5js-week-09 [2023/06/29 22:48] (current) – reina.chen
@@ Line 1: / Line 1: @@
 ====== p5js week 09 ======
+{{:love-egg-toast.png?600|}}
+(photo from https://www.flickr.com/photos/carowallis1/2260652819)
 Phew! It's been lots of toast over the past eight lessons! We'd better take a lesson to catch up and review what we've learned.
-We'll review in two parts: general JavaScript and then p5js.
+We'll review in two parts: general JavaScript and then p5js. You should also review how to put your work on the wiki and make sure you've added all of your work there. That lets you share it with your teachers and classmates, and eventually with the public, too!
+Be sure to ask your teacher if you need help with any of the items listed in the review below. OK, let's review!
 ===== JavaScript =====
+{{:toast-with-coffee.jpg?600|}}
+(photo from https://pixahive.com/photo/morning-breakfast-2/)
 You can open the console in the browser by pressing F12, selecting "developer's tools" from the menu, or right-clicking to inspect and then choosing the console tab.
+We can store <color black/pink>values</color> in <color black/pink>variables</color>; then we can use them later. When we do that, we use the <color black/yellow>"let"</color> keyword.
+<code>
+let aNumber = 10;
+</code>
 Making functions is super important! The basic pattern is like this:
@@ Line 28: / Line 44: @@
 </code>
-The arguments are the input to the function, and the return statement is the output.
+We can <color black/pink>call a function</color> 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:
-When we wrap up some calculations inside of a function, that's called encapsulation.
+<code>
+addTwoThenTimes100 (aNumber)
+</code>
+The <color black/pink>arguments</color> are the input to the function, and the <color black/pink>return statement</color> is the output.
+We also learned another way to write functions called <color black/pink>arrow</color> functions. That pattern looks like:
+<code>
+// let functionName = argument => stuff you want to do
+// which looks like this real function:
+let addTwoThenTimes100_2 = number => (number + 2) * 100
+addTwoThenTimes100_2 (aNumber)
+</code>
+When we wrap up some calculations inside of a function, that's called <color black/pink>encapsulation</color>. 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 <color black/pink>generalization</color>. That's like this:
+<code>
+function addTwoThenTimesX (number, x) {
+  let preNumber = number + 2;
+  let finalNumber = preNumber * x;
+  return finalNumber
+}
+addTwoThenTimesX (aNumber, 500)
+</code>
-We can use many kinds of values in our functions, including numbers, strings ("hi!"), booleans (true or false).
+We can use many kinds of values in our functions, including numbers, <color black/pink>strings</color> ("hi!"), <color black/pink>booleans</color> (true or false).
 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 <color black/pink>structuring data</color>, into arrays or objects.
-Arrays can tell us how long they are when we use the length method. There are also cool methods like forEach, map, and filter that let us avoid using for-loops.
+<color black/pink>Arrays</color> can tell us how long they are when we use the length method. There are also cool methods like <color black/pink>forEach</color>, <color black/pink>map</color>, and <color black/pink>filter</color> (check lessons 6, 7, and 8) that let us avoid using for-loops. We also learned about adding things to arrays using <color black/pink>push</color> and <color black/pink>unshift</color>, as well as removing things from arrays using <color black/pink>pop</color> .
-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/pink>for-loop</color>, we can. Remember the basic pattern of a for-loop:
 <code>
@@ Line 60: / Line 105: @@
 </code>
+We made some useful functions, including randomRange, pick, and buildArray.
+Often when we use objects, we make a <color black/pink>class</color> that makes it easier to make objects. We can make objects using the <color black/pink>constructor</color> from the class. To use the constructor, we start with the <color black/yellow>"new"</color> keyword.
+===== p5js =====
+{{:various-toast-with-topping.png?600|}}
+(photo from https://www.flickr.com/photos/30478819@N08/50322224721)
+You've learned about the <color black/pink>setup</color> and <color black/pink>draw</color> functions.
+You know how to use some basic shapes like rect and ellipse; these use x and y coordinates for their positions.
+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 <color black/pink>RGB color values</color> and <color black/pink>HSL color values</color> (go back and review lesson 2).
+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 <color black/pink>beginShape</color> and <color black/pink>endShape</color>.
+We learned how to move the shapes and rotate them using <color black/pink>transform</color> and <color black/pink>rotate</color>, and we also learned how to get back to the original rotation and size using <color black/pink>resetMatrix</color>.
+===== finishing your latest drawing and getting all your work on the wiki =====
+{{:avocado-toast-2.png?600|}}
+(photo from https://www.flickr.com/photos/92800334@N02/49013804871)
+For a couple of weeks, you should have been working on your third drawing.
+  - draw an animal, plant, or a complicated shape from your imagination
+  - there should be many different versions of it, like different sizes and different colors
+  - make a class to draw it
+  - use buildArray to fill an array of objects from your class; try to make 100 or more!
+  - use filter to change your drawing in some way
+Can you make some progress with this and add it to your wiki page? Be sure to add your other drawings, too. Ask the teachers for help if you need it. They'd be happy to help!