Stage 1

Review the Basic Cityscape Challenge

Because we are extending the program for the Basic Cityscape Challenge to animate the drawing, it's important to understand how that program works.

We start by drawing a gray rectangle (color '#CCCCCC') for the ground beneath the buildings. Then, we use the drawBuildingRow() function to draw three rows of buildings.

context.fillStyle = '#CCCCCC';
context.fillRect(0, 220, canvas.width, canvas.height - 220);

drawBuildingRow(0, 280, 0.6);
drawBuildingRow(0, 300, 0.8);
drawBuildingRow(0, 320, 1.0);

The first row of buildings is positioned at (0, 280) and drawn at 60% scale, the second row of buildings is positioned at (0, 300) and drawn at 80% scale, and the third row of buildings is positioned at (0, 320) and drawn at 100% scale.

Inside the drawBuildingRow() function, we use the scale parameter to calculate the color of the buildings in the row. The smaller the scale, the darker the buildings. Then, we use a while loop to draw buildings the width of the canvas. To draw a building, we randomly generate the number of office units per floor, the number of floors, the type of windows, and the type of roof for the building and pass those values into the drawBuilding() function.

The randomInteger() function is used to generate random integers, switch statements inside the drawWindow() and drawRoof() functions are used to draw the four different types of windows and roofs, and nested for loops are used to draw windows in each office unit in each building.

Please make sure you fully understand the program in the example below before continuing on in this challenge. If you need help, visit the Basic Cityscape Challenge and its relevant lessons.

Quick Reference: Variables Functions For Loops Switch Statements While Loops fillRect() fillStyle random() scale()

Draw the Sky Behind the Buildings

The sky behind the buildings is not a solid color. During the day, the sky is white along the horizon and bluer higher up. At night, the sky is gray along the horizon and darker higher up. And as the sun sets, the sky along the horizon turns red.

To draw the sky, we use a linear gradient. A linear gradient smoothly transitions from one color to another, such as white to blue or gray to dark gray. In this example, we create a linear gradient using the createLinearGradient() method and assign it to a variable named gradient:

var gradient = context.createLinearGradient(40, 0, 360, 0);

We create a linear gradient by passing the createLinearGradient() method the coordinates for the gradient's start position and end position. Because the two points, (40, 0) and (360, 0), form a horizontal line, the linear gradient is horizontal. It starts at x = 40 and ends at x = 360. The y-coordinates of the two points in a horizontal linear gradient don't make a difference as long as they are the same.

The next step is setting the colors in the gradient:

gradient.addColorStop(0, 'Red');
gradient.addColorStop(0.6, 'Blue');
gradient.addColorStop(1, 'Black');

This sets the color in the gradient at x = 40 (position 0) to 'Red' and the color at x = 360 (position 1) to 'Black'. We also set the color at x = 232 (position 0.6) to 'Blue'. This position is 60% of the way from position 0 to position 1.

Finally, we assign the linear gradient stored in the variable gradient to the context.fillStyle property and use the context.fillRect() method to draw a filled rectangle.

context.fillStyle = gradient;
context.fillRect(40, 40, 320, 240);

Between position 0 and position 0.6, the color filling the rectangle changes from 'Red' to 'Blue'. Between position 0.6 and position 1, the color changes from 'Blue' to 'Black'.

Change the colors in the gradient, change the position of the middle color stop, or add another color stop with a position between 0 and 1 to see what happens. To learn more about linear gradients, visit the createLinearGradient() lesson.

Quick Reference: Coordinates Variables fillRect() fillStyle createLinearGradient()

Change Ground and Sky Colors Over Time

The colors used to draw the sky in Challenge 1 are the colors of the sky at 6:20 pm in the animated cityscape. However, the colors of the sky are slightly different at 6:10 pm and 6:30 pm. Because we change the color of the ground and sky forty times between 5:00 pm and 7:00 pm, we need an easy way to calculate these colors automatically.

In this example, we use two for loops to draw two rows of rectangles. The first for loop uses the variable i as its counter. Inside the for loop, we use an if statement to calculate the height of the rectangle depending on the value of the counter. Note how the height of the rectangle starts at 40, climbs steadily to 100, and then levels out again. We want the ground and sky colors to change in the same way as the sun sets.

if (i < 6) {
  h = 40;
} else if (i > 15) {
  h = 100;
} else {
  h = 40 + 60 * (i - 6) / 9;
}

When the program reaches the if statement, it checks the first condition. If i < 6, the height of the rectangle is set to 40. If the first condition is false, then the program checks the second condition. If i > 15, the height of the rectangle is set to 100. If both conditions are false, then the program runs the code block in the else clause and the height of the rectangle is set to the value of 40 + 60 * (i - 6) / 9.

The expression 40 + 60 * (i - 6) / 9 is designed to increase from 40 to 100 as i increases from 6 to 15. Note that (6 - 6) / 9 = 0 when i is 6 and (15 - 6) / 9 = 1 when i is 15.

In the second for loop, we design the expression inside the if statement so the height of the rectangle decreases from 160 to 50 as j increases from 3 to 10. Can you update the second for loop so the height of the rectangle decreases from 150 to 90 as j increases from 8 to 13?

Quick Reference: Coordinates Variables If Statements fillRect() fillStyle

Update the Time and Redraw the Scene with a Mouse Click

At this point, we can draw the sky and ground at any time of day by manually setting the time variable. The next step is writing a program which updates the time variable and redraws the scene automatically.

A JavaScript program is triggered by events. So far, we've done all of our drawing immediately when the page first loads. But we can also tell our program to listen for events and run specific functions when those events occur.

In this example, we run the following code when the page loads:

var canvas = document.getElementById('animated_cityscape_stage1_example4');
var context = canvas.getContext('2d');

var squareX, squareY;

initScene();
canvas.addEventListener('click', updateScene);

We start by storing a reference to the canvas and the canvas's context in the variables canvas and context. Then, we declare the global variables squareX and squareY. We need to declare these variables globally so all of our functions can use them and the values stored in them are persistent and aren't deleted once a function ends. To learn more about variables and scope, visit the Variables lesson. Finally, we call the initScene() function and use the addEventListener() method to register an event listener on the canvas object. Note: "init" is short for initialize.

The initScene() function sets the initial values of squareX and squareY and calls the drawScene() function:

function initScene() {
  squareX = 10;
  squareY = 10;
  
  drawScene();
}

The drawScene() function draws a square filled with the color 'RoyalBlue' at the coordinates (squareX, squareY):

function drawScene() {
  context.save();
  context.fillStyle = 'RoyalBlue';
  context.fillRect(squareX, squareY, 20, 20);
  context.restore();
}

By registering to listen for 'click' events, the program will automatically call the updateScene() function whenever a mouse click is detected on the canvas. Note: Because we are passing the updateScene() function into the addEventListener() method as a variable, we don't include parentheses after the function name. To learn more about passing functions as variables and registering event listeners, visit the Functions and Event Listeners lessons.

The updateScene() method adds 30 to squareX and 20 to squareY before calling the drawScene() function and drawing another square:

function updateScene() {
  squareX += 30; // This is a shorter way of writing squareX = squareX + 30
  squareY += 20; // This is a shorter way of writing squareY = squareY + 20
  
  drawScene();
}

Now we can automatically update the drawing on the canvas simply by clicking on it. Note that the new scene is drawn on top of the existing scene. If we wanted to redraw the square and make it look like the square is moving, we'd have to clear the canvas first.

Quick Reference: Coordinates Variables Functions Event Listeners fillRect() fillStyle

Update the Time and Redraw the Scene with a Timer

Instead of using a mouse click to update the time and redraw the scene, we are going to use a timer.

In this example, we set up a timer to update the scene from the previous example. We start by declaring the global variable interval. Then, instead of adding an event listener to the canvas object to detect mouse clicks, we use the setInterval() method to create a timer that will automatically call the updateScene() function every 25 milliseconds and we store a reference to the timer in the variable interval.

var interval;

interval = setInterval(updateScene, 25); // Call the updateScene() function every 25 milliseconds

Again, because we are passing the updateScene() function into the setInterval() method as a variable, we don't include parentheses at the end of the function name. The number 25 tells the timer how long to wait before calling the updateScene() function again. The setInterval() method measures time in milliseconds and there are 1000 milliseconds in one second. So, if the timer calls the updateScene() function every 25 milliseconds, it will update the scene 40 times per second (1000 ÷ 25 = 40).

Inside the updateScene() function, we increase squareX and squareY by 3 and 2, instead of 30 and 20, so the square doesn't move as far in each update. Then, if squareX > canvas.width, which means the latest square is positioned past the right edge of the canvas, we cancel the timer and stop updating the scene by passing the reference stored in the interval variable into the clearInterval() method.

function updateScene() {
  squareX += 3; // This is a shorter way of writing squareX = squareX + 3
  squareY += 2; // This is a shorter way of writing squareY = squareY + 2
  
  drawScene();
  
  if (squareX > canvas.width) {
    clearInterval(interval); // Cancel the timer and stop updating the scene
  }
}

Finally, inside the drawScene() function, before drawing the square, we draw a rectangle filled with the color 'Cornsilk' covering the entire canvas. This will cover the previous scene, so now it looks like one square is moving instead of a new square being drawn each time.

function drawScene() {
  context.save();
  context.fillStyle = 'Cornsilk';
  context.fillRect(0, 0, canvas.width, canvas.height); // Draw a rectangle over the entire canvas
  context.fillStyle = 'RoyalBlue';
  context.fillRect(squareX, squareY, 20, 20);
  context.restore();
}

Press "Run" to reload the page and start the animation.

See what happens if you don't draw a rectangle over the previous scene or if you change how far the square moves or the time interval between updates. Note: if you try to update the scene too quickly, the program won't be able to keep up and the animation may stutter. To learn more setting timers, visit the setInterval() lesson.

Quick Reference: Coordinates Variables Functions fillRect() fillStyle setInterval()

Play and Pause the Scene

In this example, we add event listeners to the previous example's program to play and pause the scene.

We can register our program to listen for more than mouse click events. On a web page, only one HTML element can have the focus at a time. The focus determines which element is actively receiving keyboard events. On this page alone there are thirteen editors. It would get kind of crazy if you were typing into more than one editor at a time.

Note: A canvas element does not normally receive the focus. We have enabled each canvas to receive the focus by setting its tabindex attribute. That's not something you need to know about until you start creating the HTML for your own web pages.

Because we have enabled each canvas to receive the focus, clicking on a canvas selects it and triggers a 'focus' event. Clicking on a different part of the page deselects it and triggers a 'blur' event. We start by adding event listeners to play the scene when the canvas receives a 'focus' event and pause the scene when the canvas receives a 'blur' event.

canvas.addEventListener('focus', playScene);
canvas.addEventListener('blur', pauseScene);

Instead of starting the timer when the page first loads, we start the timer inside the playScene() function. We also check the position of the last square before starting the timer. If the last square is off the canvas, we reset it's position.

function playScene() {
  if (squareX > canvas.width) {
    squareX = 10;
    squareY = 10; // Reset the square's position
  }
  
  interval = setInterval(updateScene, 25);
}

Inside the pauseScene() function, we cancel the timer and draw the text string 'Click to Play' in the center of the canvas so the user knows how to start the animation.

function pauseScene() {
  clearInterval(interval);
  
  context.save();
  context.fillStyle = 'Black';
  context.font = '16px Arial';
  context.textAlign = 'center';
  context.fillText('Click to Play', canvas.width / 2, canvas.height / 2);
  context.restore();
}

We also call the pauseScene() function when the page first loads so the 'Click to Play' text string is drawn right away.

Then, inside the updateScene() function, instead of canceling the timer if squareX > canvas.width, we use the blur() method to blur the canvas. When the canvas loses the focus, it receives a blur event and the pauseScene() function is called.

function updateScene() {
  squareX += 3; // This is a shorter way of writing squareX = squareX + 3
  squareY += 2; // This is a shorter way of writing squareY = squareY + 2
  
  drawScene();
  
  if (squareX > canvas.width) {
    canvas.blur(); // Remove the focus from the canvas
  }
}

Click on the canvas to start the animation. The animation will continue running until you click on a different part of the page or until the latest square is positioned past the right edge of the canvas. If you restart the animation and the latest square was positioned past the right edge of the canvas, squareX and squareY are reset and the animation starts again from the beginning.

Quick Reference: Coordinates Variables Functions Event Listeners fillRect() fillStyle setInterval()