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/27 10:56] – 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 44: Line 44:
 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 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 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>
  
-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. +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 translate.+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.
  
 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. 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.
Line 391: 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.1653674212.txt.gz
  • Last modified: 3 years ago
  • by renick