p5js week 02

The goals this week are to learn some more of the basic features of the JavaScript programming language, and we also want to make a program that produces pictures which have different colors each time we run it!

Remember, last time we talked a lot about toast and toasters. That means we're going to learn more about making our own toasters to make random-colored toast (not actually, but that's kind of what we are doing)!

(picture credit: https://www.instructables.com/Rainbow-Toast/)

Your goals today are to:

  1. make a slice of rainbow toast
  2. make an earth function
  3. make a rainbow toast function
  4. make a random color toast function
  5. use what you learned today to improve your robot/wolf/flower drawing from last time!

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.

  1. length
  2. booleans
  3. equality
  4. equality vs. assignment
  5. greater/less than
  6. Math.random
  7. increment

We talked about two different types of values last time: numbers and strings. One thing we can do with strings that we can't do with numbers is check their length (how long they are). Try each of these:

'cat'.length
'taipei'.length
'a brand new pair of sneakers'.length
'!@#$%%^&*()(*&^%$#@!+_)()_+()++_)(_)+_)(_+)(+_)(+_)(+_)(+_)(_)(_)(_+)_()()_(+'.length

Remember that a programming language environment is like a super powerful calculator. Try these two:

'cat'.length + 'dog'.length
'cat'.length + '!@#$%%^&*()(*&^%$#@!+_)()_+()++_)(_)+_)(_+)(+_)(+_)(+_)(+_)(_)(_)(_+)_()()_(+'.length

Let's add another very important type of data: booleans! A boolean means the values of true and false. Let's try some out. You have probably learned about the greater than or less than symbols in math class. We can use them here. Run this code and see what the output is.

1 < 2

Here's another:

1 > 2

Can you understand these?

1 <= 2
1 <= 1
1 >= 2
2 >= 2
3 >=2

Soon we're going to learn how to use these true and false values to do cool things.

Let's talk about the equality operator, too. Try these expressions, which also return boolean values of true or false. Here, we are testing for equality (whether two values are equal or not).

1 == 2
2 == 0
5 == 5

Here's something interesting. We can use this one on things other than numbers!

"Taipei" == "Taipei"
"Taipei" == "Taichung"

Now you might feel a little confused about the operator (the symbol) between the two numbers.

There are some symbols that are a little confusing in the beginning, particularly the difference between = and ==.

We use one equal sign for assignment. That means something like storing a value in a box. Think of the item on the left side of the = like a box with a name, and the item on the right side of the = as the value you want to store in the box. Evaluate these two lines one at a time.

ourCity = "Taipei"
ourCity

Equality is different; it returns a boolean:

ourCity == "Singapore"

Once we store a value in a box, we can use it later.

let s1 = "We live in " + ourCity;
console.log(s1)

We'll be storing the results of more and more complicated calculations in variables. Be sure you understand this point! Variables are really important.

It's often useful to have random numbers that change all the time.

The Math.random function will give us a random number between 0 and 1 (but not including 1). Run this code several times to see what happens. You should see many different numbers.

Math.random()

We can get a bigger random number by multiplying the result of Math.random with a bigger number. This function call will give us random numbers between 0 and 255. Run this one several times.

Math.random() * 255

That code gives us numbers with decimals. What if we don't want the decimals? We can use the Math.floor function on that value, which will take away everything after the decimal.

Math.floor(Math.random() * 255)

If you wanted to make a normal set of dice, the following function call would be pretty useful.

Math.floor(Math.random() * 6)

Notice that the one above isn't quite right, though. It gives us numbers between 0 and 5. If we add 1, we can get numbers from 1 to 6.

1 + Math.floor(Math.random() * 6)

We're going to use these random numbers later in this lesson!

OK, cool, let's use p5js to make some rainbow toast! We'll talk about these tools today:

  1. background
  2. RGB colors
  3. HSL color
  4. mouseX and mouseY
  5. text
  6. triangle
  7. making a function called earth

Here is a simple example for us to play with. The background 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'.

Let's specify the color of the box using a different color model: RGB. Do you remember RGB from the last lesson? Also notice that the details of the color are inside of a string.

So we know two ways to do color: a color name or RGB. There are other ways, too!

Let's specify the color of the box using a different color model: HSLA. HSLA 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.

Saturation and lightness should be percentages between 0 and 100%.

Alpha should be a number between 0 and 1.

Try changing the numbers and see what happens.

There's more on ways to describe color here:

https://p5js.org/reference/#/p5/color

Sometimes you aren't exactly sure about the numbers to use for x position and y position. We can use text along with some useful values that p5js gives us (mouseX and mouseY) to show on the screen where the mouse is RIGHT NOW. Then we can use those numbers in the arguments of other function calls so that our shapes appear in the right place. Start this drawing and move the mouse around. See how the values change. Thanks to Oliver Wang for showing us how useful this trick is!

By the way, notice how we build a longer string to display by adding mouseX or mouseY (which are numbers) to a string.

There's more about mouseX and mouseY here:

https://p5js.org/reference/#/p5/mouseY

The trick above is really useful when we want to use the triangle 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:

There's more about triangles here.

https://p5js.org/reference/#/p5/triangle

Now you've learned more about shapes and colors. A piece of toast is a pretty simple shape. Try using these functions to make a slice of rainbow toast! Share your drawing with the teachers and your classmates.

Earlier, we learned about 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:

fill(100,0,100)

Let's try it in a drawing.

Wait a second… what's going on?! That's crazy looking. Why?

The draw 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:

We'll think much more about the draw function, animation, and related issues in future lessons.

Last time at beginning of the class, we worked on a drawing of the earth. Let's try to turn that drawing into a function; then we can make many earths!

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:

earth ()

In this way, we have the earth in the drawing by using an earth function. OK, this doesn't seem very useful, though. Let's make it more useful by adding some arguments. We can control the position by using arguments to describe the position like this:

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!

That's more useful, but now let's see another advantage of having our own function. Let's make several earths!

You can see that we are calling the earth function five times. Each time we use different arguments for xPosition and yPosition. I also used comments to turn off the text since that was getting in the way. You can uncomment the text (just delete the two slashes at the beginning of those lines) to see what I mean.

If we didn't have an earth function, then we would have to repeat a lot of code many times. That's too much work, and it makes our code hard to read. By having an earth function, we can be lazier (or more productive at the same time!), and our code is also easier to read.

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).

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.

You can use mouseX and mouseY to get better positions.

You can add a triangle or two, maybe.

You can try some different ways to make colors.

You can even add some random colors.

Please share your new version with your classmates and teachers!

Last time we started to learn about the wiki. This time let's learn how to put our p5js code on wiki pages so that we can show off the live version of our work (embedding the editor in the wiki).

Our teachers are going to walk you through how to make your own page on the wiki and put your screenshots or p5js code on it just like I have for these lessons.

  • p5js-week-02.txt
  • Last modified: 9 weeks ago
  • by renick