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-04 [2022/05/14 09:50] – renickp5js-week-04 [2023/07/22 20:43] (current) – renick
Line 21: Line 21:
 The picture above reminds me of where I'm from (Texas!); it's a pan of Texas toast being buttered. You'll be on your way to representing such things after this lesson. Let's take a look at these topics so we can make such lists of toast and other things.  The picture above reminds me of where I'm from (Texas!); it's a pan of Texas toast being buttered. You'll be on your way to representing such things after this lesson. Let's take a look at these topics so we can make such lists of toast and other things. 
  
-  - arrays +  - [[p5js-week-04#structuring_your_data_as_arrays|arrays]] 
-  - index/indices +  - [[p5js-week-04#index_indices|index/indices]]  
-  - push +  - [[p5js-week-04#push|push]]  
-  - pop +  - [[p5js-week-04#pop|pop]] 
-  - concat +  - [[p5js-week-04#joining_two_arrays_with_concat|concat]] 
-  - Math.floor +  - [[p5js-week-04#mathfloor|Math.floor]]  
-  - pick+  - [[p5js-week-04#pick|pick]] 
  
 That's a lot of topics to cover, so let's get started. That's a lot of topics to cover, so let's get started.
Line 37: Line 37:
 (Bread slice photo created by wayhomestudio https://www.freepik.com/photos/bread-slice ) (Bread slice photo created by wayhomestudio https://www.freepik.com/photos/bread-slice )
  
-You know now that functions are very important in JavaScript. They are one of the most important parts of programming. Another important part of programming is structuring your data so that it can be processed by functions. Structuring your data means putting it in the right shape. Arrays are one way to structure your data.+You know now that functions are very important in JavaScript. They are one of the most important parts of programming. Another important part of programming is structuring your data so that it can be processed by functions. Structuring your data means putting it in the right shape. <color black/pink>Arrays</color> are one way to structure your data.
  
-Sometimes we want to process a list of things. Arrays are like lists. We make arrays with square brackets, like this:+Sometimes we want to process a list of things. Arrays are like lists. We make arrays with __square brackets__, like this:
  
 <code> <code>
Line 49: Line 49:
 {{:toast-array.png?600|}} {{:toast-array.png?600|}}
  
-listOfToast is an array with four items. Each item has a position in the array. It might be strange for you, but the positions start from zero, not one. That means that "regular toast" is at position 0, "toast that isn't ready" at position 1, and so on. Another word meaning "position number" is "index". We can get the item from an array by using square brackets and the index. Try running each of these lines and see what happens. Do you understand why that happens?+listOfToast is an array with four items. Each item has a position in the array. It might be strange for you, but the positions start from zero, not one. That means that "regular toast" is at position 0, "toast that isn't ready" at position 1, and so on. Another word meaning "position number" is <color black/pink>"index"</color>. We can get the item from an array by using square brackets and the index. Try running each of these lines and see what happens. Do you understand why that happens?
  
 <code> <code>
Line 58: Line 58:
 </code>   </code>  
      
-We can find out how many items are in an array using a technique we haven't talked about much before: dot notation. We've used it, though, for the length of strings and in function calls like Math.floor. Dot notation is related to objects, which we'll study soon. We give the name of an object, then a dot, then the name of a property of the object. Arrays are a kind of object, so we can use this technique on arrays. One of the properties of arrays is their length. When we use it, it looks like this:+We can find out how many items are in an array using a technique we haven't talked about much before: <color black/pink>dot notation</color>. We've used it, though, for the length of strings and in function calls like <color black/pink>Math.floor</color>. Dot notation is related to objects, which we'll study soon. We give the name of an object, then a dot, then the name of a property of the object. Arrays are a kind of object, so we can use this technique on arrays. One of the properties of arrays is their length. When we use it, it looks like this:
  
   listOfToast.length   listOfToast.length
Line 87: Line 87:
 {{:push-buttered-toast.png?600|}} {{:push-buttered-toast.png?600|}}
  
-That's great for that list of toast, but what happens when we have a new piece of toast that we need to put into the list? In such a case, we need to use the __push__ method for arrays to add it to __the end__ of our list.+That's great for that list of toast, but what happens when we have a new piece of toast that we need to put into the list? In such a case, we need to use the <color black/pink>push</color> method for arrays to add it to the __end__ of our list.
  
-We can add some pieces of toast like this. The argument is the item that you want to add to the array:+We can add some pieces of toast like this. The <color black/pink>argument</color> is the item that you want to add to the array:
  
 <code> <code>
Line 101: Line 101:
 </code> </code>
  
-JavaScript tells you that push isn't defined; that's because it's only defined for the array class (class means type of object; we'll study this more soon).+JavaScript tells you that push isn't defined; that's because it's only defined for the array <color black/pink>class</color> (class means type of object; we'll study this more soon).
  
 We can add another piece in the same way: We can add another piece in the same way:
Line 131: Line 131:
 {{:burnt-toast.jpg?600|}} {{:burnt-toast.jpg?600|}}
  
-Nobody wants to eat that really burnt piece of toast. Let's get rid of it! In a similar way to push, we can also remove items __from the end__ of an array using the __pop__ method.+Nobody wants to eat that really burnt piece of toast. Let's get rid of it! In a similar way to push, we can also remove items __from the end__ of an array using the <color black/pink>pop</color> method.
  
   listOfToast.pop()   listOfToast.pop()
Line 149: Line 149:
 {{:unshift-perfect-toast.png?600|}} {{:unshift-perfect-toast.png?600|}}
  
-Push always puts our toast at the end of the list. What if we want to put it at the beginning? The unshift method adds an item to the beginning of an array. Try this:+Push always puts our toast at the end of the list. What if we want to put it at the beginning? The <color black/pink>unshift</color> method adds an item to the beginning of an array. Try this:
  
   listOfToast.unshift("perfect toast")   listOfToast.unshift("perfect toast")
Line 169: Line 169:
 </code> </code>
  
-We can join (connect) two arrays using the concat method. Notice that you need to assign the result of this method to a new variable. That's different from push, pop, and slice; these change the existing array. The concat method gives us a new array.+We can join (connect) two arrays using the <color black/pink>concat</color> method. Notice that you need to assign the result of this method to a new variable. That's different from push, pop, and slice; these change the existing array. The concat method gives us a new array.
  
 <code> <code>
Line 192: Line 192:
 {{:toast-on-the-floor-la_ley_de_murphy.jpg?600|}} {{:toast-on-the-floor-la_ley_de_murphy.jpg?600|}}
  
-Do you remember how we used Math.floor with Math.random to get a random number without a lot of numbers after the decimal? By the way, a number without anything after the decimal is called an integer. In JavaScript (and programming and computers), we call the numbers with lots of numbers after the decimal floating point numbers. +(picture from https://commons.wikimedia.org/wiki/File:LA_LEY_DE_MURPHY.jpg) 
 + 
 +Do you remember how we used Math.floor with Math.random to get a random number without a lot of numbers after the decimal? By the way, a number without anything after the decimal is called an <color black/pink>integer</color>. In JavaScript (and programming and computers), we call the numbers with lots of numbers after the decimal floating point <color black/pink>numbers</color>. 
  
 Anyway, it was like this. Anyway, it was like this.
Line 204: Line 206:
 <code> <code>
 function randomRange (max) { function randomRange (max) {
-  return Math.floor(max * Math.random()))+  return Math.floor(max * Math.random())
 } }
 </code> </code>
Line 216: Line 218:
 </code> </code>
  
-That's not as useful though as a function that lets us choose any minimum and maximum number. Remember that this one doesn't include the maximum number. Since it returns an integer, let's change the name:+That's not as useful though as a function that lets us choose any minimum and maximum number. Remember that this one doesn't include the maximum number. **Since it returns an integer, let's change the name**:
  
 <code> <code>
Line 222: Line 224:
   return Math.floor(min + ((max-min) * Math.random()))   return Math.floor(min + ((max-min) * Math.random()))
 } }
- 
 </code> </code>
  
 As a puzzle, you can think about how this function works. As a puzzle, you can think about how this function works.
 +
 +That means that if we one of a normal pair of dice, we need to do this:
 +
 +<code>
 +function regularDice () {
 +  return 1 + randomInteger(0,6)
 +}
 +</code>
 +
 +Try it!
 +
 +<code>
 +regularDice () 
 +</code>
  
 ==== pick ==== ==== pick ====
Line 257: Line 272:
 ==== translated toast ==== ==== translated toast ====
  
-We know how to choose the position of a shape that we draw by giving arguments for the x position and y position. There's another way to draw in different places, though. That way is using the function called translate. You can think of that function like moving the paper where you are drawing. Normally, the coordinates (0,0) are in the top left corner of the paper. When we use translate, we are changing the location of (0,0), making a new point (0,0). Watch what happens in this simple example:+We know how to choose the position of a shape that we draw by giving arguments for the x position and y position. There's another way to draw in different places, though. That way is using the function called <color black/pink>translate</color>. You can think of that function like moving the paper where you are drawing. Normally, the coordinates (0,0) are in the top left corner of the paper. When we use translate, we are changing the location of (0,0), making a new point (0,0). Watch what happens in this simple example:
  
 <HTML> <HTML>
Line 263: Line 278:
 </HTML> </HTML>
  
-Even though the x position and y position arguments are the same in each call to the rect function, the second rect is in a different place! That's because the call to translate between them changes the position of (0,0) to (100,100), making it the new (0,0). Another word for (0,0) is origin. We can also move the origin in the other direct using translate with negative numbers. Look at this:+Even though the x position and y position arguments are the same in each call to the rect function, the second rect is in a different place! That's because the call to translate between them changes the position of (0,0) to (200,200), making it the new (0,0). Another word for (0,0) is origin. We can also move the origin in the other direct using translate with negative numbers. Look at this:
  
 <HTML> <HTML>
Line 277: Line 292:
 ==== rotated toast ==== ==== rotated toast ====
  
-In the same way, we can use the rotate function to rotate rects...+In the same way, we can use the <color black/pink>rotate</color> function to rotate rects...
  
-One thing that is really important to remember is that in p5js, there are two different types of numbers that can be used to rotate things: degrees and radians. Probably in school you have learned about degrees but not radians. That's OK; we just need to be sure to tell p5js that we are using degrees. To do that, you should make sure that your setup function has this inside:+One thing that is really important to remember is that in p5js, there are two different types of numbers that can be used to rotate things: degrees and radians. Probably in school you have learned about degrees but not radians. That's OK; we just need to be sure to tell p5js that we are using __degrees__. To do that, you should make sure that your setup function has this inside: 
 + 
 +<code> 
 +angleMode(DEGREES); 
 +</code>
  
 Like translate, don't think about rotate as rotating just the shape you are drawing. Rotate is rotating the whole canvas where you are drawing. That means that after you rotate, everything will be drawn in a new way until you change the rotation again. You can change it back to the way that it was before, or you can change it to a new way, but everything you draw after rotate is going to be rotated. Like translate, don't think about rotate as rotating just the shape you are drawing. Rotate is rotating the whole canvas where you are drawing. That means that after you rotate, everything will be drawn in a new way until you change the rotation again. You can change it back to the way that it was before, or you can change it to a new way, but everything you draw after rotate is going to be rotated.
Line 301: Line 320:
 If we want the rects to extend diagonally down and right but also be rotated, we have to do different calculations about the x and y position. If we want the rects to extend diagonally down and right but also be rotated, we have to do different calculations about the x and y position.
  
-One more thing that may help you when rotating rects is changing the rect mode. There's a good explanation of rect mode on in the p5js reference:+One more thing that may help you when rotating rects is changing the <color black/pink>rect mode</color>. There's a good explanation of rect mode on in the p5js reference:
  
 https://p5js.org/reference/#/p5/rectMode https://p5js.org/reference/#/p5/rectMode
Line 319: Line 338:
 ====resetMatrix==== ====resetMatrix====
  
-One reason it's hard to use translate and rotate is that the changes accumulate. Sometimes this is useful, but sometimes it's confusing. If you're feeling confused, you can call resetMatrix to change everything back to the way it was when the canvas was first created.+One reason it's hard to use translate and rotate is that the changes accumulate. Sometimes this is useful, but sometimes it's confusing. If you're feeling confused, you can call <color black/pink>resetMatrix</color> to change everything back to the way it was when the canvas was first created.
  
 <code> <code>
Line 346: Line 365:
 <iframe src="https://editor.p5js.org/renick/sketches/NlqnzD6L4" width=99% height=800></iframe> <iframe src="https://editor.p5js.org/renick/sketches/NlqnzD6L4" width=99% height=800></iframe>
 </HTML> </HTML>
 +
 +You can also do cool things like this:
 +
 +<HTML>
 +<iframe src="https://editor.p5js.org/renick/sketches/ZlKUIOeCY" width=99% height=800></iframe>
 +</HTML>
 +
 +**Now, try to use this to rotate the earths in your earth drawing!**
  
 ==== using pick to choose random colors for our toast ==== ==== using pick to choose random colors for our toast ====
Line 392: Line 419:
 Now, can you use these things to make a better drawing of rainbow toast? Now, can you use these things to make a better drawing of rainbow toast?
  
-===== your next improved drawing =====+===== your assignment: an improved drawing using arrays and transforms=====
  
 Now that you can make arrays, translate things, and rotate them, **let's apply that to your drawings of robots, wolves, or flowers that you have been working on for the past few weeks**. You could try: Now that you can make arrays, translate things, and rotate them, **let's apply that to your drawings of robots, wolves, or flowers that you have been working on for the past few weeks**. You could try:
  • p5js-week-04.1652547034.txt.gz
  • Last modified: 3 years ago
  • by renick