Stage 2

Store Data in Objects

In this example, we draw three blue squares on top of a yellow background.

We start by declaring four global variables: counter, squareA, squareB, and squareC. We use counter to keep track of the number of times we have updated the scene and the three square variables to store the data needed to redraw the squares after each update.

var counter;
var squareA, squareB, squareC;

When the page first loads, the program calls the initScene() function and adds an event listener to the canvas. The event listener automatically calls the updateScene() function whenever a mouse click is detected on the canvas.

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

Inside the initScene() function, we initialize the four variables and then call the drawScene() function.

function initScene() {
  counter = 0;
  squareA = {x: 200, y:  40, s: 60};
  squareB = {x:  80, y: 120, s: 40};
  squareC = {x: 240, y: 220, s: 80};
  
  drawScene();
}

The variable squareA is initialized as an object with three properties: x, y, and s. An object is simply a collection of properties, where each property has a name (or key) and a value. In this case, the x property in object squareA is assigned the value 200.

Inside the drawScene() function, we draw the yellow background (covering the previous scene) with the frame number and then draw the three squares. We draw each square by passing the object storing its data into the drawSquare() function as a parameter.

function drawScene() {
  drawBackground();
  drawSquare(squareA);
  drawSquare(squareB);
  drawSquare(squareC);
}

Inside the drawSquare() function, the object passed into the function is stored in the parameter square. We access the values stored in the object's properties using dot notation. For example, to access the value stored in the object's x property, we use square.x.

function drawSquare(square) {
  context.save();
  context.fillStyle = 'RoyalBlue';
  context.fillRect(square.x, square.y, square.s, square.s); // Use the data in the object square to draw the square
  context.restore();
}

The updateScene() function is called automatically whenever a mouse click is detected on the canvas. Inside the updateScene() function, we increase the value stored in the counter by 1, decrease the values stored in the squareA.x and squareC.y properties by 5, and increase the value stored in the squareB.x property by 5 before redrawing the scene. Because we are drawing the yellow background over the previous scene, the squares look like they are moving.

function updateScene() {
  counter += 1;
  squareA.x -= 5; // This is a shorter way of writing squareA.x = squareA.x - 5
  squareB.x += 5;
  squareC.y -= 5;
  drawScene();
}

Click on the canvas to see the scene update. Change the values stored in the objects to change the size and position of the squares. To learn more about objects, visit the Objects lesson.

Quick Reference: Coordinates Variables Functions Objects fillRect() fillStyle

Store Objects in an Array

When storing the data used to draw three squares, it's okay to declare three separate variables named squareA, squareB, and squareC, one for each square. But it becomes a problem if we need to store the data to draw a hundred squares or if we don't know how many buildings we'll be drawing ahead of time, as in the Animated Cityscape Challenge.

One way to store an arbitrary number of values in a variable is by using an array. An array is basically a list with an index starting at 0. Imagine a list of books stored in an array named bookArray. We can access the first book in the list at bookArray[0] and the second book at bookArray[1]. To add a new book at the end of the list, we use the array's push() method, and to find the number of books in the list, we access the array's length property.

In this example, we update the program from the previous example to store each square's data in an array.

Instead of declaring the three separate variables squareA, squareB, and squareC, we start by declaring the global variable squareArray:

var counter;
var squareArray;

Inside the initScene() method, we initialize squareArray as an empty array, []. We have to initialize squareArray as an array before we can use the push() method to add data to the end of the array.

function initScene() {
  counter = 0;
  
  squareArray = []; // Initialize the variable as an empty array
  squareArray.push( {x: 200, y:  40, s: 60} ); // Add the data for the first square to the end of the array
  squareArray.push( {x:  80, y: 120, s: 40} ); // Add the data for the second square to the end of the array
  squareArray.push( {x: 240, y: 220, s: 80} ); // Add the data for the third square to the end of the array
  
  drawScene();
}

At this point, we have pushed the data for three squares onto the end of the array, and we can access the data for the first square at squareArray[0], the data for the second square at squareArray[1], and the data for the third square at squareArray[2]. By using an array, we can easily store the data for a hundred squares in a single variable.

When working with objects and arrays, it's important to understand where values are stored and how to access them. Keep this reference in mind when working with the data stored in squareArray:

squareArray // Used to access the array containing the data for all the squares
squareArray[0] // Used to access the data for the first square in the array
squareArray[0].x // Used to access the x-coordinate in the data for the first square in the array

Inside the drawScene() function, we could draw each square by passing its data into the drawSquare() method manually like this:

function drawScene() {
  drawBackground();
  
  drawSquare(squareArray[0]);
  drawSquare(squareArray[1]);
  drawSquare(squareArray[2]);
}

But we are going to automate the process using a for loop. This way, if we add the data for a fourth square to the array, the drawScene() function will automatically draw it, too.

function drawScene() {
  drawBackground();
  
  for (var i = 0; i < squareArray.length; i += 1) {
    drawSquare(squareArray[i]);
  }
}

Note that the for loop runs as long as i < squareArray.length. This is because, while the length of the array is 3, the last square's data is at index 2. Remember, the index of an array starts at 0, so the last item in an array is always at index length - 1.

Finally, we update the updateScene() function to use squareArray instead of squareA, squareB, and squareC.

function updateScene() {
  counter += 1;
  squareArray[0].x -= 5;
  squareArray[1].x += 5;
  squareArray[2].y -= 5;
  drawScene();
}

Click on the canvas to see the scene update. Change the values stored in the objects to change the size and position of the squares and push another set of data into the array to add another square. To learn more about arrays, visit the Arrays lesson.

Quick Reference: Coordinates Variables Functions For Loops Objects Arrays fillRect() fillStyle

Initialize and Draw Building Rows Separately

In the Basic Cityscape Challenge, we created the data for a building row and then drew the building row at the same time using the drawBuildingRow() function. This meant that, if we wanted to draw the building row again, we would recreate the data. But since the data is generated randomly, the buildings would be different each time and it would look like we were drawing a brand new scene instead of updating the existing scene.

We are currently in the process of separating those two steps. The goal is to create the data for a building row using the initBuildingRow() function when the page first loads and then use that data to redraw the buildings using the drawBuildingRow() function when we update the scene. That way, it will look like the same scene changing over time.

Since we are separating the current drawBuildingRow() function into two separate functions, you should review how the drawBuildingRow() function works. In this example, we position a building row at (0, 280) and draw it with a scale factor of 0.6. We use the scale factor to calculate the color of the buildings in the row and a while loop to create and draw just enough buildings to cover the width of the canvas. Each building is randomly generated using the randomInteger() function.

Quick Reference: Coordinates Variables Functions While Loops If Statements fillStyle translate() scale() random() round() / floor() / ceil()

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_stage2_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 timer. 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. We store a reference to the timer in the variable timer.

var timer;

timer = 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 timer 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(timer); // 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
  }
  
  timer = 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(timer);
  
  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()