\( \newcommand{\vecIII}[3]{\left[\begin{array}{c} #1\\#2\\#3 \end{array}\right]} \newcommand{\vecIV}[4]{\left[\begin{array}{c} #1\\#2\\#3\\#4 \end{array}\right]} \newcommand{\Choose}[2]{ { { #1 }\choose{ #2 } } } \newcommand{\vecII}[2]{\left[\begin{array}{c} #1\\#2 \end{array}\right]} \newcommand{\vecIII}[3]{\left[\begin{array}{c} #1\\#2\\#3 \end{array}\right]} \newcommand{\vecIV}[4]{\left[\begin{array}{c} #1\\#2\\#3\\#4 \end{array}\right]} \newcommand{\matIIxII}[4]{\left[ \begin{array}{cc} #1 & #2 \\ #3 & #4 \end{array}\right]} \newcommand{\matIIIxIII}[9]{\left[ \begin{array}{ccc} #1 & #2 & #3 \\ #4 & #5 & #6 \\ #7 & #8 & #9 \end{array}\right]} \)

CS 307 Hwk 1: Obelisk

This assignment has two parts: programming and math problems. Please do both.

Goals

The main goal of the programming component of this assignment is to help you feel comfortable with building an arbitrary object out of raw geometry. We'll soon be building things with spheres and boxes and other built-in Three.js geometries, and that will be a powerful building technique, but we need to have lots of tools in our toolbox. When you get to your project, I want you to feel you can build anything you want.

Note that the obelisk is not an enormously challenging object, but it illustrates all the important concepts.

Obelisk

(100 points)

Build a polyhedron that looks roughly like the Washington monument. Some key dimensions of the Washington Monument:

  • width of the base is about 55 feet
  • width of each side at the top is about 34 feet
  • the height of the small pyramid (pyramidion) at the top of the monument is 55 feet
  • The height of the whole monument is 555 feet

This should help you get something that looks approximately like the Washington monument. Exactness is not necessary, and indeed, you should make your code appropriately parameterized.

Some additional requirements.

  1. Your polyhedron will have 8 sides (four for the pyramidion and four for the tower). You should not have a base.
  2. The origin of the monument should be at the center of the base, directly below the peak.
  3. Build a GUI so that you can play with the dimensions of the monument.
  4. The bounding box must be correct, so that I can see the whole figure by using the mouse. (To display the bounding box, type a "b".) The bounding box should fit snugly, for the largest values of the dimensions that can be set by the user in the GUI.
  5. Each side should be a different color, so that all the edges are plainly visible.
    • Use a variety of different ways of specifying the colors (e.g. THREE.ColorKeywords, hexidecimal notation, CSS string, rgb, or even TW.randomColor() if you're feeling uninspired).
    • Use RGB color at least twice, to show you know how to use it. Document the color you are using.
  6. Your material should be the default one-sided material, so that if we look at the monument from below, the sides will disappear.

Please read the standard instructions for all assignments.

Feel free to use our template.html as a starting point.

Consider building your solution incrementally, for example:

  1. build the obelisk geometry and view it with the demo materials created with the TW.createMesh() function
  2. add a GUI to adjust the parameters interactively
  3. create a mesh for your obelisk with different colors for the faces

Here is a snapshot of an obelisk solution with GUI controls in the corner, and the camera set with mouse controls, to view a few surfaces of the obelisk:

Submission and Security

Put your solution in a webpage with the following URL: 

https://cs.wellesley.edu/~youraccount/cs307-assignments/hwk1.html

Please do not name it anything else, because I will look for that file to grade. That's all you need to do to submit.

A cs307-assignments subfolder has been added to the public_html folder in your individual account on the CS server. This folder is protected from prying eyes by the permissions you set on the files (so don't make them world-readable) and by the .htaccess file that is in the account. You can use Cyberduck or some other file transfer program to transfer files between your local machine and your account on the CS server. (More details are given at the end of this handout.)

Math

(20 points)

Please do the problems in this shared Google doc. It is view-only, so please make your own copy of the Google doc, enter your answers into the document, and submit by sharing your copy with me (be sure that an email message is sent to me in this case). Please also include your name in the name of the Google doc. If you'd like to include a sketch, please use a drawing program if possible and insert the image in the document. If necessary, you can write out your solutions by hand and make an electronic picture (e.g. with your cell phone), but please be neat and use a dark pencil or a pen.

How to turn this in

  1. Connect to the server (cs.wellesley.edu) using Cyberduck or some other FTP program. You will need to enter your username and password for your individual account.
  2. Navigate to your public_html/cs307-assignments folder
  3. Upload your hwk1.html file to that folder. (If you create any support files, such as a separate hwk1.js file, be sure to upload these as well.)

    That's pretty much it, but you should check to make sure nothing went wrong, so:

  4. Open a web browser and go to the given URL. It should ask you for a username and password, saying something like "cs307grader or User". Give it the same username and password that you used above. It should then show you your webpage with working assignment. Feel free to contact me if you run into any difficulty.

Everything this term will be submitted like this, so once you get the hang of it, the submission should be easy.