Instructions

1. Draw many happy faces

With our drawHappyFace function, it is easy to draw many of them using a for loop:

for (var x = 35; x < width + 70; x += 110) {
     drawHappyFace(x, 100);
  }

Here is the result and the complete code:

Now, if we decide to change the face color or size, we only need to change it in one place. But what if we want to make each face a different color or size?

2. Draw happy faces of different sizes

We can do this by adding a size parameter to our function, and using the scale function we saw in LA 2.5.

We need to add a third parameter to determine the size of the face in the drawHappyFace function (function drawHappyFace(x, y, s)). Inside the function, we can use s as a parameter for the scale function (scale(s)). Now, when calling drawHappyFace, we can include a third parameter that sets the size of the face. Take a look at lines 10 and 11 in the code below. Each time our for loop repeats, we pick a random number and store it in var scalar (line 10). Then we send that random value as our newly added size parameter (line 11).

To recap: line 10 picks a random scale each time the loop repeats; in line 11 we send it to the drawHappyFace function as its third parameter; in line 18 we apply the given scale.

Can you add a parameter to change the amount of red in the mouth color?