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 [2023/06/26 00:02] – reina.chenp5js-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 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: <color black/pink>dot notation</color>. We've used it, though, for the length of strings and in function calls like <color black/yellow>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:+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 <color black/yellow>push</color> 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 <color black/pink>argument</color> 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:
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 <color black/yellow>pop</color> 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 <color black/yellow>unshift</color> 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 <color black/yellow>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.+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 272: 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 <color black/yellow>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:+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 292: Line 292:
 ==== rotated toast ==== ==== rotated toast ====
  
-In the same way, we can use the <color black/yellow>rotate</color> 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:
Line 338: 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 <color black/yellow>resetMatrix</color> 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 419: 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.1687762961.txt.gz
  • Last modified: 22 months ago
  • by reina.chen