Both sides previous revision Previous revision Next revision | Previous revisionLast revisionBoth sides next revision |
p5js-week-01 [2023/07/03 03:32] – reina.chen | p5js-week-01 [2023/07/03 03:44] – 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 |
</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> |