Problem Set 0: Turtle Graphics

1. Create your remote repository with the starting code for the problem set by visiting didit.mit.edu/6.102/sp24. Go to psets/ps0 and click the button to create your repository. You will only be able to create a repo after the course signup forms are processed and the problem set is announced, which happens after the first class meeting.

   • If you can’t create a repo after the ps0 announcement, you are not registered for 6.102. Contact the staff (how?) to check your status.

   • If you are a listener or not taking 6.102 for credit, you can’t create a repo. See instructions below to clone from a read-only remote.

2. Open the terminal (Git Bash on Windows) and go to the directory (using cd) where you would like to store your code. For example, that might be a directory named 6.102 in your home directory.

   If you are unfamiliar with using the command line, Basic Git introduces key commands like cd and mkdir.

3. Clone your repo. You will access the remote repository over SSH from your laptop.

   Note: Getting Started has setup you must perform before using Git.

   Find your git clone command at the top of your psets/ps0 page on Didit. It is a long command that looks something like this:

   git clone ... git@github.mit.edu:6102-sp24/ps0-«username».git

   Copy this entire command, paste it into your terminal, and run it. The result should be a directory named ps0-«username» with the starting code for the problem set. Keep the terminal window open — you will also use it to commit your code.

   • If git clone says “does not appear to be a git repository” or “could not read from remote repository”, check your repository URL for typos. Make sure your repository is listed on Didit.

     Check that you can authenticate to github.mit.edu in the last part of Git setup in Getting Started.

   • If you are a listener or not taking 6.102 for credit, you can clone problem set repositories using a modified URL: after ps0, omit the dash-username. You will not be able to push to this repository, it’s a read-only remote.

4. After cloning your repository, install its required packages:

   In your terminal, use cd to change directory into your clone:

   cd ps0-«username»

   Then run npm install to install the packages required by the problem set:

   npm install

   You should see something like “audited 138 packages” – the exact number may be different, but it should be much greater than 1. If you see “audited 1 package” instead, then you are probably in the wrong folder. Make sure you cd into your clone.

   You may see warning messages labeled “npm WARN”, which you can likely ignore.

   But if you see error lines labeled “npm ERR!”, then something is wrong. Get help.

5. Finally, open the project in VS Code so you can work on it. You can do so via the command line or from the menubar:

   • Command line: Run code . (or codium .) in your terminal window to use VS Code’s command line interface to open the current directory in a new VS Code window. If you instead get an error message, configure VS Code to launch from the command line, close and reopen your terminal, and try running code or codium again.

   • Menubar: In VS Code, click File → Open (MacOS) or File → Open Folder… (Windows/Linux), and select the root directory of your clone (ps0-«username») by navigating to it and clicking Open.

   

   If VS Code asks you “Do you trust the authors of the files in this folder”, then click the checkbox “Trust the authors of all the files in the parent folder” (so that you don’t have to answer this dialog box in the future, assuming you put all your 6.102 code in the same parent folder) and then answer Yes.

   

   Your Explorer pane should now have PS0-«USERNAME» as the root folder, as shown on the right.

1. Your first task is to implement drawSquare(turtle:Turtle, sideLength:number), using the two functions introduced above: forward and turn. The specification comment above drawSquare leaves several things unspecified, like which direction to turn, so those decisions are up to you as the implementer.

2. Once you’ve implemented the function, go to the main function in turtlesoup.ts. This main function creates a new turtle and instructs the turtle to draw on screen. There should be a call to drawSquare already there, but commented out. Uncomment this call so that your drawSquare will be called when the code is run.

   Then run main. There are two ways to do it, which both do the same thing:

   • From the terminal, in your ps0-«username» folder, run:

     npm start

     

   • From VS Code: open the Run pane with View → Run, and choose “Run npm start” from the dropdown at the top of the pane, as shown on the right. Then click the green play button next to the dropdown or use Run → Start Debugging from the menubar. This will open a terminal pane inside VS Studio and run npm start there.

     

     If your Run pane just has three big buttons on it, like the image shown on the right, then make sure you have ps0-«username» as the root folder in your Explorer pane, as described above.
3. After npm start runs, you will see any output or errors from your program. If the program succeeds, the resulting drawing will be written to output.html, and a browser tab will pop up showing the drawing.

1. First, in the terminal, change directory (cd) to your clone, and take a look around with

   git status

   which shows you files that have been created, deleted, and modified in the project directory. You should see turtlesoup.ts listed under “Changes not staged for commit.” This means Git sees the change, but you have not (yet) asked Git to include the change as part of your next commit.

2. You can run the command

   git diff

   to see your changes. (Note: when the diff is more than one page long, use the arrow keys. Press q to quit the diff.)

3. Before committing, files must be staged for commit. Staging a file is as simple as

   git add <filename>

   so use

   git add src/turtlesoup.ts

   to stage the file. You should also stage the test file if you’ve added more tests.

4. In addition, it’s always a good idea to review your commits before committing to them. Run

   git status

   again to see that your changes are now listed under “Changes to be committed.”

   Now try running

   git diff

   and notice that those changes are no longer shown in the diff output!

   So instead use

   git diff --staged

   to see exactly what Git will record if you commit now.

5. Ready? To perform the commit,

   git commit

   will actually commit the changes locally, after opening your default editor to allow you to write a commit message. Your message should be formatted according to the Git standard: a short summary that fits on one line, followed by a blank line and a longer description if necessary.

   To finish the commit, save and close the message tab in your editor.

   If Git warns you about configuring your default identity or you can’t edit your commit message, you did not follow the instructions in the Getting Started guide. Getting Started has setup you must perform before using Git.

   Now run

   git status

   once more to see that your changes are no longer listed and that you are now ahead of origin/main by 1 commit.

6. Use the command

   git lol

   to see the history of commits in your project. (git lol is not a misspelling; it is an alias for the git log command that we configured in Getting Started.)

   Right now, the log should show three commits: an initial commit with the starting code, a commit when you created your problem set repo, and the commit you made just now.

   Important: only the local history has the new commit at this point; it is not stored in your remote repository. This is one important aspect where Git is different from centralized systems such as Subversion and CVS.

   Find the ID of the commit you just made (git lol shows it as a hexadecimal number like 3d60b25), and use it to view your changes again:

   git show <commit>

   You should see the changes you just made. (The output viewer shows only one screenful at a time, so use the arrow keys or Page Up/Page Down to scroll up and down, and quit the output viewer by pressing q.)

7. In order to share the changes with your remote repository (which is the one we will be using for grading), you need to push to the remote repository, with

   git push origin main

   At this point, the remote repository on github.mit.edu now has the same history as your local repository. It is important to remember that we will be grading the history in the repository on github.mit.edu; if you forget to push, we won’t see your commits.

1. Implement chordLength, reading the specification comment above it carefully to understand what it should do. (You can also click this link to see the same specification on a web page.)

   There’s a simple formula for the length of a chord of a circle; try to derive it before searching the web.

   You may also find the built-in Math functions useful.

2. Run the public tests that we provided.

     chordLength
       ✓ acute angle, integer result
       ✓ right angle, decimal result
       ✓ obtuse angle, decimal result
   
     distance
       1) for p1.x = p2.x, p1.y != p2.y
       2) for p1.x != p2.x, p1.y != p2.y
       3) for p1.x = p2.x, p1.y = p2.y
   
   ...
   
     3 passing (20ms)
     7 failing
   
   ...                                           
   

   In 6.102, we use Mocha, a widely-adopted JavaScript testing library. We’ll see more about Mocha, and about testing in general, in an upcoming class. For now, let’s focus on running the provided tests against your implementation. By convention, Mocha tests are in a subfolder named test and are named with Test or test added to the name of the source file they are testing. So the public tests for this problem set are in test/turtlesoupTest.ts.

   To run the Mocha tests in turtlesoupTest, use npm test, which you can do one of two ways:

   • From the terminal, in your ps0-«username» folder: run npm test.

   • From VS Code: go to the Run pane, choose “npm test” from the dropdown menu, and run your program from the Run menu.

   If your implementation of chord­Length is correct, you should see green check marks ✓ next to the chord­Length tests in the list of results, as shown on the right. (You may have to scroll your terminal window upwards to see this.)

   The red lines in the remaining sections of the test report, and the “7 failing” in the summary at the bottom, indicates that those tests have failed. That shouldn’t surprise us, since the other tests are exercising methods we haven’t implemented yet. Once they are passing, all those tests will turn into green check marks!

3. Try breaking your chord­Length implementation (make it return a wrong answer) and run the tests again.

     chordLength
       1) acute angle, integer result
       2) right angle, decimal result
       3) obtuse angle, decimal result
   
     distance
       4) for p1.x = p2.x, p1.y != p2.y
       5) for p1.x != p2.x, p1.y != p2.y
       6) for p1.x = p2.x, p1.y = p2.y
   
   ...
   
     0 passing (20ms)
     10 failing
   
     1) chordLength
          acute angle, integer result:
        Error: implement me!
         at chordLength (src/turtlesoup.ts:29:11)
         at Context.<anonymous> (test/turtlesoupT
         at processImmediate (node:internal/timer
   
     2) chordLength
          right angle, decimal result:
        Error: implement me!
         at chordLength (src/turtlesoup.ts:29:11)
         at Context.<anonymous> (test/turtlesoupT
         at processImmediate (node:internal/timer
   ...                                           
   

   The chordLength tests in the summary at the top should now be red. Each failing test has a number corresponding to a section below, with a brief explanation of what went wrong, and a stack trace. In the VS Code terminal, a filename in the stack trace acts like a hyperlink, and Ctrl-clicking (or Command-clicking) on it will bring up the code for that stack frame. This is most useful for lines that correspond to your code; this stack trace will also contain lines for JavaScript libraries or Mocha itself, which are less useful to look at.

   • If Ctrl-/Command-clicking on a filename doesn’t open it, then make sure you are in the Terminal pane of VS Code (not in the Debug Console pane, and not in an external terminal window).

   Try Ctrl-/Command-clicking on one of the test/turtlesoupTest.ts lines in the stack trace, and look at the code for the test. On that line, you should see a call to your chord­Length implementation with particular values for its arguments, within a call to assertAlmostEqual() that checks whether your implementation’s return value was correct. A Mocha test generally has this form: it calls your implementation, then makes one or more assertions about the value that your implementation returned.

   Hover your mouse over assertAlmostEqual() to learn more about what this method does. Hovering over a class or method name is a good way to get a compact overview of its documentation in VS Code:

   function assertAlmostEqual(actual: number, expected: number, delta: number, message?: string): void

   ---

   Assert that two numbers are equal within a given error tolerance.
   @param actual — answer actually returned by the module being tested
   @param expected — answer expected by the test
   @param delta — actual is considered equal to expected if it’s within +/- delta; defaults to 0.001
   @param message — optional message with extra information about this test case, to display when the assertion fails

4. Enough breaking: fix your implementation so it’s correct again. Make sure the test passes with a green check ✓.

   Passing the public Mocha tests we provide does not necessarily mean that your code is perfect. You need to review the function specifications carefully. In future problem sets, we’ll also expect you to write your own Mocha tests to verify your code.

5. Implement drawApproximateCircle.

   Use your implementation of chordLength. To test this function, change the main method to call drawApproximateCircle and verify that you see what you expect.

   You may notice an opportunity to DRY out drawSquare and drawApproximateCircle. Take advantage of the opportunity, but be careful not to change the specification of either function.

1. Implement distance.

   This function calculates the distance between two points, where the points are represented by the Point class defined in turtle.ts.

   Remember to run the Mocha tests.

2. Implement findPath.

   This function finds a path (a sequence of turns and moves of the turtle) that visits a list of given points. You should use your distance method as appropriate, and you may want to define other helper functions to make your code clearer.

   Pro tip: you can run just the tests for findPath using:

   npm test -- -f "findPath"

3. At this point, Mocha should be passing the tests for distance and findPath.

Commit to Git. Once you’re happy with your solutions for this problem, commit and push!