| Both sides previous revision Previous revision Next revision | Previous revision |
| p5js-week-02 [2023/07/05 00:22] – reina.chen | p5js-week-02 [2023/07/11 22:46] (current) – reina.chen |
|---|
| |
| - [[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]] |
| - text | - [[p5js-week-02#text_mousex_and_mousey|text]] |
| - triangle | - [[p5js-week-02#triangle|triangle]] |
| - making a function called earth | - [[p5js-week-02#making_a_function_called_earth|making a function called earth]] |
| |
| ==== background ==== | ==== background ==== |
| ==== HSLA color ==== | ==== HSLA color ==== |
| |
| Let's specify the color of the box using a different color model: [[p5js-week-02#hsla_color|HSLA]]. <color black/pink>HSLA</color> means hue, saturation, lightness, and alpha. That's a lot of new words. Hue means color, like red, blue, etc. Saturation means how strong the color is, from nothing (which is gray) to the full color. Lightness means how dark the color is from white to black, and alpha means transparency (how much we can see through the color). | Let's specify the color of the box using a different color model: [[p5js-week-02#hsla_color|HSLA]]. <color black/pink>HSLA</color> ([[https://en.wikipedia.org/wiki/HSL_and_HSV]]) means hue, saturation, lightness, and alpha. That's a lot of new words. Hue means color, like red, blue, etc. Saturation means how strong the color is, from nothing (which is gray) to the full color. Lightness means how dark the color is from white to black, and alpha means transparency (how much we can see through the color). |
| |
| Hue should be a number between 0 and 359. | Hue should be a number between 0 and 359. |
| ==== 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> |
| </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 ==== |
| 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 () |
| </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! |
| 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. |
| |
| 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! |