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-03 [2023/07/04 23:58] – reina.chenp5js-week-03 [2023/07/11 22:50] (current) – reina.chen
Line 43: Line 43:
 </code> </code>
  
-The <color black/yellow>let</color> keyword protects our variable. toastRed is the variable name. The equal sign is used to <color black/pink>assign</color> a value to the variable. Remember, a variable is like a box to keep things in. Do you remember the bread box from before? We can set (assign) this variable to a new number by using the same variable name and a different value:+The <color black/yellow>let</color> keyword protects our variable. toastRed is the variable name. The __equal sign__ is used to <color black/pink>assign</color> a value to the variable. Remember, a variable is like a box to keep things in. Do you remember the bread box from before? We can set (assign) this variable to a new number by using the same variable name and a different value:
  
 <code> <code>
Line 55: Line 55:
 </code> </code>
      
-The variable name on the left followed by the equal sign means we are assigning it. Since we assigned it before, that means we are reassigning it now. The value on the right is the old value plus one. In other words, we are adding one to the current value and then storing that new value in the same box (variable). Try evaluating this line multiple times and see what happens.+The variable name on the left followed by the __equal sign__ means we are assigning it. Since we assigned it before, that means we are reassigning it now. The value on the right is the old value plus one. In other words, we are adding one to the current value and then storing that new value in the same box (variable). Try evaluating this line multiple times and see what happens.
  
-In the same way, we can decrement a number. <color black/pink>"Decrement"</color> is the opposite of "[[p5js-week-03#reassigning_variables_and_incrementing|increment]]". It means to make a number go down by steps.+In the same way, we can [[p5js-week-03#reassigning_variables_and_incrementing|decrement]] a number. <color black/pink>"Decrement"</color> is the opposite of "[[p5js-week-03#reassigning_variables_and_incrementing|increment]]". It means to make a number go down by steps.
  
 <code> <code>
Line 77: Line 77:
 </code> </code>
      
-In all of the cases above, we assigned a new value to the variable by first writing the variable name on the left and then the new value after writing an equal sign. However, there's one more way!+In all of the cases above, we assigned a new value to the variable by first writing the variable name on the left and then the new value after writing an __equal sign__. However, there's one more way!
  
 <code> <code>
Line 89: Line 89:
 </code> </code>
  
-We can use this with a for-loop, which we are going to learn below, to do that gradual color change. When we get to a value of 255 for red (and 0 for the others), we'll get red toast!+We can use this with a [[p5js-week-03#for-loop|for-loop]], which we are going to learn below, to do that gradual color change. When we get to a value of 255 for red (and 0 for the others), we'll get red toast!
  
 {{:red-toast.jpg?600|}} {{:red-toast.jpg?600|}}
Line 119: Line 119:
   toaster(1000)      toaster(1000)   
      
-It contains a for-loop. A for-loop has a particular structure: the conditions for the for-loop are in __parentheses__ and the body of the for-loop is in __curly braces__:+It contains a [[p5js-week-03#for-loop|for-loop]]. A [[p5js-week-03#for-loop|for-loop]] has a particular structure: the conditions for the [[p5js-week-03#for-loop|for-loop]] are in __parentheses__ and the body of the [[p5js-week-03#for-loop|for-loop]] is in __curly braces__:
  
   for () {}   for () {}
Line 127: Line 127:
 {{:butter_sprouted_bread_toast_sweet_drink_jam_coffee.jpg?600|}} {{:butter_sprouted_bread_toast_sweet_drink_jam_coffee.jpg?600|}}
  
-In the parentheses, you need three parts (kind of like butter, jam, and a cup of coffee for your toast):+In the __parentheses__, you need three parts (kind of like butter, jam, and a cup of coffee for your toast):
  
   - a starting value stored in a variable, sometimes called a <color black/pink>counter</color>   - a starting value stored in a variable, sometimes called a <color black/pink>counter</color>
Line 133: Line 133:
   - a statement which is executed on every loop, usually to [[p5js-week-03#reassigning_variables_and_incrementing|increment]] the variable with the starting value/counter   - a statement which is executed on every loop, usually to [[p5js-week-03#reassigning_variables_and_incrementing|increment]] the variable with the starting value/counter
  
-In the curly braces, you put the things that you want to happen on each loop. Remember, the loop is going to run until the stopping value is false.+In the __curly braces__, you put the things that you want to happen on each loop. Remember, the loop is going to run until the stopping value is false.
  
 In the for loop above, notice these things: In the for loop above, notice these things:
Line 141: Line 141:
   - the third value which is the result of the [[p5js-week-03#reassigning_variables_and_incrementing|incrementing]] operator ++   - the third value which is the result of the [[p5js-week-03#reassigning_variables_and_incrementing|incrementing]] operator ++
  
-What this means is that the for-loop will start the variable i at 0 and increase it by 1 every time. It will continue to run as long as i is less than 10.+What this means is that the [[p5js-week-03#for-loop|for-loop]] will start the variable i at 0 and increase it by 1 every time. It will continue to run as long as i is less than 10.
  
-Also notice that the variable i is used in the body of the for-loop in the call of console.log.+Also notice that the variable i is used in the body of the [[p5js-week-03#for-loop|for-loop]] in the call of console.log.
  
 ==== conditions in a for-loop ==== ==== conditions in a for-loop ====
  
-There are some details about the conditions for the for loop that we should think about. The first item in the conditions is the <color black/pink>counter</color>.+There are some details about the conditions for the for loop that we should think about. The first item in the conditions is the [[p5js-week-03#the_parts_of_a_for-loop|counter]].
  
 The first point to be careful about is using the <color black/yellow>let</color> statement. We'll talk about <color black/yellow>"let"</color> more in the future. For now, you should know that <color black/yellow>"let"</color> is a JavaScript keyword, like "function" or "if", that makes variables safer to use. If you forget to use <color black/yellow>"let"</color>, it's going to be easy for a particular kind of bug to happen in your program. A <color black/pink>bug</color> is, according to Wikipedia, "... an error, flaw or fault in a computer program or system that causes it to produce an incorrect or unexpected result, or to behave in unintended ways." The first point to be careful about is using the <color black/yellow>let</color> statement. We'll talk about <color black/yellow>"let"</color> more in the future. For now, you should know that <color black/yellow>"let"</color> is a JavaScript keyword, like "function" or "if", that makes variables safer to use. If you forget to use <color black/yellow>"let"</color>, it's going to be easy for a particular kind of bug to happen in your program. A <color black/pink>bug</color> is, according to Wikipedia, "... an error, flaw or fault in a computer program or system that causes it to produce an incorrect or unexpected result, or to behave in unintended ways."
  
-The second point is that the name of the variable that we use as a counter in the for-loop is up to you to choose. Just like you can name arguments "banana" or "chocolate", you can also name the counter in the for-loop anything you want. However, it's very common for programmers to call the counter "i", which can represent the ideas of "integer" or "index" or "iteration". Personally, I think that 'iteration' is the most useful to think about for a for-loop. The Oxford Dictionary defines "iteration" as "repetition of a mathematical or computational procedure applied to the result of a previous application". In that case, the i means which repetition or time we are at.+The second point is that the name of the variable that we use as a [[p5js-week-03#the_parts_of_a_for-loop|counter]] in the [[p5js-week-03#for-loop|for-loop]] is up to you to choose. Just like you can name arguments "banana" or "chocolate", you can also name the [[p5js-week-03#the_parts_of_a_for-loop|counter]] in the [[p5js-week-03#for-loop|for-loop]] anything you want. However, it's very common for programmers to call the [[p5js-week-03#the_parts_of_a_for-loop|counter]] "i", which can represent the ideas of "integer" or "index" or "iteration". Personally, I think that 'iteration' is the most useful to think about for a [[p5js-week-03#for-loop|for-loop]]. The Oxford Dictionary defines "iteration" as "repetition of a mathematical or computational procedure applied to the result of a previous application". In that case, the i means which repetition or time we are at.
  
-The third point is that we can then use this counter variable inside the for-loop any way we want. In this function, we are going to collect numbers in a variable and then add the value of i to it on each loop. Notice how i increases, and then the value of the numberCollector variable also increases.+The third point is that we can then use this [[p5js-week-03#the_parts_of_a_for-loop|counter]] variable inside the [[p5js-week-03#for-loop|for-loop]] any way we want. In this function, we are going to collect numbers in a variable and then add the value of i to it on each loop. Notice how i increases, and then the value of the numberCollector variable also increases.
  
   function buildNumber (n) {   function buildNumber (n) {
Line 170: Line 170:
   buildNumber(5)   buildNumber(5)
  
-The fourth point is that you can start the counter of the for-loop at any value you want, but it's customary to start at 0. Just so that you can see how it works, let's start a for loop at a different value. Notice that it works the same as 0; we just have to be careful about setting the stopping point. The n argument still controls how many times we loop, but also notice that the value of i is different from our old repeater function.+The fourth point is that you can start the [[p5js-week-03#the_parts_of_a_for-loop|counter]] of the [[p5js-week-03#for-loop|for-loop]] at any value you want, but it's customary to start at 0. Just so that you can see how it works, let's start a for loop at a different value. Notice that it works the same as 0; we just have to be careful about setting the stopping point. The n argument still controls how many times we loop, but also notice that the value of i is different from our old repeater function.
  
   function repeaterFrom10 (n) {   function repeaterFrom10 (n) {
Line 182: Line 182:
   repeaterFrom10(10)   repeaterFrom10(10)
  
-As always, be careful about the syntax: put the conditions of the for-loop in parentheses first, and then the body of the for-loop in curly brackets.+As always, be careful about the syntax: put the conditions of the [[p5js-week-03#for-loop|for-loop]] in __parentheses__ first, and then the body of the [[p5js-week-03#for-loop|for-loop]] in __curly brackets__.
  
 ===== for-loops and return statements ===== ===== for-loops and return statements =====
  
-You have to be careful about where you put the <color black/yellow>return</color> statement. If the <color black/yellow>return</color> is inside the body of the for-loop, the loop will stop as soon as the <color black/yellow>return</color> is evaluated. That means if you do some computation and then return the result, the loop stops immediately! It's like stopping the toaster before our bread is toasted.+You have to be careful about where you put the <color black/yellow>return</color> statement. If the <color black/yellow>return</color> is inside the body of the [[p5js-week-03#for-loop|for-loop]], the loop will stop as soon as the <color black/yellow>return</color> is evaluated. That means if you do some computation and then return the result, the loop stops immediately! It's like stopping the toaster before our bread is toasted.
  
 The following function does that. Even when you ask it to loop 1,000 times, it stops on the very first loop. The following function does that. Even when you ask it to loop 1,000 times, it stops on the very first loop.
Line 203: Line 203:
   returnsWrong(1000)   returnsWrong(1000)
  
-The key is to put the <color black/yellow>return</color> statement after the for-loop, like this:+The key is to put the <color black/yellow>return</color> statement after the [[p5js-week-03#for-loop|for-loop]], like this:
  
    function returnsRight (n) {    function returnsRight (n) {
Line 218: Line 218:
   returnsRight(1000)   returnsRight(1000)
      
-There's another kind of mistake that some are making with the conditions in the for-loop. Have a look at this wrong function:+There's another kind of mistake that some are making with the conditions in the [[p5js-week-03#for-loop|for-loop]]. Have a look at this wrong function:
  
   function wordPrinter (word1, n) {   function wordPrinter (word1, n) {
Line 227: Line 227:
   }   }
  
-Here, the conditions for the for-loop are wrong. The conditions of the for loop can be found in the parentheses after "for". In this case, it's:+Here, the conditions for the [[p5js-week-03#for-loop|for-loop]] are wrong. The conditions of the [[p5js-week-03#for-loop|for-loop]] can be found in the __parentheses__ after "<color black/yellow>for</color>". In this case, it's:
  
   for (let b = 0; b < n; i++) // this is wrong!   for (let b = 0; b < n; i++) // this is wrong!
Line 243: Line 243:
   for (let b = 0; b < n; b++)   for (let b = 0; b < n; b++)
  
-It's OK to use b, i, cherries, or any other variable we want; we just have to be sure that the same one is used for all three parts. If we want a traditional counter for our for-loop. i is usually the best choice because people are used to it.+It's OK to use b, i, cherries, or any other variable we want; we just have to be sure that the same one is used for all three parts. If we want a traditional [[p5js-week-03#the_parts_of_a_for-loop|counter]] for our [[p5js-week-03#for-loop|for-loop]]. i is usually the best choice because people are used to it.
  
   for (let i = 0; i < n; i++)   for (let i = 0; i < n; i++)
Line 255: Line 255:
 OK, now let's try to use what we've learned for drawing in p5js. OK, now let's try to use what we've learned for drawing in p5js.
  
-  - using a for-loop to gradually change colors+  - using a [[p5js-week-03#for-loop|for-loop]] to gradually change colors
   - filling the screen with earths using our earth function   - filling the screen with earths using our earth function
   - learning the remainder operator to get even more earths on the screen   - learning the remainder operator to get even more earths on the screen
Line 262: Line 262:
 ==== using a for-loop to gradually change colors ==== ==== using a for-loop to gradually change colors ====
  
-Look at this example. We'll use a for-loop to increase the value of a variable, like we talked about above.+Look at this example. We'll use a [[p5js-week-03#for-loop|for-loop]] to increase the value of a variable, like we talked about above.
  
 <HTML> <HTML>
Line 272: Line 272:
 ==== many earths with our earth function and a for-loop ==== ==== many earths with our earth function and a for-loop ====
  
-Last time we put many earths on the screen, we had to write out our earth function call several times. One of the cool things about programming is that we can let the computer do the boring work like that for us. Let's use a for-loop to do it instead. Look at lines 17-19.+Last time we put many earths on the screen, we had to write out our earth function call several times. One of the cool things about programming is that we can let the computer do the boring work like that for us. Let's use a [[p5js-week-03#for-loop|for-loop]] to do it instead. Look at lines 17-19.
  
 <HTML> <HTML>
Line 280: Line 280:
 ==== filling the screen with earths using a for-loop and the remainder operator ==== ==== filling the screen with earths using a for-loop and the remainder operator ====
  
-That for-loop only gives us one row of earths. What if we want to fill the whole screen? To do that, let's learn another tool: the <color black/pink>remainder operator</color>. It's the % sign. An <color black/pink>operator</color> is a symbol we put between two items to do something to them, like + - * and /. +That [[p5js-week-03#for-loop|for-loop]] only gives us one row of earths. What if we want to fill the whole screen? To do that, let's learn another tool: the [[p5js-week-03#filling_the_screen_with_earths_using_a_for-loop_and_the_remainder_operator|remainder operator]]. It's the % sign. An <color black/pink>operator</color> is a symbol we put between two items to do something to them, like + - * and /. 
  
 Try this in the console: Try this in the console:
Line 314: Line 314:
 We can use it to produce a looping series of numbers (or to keep numbers within a certain range) when we have another number that is increasing or decreasing. We can use it to produce a looping series of numbers (or to keep numbers within a certain range) when we have another number that is increasing or decreasing.
  
-In this code, we use the remainder operator and Math.floor to get several rows of earths. Study this code and see if you can figure out how it works.+In this code, we use the [[p5js-week-03#filling_the_screen_with_earths_using_a_for-loop_and_the_remainder_operator|remainder operator]] and <color black/pink>Math.floor</color> to get several rows of earths. Study this code and see if you can figure out how it works.
  
 <HTML> <HTML>
  • p5js-week-03.1688540331.txt.gz
  • Last modified: 21 months ago
  • by reina.chen