Week of 5/21/2014 - 5/27/2014

• Experiments on 3D costumes

I have been focusing on implementing 3D costumes this week, and it works pretty well as shown in Figure 2.

Figure 1. Default 2D Costumes

Figure 2. 3D Costumes

Currently, 3D costumes can be loaded from the Import menu like other 2D costumes, and I am forcing the filename of a 3D costume to be "3d-[shape].[extension]" to identify the shape of the 3D costume. For example, the filename of a 3D cylinder has to be "3d-cylinder.png".

As for the color, a (perhaps randomly chosen) color for the default arrow shaped icon is taken over. We can see the colors for 2D costumes used in Figure 1 are also used in 3D costumes in Figure 2.

We can interchangeably select regular 2D and 3D costumes for a single sprite without a problem. Scripts can be written as well for 3D-costumed sprites.

• GUI for 3D shapes

Professor Eglash proposed the following three options for users to select 3D shapes:

 
  1) Each shape appears as an individual codelet:

  2) The shapes are in a drop down from one codelet:

  3) There is a list accessible from the file menu:

After a brief email discussion with the professor, Charles, and myself, we think it is the best if we have both option #1 for the Pen interface, and option #3 for the 3D costume selection interface.

• Issues 
• We cannot directly specify the diameter or length of 3D objects when rendering them using three.js because of the camera position. There may be a way to do it as discussed in this Q&A though.

• How to implement applications like VirtualWigwam ? To dynamically rotate a 3D space, we need to create a 3D stage that allows us to place multiple 3D objects in the same 3D space. That will introduce major design changes from the current C-snap. Perhaps, we should do the above option #1 and #3 on the existing 2D stage first and then implement a 3D stage as another mode ?

Week of 5/14/2014 - 5/20/2014

• Playing with Three.js

Just to get used to 3D rendering with Three.js, I followed the this instruction and successfully displayed a rotating 3D cube on Google Chrome.

• Displaying a 3D cube on the stage of C-Snap

Next step is to bring this 3D cube to the C-Snap's stage. As Prof. Eglash mentioned in an email, there seems to be two options to do that:

1. Pen
2. Costume

I thought option #1 seemed easier and the "stamp" function of C-Snap was a good start to learn how to display images on the stage. So, I started from the "doStamp" function, which displays an image of a Sprite, and tried to modified it to display a rotating 3D cube on the stage. Here is the summary of what I did:

• Added a new "stamp cube" codelet, which calls "doStampCube" function.
• Copied the "doStamp" function in object.js and named it "doStampCube", and then replaced context.drawImage() with three.js commands to draw a 3D cube. Also, added a step function to constantly render the cube for animation (thanks to suggestions from Charles & Libby!!).

Here is the result:

It looks good in a sense that the green 3D cube keeps rotating; however, as soon as you move the Sprite (the arrow-head shaped object), the animation stops as follows:

In this figure, the left half of the cube keeps rotating, but not the right half. This means that the area around the Sprite is subject to update, but not the other area. This is a reasonable behavior considering the fact that stamp is designed for still images.

At this point, I don't know if I should try to resolve this issue with option #1 or start working on option #2. I will keep looking both options for now.

Getting started

So, I will be working on a 3D-system for javascript-based C-Snap over the summer.
Perhaps the first goal would be to port the VirtualWigam application currently written in Java to C-Snap.

To Do:

1. Understand how C-Snap works 
2. Understand the requirements for the 3D-system in C-Snap
3. Learn Web-based 3D technologies in general and existing 3D libraries including three.js