| Both sides previous revision Previous revision Next revision | Previous revision |
| p5js-week-01 [2023/07/03 03:32] – reina.chen | p5js-week-01 [2023/07/03 03:47] (current) – reina.chen |
|---|
| 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 |
| 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. |
| </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/draw | https://p5js.org/reference/#/p5/draw |
| |
| It's important to remember the <color black/pink>[[p5js-week-01#order_of_execution|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 ==== |
| 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> |