Differences

This shows you the differences between two versions of the page.

--- p5js-week-06 [2022/06/04 09:33] – renick
+++ p5js-week-06 [2023/06/26 00:36] (current) – reina.chen
@@ Line 16: / Line 16: @@
 Let's learn how to do it the JavaScript way. Then we can use that to draw our toast, too!
+{{:french_toast_making.jpg?600|}}
+(photo from https://commons.wikimedia.org/wiki/File:French_toast_making.jpg)
+We need many tools to make and serve good toast: toaster, knife, plate, and so on. Then think about everything that's needed for making French toast! Like that, we're still building up all of our JavaScript tools so that we can make good digital toast.
 That means there are a lot of things to talk about:
@@ Line 26: / Line 32: @@
   - learning about the **forEach** method for arrays
   - ... and finally your drawings using objects, Points, and forEach!
-===== JavaScript to learn about objects and arrays=====
-{{:french_toast_making.jpg?600|}}
-(photo from https://commons.wikimedia.org/wiki/File:French_toast_making.jpg)
-We need many tools to make and serve good toast: toaster, knife, plate, and so on. Then think about everything that's needed for making French toast! Like that, we're still building up all of our JavaScript tools so that we can make good digital toast.
-Here's a list of some JavaScript topics we want to talk about today.
-  - using objects
-  - class
-  - property
-  - method
-  - Point class
-  - forEach
-We'll jump into p5js pretty quickly in this lesson so that we can learn more about these things.
 ===== 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 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:
@@ Line 58: / Line 45: @@
   }
-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.
+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 <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. 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.
   student1.name
@@ Line 66: / Line 55: @@
   student1.favoriteColor
-We can do that with toast, too! Here's the example from the beginning of the lesson in real JavaScript:
+===== toast objects =====
+{{:light-brown-toast-on-plate.jpg?600|}}
+(photo from https://pixabay.com/photos/breakfast-morning-toast-food-3836731/)
+We can do that with toast, too! Here's the example from the beginning of the lesson in real JavaScript. This object, which is assigned to the variable myToast, has four properties.
 <code>
@@ Line 77: / Line 72: @@
 </code>
-Try it out!
+Try it out! You can get the values of each property like this:
 <code>
@@ Line 91: / Line 86: @@
   - 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:
@@ Line 138: / Line 133: @@
   testObject2.property2
-Normally when we want to make objects, we define a class. A class is the definition of a type of object. A class includes a special function called a constructor which helps us to make objects of the type which is defined by the class.
+===== classes =====
-**We usually start variables, function names, and arguments with lowercase letters. However, we use uppercase letters to start class names.**
+{{:melba-toast.jpg?600|}}
-===== using objects in p5js =====
+(photo from https://world.openfoodfacts.org/product/5025820001834/melba-toast-aleyna)
 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 start a new class. A class 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.
-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:
+**We usually start variables, function names, and arguments with lowercase letters. However, we use uppercase letters to start class names.**
+Let's start a new class.
+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 {
@@ Line 167: / Line 166: @@
   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
-We can design functions that work specifically on objects from a class, and the class will make it more convenient to call those functions. Another name for these functions is methods. Let's make a method which draws the faces we make. First, let's try to draw a simple face. Notice how we use the keyword "this" in the draw method.
+===== using objects in p5js =====
+So far our class just keeps some information about toast, but it doesn't tell p5js how to draw our toast.
+We can design functions that work specifically on objects from a class, and the class will make it more convenient to call those functions. Another name for these functions is methods.
+Let's make a method which draws the toast we make. Notice how we use the keyword "this" in the draw method.
   class Toast {
@@ Line 186: / Line 191: @@
   }
-We can use the constructor as we did above, and then we can call the method to draw the toast. Call it inside the draw function in the p5js editor. It works like this:
+We can use the constructor as we did above, and then we can call the method to draw the toast. When you call a method, you have to write the object name, then a dot, then the method name, then parentheses. If the method has arguments, put them inside the parentheses. It's like this:
+  myToast.draw()
+Call it inside the draw function in the p5js editor. It works like this:
 <HTML>
@@ Line 194: / Line 203: @@
 ===== 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:
@@ Line 262: / 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.
-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.
@@ Line 323: / Line 332: @@
 ===== 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) {
@@ Line 333: / Line 342: @@
 We can call it like this:
+  let testArray1 = ["Nobody","likes","burnt","toast","."]
   printAll (testArray1)
@@ Line 339: / Line 349: @@
   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.
@@ Line 346: / Line 366: @@
   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 =====