Notes for April 21 class: Various topics

Overview of what we discussed in class

In class we talked through how to connect with IMU from within HTML, and we looked at three examples (more on that below).

Then we had a discussion about two link IK. Here is the source code for my two link IK function. Note that it assumes you have already implemented a function dot() to perform an inner product between two length-three vectors.

      The shoulder is assumed to be at the origin [0,0,0].
      a is the length of the forearm.
      b is the length of the lower arm.
      C is the [x,y,z] location of the wrist.
      D starts out as an [x,y,z] "hint location" for the elbow,
        and is overwritten by the exact location of the elbow.
function ik(a, b, C, D) {
   var cc = dot(C,C), x = (1 + (a*a - b*b)/cc) / 2, y = dot(C,D)/cc;
   for (var i = 0 ; i < 3 ; i++) D[i] -= y * C[i];
   y = Math.sqrt(Math.max(0,a*a - cc*x*x) / dot(D,D));
   for (var i = 0 ; i < 3 ; i++) D[i] = x * C[i] + y * D[i];

We also had a discussion about Lance Williams' ingenious texture anti-aliasing algorithm Mip Mapping, which he first published in 1983, and which you are still using in your computer and SmartPhone GPUs today.

At the end of the class, we showed Karl Simms' 1990 seminal computer animated short Panspermia.



Your computer as a web server for textures and virtual reality

In order to see your textures while running on your own computer, you need to run a server. To do that, you just need to go to the folder where you have an index.html file containing your graphics homework, and run the following from the command line:

python -m SimpleHTTPServer

In order to be able to run the above command, you will need to install python, which you can do by following the instructions at:
Once your server process is running, then you will be able to see your textures, because Chrome will think it is getting the info from a server, not from local files.

Now you are ready to see your homework example with textures, using your own computer as a server, by typing the following into Chrome's address line:

The ":8000" specifies the server port. 8000 is the default port number for the Python server.

As long as you got this far, you can also use your server to run VR on your SmartPhone, using your computer as a server, the way I did it in class.

To do that, you need to open Chrome on your SmartPhone and type the following into the address line:

http://<IP ADDRESS>:8000
In the above, you need to replace <IP ADDRESS> by your computer's actual IP address. On a MacBook you can find that under the Apple logo on the top-left of your screen, in the System Preferences → Network dropdown. Or you can use the following little shell command in a terminal window (which I wrote just for this purpose):
ifconfig | grep broadcast | sed 's/.*inet //' | sed 's/ .*//'
Now you can use your SmartPhone's IMU to compute direction and tilt, like I showed in class. The examples we looked at in class, which make use of that capability, are in

Remember that you need to be in the imucode/ directory when you start the Python server.

Note that the version of CT_Modeler.js in the imucode/ directory is the most up to date version. In particular, it will handle stereo viewing properly.




Please use the time between now and next Thursday, April 28, to make any changes or improvements to your work on the homeworks that have been assigned so far.

Also, we are getting nearer to the end of the semester, and now it is time for you to think about a final project. I would like you to do this in three phases:

  1. Phase 1 (Due Thursday April 28): Post a proposal on your web site for a final project. It can be on any topic of your choosing that relates to this course, whether something we have already covered, or some other topic that you would like to explore. This is your chance to go deeper into some computer graphic topic of particular interest to you.

    The scope of the project, in terms of total amount of work, should be equivalent to about three of our weekly assignments.

    I will review your proposals on-line, and will give you feedback as to whether I think you are on the right track. So clearly it will be to your advantage to post something sooner, rather than waiting until the last minute, because I will be able to give you earlier and better quality feedback.

  2. Phase 2 (Due Thursday May 5): Have a complete first "draft" implementation of your final project. We will briefly look through these drafts together in class on that day, so make sure you have something to show.

    This will give you a chance to refine your project, based on feedback from both myself and the rest of the class.

  3. Phase 2 (Due Thursday May 12): Complete the final version of your final project.