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-11 [2022/07/08 09:17] – renickp5js-week-11 [2023/06/29 22:56] (current) – reina.chen
Line 5: Line 5:
 (photo from https://commons.wikimedia.org/wiki/File:French_toast_variaton_in_Guatemala.jpg) (photo from https://commons.wikimedia.org/wiki/File:French_toast_variaton_in_Guatemala.jpg)
  
-Now that we've reviewed what we've learned, let's learn one more fundamental part of JavaScript. +You can make toast in a toaster, but you can also make toast on a grill or in a pan. For example, you might want to make French toast like in the photo above. 
 + 
 +Now that we've reviewed what we've learned, let's learn one more fundamental part of JavaScript to expand what we're able to do.
  
 There are a couple of things we want to study today: There are a couple of things we want to study today:
Line 15: Line 17:
 ===== if-statements ===== ===== if-statements =====
  
-Let's learn another key word for the JavaScript language: if. Here's an example to get us started.+{{:toast-jam.jpg?600|}} 
 + 
 +(photo from https://www.flickr.com/photos/131260238@N08/16606727168) 
 + 
 +If you push down the lever, the toaster should start. If the timer is finished, the toaster should pop out the toast. If you want sweeter toast, you should put some jam on it. "If" is really important for making toast!  
 + 
 +"If" is also an important part of programming. Let's learn how to use it in JavaScript. Here's an example to get us started.
  
   let toasterPluggedIn = true;   let toasterPluggedIn = true;
Line 25: Line 33:
 Try that out in the console, then let's check out what's going on in that code. Try that out in the console, then let's check out what's going on in that code.
  
-An if statement has three parts usually. The first part is the condition. It's a test which we want to know is either true or false. The test should be inside parentheses. It has to evaluate to true or false; that means that when all of the sub-parts are calculated, the final value is either true or false, not a number or a string or something else. In the code above, that's the part that says:+An <color black/pink>if statement</color> has three parts usually. The first part is the <color black/pink>condition</color>. It's a test which will tell us either true or false. The test should be inside __parentheses__. It has to evaluate to true or false; that means that when all of the sub-parts are calculated, the final value is either true or false, not a number or a string or something else. In the code above, that's the part that says:
  
   if (toasterPluggedIn == true)   if (toasterPluggedIn == true)
Line 31: Line 39:
 Since the variable toasterPluggedIn has been assigned as true, this part of the code will evaluate to true. Since the variable toasterPluggedIn has been assigned as true, this part of the code will evaluate to true.
  
-In the case of true, the function executes the second part of the statement. When programmers say "execute", they mean "carry out" or "do". The second part should be within curly brackets. In the code above, it's this part:+In the case of true, the function executes the second part of the statement. When programmers say <color black/pink>"execute"</color>, they mean "carry out" or "do". The second part should be within __curly brackets__. In the code above, it's this part:
  
     {console.log("First step towards toasting is complete!")}     {console.log("First step towards toasting is complete!")}
  
-If the condition is false, the third part of the if statement is executed. It has the "else" keyword first, and then it's followed by the last part of the if statement inside curly braces. In the code above, it's this part:+If the condition is false, the third part of the if statement is executed. It has the <color black/yellow>"else"</color> keyword first, and then it's followed by the last part of the if statement inside __curly braces__. In the code above, it's this part:
  
     else {console.log("Please plug in the toaster.")}     else {console.log("Please plug in the toaster.")}
Line 50: Line 58:
  
 ===== put an if-statement in a function ===== ===== put an if-statement in a function =====
 +
 +{{:ok._toaster.jpg?600|}}
 +
 +(photo from https://commons.wikimedia.org/wiki/File:OK._Toaster.jpg)
  
 We might want to use that if-statement to check our toaster more often than once, so let's put it in a function to make that easier. We might want to use that if-statement to check our toaster more often than once, so let's put it in a function to make that easier.
Line 73: Line 85:
  
 Remember: Remember:
-  - After writing "if", put a test inside of parentheses. The test should evaluate to "true" or "false".+  - After writing <color black/yellow>"if"</color>, put a test inside of parentheses. The test should evaluate to "true" or "false".
   - The next part is curly braces. Inside the curly braces, put what you want JavaScript to do for you when the test is true.   - The next part is curly braces. Inside the curly braces, put what you want JavaScript to do for you when the test is true.
-  - Then we write "else" to divide the if-statements into two parts. +  - Then we write <color black/yellow>"else"</color> to divide the if-statements into two parts. 
-  - After "else", put curly braces, and inside the curly braces write what you want JavaScript to do when the test is false.+  - After <color black/yellow>"else"</color>, put curly braces, and inside the curly braces write what you want JavaScript to do when the test is false.
  
 ===== a second argument in a forEach callback ===== ===== a second argument in a forEach callback =====
 +
 +{{:cheese-toast.jpg?600|}}
 +
 +(photo from https://www.freeimageslive.co.uk/free_stock_image/cheese-toasties-jpg)
  
 Remember back in week 06 that we studied how to use forEach on arrays. Remember back in week 06 that we studied how to use forEach on arrays.
  
-We call forEach on an array, and the argument we give it is a function, which we call a callback. We've done callbacks with one argument, in which the argument represents an item from the array, like this:+We call <color black/pink>forEach</color> on an array, and the argument we give it is a function, which we call a <color black/pink>callback</color>. We've done callbacks with one argument, in which the argument represents an item from the array, like this:
  
   let someToast = ['slice0','slice1','slice2'];   let someToast = ['slice0','slice1','slice2'];
Line 97: Line 113:
 There's one more tricky point here that we need to learn, and that's about arrow functions. You can review arrow functions in week 05.  There's one more tricky point here that we need to learn, and that's about arrow functions. You can review arrow functions in week 05. 
  
-In an arrow function, JavaScript makes it easy when there's only one argument. However, when we have two or more arguments, we need to put them in parentheses. When we do that, we also need to put the body of the function in curly braces. If we don't do that, JavaScript will be confused.+In an <color black/pink>arrow</color> function, JavaScript makes it easy when there's only one argument. However, when we have two or more arguments, we need to put them in parentheses. When we do that, we also need to put the body of the function in __curly braces__. If we don't do that, JavaScript will be confused.
  
 Above, the arrow function has two arguments, t and i. t is the item from the array, and i is the item's index. You can see the body of the function, containing console.log, is inside of curly braces. Above, the arrow function has two arguments, t and i. t is the item from the array, and i is the item's index. You can see the body of the function, containing console.log, is inside of curly braces.
Line 103: Line 119:
 ===== using if-statements in p5js ===== ===== using if-statements in p5js =====
  
-Using the things we've learned above, we can modify one of our toast drawings from before. Let's turn the burnt toast into freaky pink toast! Check the comments in the code to understand what the if-statement is doing.+Using the things we've learned above, we can modify one of our toast drawings from before. Let's turn the burnt toast into freaky pink toast!  
 + 
 +After we make an array of toast, we'll check the color of each piece of toast. If it's a burnt piece of toast, represented by the color "saddlebrown", we'll change it to the color "magenta". 
 + 
 +Check the comments in the code to understand what the if-statement is doing.
  
 <HTML> <HTML>
 <iframe src="https://editor.p5js.org/renick/sketches/P5wmDkHEj" width=99% height=800></iframe> <iframe src="https://editor.p5js.org/renick/sketches/P5wmDkHEj" width=99% height=800></iframe>
 </HTML> </HTML>
 +
 +===== your drawing using if-statements =====
 +
 +If you've made it this far, try using an if-statement to make a new drawing. In this drawing, be creative! Try drawing something that you haven't yet: fruit, insects, trains, or something totally beautiful or weird from your imagination.
 +
 +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
 +
 +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.
  
  • p5js-week-11.1657297035.txt.gz
  • Last modified: 3 years ago
  • by renick