Weeks of 6/11/2014 - 6/24/2014

• Work plans

After talking to Charles, we agreed to implement the following 3D functinalities:

  * Transformation (move x y z)
  * Rotation (rotate n degrees in the x, m in y, c in z)
  * Scaling (make the thing .5 times it's current size in the z axis)
  * Textures (apply this image to all the surface on the object) 
 

• Transformation

Suppose we are looking at the stage on the X-Y plane from point A at (z_eye, 0), point C at (z_obj, h_obj) is projected as point B on the stage as follows:

Add caption

We can apply the same idea on the X-Axis too. So if we can implement this idea perfectly, then object movements on the Z-axis look naturally. However, what I have implemented so far is not perfect -- when moving an object in the Z direction, I only change the size of the object, but keep the x and y coordinates the same. This is illustrated in the following example:

The center of the object does not change and is always at (x, y) = (100, 100) -- logically and physically. In this example, the viewpoint is at (x, y, z) = (0, 0, 200), so following the idea presented above, the projected X and Y coordinates on the stage should be:

• For (x, y, z) = (100, 100, -100): (x_proj, y_proj) = (66.67, 66.67)
• For (x, y, z) = (100, 100, 100) : (x_proj, y_proj) = (200, 200) 

To implement this correctly, 3D objects need to have logical coordinates as well as physical coordinates on the stage, but it causes a major change to the existing 2D system. So, it might be less problematic if we keep the 3D system as it is currently implemented.

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.