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-02 [2023/07/05 00:25] – reina.chenp5js-week-02 [2023/07/11 22:46] (current) – reina.chen
Line 158: Line 158:
  
   - [[p5js-week-02#background|background]]   - [[p5js-week-02#background|background]]
-  - RGB colors+  - [[p5js-week-02#rgb_colors|RGB colors]]
   - [[p5js-week-02#hsla_color|HSL color]]   - [[p5js-week-02#hsla_color|HSL color]]
   - [[p5js-week-02#text_mousex_and_mousey|mouseX]] and [[p5js-week-02#text_mousex_and_mousey|mouseY]]   - [[p5js-week-02#text_mousex_and_mousey|mouseX]] and [[p5js-week-02#text_mousex_and_mousey|mouseY]]
Line 253: Line 253:
 ==== draw function and frame rate ==== ==== draw function and frame rate ====
  
-The <color black/pink>draw</color> function is running 60 times per second. That means that every function call inside of the <color black/pink>draw</color> function is also run 60 times per second. That means that the variables r, g, and b are calculated fresh 60 times per second. How can we just get ONE color when we run our program? The answer is to declare the variables outside of the <color black/pink>draw</color> function, like this:+The <color black/pink>draw</color> function is running 60 times per second. That means that every function call inside of the [[p5js-week-02#draw_function_and_frame_rate|draw]] function is also run 60 times per second. That means that the variables r, g, and b are calculated fresh 60 times per second. How can we just get ONE color when we run our program? The answer is to declare the variables outside of the [[p5js-week-02#draw_function_and_frame_rate|draw]] function, like this:
  
 <HTML> <HTML>
Line 259: Line 259:
 </HTML> </HTML>
  
-We'll think much more about the <color black/pink>draw</color> function, animation, and related issues in future lessons.+We'll think much more about the [[p5js-week-02#draw_function_and_frame_rate|draw]] function, animation, and related issues in future lessons.
  
 ==== making a function called earth ==== ==== making a function called earth ====
Line 271: Line 271:
 Here, we make a new function: write the function keyword, write a function name (in this case, earth), use parentheses to write some arguments (no arguments in this case), and put the function calls that draw the earth inside the function body (inside the curly braces). Here, we make a new function: write the function keyword, write a function name (in this case, earth), use parentheses to write some arguments (no arguments in this case), and put the function calls that draw the earth inside the function body (inside the curly braces).
  
-Then we can call the function in the <color black/pink>draw</color> function by writing this:+Then we can call the function in the [[p5js-week-02#draw_function_and_frame_rate|draw]] function by writing this:
  <code>  <code>
 earth () earth ()
Line 282: Line 282:
 </HTML> </HTML>
  
-We add arguments for xPosition and yPosition, and then add these numbers to all of the arguments inside the body of the function that control xPosition and yPosition. Then, in the <color black/pink>draw</color> function where we call the earth function, we can use arguments that control the position. Try changing the arguments and then re-running the code. You'll see that the earth moves!+We add arguments for xPosition and yPosition, and then add these numbers to all of the arguments inside the body of the function that control xPosition and yPosition. Then, in the [[p5js-week-02#draw_function_and_frame_rate|draw]] function where we call the earth function, we can use arguments that control the position. Try changing the arguments and then re-running the code. You'll see that the earth moves!
  
 That's more useful, but now let's see another advantage of having our own function. Let's make several earths! That's more useful, but now let's see another advantage of having our own function. Let's make several earths!
Line 296: Line 296:
 There's one more big advantage of having an earth function. You'll notice that this earth is still missing Taiwan! Please get your code to add Taiwan to the earth, and then add it **INSIDE** the earth function. Notice that by adding it in one place, you can get it in all of the places. Don't forget that you will need to add the arguments for the xPosition and the yPosition to the ellipse that represents Taiwan. Otherwise, you might see that only one of the earths has Taiwan in it (or if you do it wrong, you might also have Taiwan floating in space). There's one more big advantage of having an earth function. You'll notice that this earth is still missing Taiwan! Please get your code to add Taiwan to the earth, and then add it **INSIDE** the earth function. Notice that by adding it in one place, you can get it in all of the places. Don't forget that you will need to add the arguments for the xPosition and the yPosition to the ellipse that represents Taiwan. Otherwise, you might see that only one of the earths has Taiwan in it (or if you do it wrong, you might also have Taiwan floating in space).
  
-==== making a better flower, wolf, or robot ====+===== your assignment: making a flower, wolf, or robot =====
  
-Wow, that's a lot of things to learn. I hope you can remember these things and get more comfortable using them, so please try to use the techniques in this lesson to improve the drawing that you made last time of a flower, a wolf, or a robot.+Wow, that's a lot of things to learn. I hope you can remember these things and get more comfortable using them, so please try to use the techniques in this lesson to improve the drawing that you made last time. If you need an idea of what to draw, you could try to use p5js to draw a flower, a wolf, or a robot.
  
 You can use [[p5js-week-02#text_mousex_and_mousey|mouseX]] and [[p5js-week-02#text_mousex_and_mousey|mouseY]] to get better positions. You can use [[p5js-week-02#text_mousex_and_mousey|mouseX]] and [[p5js-week-02#text_mousex_and_mousey|mouseY]] to get better positions.
Line 307: Line 307:
  
 You can even add some random colors. You can even add some random colors.
 +
 +**Whatever you draw, definitely make your own functions to do it!**
  
 Please share your new version with your classmates and teachers! Please share your new version with your classmates and teachers!
  • p5js-week-02.1688541957.txt.gz
  • Last modified: 21 months ago
  • by reina.chen