General Lab Advice

Here is some general lab advice relevant to most or all graphics labs. First and foremost, start early and ask questions early. Make small changes until you get comfortable with how your changes impact the scene. It is easy to go from a completely working demo to a blank canvas with one bad matrix multiply, and it is easier to unroll that change if you haven’t made five other changes in the meantime.

1. References

1.1. JavaScript

1.2. WebGL2/TWGL

2. Cloning Files

After the initial week 1 setup you should only need to move to your labs folder and clone your raymarch repo from the Github CS40-F20 org

cd
cd cs40/labs
pwd                   # should list /home/you/cs40/labs
git clone git@github.swarthmore.edu:CS40-F20/raymarch-yourTeamName

Longer GitHub setup instructions are available off the Remote Tools pages if you need help. You will be assigned a random team name that is the concatenation of material property, e.g., translucent, and an animal, e.g., Porcupine.

2.1. Setting a Symbolic Link

Similar to prior labs, we will link to the cs40lib of third party libraries. But this week, you should not need to create the primary link in your ~/cs40/labs folder. You just need to add a sym link to the parent lib folder in your raymarch folder.

cd
cd cs40/labs   #make sure you are in labs, not raymarch
cd raymarch-yourTeamName   #use your team name
ln -s ../cs40lib ./lib   #pay attention to the dots

If you have a local clone of the c40lib repo, you will need to pull changes as I added a library and some image files. If you are using the files on the CS network, this step is not necessary.

3. Running and Viewing your Lab

You will use the same process as prior labs to start a webserver with python3 and tunnel with ngrok.

To run the server, change to the directory you want to serve and run the following command using python3. Note the & at the end to run the server in the background.

cd
cd cs40/labs/raymarch-yourTeamName
python3 -m http.server &

You should get a message saying

Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/)

If instead you get a long error message ending in

OSError: [Errno 98] Address already in use

It may mean someone else is running a server on the same port, possibly you. If it is you, you can either continue using the existing server, or kill the old server using

pkill python3

You can also try running your server on a different port other than 8000

cd
cd cs40/labs/{lab}-yourTeamName
python3 -m http.server 8080 &

Serving HTTP on 0.0.0.0 port 8080 (http://0.0.0.0:8080/)

As long as we eventually get a Serving HTTP message, we are ready to proceed to the next step

3.1. ngrok http 8000

The address http://0.0.0.0:8080/ is only usable if you are on campus and logged in directly to the machine you started the server on.

The ngrok tool will create a temporary public URL that you can use to access your webserver from anywhere. To run it, just provide the protocol and port number that your webserver is running on.

ngrok http 8000

This should pop up a small display in your terminal listing a Forwarding URL.

Forwarding                    https://b985958321b9.ngrok.io

The session will last at most 8 hours, or until you stop the process with CTRL-C

4. Submit

Once you have edited the files, you should publish your changes using add, commit and push.

The git push command sends your committed changes to the github server. If you do not run git push before the submission deadline, I will not see your changes, even if you have finished coding your solution in your local directory.

If you make changes to files after your push and want to share these changes, repeat the add, commit, push loop again to update the github server.

If you want to commit changes to files that have already been committed to git once, you can combine the add and commit steps using

$ git commit -am "bug fix/updates"

The -a flag will automatically add files that have been previously committed. It will not add new files. When in doubt, use git status, and please do not use git add * ./

Please do not add your symlink to the cs40lib folder. I have it set to be ignored, and it may create conflicts if partners are working on different personal computers.