Differences

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

--- p5js-week-12 [2022/07/16 06:56] – renick
+++ p5js-week-12 [2023/06/29 23:02] (current) – reina.chen
@@ Line 1: / Line 1: @@
 ====== p5js week 12 ======
-Last time, we looked at if-statements. Remember, here's the basic pattern for an if statement:
+{{:unplugged-toaster.jpg?600|}}
+(photo from https://www.flickr.com/photos/healthserviceglasses/3256234213)
+Last time, we looked at <color black/pink>if-statements</color> and used them to check a toaster. Remember, here's the basic pattern for an if statement:
   if () {} else {}
-We also did this example about a toaster:
+This is the example function we made about a toaster:
   toasterPluggedIn = false;
@@ Line 20: / Line 24: @@
 ====== using else ======
-We use "else" to handle every case that isn't handled by our condition. Above, the condition is "toasterPluggedIn == true"; anything else gets caught by "else".
+We use <color black/yellow>"else"</color> to handle every case that isn't handled by our condition. Above, the condition is "toasterPluggedIn == true"; anything else gets caught by "else".
   toasterPluggedIn = "i forgot"
@@ Line 27: / Line 31: @@
 You can see that "else" catches this one, too.
-We could do that with toast, too:
+{{:strawberry-jam.jpg?600|}}
+(photo from https://world.openfoodfacts.org/product/0688267061790/strawberry-jam-stop-shop)
+We could do that with toast, too. Below the function, there are three calls of the function. Each one prints a different string to the console based on the values of the three variables customerOrder1, customerOrder2, and customerOrder3.
   function toppingForToast (customerOrder) {
@@ Line 34: / Line 42: @@
       topping = "butter"
     }
-    else topping = customerOrder
+    else {topping = customerOrder
     console.log ("This toast should have " + topping + " on it.")
+    }
     return topping
   }
@@ Line 68: / Line 77: @@
 ====== using else if ======
-Sometimes we have more than one condition; in those cases, we can continue to use new "ifs" with "else if". Finally, we present "else" to catch anything that isn't covered by our "ifs".
+Sometimes we have more than one condition; in those cases, we can continue to use new "ifs" with <color black/yellow>"else if"</color>. Finally, we present "else" to catch anything that isn't covered by our "ifs".
+We can modify our basic if-statement reference to include else if like this:
+  if () {} else if () {} else {}
+You can use as many "else if"s as you want. Of course, it can look messy if there are many of them, but it works. If you have more than two or three, you might want to think about whether there is a better way to write your code.
+===== the includes method =====
+To do that, let's learn a new JavaScript method called "includes". <color black/pink>"includes"</color> checks a string to see if part of it matches the argument. Use it like this:
+  "some delicious toast for breakfast".includes("toast")
+  "some delicious toast for breakfast".includes("eggs")
+You can see that "includes" returns either true or false, so it's a useful method for test conditions inside if-statements.
+You can read more about includes here:
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes
+===== toppingForToast with else if =====
+{{:butter.jpg?600|}}
+(photo from https://www.healthline.com/nutrition/foods/butter)
+Let's use "else if" to improve our toppingForToast function, too. We'll automatically put butter on the toast, which means we'll add butter to all customer orders unless the customer says "no butter". Like before, if the customer doesn't specify anything, we'll still put butter on it.
+  function toppingForToast (customerOrder) {
+    let topping = customerOrder;
+    if  (topping == undefined) {
+      topping = "butter"
+    }
+    else if
+    (topping.includes("no butter")) {
+      topping = customerOrder
+    }
+    else {topping = customerOrder + " and butter"}
+    console.log ("This toast should have " + topping + " on it.")
+    return topping
+  }
+  let customerOrder1 = "grape jelly no butter";
+  let customerOrder2 = "strawberry jam";
+  let customerOrder3 = "cheese";
+  let customerOrder4 = undefined;
+  toppingForToast (customerOrder4)
 ===== drawing a heart =====
+We can use "else if" to change some of the brown toast to hearts before we change the rest of the toast to Stars.
+Like above, we'll make a Heart class. What are the vertices that we'll need for a heart? There are eight points, 0 through 7, which you can see in this picture:
+{{:heart-w-vertices.png|}}
 ===== freaky pink toast with stars and hearts=====
@@ Line 80: / Line 142: @@
 <iframe src="https://editor.p5js.org/renick/sketches/DHQkWK7J9" width=99% height=800></iframe>
 </HTML>
+===== your drawing using else and else if =====
+Last time, you might have started a drawing using an if-statement. Like we said, be creative! Try drawing something that you haven't yet: fruit, insects, trains, or something totally beautiful or weird from your imagination. This time, try to improve that drawing with at least "else" or maybe even "else if".
+Like the toast drawing above, make a drawing of 100 or more of something using your own class. In it, use an if-statement to change some of the objects. You might change them based on:
+  - their location
+  - their size
+  - their color
+You can add classes for other kinds of objects just like we did with the stars and hearts above.
+In the end, we should be able to see the results of the if-statement clearly, just like the freaky pink toast example above.
+Be sure to post your drawing to your wiki page.
+===== conclusion =====
+This is also the end of our course. I hope you've enjoyed thinking about toast, JavaScript, and p5js with us. Please keep drawing with code, and be sure to share your progress with us!