Lab 1: Pseudo code

Overview

In this lab you'll learn to write pseudo code and then translate it to real code.

Learning objectives

By the end of this lab, you should feel comfortable:

• writing a C++ program in Visual Studio Code
• compiling and running a C++ program on the command line
• writing pseudo code
• translating simple pseudo code to C++ code
• submitting multiple files to Canvas

Part 1: Pseudo Code

Video overview: Link

Head over to Shape Artist, a simple, bare bones drawing pad that only lets you draw circles and rectangles. Draw a picture (e.g., of a tree or a house with a flat roof, etc.) using 5-15 shapes. Click the "Export PNG" button when you're finished (you'll submit the PNG to Canvas at the end of this lab). If for some reason the PNG doesn't download, take a screenshot of it. Rename this lab1-part1.png.

In Visual Studio Code, open a new file (File -> New File) and save it as a file named lab1-part1.txt. Write your name, the date, and the assignment title at the top. Under that,  write pseudo code (a series of English instructions) to describe how to recreate the drawing exactly as it appears on your screen. Use the "Select" button in Shape Artist to see stats about a shape to help you out. For example, if you click on a circle, it'll tell you the (x,y) coordinates of the center as well as the radius. You should be able to hand your pseudo code to another human with a pen and graph paper and they should be able to follow your pseudo code to create an image identical to the one you have.

Part 2: The hand off

Video overview: Link

Find a classmate who is finished their pseudo code and exchange your pseudo code with them. Go back to Shape Artist and click "Clear drawing".  Follow your classmate's pseudo code instructions. Export the picture you produced (or take a screenshot of exporting doesn't work) and send it to your classmate.

Hold onto the picture that your classmate produced following your pseudo code; rename it lab1-part2.png. If the drawing your classmate created using your pseudo code looks off, find out why. Is there something incorrect with or missing in your pseudo code? Or did your classmate not follow directions? If the former, copy your pseudo code to a new file named lab1-part2.txt and correct the mistakes.

Part 3: Transcribing pseudo code to C++

Video overview: Link

You will now transcribe your pseudo code to C++. To do this, download lab1.cpp. Move it to a folder for your CSC160 work. Then open Visual Studio Code and select File -> Open Folder, and choose the folder where you moved your lab1.cpp file:

You should be able to select the lab1.cpp file from the explorer pane in the left hand side of VS Code to open it for editing (A in the screenshot below); if you don't see the explorer, click on the explorer toggle button (B in the screenshot below).

Before you do anything else with the file, add the date and your name (you're the author) to the header at the top of the file.

You will place your code in the main function (search for where it says TODO in the code). You cannot use your pseudo code directly—that isn't valid C++. However, I have included a number of C++ functions in the lab1.cpp code that you should use to build a picture. You can read about what these functions do and how to use them in the comments above each function's code (below main in the source code), or you can see the application programming interface (API) described here. Using API documentation to learn how to use a new library is a crucial skill, so take a little time to look it over.

You will need to make sure the first statement in main is start(); and the second-to-last statement, just above return 0; needs to be end(); Here's an example of the code I would add to main to draw a green circle with radius 100 at the coordinates (150, 200) sitting on top of a  blue 100x50 rectangle starting at (100, 300):

start();
go(150,200);
setColor("#008000");
drawCircle(100);
go(100,300);
setColor("#0000ff");
drawRectangle(100, 50);
end();

Rather than transcribing your entire program all at once, engage in incremental programming: write one or two lines of code, then follow the steps below to compile your code, run it, and check the generated drawing is what you expect. This will safe you time later!

The first time you go to compile your program, open a terminal by right clicking on the name of your program in the explorer sidebar and select "Open in Integrated Terminal". 

The integrated terminal should open at the bottom of VS Code. Click anywhere in there and then type ls to make sure that your lab1.cpp file is there:

If it's not, let me know and I will help you out. You can also take a look at the "Using the command line" section of the Programming environments page to find out more about how to get into the correct directory. Once in the correct directory, you can compile from the terminal like this:

g++ lab1.cpp -o lab1

If you encounter errors, then attempt to address them (feel free to ask a classmate or me for help) and recompile. Once it compiles without error, run your program like this:

./lab1

Every time you run this program, it will generate a file named lab1.html (and overwrite it if it already exists). If no lab1.html file is generated, then you probably either put code outside of main or you didn't call start() or end() in the correct spots—see above. The first time you run your program, you need to open that file in your web browser; the easiest way to do that is to find lab1.html in the VS Code explorer, right click, and select the "Reveal in File Explorer" (or "Reveal in Finder" if you're on macOS):

When File Explorer/Finder opens, double click the lab1.html file and it should open up in your default web browser. Any time you run the program after that, if the page is already open in your browser, you just need to refresh the page.

You have successfully implemented your pseudo code when you see a replica of the picture from your original handout.

Every time you make a change to your code, make sure that you

1. recompile
2. re-run your program on the command line
3. refresh the page in your browser (since running your program updates the lab1.html file)

Submission

Here's what you should submit once you're done all three parts:

• your original pseudo code file (lab1-part1.txt)
• the picture of you made on Shape Artist (call this lab1-part1.png, if you can't figure out how to rename the photo, that's okay)
• the picture of your classmate's attempt to follow your pseudo code (lab1-part2.png; if you can't figure out how to rename the photo, that's okay)
• your updated pseudo code if you made any changes in part 2 (lab1-part2.txt)
• your completed C++ source code (lab1.cpp)
• the generated HTML page (lab1.html)