\( \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.Color.NAMES, 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.

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:

Model Solution

Here is a model obelisk solution. (Note that the height of the bounding box in this solution does not accommodate the full range of the main height that the user can set in the GUI, but in your solution, it should.)

I give you this to clarify what I'm looking for. I expect that you will not try to reverse-engineer the solution. I have made it difficult (so you won't accidentally see the solution), but it would not be impossible. Please don't try.

How to Start

I suggest you copy the customBox example that we talked about in class:

    cd ~/public_html/cs307-assignments/
    cp -r ~cs307/demos/early/customBox/ obelisk/
    opendir obelisk/
    cd obelisk

You can copy scene instead, or any other example.

Submission and Security

Put your solution in a webpage with the following URL: 

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

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 SCP, 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, download as PDF, and upload to Gradescope. 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.

When you are done, download the document as a PDF and upload to Gradescope.

Gradescope

To save paper and to allow online grading, I want you to use Gradescope. Gradescope requires a PDF to be uploaded, so you'll have to generate such a PDF. Here's one way to do it:

  • Create an empty Google Doc.
  • Write in it a sentence like: I, Hermione Granger, hgranger worked on this.
  • Use the File menu to download the page as a PDF.
  • Upload the PDF to Gradescope. If Gradescope complains about the length (it shouldn't), make sure your PDF is 1 page.
  • This doesn't take but a minute or two.

How to turn this in

You need to submit two items to Gradescope. (You don't have to submit them at the same time, if you finish the math before the obelisk or vice versa).

  1. A "placeholder" document as described in the previous section. I will run and grade the code in your obelisk directory.
  2. A PDF of your solution to the math problems.

That's it. We'll use this procedure for most assignments this semester.