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/30 00:29] – 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 55: Line 61:
 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|}}
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 [[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;
Line 114: Line 120:
   - 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
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. 
Line 158: Line 164:
 </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>
Line 173: Line 179:
 </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:
Line 205: Line 211:
 </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>
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>[[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 ====
Line 417: Line 423:
 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>
  • p5js-week-01.1688110144.txt.gz
  • Last modified: 10 months ago
  • by reina.chen