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-01 [2023/06/23 02:08] – reina.chenp5js-week-01 [2023/07/03 03:47] (current) – reina.chen
Line 20: Line 20:
  
 Now that you've done that, let's learn more about how it all works. Now that you've done that, let's learn more about how it all works.
 +
 +===== When you have trouble... =====
 +
 +You can use the "share" function in the File menu of the p5js editor to share the code you are working on with a teacher.
 +
 +Another good way to share you code is to put it on Pastebin and share the link with a teacher: https://pastebin.com/
  
 ===== What's a function? ===== ===== What's a function? =====
Line 29: Line 35:
 (picture credit: https://www.flickr.com/photos/dok1/20326842171 ) (picture credit: https://www.flickr.com/photos/dok1/20326842171 )
  
-The program you just looked at above has nine <color black/pink>[[p5js-week-01#what_s_a_function|function]]</color> in it:+The program you just looked at above has nine function in it:
   - setup   - setup
   - draw   - draw
Line 40: Line 46:
   - text   - text
  
-When you are programming, you use special symbols to tell the computer what you mean. The special symbols, like __parentheses__ and __curly braces__, have to be in the right places; otherwise, the computer can't understand what you mean. The basic pattern for making a <color black/pink>[[p5js-week-01#what_s_a_function|function]]</color> is this:+When you are programming, you use special symbols to tell the computer what you mean. The special symbols, like __parentheses__ and __curly braces__, have to be in the right places; otherwise, the computer can't understand what you mean. The basic pattern for making a function is this:
  
 <code> <code>
Line 55: Line 61:
 https://www.programiz.com/javascript/keywords-identifiers https://www.programiz.com/javascript/keywords-identifiers
  
-The __parentheses</color__ contain the <color black/pink>[[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]]</color> (arguments are inputs; this is explained more below), and the __curly braces__ contain what the function does. This is like making a toaster!+The __parentheses__ contain the [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]] (arguments are inputs; this is explained more below), and the __curly braces__ contain what the function does. This is like making a toaster!
  
 {{:inside-toaster-800px-toaster_filaments.jpg?400|}} {{:inside-toaster-800px-toaster_filaments.jpg?400|}}
Line 61: Line 67:
 (picture credit: https://commons.wikimedia.org/wiki/File:Toaster_Filaments.JPG) (picture credit: https://commons.wikimedia.org/wiki/File:Toaster_Filaments.JPG)
  
-When you <color black/pink>call a function</color> (that means to use a function), you just write the function name and __parentheses__, and you write the <color black/pink>[[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]]</color> inside the __parentheses__. Think about "calling" like calling the function's name, just like you call your friend's name to get them to come to help you. Calling a function is like putting the bread in the toaster and pushing down the button or lever. +When you <color black/pink>call a function</color> (that means to use a function), you just write the function name and __parentheses__, and you write the arguments inside the __parentheses__. Think about "calling" like calling the function's name, just like you call your friend's name to get them to come to help you. Calling a function is like putting the bread in the toaster and pushing down the button or lever. 
  
 {{:pushing-button-toaster-aid27600-v4-728px-make-toast-step-7-version-2.jpg?400|}} {{:pushing-button-toaster-aid27600-v4-728px-make-toast-step-7-version-2.jpg?400|}}
Line 67: Line 73:
 (picture credit: https://www.wikihow.life/images/thumb/7/77/Make-Toast-Step-7-Version-2.jpg/aid27600-v4-728px-Make-Toast-Step-7-Version-2.jpg.webp ; available under Creative Commons license http://creativecommons.org/licenses/by-nc-sa/3.0/ ) (picture credit: https://www.wikihow.life/images/thumb/7/77/Make-Toast-Step-7-Version-2.jpg/aid27600-v4-728px-Make-Toast-Step-7-Version-2.jpg.webp ; available under Creative Commons license http://creativecommons.org/licenses/by-nc-sa/3.0/ )
  
-We'll talk about <color black/pink>[[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]]</color> in just a moment.+We'll talk about arguments in just a moment.
  
-The program you looked at above <color black/pink>[[p5js-week-01#what_s_a_function|declares]]</color> two functions:+The program you looked at above [[p5js-week-01#what_s_a_function|declares]] two functions:
   - setup   - setup
   - draw   - draw
  
-It <color black/pink>[[p5js-week-01#what_s_a_function|calls]]</color> the other functions:+It [[p5js-week-01#what_s_a_function|calls]] the other functions:
   - background   - background
   - fill   - fill
Line 83: Line 89:
 ===== What's an argument? What's a variable? ===== ===== What's an argument? What's a variable? =====
  
-<color black/pink>Arguments</color> ([[https://en.wikipedia.org/wiki/Parameter_(computer_programming)#:~:text=In%20computer%20programming%2C%20a%20parameter,as%20input%20to%20the%20subroutine.]]) are the things that you put into function. It's like the uncooked bread in our toaster analogy. +<color black/pink>Arguments</color> ([[https://en.wikipedia.org/wiki/Parameter_(computer_programming)]] ) are the things that you put into function. It's like the uncooked bread in our toaster analogy. 
  
 {{:untoasted-toast-74375_960_720.jpg?400|}} {{:untoasted-toast-74375_960_720.jpg?400|}}
Line 91: Line 97:
 You have to put them into the __parentheses__.  You have to put them into the __parentheses__. 
  
-When you <color black/pink>[[p5js-week-01#what_s_a_function|declare]]</color> a function, you give them names. Those names are called <color black/pink>[[p5js-week-01#variables|variables]]</color>. That's because the value is variable, or can change.+When you [[p5js-week-01#what_s_a_function|declare a function]], you give them names. Those names are called [[p5js-week-01#variables|variables]]. That's because the value is variable, or can change.
  
-In the <color black/pink>[[p5js-week-01#what_s_a_function|function]]</color> which are declared above, notice that there are no <color black/pink>arguments</color>.+In the [[p5js-week-01#what_s_a_function|function]] which are declared above, notice that there are no [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]].
  
-When we <color black/pink>[[p5js-week-01#what_s_a_function|call a function]]</color>, we add the things we want to use in the function (that's like the bread for the toaster) into the __parentheses__. If there is more than one <color black/pink>[[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]]</color>, you should put a __comma__ between them. Notice that:+When we [[p5js-week-01#what_s_a_function|call a function]], we add the things we want to use in the function (that's like the bread for the toaster) into the __parentheses__. If there is more than one [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]], you should put a __comma__ between them. Notice that:
  
   - the createCanvas function is called with two arguments: 800 and 800;   - the createCanvas function is called with two arguments: 800 and 800;
Line 110: Line 116:
 In this section, let's talk about these things so that we can declare our own function:  In this section, let's talk about these things so that we can declare our own function: 
  
-  - using the <color black/pink>[[p5js-week-01#the_console|console]]</color> +  - using the [[p5js-week-01#the_console|console]] 
-  - using <color black/pink>[[p5js-week-01#variables|variables]]</color>+  - using [[p5js-week-01#variables|variables]]
   - calling and declaring functions   - calling and declaring functions
   - the <color black/yellow>return</color> keyword   - the <color black/yellow>return</color> keyword
-  - <color black/pink>strings</color>+  - [[p5js-week-01#strings|strings]]
   - length   - length
-  - order of <color black/pink>execution</color> +  - order of execution
  
 ==== the console ==== ==== the console ====
Line 122: Line 128:
 We can use JavaScript in several places. One is the p5js editor which we saw earlier. You also have a JavaScript programming environment in your browser without even going to a website. Let's try it out.  We can use JavaScript in several places. One is the p5js editor which we saw earlier. You also have a JavaScript programming environment in your browser without even going to a website. Let's try it out. 
  
-On many computers, you can press the F12 key at the top right corner of your keyboard to bring out the JavaScript <color black/pink>[[p5js-week-01#the_console|console]]</color> ([[https://en.wikipedia.org/wiki/Console_application]]). On some computers, you might need to press the Fn button on the bottom left corner of the keyboard at the same time. If you can't make the keys work or want another way, you can go to the menu and look for tools or developer tools and choose the browser console from that menu. Then you'll see a panel open in your browser, probably on the right side of the screen. Make sure that you have the console section open.+On many computers, you can press the F12 key at the top right corner of your keyboard to bring out the JavaScript <color black/pink>console</color> ([[https://en.wikipedia.org/wiki/Console_application]]). On some computers, you might need to press the Fn button on the bottom left corner of the keyboard at the same time. If you can't make the keys work or want another way, you can go to the menu and look for tools or developer tools and choose the browser console from that menu. Then you'll see a panel open in your browser, probably on the right side of the screen. Make sure that you have the console section open.
  
 In a way, you can think about JavaScript like a very powerful and fast calculator.  In a way, you can think about JavaScript like a very powerful and fast calculator. 
  
-Try it! In the <color black/pink>[[p5js-week-01#the_console|console]]</color>, type 2 + 2 and hit the enter key. You should see that a four appears below where you typed it.+Try it! In the [[p5js-week-01#the_console|console]], type 2 + 2 and hit the enter key. You should see that a four appears below where you typed it.
  
-Now let's use a function to program the famous "hello world" program. Type the following command in the <color black/pink>[[p5js-week-01#the_console|console]]</color>. It's a function called console.log with one argument, "hello world":+Now let's use a function to program the famous "hello world" program. Type the following command in the [[p5js-week-01#the_console|console]]. It's a function called console.log with one argument, "hello world":
  
 <code> <code>
Line 146: Line 152:
 You can choose **almost** any name that you want (scroll down to "reserved key words" on this page if you want to see the ones that you cannot use: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar). You can choose **almost** any name that you want (scroll down to "reserved key words" on this page if you want to see the ones that you cannot use: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar).
  
-Let's <color black/pink>[[p5js-week-01#what_s_a_function|declare]]</color> (or make) a <color black/pink>[[p5js-week-01#variables|variable]]</color> and test it. There are a few ways, but we'll start with this one: the 'let' keyword. Type this in the console and press enter.+Let's [[p5js-week-01#what_s_a_function|declare]] (or make) a [[p5js-week-01#variables|variable]] and test it. There are a few ways, but we'll start with this one: the 'let' keyword. Type this in the console and press enter.
  
 <code> <code>
Line 158: Line 164:
 </code> </code>
  
-<color black/yellow>'let'</color> tells the computer to make a <color black/pink>[[p5js-week-01#variables|variable]]</color> with the name that we give it. After we use <color black/yellow>'let'</color> to declare a variable, we can't use <color black/yellow>'let'</color> with the same variable name. This is to protect us. If we want to change the value, we just use the name and the equal sign again, like this:+<color black/yellow>'let'</color> tells the computer to make a [[p5js-week-01#variables|variable]] with the name that we give it. After we use <color black/yellow>'let'</color> to declare a variable, we can't use <color black/yellow>'let'</color> with the same variable name. This is to protect us. If we want to change the value, we just use the name and the equal sign again, like this:
  
 <code> <code>
Line 167: Line 173:
 Now you can see that myNumber has a new value. Now you can see that myNumber has a new value.
  
-This means that we ask the computer to calculate 2 + 2 for us, then we store the result in a box called myNumber. Now that we've stored it, we can use it. Try typing this in the <color black/pink>[[p5js-week-01#the_console|console]]</color> and then press enter:+This means that we ask the computer to calculate 2 + 2 for us, then we store the result in a box called myNumber. Now that we've stored it, we can use it. Try typing this in the [[p5js-week-01#the_console|console]] and then press enter:
  
 <code> <code>
Line 173: Line 179:
 </code> </code>
  
-Notice that 104 doesn't come out in the <color black/pink>[[p5js-week-01#the_console|console]]</color>; what comes out is 20100. That's because we changed the <color black/pink>value</color> of myNumber.+Notice that 104 doesn't come out in the [[p5js-week-01#the_console|console]]; what comes out is 20100. That's because we changed the <color black/pink>value</color> ([[https://en.wikipedia.org/wiki/Value_(computer_science)]] ) of myNumber.
  
 We could store this one, too, like this: We could store this one, too, like this:
Line 185: Line 191:
 ==== using functions and variables ==== ==== using functions and variables ====
  
-Now we can use the <color black/pink>[[p5js-week-01#variables|variable]]</color> we made along with the __console.log__ function. Try this:+Now we can use the [[p5js-week-01#variables|variable]] we made along with the __console.log__ function. Try this:
  
 <code> <code>
Line 193: Line 199:
 ==== calling and making functions ==== ==== calling and making functions ====
  
-Let's <color black/pink>[[p5js-week-01#what_s_a_function|declare a function]]</color> now. Remember, this is like building a toaster:+Let's [[p5js-week-01#what_s_a_function|declare a function]] now. Remember, this is like building a toaster:
  
 {{:toaster-repair-15549986906_c836258f0a_4k.jpg?400|}} {{:toaster-repair-15549986906_c836258f0a_4k.jpg?400|}}
Line 205: Line 211:
 </code> </code>
  
-Between the function <color black/pink>keyword</color> and the __parentheses__ for our <color black/pink>[[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]]</color>, we need to add a function name. Let's call our function myMath:+Between the function [[p5js-week-01#what_s_a_function|keyword]] and the __parentheses__ for our [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]], we need to add a function name. Let's call our function myMath:
  
 <code> <code>
Line 211: Line 217:
 </code> </code>
  
-We can already <color black/pink>[[p5js-week-01#what_s_a_function|call this function]]</color>. When you call a function, you have to add the parentheses after the function name. We can call our function like this:+We can already [[p5js-week-01#what_s_a_function|call this function]]. When you call a function, you have to add the parentheses after the function name. We can call our function like this:
  
 <code> <code>
Line 223: Line 229:
 </code> </code>
  
-Our input, the <color black/pink>[[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]]</color>, is called someNumber. We could choose any name we want. It's good to choose a name that will help you remember what you should put in. It should be a name that will teach other people about what your function does. We could have called it aNumber or input or inputNumber. We even could have called it strawberry or xAjsjRl, but those wouldn't have been good names because they don't explain what kind of argument should go in. It's the same for the function name.+Our input, the [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]], is called someNumber. We could choose any name we want. It's good to choose a name that will help you remember what you should put in. It should be a name that will teach other people about what your function does. We could have called it aNumber or input or inputNumber. We even could have called it strawberry or xAjsjRl, but those wouldn't have been good names because they don't explain what kind of argument should go in. It's the same for the function name.
  
 Inside the __curly braces__, we say what we want our function to do. Here, we tell it to get the input, which is called someNumber, and add 100 to it. Let's call it and see what happens: Inside the __curly braces__, we say what we want our function to do. Here, we tell it to get the input, which is called someNumber, and add 100 to it. Let's call it and see what happens:
Line 259: Line 265:
 (picture credit: https://commons.wikimedia.org/wiki/File:Toast-2.jpg) (picture credit: https://commons.wikimedia.org/wiki/File:Toast-2.jpg)
  
-Notice that __console.log__ __returns__ <color black/pink>undefined</color>. "undefined" means it doesn't have any meaning except that nobody has told the computer what it means.+Notice that __console.log__ returns undefined. <color black/pink>"undefined"</color> means it doesn't have any meaning except that nobody has told the computer what it means.
  
 ==== strings ==== ==== strings ====
Line 391: Line 397:
 ==== setup function ==== ==== setup function ====
  
-You need to <color black/pink>[[p5js-week-01#what_s_a_function|declare]]</color> the setup <color black/pink>[[p5js-week-01#what_s_a_function|function]]</color> near the top of your p5js document. This is used to run any p5js <color black/pink>[[p5js-week-01#what_s_a_function|function]]</color> at the very beginning before you start drawing.+You need to [[p5js-week-01#what_s_a_function|declare]] the <color black/pink>setup</color> [[p5js-week-01#what_s_a_function|function]] near the top of your p5js document. This is used to run any p5js [[p5js-week-01#what_s_a_function|function]] at the very beginning before you start drawing.
  
 There's more about the setup function on the p5js reference here: There's more about the setup function on the p5js reference here:
Line 399: Line 405:
 ==== draw function ==== ==== draw function ====
  
-You need to <color black/pink>[[p5js-week-01#what_s_a_function|declare]]</color> the draw <color black/pink>[[p5js-week-01#what_s_a_function|function]]</color> in order to actually draw something in the "Preview" pane on the right side of the window. When you want to draw shapes, finally you need to <color black/pink>[[p5js-week-01#what_s_a_function|call]]</color> those functions inside of the draw function.+You need to [[p5js-week-01#what_s_a_function|declare]] the <color black/pink>draw</color> [[p5js-week-01#what_s_a_function|function]] in order to actually draw something in the "Preview" pane on the right side of the window. When you want to draw shapes, finally you need to [[p5js-week-01#what_s_a_function|call]] those functions inside of the draw function.
  
 There's more about the draw function on the p5js reference here: There's more about the draw function on the p5js reference here:
Line 405: Line 411:
 https://p5js.org/reference/#/p5/draw https://p5js.org/reference/#/p5/draw
  
-It's important to remember the <color black/pink>order of execution</color> here. The code which comes first will draw first. The code which comes later will then (possibly) draw on top of what you have already drawn. Sometimes when you can't see what you want to draw, it's because you are drawing something else on top of it.+It's important to remember the [[p5js-week-01#order_of_execution|order of execution]] here. The code which comes first will draw first. The code which comes later will then (possibly) draw on top of what you have already drawn. Sometimes when you can't see what you want to draw, it's because you are drawing something else on top of it.
  
 ==== shape functions ==== ==== shape functions ====
Line 413: Line 419:
 https://p5js.org/reference/ https://p5js.org/reference/
  
-Scroll down and look at the Shapes 2D Primitives section. These are some good functions to start using. You probably want to get familiar with the __rect__ function right away. rect is short for 'rectangle'. Try it out! +Scroll down and look at the Shapes 2D Primitives section. These are some good functions to start using. You probably want to get familiar with the <color black/pink>rect</color> function right away. rect is short for 'rectangle'. Try it out! 
  
 https://p5js.org/reference/#/p5/rect https://p5js.org/reference/#/p5/rect
  
-Copy some of the code from the __reference__ page, paste it into a new document in the p5js editor, and try changing the <color black/pink>parameters</color> (parameter is another word for <color black/pink>[[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]]</color>). When you paste it, be sure to paste it **inside** the __draw function__, like this:+Copy some of the code from the __reference__ page, paste it into a new document in the p5js editor, and try changing the <color black/pink>parameters</color> (parameter is another word for [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]]). When you paste it, be sure to paste it **inside** the draw function, like this:
  
 <HTML> <HTML>
Line 423: Line 429:
 </HTML> </HTML>
  
-The reference will tell you how many arguments you need to use, and what each <color black/pink>[[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]]</color> controls.+The reference will tell you how many arguments you need to use, and what each [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]] controls.
  
 ==== coordinates ==== ==== coordinates ====
  
-In p5js, we control the position of something by adjusting the x and y position. This is like graphing things in your math class, but there's an important difference. In math, usually the y value gets higher as you go up the page. **In p5js, the y value gets bigger as you go down the page.** The point (0,0) is in the top left corner of your screen. You'll need to look carefully, but many <color black/pink>[[p5js-week-01#what_s_a_function|functions]]</color> use x and y as the first two <color black/pink>[[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]]</color>.+In p5js, we control the position of something by adjusting the x and y position. This is like graphing things in your math class, but there's an important difference. In math, usually the y value gets higher as you go up the page. **In p5js, the y value gets bigger as you go down the page.** The point (0,0) is in the top left corner of your screen. You'll need to look carefully, but many [[p5js-week-01#what_s_a_function|functions]] use x and y as the first two [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]].
  
 ==== sizes ==== ==== sizes ====
  
-Some <color black/pink>[[p5js-week-01#what_s_a_function|functions]]</color> like circle have only one <color black/pink>[[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]]</color> for size. Other <color black/pink>[[p5js-week-01#what_s_a_function|functions]]</color> like ellipse have two <color black/pink>[[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]]</color> for size: a width and a height. Size is measured in pixels. Try drawing some rects or ellipses at different sizes to get familiar with how big different sizes are.+Some [[p5js-week-01#what_s_a_function|functions]] like circle have only one [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]] for size. Other [[p5js-week-01#what_s_a_function|functions]] like ellipse have two [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]] for size: a width and a height. Size is measured in pixels. Try drawing some rects or ellipses at different sizes to get familiar with how big different sizes are.
  
 ==== fill ==== ==== fill ====
Line 441: Line 447:
 https://p5js.org/reference/#/p5/fill https://p5js.org/reference/#/p5/fill
  
-In the code above, we use color names as <color black/pink>strings</color> for the <color black/pink>[[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]]</color>. We can also use different color models, like RGB (red, green, and blue).+In the code above, we use color names as [[p5js-week-01#strings|strings]] for the [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]]. We can also use different color models, like RGB (red, green, and blue).
  
 ==== color picker ==== ==== color picker ====
Line 457: Line 463:
 ==== stroke ==== ==== stroke ====
  
-The p5js reference can tell you how to control stroke, which is the line on the outside of shapes. The stroke-related <color black/pink>[[p5js-week-01#what_s_a_function|functions]]</color> work like the fill <color black/pink>[[p5js-week-01#what_s_a_function|functions]]</color>; every shape uses those settings until the stroke <color black/pink>[[p5js-week-01#what_s_a_function|function]]</colors> are called again.+The p5js reference can tell you how to control stroke, which is the line on the outside of shapes. The stroke-related [[p5js-week-01#what_s_a_function|functions]] work like the fill [[p5js-week-01#what_s_a_function|functions]]; every shape uses those settings until the stroke [[p5js-week-01#what_s_a_function|function]] are called again.
  
 https://p5js.org/reference/#/p5/stroke https://p5js.org/reference/#/p5/stroke
  • p5js-week-01.1687511322.txt.gz
  • Last modified: 10 months ago
  • by reina.chen