| Both sides previous revision Previous revision Next revision | Previous revision |
| p5js-week-02 [2023/07/05 00:16] – reina.chen | p5js-week-02 [2023/07/11 22:46] (current) – reina.chen |
|---|
| </code> | </code> |
| |
| We can get a bigger random number by multiplying the result of <color black/pink>Math.random</color> with a bigger number. This function call will give us random numbers between 0 and 255. Run this one several times. | We can get a bigger random number by multiplying the result of [[p5js-week-02#mathrandom|Math.random]] with a bigger number. This function call will give us random numbers between 0 and 255. Run this one several times. |
| |
| <code> | <code> |
| OK, cool, let's use p5js to make some rainbow toast! We'll talk about these tools today: | OK, cool, let's use p5js to make some rainbow toast! We'll talk about these tools today: |
| |
| - background | - [[p5js-week-02#background|background]] |
| - RGB colors | - [[p5js-week-02#rgb_colors|RGB colors]] |
| - HSL color | - [[p5js-week-02#hsla_color|HSL color]] |
| - mouseX and 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 ==== |
| |
| Here is a simple example for us to play with. The <color black/pink>background</color> function sets the color of the background. If it's just one number between 0 and 255, it will be black, gray, or white. We can put a string with a color name in there, too. Try changing the argument in the background function to 'pink' or 'green'. | Here is a simple example for us to play with. The <color black/pink>background</color> function sets the color of the background. If it's just one number between 0 and 255, it will be black, gray, or white. We can put a string with a color name in there, too. Try changing the argument in the [[p5js-week-02#background|background]] function to 'pink' or 'green'. |
| |
| <HTML> | <HTML> |
| ==== HSLA color ==== | ==== HSLA color ==== |
| |
| Let's specify the color of the box using a different color model: 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. |
| </HTML> | </HTML> |
| |
| By the way, notice how we build a longer string to display by adding mouseX or mouseY (which are numbers) to a string. | By the way, notice how we build a longer string to display by adding [[p5js-week-02#text_mousex_and_mousey|mouseX]] or [[p5js-week-02#text_mousex_and_mousey|mouseY]] (which are numbers) to a string. |
| |
| There's more about mouseX and mouseY here: | There's more about [[p5js-week-02#text_mousex_and_mousey|mouseX]] and [[p5js-week-02#text_mousex_and_mousey|mouseY]] here: |
| |
| https://p5js.org/reference/#/p5/mouseY | https://p5js.org/reference/#/p5/mouseY |
| ==== triangle ==== | ==== triangle ==== |
| |
| The trick above is really useful when we want to use the <color black/pink>triangle</color> function. That's because the <color black/pink>triangle</color> function doesn't have any size arguments. Instead, it has six arguments that are positions that describe the three corners of the triangle. Look at this example: | The trick above is really useful when we want to use the <color black/pink>triangle</color> function. That's because the [[p5js-week-02#triangle|triangle]] function doesn't have any size arguments. Instead, it has six arguments that are positions that describe the three corners of the triangle. Look at this example: |
| |
| <HTML> | <HTML> |
| </HTML> | </HTML> |
| |
| There's more about triangles here. | There's more about [[p5js-week-02#triangle|triangles]] here. |
| |
| https://p5js.org/reference/#/p5/triangle | https://p5js.org/reference/#/p5/triangle |
| ==== random colors and rainbow toast ==== | ==== random colors and rainbow toast ==== |
| |
| Earlier, we learned about <color black/pink>Math.random</color>. Let's use this to control colors. | Earlier, we learned about [[p5js-week-02#mathrandom|Math.random]]. Let's use this to control colors. |
| |
| There's ANOTHER way to set colors, which is to put RGB values between 0 and 255 into the fill function, like this: | There's ANOTHER way to set colors, which is to put RGB values between 0 and 255 into the fill function, like this: |
| ==== 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 mouseX and 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 add a triangle or two, maybe. | You can add a triangle or two, maybe. |
| |
| 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! |