Stage 3

Draw Buildings with Four Types of Windows

In this example, we modify the drawFrenchFlag() function to draw the flags of France, Colombia, and Thailand.

We tell the drawFlag() function which flag to draw by passing it a value that is stored in the country parameter. Then, in the switch statement, we draw a French flag if country == 'France', a Colombian flag if country == 'Colombia', and a Thai flag if country == 'Thailand'.

Try drawing a Thai flag instead of a Colombian flag to see what it looks like. To learn more about switch statements, visit the Switch Statements lesson.

Quick Reference: Variables Functions Switch Statements fillRect() fillStyle

Draw Buildings with Four Types of Roofs

In this example, we add a triangle to the top of the building's roof.

To draw the roof, we create a function called drawRoof() and pass it the width of the building. We pass it the width of the building because we want to center the roof and scale the roof to fit the building.

function drawRoof(w) {

  // code block

}

Inside the drawRoof() function, to make the roof a little easier to draw, we use the context.translate() method to move to the center of the roof and the top of the triangle.

context.translate(w / 2, -96); // Move to the center of the roof and top of the triangle

Then, we use the context.lineTo() method to create a triangular path and the context.fill() method to fill it. Because the roof is the same color as the building, we don't have to set the context.fillStyle property.

context.beginPath(); // Start a new path
context.moveTo(0, 0); // Move to the top of the triangle
context.lineTo(16, 64); // Create a line to the bottom right vertex of the triangle
context.lineTo(-16, 64); // Create a line to the bottom left vertex of the triangle
context.closePath(); // Close the triangle
context.fill(); // Fill the triangle with the current fill color

After creating and filling the triangle, we draw two rectangles beneath it. The width of the second rectangle varies depending on the width of the building.

context.fillRect(-24, 64, 48, 16);
context.fillRect(-(w - 16) / 2, 80, w - 16, 16);

Change the number of office units on a floor of the building to a number between 4 and 8. Note how the roof adjusts to fit the size of the building.

The roof doesn't work when the number of office units is smaller than 4 and it doesn't look good when it's greater than 8. We will fix those issues later.

To learn more about drawing triangles, visit the lineTo() lesson.

Quick Reference: Coordinates Variables Functions Switch Statements fillStyle translate() lineTo()

Draw Buildings with a Random Number of Floors

Right now, we have a drawBuilding() function that draws a building if we tell it how many office units per floor, how many floors, the type of windows, and the type of roof the building has. The next step is generating a building randomly, starting with the number of floors.

In this example, we draw a random number of flags and select the type of flag randomly.

We start by assigning a random integer between 0 and 2 to the country variable. We have modified the switch statement inside the drawFlag() function so country == 0 is France, country == 1 is Colombia, and country == 2 is Thailand.

var country = Math.floor(3 * Math.random()) // Generates a random integer between 0 and 2

We generate a random number using the Math.random() function, which returns a random number greater than or equal to 0 and less than 1.

By multiplying Math.random() by 3, we get a random number between 0 and 3. However, the random number will be a decimal, something like 1.748. To convert it to an integer, we use the Math.floor() function to round the number down. This will give us a random integer between 0 and 2, so either 0, 1, or 2. The reason we will never get a 3 is because 3 * Math.random() is always less than 3 and we are rounding down.

We are using a for loop to draw multiple flags. The number of flags it draws is a random integer between 2 and 5 assigned to the flagCount variable:

var flagCount = 2 + Math.floor(4 * Math.random()); // Generates a random integer between 2 and 5

To get a random integer between 2 and 5, we start by getting a random integer between 0 and 3. Since there are four integers between 0 and 3, we use Math.floor(4 * Math.random()). Note that we are multiplying Math.random() by 4, not 3. Then, to increase the random integer to between 2 and 5, we simply add 2.

Press "Run" to change the number and type of flag drawn. Can you figure out how you would edit the code to randomize the type of each individual flag in the drawing?

To learn more about rounding and generating random numbers, visit the round() / floor() / ceil() and random() lessons.

Quick Reference: Variables For Loops Switch Statements random() round() / floor() / ceil()

Draw Completely Random Buildings

Now that you know how to randomize the number of floors in a building, you are going to randomize the number of office units, the type of windows, and the type of roof, too.

But before you do that, we are going to create a function for generating random integers.

The Math.random() function is great for generating random decimals, but generating random integers is more complicated. It takes more steps and it's easy to make a mistake.

In this example, we create the randomInteger() function, which takes an integer assigned to the parameter max and returns a random integer between 0 and max. For example, randomInteger(10) returns a random integer between 0 and 10, including 0 and 10.

Because the number of integers between 0 and max is actually max + 1, we use Math.floor((max + 1) * Math.random()) to generate the random integer and a return statement to return it.

We use the randomInteger() function to draw a rectangle with a random size and position. Press "Run" to see the rectangle's size and position change.

To learn more about returning values from functions, visit the Functions lesson.

Quick Reference: Variables Functions fillRect() random() round() / floor() / ceil()