teaching machines

Setup

May 5, 2021 by . Filed under public, slai-2021.

This post is part of a course on geometric modeling at the Summer Liberal Arts Institute for Computer Science held at Carleton College in 2021.

In a normal year, you attend SLAI on campus at Carleton, and we provide you with food and computers. Since we’re online this summer, it’s BYO. Nonetheless, by the end of this lesson, I will give you both a pretzel and a computer that lives in the cloud.

Not all of us have powerful computers on which we can install software, so we instructors have built our course activities around technologies that anyone with a web browser and an internet connection can access. Herein I describe how to set yourself up for these activities in our course on geometric modeling.

CS50 Setup

Follow these steps to claim your pretzel and computer-in-a-browser.

  1. Create an account on GitHub. GitHub is a company that keeps code and other files on their computers, instead of just your computer, so that many people can access them. We won’t be using GitHub’s services directly. However, the development environment we are using expects you to have a GitHub account.
  2. Visit CS50 IDE and log in with your GitHub credentials. This is a browser-based development environment made by folks at Harvard University to teach their massive introductory programming course. Upon logging in, a remote computer is made for you. You operate this computer through the web browser. It doesn’t have all the features of a real computer. However, it gives you everything you need for this course: a text editor, a web browser, and a terminal in which to run commands.
  3. Click File / New File and paste in the following HTML: 
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SLAI 2021: Geometric Modeling</title>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/TrackballControls.js"></script>
  </head>
  <body>
    &#x1F968;
  </body>
</html>
  4. Save the file. Click File / Save As and use the name index.html.
  5. Start up a web server to render the web page. In the terminal at the bottom of the window, enter the command http-server.
  6. View the web page in a web browser. Click on the link in the output of the command and choose Open in Preview. At the end of the URL in the location bar, add index.html. You should see a pretzel.
  7. Make both the code editor and the browser visible at the same time. Click View / Layout / Vertical Split. Drag one of the windows around by its tab to the empty column.
  8. Share your machine with your instructors. Click on the Share button in the top-right corner. (You may need to allow popups.) Invite users twodee and quocodile.