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/05 00:06] – 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 [[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. 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.
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 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 182: Line 182:
   repeaterFrom10(10)   repeaterFrom10(10)
  
-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.+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 =====
Line 227: Line 227:
   }   }
  
-Here, the conditions for the [[p5js-week-03#for-loop|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 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 [[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 <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:
  • p5js-week-03.1688540798.txt.gz
  • Last modified: 21 months ago
  • by reina.chen