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 [2022/05/05 00:12] – renickp5js-week-03 [2023/07/11 22:50] (current) – reina.chen
Line 9: Line 9:
 To do that, first we need to learn some things about JavaScript: To do that, first we need to learn some things about JavaScript:
  
-  - reassigning variables +  - **reassigning variables** 
-  - incrementing +  - **incrementing** 
-  - for-loops +  - **for-loops** 
-  - the remainder operator+  - **the remainder operator**
  
 Then let's use that in p5js to fill the screens. Then let's use that in p5js to fill the screens.
Line 22: Line 22:
 First, let's talk about these JavaScript concepts. First, let's talk about these JavaScript concepts.
  
-  - __reassigning variables__ and __incrementing__ +  - [[p5js-week-03#reassigning_variables_and_incrementing|reassigning variables and incrementing]] 
-  - __for-loops__+  - [[p5js-week-03#for-loop|for-loops]]
  
 ==== reassigning variables and incrementing ==== ==== reassigning variables and incrementing ====
Line 35: Line 35:
 Butter and strawberries might be kind of hard for us to code just now. Let's think about our rainbow toast. We know how to do random colors, but how could we make each piece of toast change color a little bit, slowly going from one color to another? We know from last time that we can represent color with numbers, like RGB. If we slowly change one or more of these numbers, we could slowly change the color. Butter and strawberries might be kind of hard for us to code just now. Let's think about our rainbow toast. We know how to do random colors, but how could we make each piece of toast change color a little bit, slowly going from one color to another? We know from last time that we can represent color with numbers, like RGB. If we slowly change one or more of these numbers, we could slowly change the color.
  
-We're going to need to understand how to increment variables. "Increment" means to increase something by a regular amount. +We're going to need to understand how to [[p5js-week-03#reassigning_variables_and_incrementing|increment]] variables. <color black/pink>"Increment"</color> ([[https://en.wikipedia.org/wiki/Increment_and_decrement_operators]]) means to increase something by a regular amount. 
  
 First, remember how variables work. Let's declare a variable: First, remember how variables work. Let's declare a variable:
Line 43: Line 43:
 </code> </code>
  
-The __let__ keyword protects our variable. toastRed is the variable name. The equal sign is used to __assign__ 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. "Decrement" is the opposite of "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 63: Line 63:
 </code> </code>
  
-JavaScript gives us a special operator for incrementing. We can use it this way.+JavaScript gives us a special operator for [[p5js-week-03#reassigning_variables_and_incrementing|incrementing]]. We can use it this way.
  
 <code> <code>
Line 69: Line 69:
 </code> </code>
      
-The ++ operator increases a value by one. Try evaluating this line multiple times and see what happens.+The <color black/pink>++</color> operator increases a value by one. Try evaluating this line multiple times and see what happens.
  
-If you want to increment by another value, you have to use the previous method which is shown above.+If you want to [[p5js-week-03#reassigning_variables_and_incrementing|increment]] by another value, you have to use the previous method which is shown above.
  
 <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 97: Line 97:
 =====for-loop===== =====for-loop=====
  
-Now we want to start learning a really important concept: for-loops. Above, we were incrementing numbers. It might be OK to repeat that code three times, but repeating it five times would be a little annoying. Imagine if you had to do it 10 times, or 100 times. What if you had to do it 1,000 times? Can you imagine toasting 1,000 pieces of toast?+Now we want to start learning a really important concept: <color black/pink>for-loops</color>. Above, we were [[p5js-week-03#reassigning_variables_and_incrementing|incrementing]] numbers. It might be OK to repeat that code three times, but repeating it five times would be a little annoying. Imagine if you had to do it 10 times, or 100 times. What if you had to do it 1,000 times? Can you imagine toasting 1,000 pieces of toast?
  
 {{:lots-of-toast.jpg?600|}} {{:lots-of-toast.jpg?600|}}
Line 119: Line 119:
   toaster(1000)      toaster(1000)   
      
-It contains a for-loop. A for-loop has a structure of the conditions for the for-loop in __parentheses__ and the body of the for-loop 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 counter+  - a starting value stored in a variable, sometimes called a <color black/pink>counter</color>
   - a stopping value which evaluates to a boolean (true or false; we talked about booleans last time)   - a stopping value which evaluates to a boolean (true or false; we talked about booleans last time)
-  - a statement which is executed on every loop, usually to 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 139: Line 139:
   - the starting value is 0, and it's stored in the variable called i   - the starting value is 0, and it's stored in the variable called i
   - the stopping value is 10   - the stopping value is 10
-  - the third value which is the result of the 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 __counter__.+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 let statement. We'll talk about "let" more in the future. For now, you should know that "let" is a JavaScript keyword, like "function" or "if", that makes variables safer to use. If you forget to use "let", it's going to be easy for a particular kind of bug to happen in your program. A bug 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 return statement. If the return is inside the body of the for-loop, the loop will stop as soon as the return 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 return 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 235: Line 235:
   - starting point   - starting point
   - stopping point   - stopping point
-  - how to increment+  - how to [[p5js-week-03#reassigning_variables_and_incrementing|increment]]
  
-That means that in this case, the count is measured with b. However, b is not incremented. Only i is incremented. "i" will continue to go up, but this increasing value is never used later in the function. Maybe it's more important to notice that this means that the loop will never stop. Eventually it will crash the computer! Don't do this!+That means that in this case, the count is measured with b. However, b is not [[p5js-week-03#reassigning_variables_and_incrementing|incremented]]. Only i is [[p5js-week-03#reassigning_variables_and_incrementing|incremented]]. "i" will continue to go up, but this increasing value is never used later in the function. Maybe it's more important to notice that this means that the loop will never stop. Eventually it will crash the computer! Don't do this!
  
 The conditions should be like this: The conditions should be like this:
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++)
  
 ===== p5js ===== ===== p5js =====
Line 253: 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 260: 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 270: 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.+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 278: 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 remainder operator. It's the % sign. An operator 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 286: Line 288:
 </code> </code>
  
-The percent sign (%) in JavaScript is the remainder operator. The remainder is the amount that is left over after you divide one integer by another. When you divide 4 by 2, there's nothing left, so it returns 0. How about this one?+The percent sign (%) in JavaScript is the <color black/pink>remainder operator</color>. The remainder is the amount that is left over after you divide one integer by another. When you divide 4 by 2, there's nothing left, so it returns 0. How about this one?
  
 <code> <code>
Line 312: 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.1651734774.txt.gz
  • Last modified: 3 years ago
  • by renick