Week of 6/4/2014 - 6/10/2014

• 3D Costumes  

Last week, I demonstrated a few rotating 3D costumes, but they were working with specific scaling factors to show them on the stage nicely. To display arbitrary-sized 3D costumes on the stage, there are several options including the following:

1. Keep the original dimension of 3D costumes
2. Scale the dimension of 3D costumes to fit a specific-sized canvas

Currently, the size of the stage is (360, 480); however, available 3D objects do not always fit to this size. So, it seems to me that option 2 looks reasonable at this point. Moreover, we can change the size of 3D objects by the "change size by X" block.

I choose (160, 160) as the dimension of a canvas for 3D costumes on the stage.  To find appropriate scaling factor to fit this canvas, I used the idea described this Q & A page. As a result, a general 3D costume loading function is successfully implemented as follows:

In this figure, spheres are called bounding spheres and are displayed for debugging purpose. No matter how we rotate the 3D objects, they stay inside the spheres. I implemented these sphere to be scaled to fit the (160, 160) canvas.

• Issues
•  2D rotation still does not work properly. The size of the canvas gets bigger depending on the rotation.
•  Nesting for 3D operations are not implemented yet. 2D operations seem to work.

Week of 5/28/2014 - 6/3/2014

• 3D Costumes

I have been working on "real 3D costumes" this week. By "real 3D costumes", I mean you can load arbitrary 3D objects from three.js-compatible JSON files. Here are some examples of those JSON files: Walt Disney and Suzanne.

As suggested by Prof. Eglash, I added the following menu for loading 3D costumes:

Once you load 3D costumes from the newly added 3D Costumes menu, sprites on the stage look as follows:

• 3D Rotation (Turn)

3D Objects can be rotated around X, Y, and Z axes as depicted in the following figure.The Z-axis is not really visible on the stage, but logically it is there as if it is coming towards you.

To rotate objects in 3D, the following blocks are added this time. Names of the blocks are tentative (please let me know if you come up with a good one).

• 3D turn: This block is used to turn the object gradually. That is, it adds the specified parameters to the current object's degrees.

 

• 3D point: Unlike the 3D turn, this block rotate the object to point absolute degrees in the 3D space.

Here is an example of rotated objects:

• Github repository

The source code implementing these 3D functions can be found at:
  https://github.com/imais/Snap--Build-Your-Own-Blocks
Please note this is highly experimental, so use it at your own risk.

• Issues

• When rendering 3D objects, scaling factors are chosen to fit a 120 by 120 canvas. We need to figure out a way to properly scale and project 3D objects on the 2D stage.
• 2D rotation does not work properly. The size of the canvas gets bigger depending on the rotation.

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