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-06 [2022/06/04 21:02] – renickp5js-week-06 [2023/06/26 00:36] (current) – reina.chen
Line 35: Line 35:
 ===== objects ===== ===== objects =====
  
-We have talked about organizing data before; one way that we have learned is grouping data into lists called arrays. JavaScript gives us another way to organize data (another way to say this is "structure data"). We can make an object by using the curly braces and separating the items with commas, just like we do with arrays. Objects contain things called properties. We make objects and properties to represent things and their characteristics.+We have talked about organizing data before; one way that we have learned is grouping data into lists called <color black/pink>arrays</color>. JavaScript gives us another way to organize data (another way to say this is "structure data"). We can make an <color black/pink>object</color> by using the curly braces and separating the items with commas, just like we do with arrays. Objects contain things called <color black/pink>properties</color>. We make objects and properties to represent things and their characteristics.
  
 For example, we can make an object which represents a student by giving it properties for the student's name, the student's age, and the student's favorite color. It looks like this: For example, we can make an object which represents a student by giving it properties for the student's name, the student's age, and the student's favorite color. It looks like this:
Line 47: Line 47:
 The object is assigned to the variable called student1. It has three properties: name, age, and favoriteColor. Each property has a value. For the property of name, the value is "Emma Jones". For the property of age, the value is 13. For favoriteColor, the value is "green". The object is assigned to the variable called student1. It has three properties: name, age, and favoriteColor. Each property has a value. For the property of name, the value is "Emma Jones". For the property of age, the value is 13. For favoriteColor, the value is "green".
  
-Later, when we want to know some data inside an object, we can ask for it using something called dot notation. You have seen dot notation before; we use it when we want to know the length of an array. Length is a property of arrays.+Later, when we want to know some data inside an object, we can ask for it using something called <color black/pink>dot notation</color>. You have seen dot notation before; we use it when we want to know the length of an array. Length is a property of arrays.
  
 Let's try asking for the values of the object we made before. We write the name of the object, then a dot, then the name of the property we want to access. Try each of these and see what happens. Let's try asking for the values of the object we made before. We write the name of the object, then a dot, then the name of the property we want to access. Try each of these and see what happens.
Line 86: Line 86:
   - easier to make more things like them   - easier to make more things like them
  
-Objects (and classes) help us to do that. Objects also have functions that only work on them called methods, which we'll look at more later in this lesson.+Objects (and classes) help us to do that. Objects also have functions that only work on them called <color black/pink>methods</color>, which we'll look at more later in this lesson.
  
 So remember, start empty objects with curly braces: So remember, start empty objects with curly braces:
Line 141: Line 141:
 Let's try using objects in p5js, and along the way we'll learn more about making them. We'll use it to make toast, of course! Let's try using objects in p5js, and along the way we'll learn more about making them. We'll use it to make toast, of course!
  
-Normally when we want to make objects, we define a class. A class is the definition of a type of object. It is a tool for making a particular type of objects and collecting functions that only work on that type of objects. You know the word "class" like this class for creative coding that we're in right now. However, "class" has another meaning which is kind of like "kind" or "type". When we make a class, we're making a kind of thing, but we're not making the things themselves yet.+Normally when we want to make objects, we define a class. A <color black/pink>class</color> is the definition of a type of object. It is a tool for making a particular type of objects and collecting functions that only work on that type of objects. You know the word "class" like this class for creative coding that we're in right now. However, "class" has another meaning which is kind of like "kind" or "type". When we make a class, we're making a kind of thing, but we're not making the things themselves yet.
  
-Each class starts with a special function called a constructor. We're going to use the constructor later to construct (or make) objects which belong to the class.+Each class starts with a special function called a <color black/pink>constructor</color>. We're going to use the constructor later to construct (or make) objects which belong to the class.
  
 **We usually start variables, function names, and arguments with lowercase letters. However, we use uppercase letters to start class names.** **We usually start variables, function names, and arguments with lowercase letters. However, we use uppercase letters to start class names.**
Line 149: Line 149:
 Let's start a new class.  Let's start a new class. 
  
-It starts like this example. Notice the special constructor keyword used inside; and this added to the beginning of each property. Also notice that you need to use equals and semicolons:+It starts like this example. Notice the special <color black/yellow>constructor</color> keyword used inside; and <color black/yellow>this</color> added to the beginning of each property. Also notice that you need to use equals and semicolons:
  
   class Toast {   class Toast {
Line 166: Line 166:
   let toast1 = new Toast (100, "brown", 150, 150)   let toast1 = new Toast (100, "brown", 150, 150)
      
-Notice that you have to use the keyword new to make a new Toast object. Now you can check what has been stored:+Notice that you have to use the keyword <color black/yellow>new</color> to make a new Toast object. Now you can check what has been stored:
  
   toast1   toast1
Line 203: Line 203:
 ===== without a class for Points ===== ===== without a class for Points =====
  
-One of the things that our drawings often need to use is coordinates or points on a grid. Think about it... we have the x and y values for the position of a rect or ellipse, for starters. Some people have used the triangle function before, and it requires several arguments which are all x and y positions. Using beginShape and endShape, you can describe much more complicated shapes using x and y coordinates. Because they are so common, it would be useful to have some abstractions (encapsulated and generalized procedures in functions) that make working with points easier. Let's do that! You can try out all of the code below in the browser console.+One of the things that our drawings often need to use is coordinates or points on a grid. Think about it... we have the x and y values for the position of a rect or ellipse, for starters. Some people have used the triangle function before, and it requires several arguments which are all x and y positions. Using beginShape and endShape, you can describe much more complicated shapes using x and y coordinates. Because they are so common, it would be useful to have some <color black/pink>abstractions</color> (encapsulated and generalized procedures in functions) that make working with points easier. Let's do that! You can try out all of the code below in the browser console.
  
 We make classes when we have some data that we want to group together. In our class, that would clearly be x and y. You might think that you could just use arrays, but let's see why that might be confusing. Start with the point (0,0). As an array in JavaScript, we might write: We make classes when we have some data that we want to group together. In our class, that would clearly be x and y. You might think that you could just use arrays, but let's see why that might be confusing. Start with the point (0,0). As an array in JavaScript, we might write:
Line 271: Line 271:
 We can change our Toast class to use the Point class, then we can make the objects using buildArray. Finally, we can use a for-loop to draw all of the Toast objects.  We can change our Toast class to use the Point class, then we can make the objects using buildArray. Finally, we can use a for-loop to draw all of the Toast objects. 
  
-Notice how we use the "new" keyword, which means the constructor, in the arrow function inside of the calls to the buildArray function.+Notice how we use the <color black/yellow>"new"</color> keyword, which means the constructor, in the arrow function inside of the calls to the buildArray function.
  
 When we want to draw the objects, we call the draw method inside the draw function at the end. When we want to draw the objects, we call the draw method inside the draw function at the end.
Line 332: Line 332:
 ===== forEach ===== ===== forEach =====
  
-Arrays have other useful methods. We want to learn one called forEach today. It takes one argument. The special thing about this argument is that it's not a number or a string; it's a function. That means we can use it as a replacement for a for-loop. For-loops are easy to make mistakes with because they require more code, so this is really useful. Let's look at the version with a for-loop first:+Arrays have other useful methods. We want to learn one called <color black/pink>forEach</color> today. It takes one argument. The special thing about this argument is that it's not a number or a string; it's a function. We can use forEach as a replacement for a for-loop, and hopefully it will make some things easier and safer to write. For-loops are easy to make mistakes with because they require more code, so this is really useful. Let's look at the version with a for-loop first:
  
   function printAll (inputArray) {   function printAll (inputArray) {
Line 342: Line 342:
 We can call it like this: We can call it like this:
  
 +  let testArray1 = ["Nobody","likes","burnt","toast","."]
   printAll (testArray1)   printAll (testArray1)
      
Line 348: Line 349:
   testArray1.forEach(console.log)   testArray1.forEach(console.log)
      
-It's really that short. We'll talk about the output you just saw later. Notice that the argument for forEach is a function. We just include the name of the function, without calling it. forEach calls the function on each item of the array, just like a for-loop does with a counter used to get the value of an item at an index. JavaScript programmers have a special name for this kind of function-as-an-argument. It's called a callback.+We can use this to make a new printAll, called printAll2: 
 + 
 +  function printAll2 (inputArray) { 
 +    inputArray.forEach(console.log) 
 +  } 
 +   
 +It's really that short. We can now call this function just like we did above: 
 + 
 +  printAll2(testArray1) 
 + 
 +We'll talk about the output you just saw later. Notice that the argument for forEach is a function. We just include the name of the function, without calling it. forEach calls the function on each item of the array, just like a for-loop does with a counter used to get the value of an item at an index. JavaScript programmers have a special name for this kind of function-as-an-argument. It's called a <color black/pink>callback</color>.
  
 There are three types of functions we can use in forEach. The first type is a function which requires a single argument; we'll talk about the other two types another day. In today's case, forEach will call the function once per item in the array, with each item as an argument.  There are three types of functions we can use in forEach. The first type is a function which requires a single argument; we'll talk about the other two types another day. In today's case, forEach will call the function once per item in the array, with each item as an argument. 
Line 355: Line 366:
  
   let testArray2 = [];   let testArray2 = [];
-  function add1 (x) {testArray2.push(x + 1)}+  function addExclamation (x) {testArray2.push(x + "!")}
      
-We're going to use forEach and add1 to build the array called testArray2. When we use add1 as the callback, forEach is going to take each item from the array and pass it to add1. Let's try it:+We're going to use forEach and add1 to build the array called testArray2. When we use add1 as the callback, forEach is going to take each item from the array and pass it to add1. Try each of these lines and see what happens:
  
-  testArray1.forEach(add1)+  testArray1.forEach(addExclamation) 
 +  testArray2 
 +  testArray2.forEach(console.log) 
 +  printAll2(testArray2)
  
 ===== using forEach for toast ===== ===== using forEach for toast =====
  • p5js-week-06.1654401748.txt.gz
  • Last modified: 3 years ago
  • by renick