The goal of this lab is to get you set up with a working development environment. Many program and tools exist for editing web files (which after all are merely text), and you are free to use any that you prefer. These instructions will describe how to configure VS Code, a cross-platform code editor that offers all the features we need. In particular, later in the course we will rely on its Live Server extension to properly view pages with textured 3D graphics. By installing it now, we will be able to take advantage of its convenience right from the start.
Installation and Setup
Install VS Code if you have not done so already. When you open the app, you should see a column of icons down the left side of the window. Click on the one that looks like a stck of boxes (Extensions) and in the search box type Live Server. Look for the version by Ritwick Dey as shown below and install it.
To get started, create a folder on your computer to store your work in this course, and perhaps a subfolder for this lab. From the file menu, choose Open Folder... and select the folder you just made. It will likely be empty at this point. Let's go ahead and create a new file. Save it as lab0.html, stored in the folder you just created. You should see it listed on the left side of the window. If not, make sure you have clicked the icon that looks like a sheaf of pages (Explorer). You are ready to move on to the next step.
Activity
Copy and paste the following code into the editor window and save the file. Next, right click on the file name in the Explorer tab and select Open with Live Server. This should bring up a browser window. What do you see? If everything went well, you should see the message Hello World appear in the browser window you just opened.
<!DOCTYPE html>
<html>
<head>
<title>Canvas Graphics</title>
<script>
var canvas; // DOM object corresponding to the canvas
var graphics; // 2D graphics context for drawing on the canvas
function draw() {
// draw on the canvas, using the graphics context
graphics.fillText("Hello World", 10, 20);
}
function init() {
canvas = document.getElementById("theCanvas");
graphics = canvas.getContext("2d");
draw(); // draw something on the canvas
}
</script>
</head>
<body onload="init()">
<canvas id="theCanvas" width="640" height="480"></canvas>
</body>
</html>
Credit: "Introduction to Computer Graphics" by David I. Eck
Oh No! How to Debug
Web technology is designed for users, not developers. That means that you need to go to some extra effort in order to see the sort of information that would normally be provided by your IDE. To demonstrate this, let's add a deliberate error to our page. Back in the editor window, inside the function init, change getElementById to getElementByID (with a capital D, an easy mistake to make) and save the file again. Then go to the browser window to look at the page. (You could also select View with Live Server again, but this would open a second window on the same file, and one is probably enough.)
The page should already have reloaded itself when you saved the file, and its "Hello World" message disappeared. There's no visible message about the error -- it just fails silently. To learn what has happened, you will need to access the hidden developer tools on your browser. The instructions that follow apply to Google Chrome, but similar tools are available with some small variation on every major browser platform.
On many browsers you can open the developer tools by hitting the F12 key. On Chrome it is also available through the three-dot menu on the upper right: choose More Tools (you may need to scroll down the menu to see it), then Developer Tools. This should open a subwindow on the right side of your screen. You're almost there! The last step is to locate the tab called Console and click on it. At last, we can see the error message that explains why the text isn't rendering.
Edit the file to fix the bug and save again. You should see the error message disappear, and the "Hello World" text to reappear. The developer tools console is your friend when developing scripts. When something is going wrong always check it for information. In fact, it's not a bad idea to get in the habit of working with the tools subwindow always open to the console.
You can also send debugging information to the console from your scripts using the console.log method. Try adding the following lines to your program, at the bottom of the init function (line 18). Save the file, and look at the console. Assuming you have no more bugs remaining, you should see output from these commands in the console tab.
console.log("This message goes to the console.");
let x = 10;
console.log("The value of variable x is: "+x);
Further Exploration
If you have time and want to explore a bit more, try adding the following three lines inside the draw() function, right after line 11 (the "Hello World" line):
graphics.moveTo(100,30);
graphics.lineTo(30,100);
graphics.stroke();
Save the file and view it in your browser. What do you see?
The three program commands on lines 11-13 create a drawn line on the screen. The first command specifies the starting point, the second specifies the ending point, and the last actually draws the line. Try adding a similar set of three commands to draw an additional line somewhere else. Make sure that the coordinates you specify are within the drawing canvas -- positive numbers less than 400.
Can you make an interesting image with just lines?
Wrapping Up
Lab activities are never graded, other than on participation. In future labs a solution will often be available for you to view. For the current lab, the activity is open-ended so there is no fixed solution to view.