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-05 [2022/05/25 23:54] – renickp5js-week-05 [2023/07/29 23:42] (current) – renick
Line 1: Line 1:
-====== p5js week 06 ======+====== p5js week 05 ======
  
 {{:toast-w-nutella-800px-nutella_for_breakfast_-_flickr_-_love.jsc.jpg?600|}} {{:toast-w-nutella-800px-nutella_for_breakfast_-_flickr_-_love.jsc.jpg?600|}}
Line 42: Line 42:
 Bon appetit! Bon appetit!
  
-Imagine if every time you wanted someone to __make toast__ you had to tell them each and every step? It would be really inconvenient! Luckily, we can just tell someone "hey, please make me some toast" and they can do it because they know that '__make toast__' means to do all of those steps.+Imagine if every time you wanted someone to __make toast__ you had to tell them each and every step? It would be really inconvenient! Luckily, **we can just tell someone "hey, please make me some toast" and they can do it** because they know that **'__make toast__' means to do all of those steps**.
  
-That's a big part of what language and programming are all about. We wrap up some complicated situation and give it one word. In programming, we call that __encapsulation__.+That's a big part of what language and programming are all about. We wrap up some complicated situation and give it one word. In programming, we call that <color black/pink>encapsulation</color> ([[https://en.wikipedia.org/wiki/Encapsulation_(computer_programming)]] ).
  
 ====== generalizing about toast ====== ====== generalizing about toast ======
Line 62: Line 62:
   - and so on...   - and so on...
  
-Even though these are all different kinds of toast, they're all still toast! All of them are bread, and all of the bread goes into and comes out of the toaster! That's what we mean by generalization.+Even though these are all different kinds of toast, they're all still toast! All of them are bread, and all of the bread goes into and comes out of the toaster! That's what we mean by <color black/pink>generalization</color>.
  
 ====== procedure for toast ====== ====== procedure for toast ======
Line 70: Line 70:
 (photo from https://www.maxpixel.net/Food-Toast-Bread-Toaster-2617854) (photo from https://www.maxpixel.net/Food-Toast-Bread-Toaster-2617854)
  
-There's another point here that is important for programming: if you change the order of the steps, you don't get toast! Think about what happens if:+There's another point here that is important for programming: **if you change the order of the steps, you don't get toast!** Think about what happens if:
  
   - you push the lever down to start the toaster before you get the bread   - you push the lever down to start the toaster before you get the bread
Line 76: Line 76:
   - you put the bread on the plate before you toast it   - you put the bread on the plate before you toast it
  
-Each one is a failure to make toast. You or the person who you are making toast for is going to be really disappointed. Having the right steps in the right order means having the right procedure. That's what programmers mean when they talk about procedural programming: doing things in the computer in the right order to get the result that we want.+Each one is a failure to make toast. You or the person who you are making toast for is going to be really disappointed. **Having the right steps in the right order means having the right procedure.** That's what programmers mean when they talk about <color black/pink>procedural programming</color>: **doing things in the computer in the right order to get the result that we want**.
  
 ====== JavaScript ====== ====== JavaScript ======
Line 99: Line 99:
 https://renickbell.net/doku.php?id=p5js-week-04#using_pick_to_choose_random_colors_for_our_toast https://renickbell.net/doku.php?id=p5js-week-04#using_pick_to_choose_random_colors_for_our_toast
  
-That is something that we might want to do many times. In programming, whenever there are some steps that we think we might need to repeat more than once, we want to make a function. That's like the discussion about __encapsulation__ of a procedure for toast above. Let's try to take those steps about making a color array and __encapsulate__ it into a colorArray function that we can use anytime.+That is something that we might want to do many times. In programming, whenever there are some steps that we think we might need to repeat more than once, we want to make a function. That's like the discussion about encapsulation of a procedure for toast above. Let's try to take those steps about making a color array and encapsulate it into a colorArray function that we can use anytime.
  
 First, look at the steps that we did last time. I'll leave out some things to focus on the stuff about color. Here's the code: First, look at the steps that we did last time. I'll leave out some things to focus on the stuff about color. Here's the code:
Line 129: Line 129:
   - later in our code, we could use the colors from the new array   - later in our code, we could use the colors from the new array
  
-First, let's try to __encapsulate__ this by putting it into a function.+First, let's try to encapsulate this by putting it into a function.
  
 ===== making a someColors function ===== ===== making a someColors function =====
Line 188: Line 188:
 </code> </code>
  
-===== when you do something a lot, generalize! =====+===== when you do something a lot, encapsulate and generalize! =====
  
-This time we made an array with colors. Another time we might make an array with sizes. Another time it might be shapes. It would be cool if we had a function that could help us to make arrays in every case.  When you do something more than one time (especially if you do often), write a function instead of writing out a lot of complicated code each time. Don't repeat yourself. After you encapsulate it, you add some arguments to make it more useful. That's what generalization is.+This time we made an array with colors. Another time we might make an array with sizes. Another time it might be shapes. It would be cool if we had a function that could help us to make arrays in every case.  **When you do something more than one time (especially if you do often), write a function instead of writing out a lot of complicated code each time. Don't repeat yourself. After you encapsulate it, you add some arguments to make it more useful. That's what generalization is.**
  
 It's just like what I said earlier, we want the computer and other programmers to understand that "make toast" means a certain set of steps. Here, we want the computer and other programmers to understand a particular way of making an array. We encapsulate the process of making an array and then we generalize to make it more useful in more cases. It's just like what I said earlier, we want the computer and other programmers to understand that "make toast" means a certain set of steps. Here, we want the computer and other programmers to understand a particular way of making an array. We encapsulate the process of making an array and then we generalize to make it more useful in more cases.
Line 263: Line 263:
 </code> </code>
  
-However, there's another way to write functions that can be shorter: an **arrow function**. An arrow function is a function which is made using the arrow operator instead of the function keyword. It looks like this:+However, there's another way to write functions that can be shorter: an arrow function. An <color black/pink>arrow</color> function is a function which is made using the arrow operator instead of the function keyword. It looks like this:
  
 <code> <code>
Line 275: Line 275:
 </code> </code>
  
-This symbol => is the arrow function operator. On the left side, we put the argument. On the right side we write what we want to do. If it's simple like this (one argument, one step on the right side) then you don't need any parentheses, curly braces, or the return keyword. If you need more than one argument or need to do more than one step on the right side, it's a little more complicated. We'll practice that in the future, but for now, let's try using this simple version.+This symbol <color black/yellow>=></color> is the arrow function operator. On the left side, we put the argument. On the right side we write what we want to do. If it's simple like this (one argument, one step on the right side) then you don't need any parentheses, curly braces, or the return keyword. If you need more than one argument or need to do more than one step on the right side, it's a little more complicated. We'll practice that in the future, but for now, let's try using this simple version.
  
 If you want to learn more about arrow functions right away, take a look at this page: If you want to learn more about arrow functions right away, take a look at this page:
Line 314: Line 314:
  
 That's also cool, right? Using buildArray and an arrow function, it became very easy to make someColors. That's also cool, right? Using buildArray and an arrow function, it became very easy to make someColors.
 +
 +<HTML>
 +<iframe src="https://editor.p5js.org/renick/sketches/m0SW6iVUX" width=99% height=800></iframe>
 +</HTML>
  
 ====== p5js ====== ====== p5js ======
  
-Now we can learn some new things in p5js before we apply the techniques above to our drawings. Here's what we want to learn:+Now we can learn some new things in p5js before we apply the techniques which are described above to our drawings. Here's what we want to learn:
  
   - line   - line
Line 341: Line 345:
 =====beginShape and endShape===== =====beginShape and endShape=====
  
-Up to now, we have been drawing things using collections of shapes to make a more complicated shape. However, there is a set of functions we can use to draw irregular shapes (ones that aren't rects, ellipses, etc). That's the set that is shown in examples here using beginShape etc.:+Up to now, we have been drawing things using collections of shapes to make a more complicated shape. However, there is a set of functions we can use to draw irregular shapes (ones that aren't rects, ellipses, etc). That's the set that is shown in examples here using <color black/pink>beginShape</color> etc.:
  
 https://p5js.org/reference/#/p5/beginShape https://p5js.org/reference/#/p5/beginShape
Line 351: Line 355:
 </HTML> </HTML>
  
-First, you call the beginShape function. Then you give a list of vertices (vertices is the plural of vertex). A vertex is a point, and we describe it with arguments for x position and y position. When you have described all of the points, you call the endShape function. You can use as many vertices as you want. These shapes have four, but you can have three, five, or as many as you want.+First, you call the beginShape function. Then you give a list of vertices (vertices is the plural of vertex). A vertex is a point, and we describe it with arguments for x position and y position. When you have described all of the points, you call the <color black/pink>endShape</color> function. You can use as many vertices as you want. These shapes have four, but you can have three, five, or as many as you want.
  
 If you use CLOSE as the argument to endShape, p5js will automatically connect the last point to the first point and fill the shape according to the current state of fill; that means how it is filled depends on the last time you called the fill function, just like for rect or ellipse. If you don't use CLOSE, it **will not** connect the last point to the first point with a line. If you use CLOSE as the argument to endShape, p5js will automatically connect the last point to the first point and fill the shape according to the current state of fill; that means how it is filled depends on the last time you called the fill function, just like for rect or ellipse. If you don't use CLOSE, it **will not** connect the last point to the first point with a line.
Line 365: Line 369:
 </HTML> </HTML>
  
-Actually, there's a mistake in there if we're trying to draw something like a grid of similar shapes.+Notice how the scaleFactor argument can be used to make the shape bigger or smaller. In the function call, try changing scaleFactor from 1 to 2, and then to 5. Also try changing the other arguments and see what happens. 
 + 
 +Instead of adding the moveX and moveY arguments to the positions of the vertices, we could have used <color black/pink>translate</color>. You might want to rewrite this using translate to see if you understand.
  
-Now we can use that in a for-loop to draw funky random shaped toast.+Actually, there's a mistake in this code if we're trying to draw something like a grid of similar shapes. I wonder if you can find it. Let's try to use that code in a for-loop to draw funky random shaped toast.
  
 Wait a minute, this looks more like a bunch of green onions than toast... Wait a minute, this looks more like a bunch of green onions than toast...
Line 389: Line 395:
 Try to use these techniques to make a p5js drawing which has 100 or more pieces of Terrific Toast. Try to use these techniques to make a p5js drawing which has 100 or more pieces of Terrific Toast.
  
-====== your NEW drawings ======+====== your NEW drawings with custom array builders and free shapes======
  
 Let's start new drawings. Make a canvas that is 1800 wide and 900 tall. I want you to fill it with either: Let's start new drawings. Make a canvas that is 1800 wide and 900 tall. I want you to fill it with either:
  • p5js-week-05.1653548085.txt.gz
  • Last modified: 3 years ago
  • by renick