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/04 23:44] – reina.chenp5js-week-02 [2023/07/11 22:46] (current) – reina.chen
Line 20: Line 20:
 JavaScript comes with many functions that we can use. Let's talk about some of them, and I'll point out one point that confuses a lot of people when they are starting out. The section below includes some code; try running this code in the console in the browser. Remember, you can get there by pressing F12 (or maybe Fn F12, depending on your computer), or you can get the console from the browser menu. We want to learn about a few important things that we'll need for the future before we start drawing. JavaScript comes with many functions that we can use. Let's talk about some of them, and I'll point out one point that confuses a lot of people when they are starting out. The section below includes some code; try running this code in the console in the browser. Remember, you can get there by pressing F12 (or maybe Fn F12, depending on your computer), or you can get the console from the browser menu. We want to learn about a few important things that we'll need for the future before we start drawing.
  
-  - length +  - [[p5js-week-02#length|length]]  
-  - booleans +  - [[p5js-week-02#booleans|booleans]] 
-  - equality +  - [[p5js-week-02#equality|equality]] 
-  - equality vs. assignment+  - [[p5js-week-02#equality_vs_assignment|equality vs. assignment]]
   - greater/less than   - greater/less than
-  - Math.random+  - [[p5js-week-02#mathrandom|Math.random]]
   - increment   - increment
  
Line 74: Line 74:
 ==== equality ==== ==== equality ====
  
-Let's talk about the <color black/pink>equality operator</color> ([[https://en.wikipedia.org/wiki/Relational_operator]]), too. Try these expressions, which also return [[p5js-week-02#booleans|boolean]] values of true or false. Here, we are testing for equality (whether two values are equal or not).+Let's talk about the <color black/pink>equality operator</color> ([[https://en.wikipedia.org/wiki/Relational_operator]]), too. Try these expressions, which also return [[p5js-week-02#booleans|boolean]] values of true or false. Here, we are testing for <color black/pink>equality</color> (whether two values are equal or not).
  
 <code> <code>
Line 102: Line 102:
 </code> </code>
  
-<color black/pink>Equality</color> is different; it returns a [[p5js-week-02#booleans|boolean]]:+[[p5js-week-02#equality|Equality]] is different; it returns a [[p5js-week-02#booleans|boolean]]:
  
 <code> <code>
Line 127: Line 127:
 </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>
Line 157: Line 157:
 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>
Line 185: Line 185:
 ==== 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.
Line 211: Line 211:
 </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
Line 219: Line 219:
 ==== triangle ==== ==== triangle ====
  
-The trick above is really useful when we want to use the <color black/pink>triangle</color> function. That's because the 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:+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>
Line 225: Line 225:
 </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
Line 235: Line 235:
 ==== 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:
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 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 draw 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 draw 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 draw 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 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!+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 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.
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.1688539480.txt.gz
  • Last modified: 21 months ago
  • by reina.chen