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.