Both sides previous revision Previous revision Next revision | Previous revision Next revisionBoth sides next revision |
p5js-week-01 [2023/06/30 00:29] – reina.chen | p5js-week-01 [2023/07/03 03:42] – reina.chen |
---|
| |
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? ===== |
https://www.programiz.com/javascript/keywords-identifiers | https://www.programiz.com/javascript/keywords-identifiers |
| |
The __parentheses__ 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|}} |
===== 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|}} |
You have to put them into the __parentheses__. | You have to put them into the __parentheses__. |
| |
When you [[p5js-week-01#what_s_a_function|declare]] 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 [[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]]. | 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 [[p5js-week-01#what_s_an_argument_what_s_a_variable|arguments]], 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; |
- calling and declaring functions | - calling and declaring functions |
- the <color black/yellow>return</color> keyword | - the <color black/yellow>return</color> keyword |
- <color [[p5js-week-01#strings|strings]] | - [[p5js-week-01#strings|strings]] |
- length | - length |
- order of execution | - order of execution |
</code> | </code> |
| |
<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: | <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> |
</code> | </code> |
| |
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)#:~:text=In%20computer%20science%20and%20software,the%20values%20of%20that%20type.]]) 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: |
</code> | </code> |
| |
Between the function <color black/pink>keyword</color> 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: | 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> |
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> |