Canvas 3D

Canvas 3D Tutorial

Building on my experience with threeJS and simple simulations, I decided to do a tutorial on Canvas 3D using threeJS and webGL as a demonstration of new web technologies. The basic star field simulations I had completed before had given me a general understanding of the procedure for creating objects in Canvas 3D, and I decided to work with the other primitives as well as do basic physics. I decided that the deliverable would be a basic foundation for the Crazy Leap Pong game that I developed. It would serve as an ideal introduction to integrating threeJS, leapJS (for LEAP motion controller) and Node.JS.

The Crazy Leap Pong article addresses the programming that began with the scene created by the tutorial. This article aims to address the creation of the tutorial itself.


Tutorial: First Steps Scripting Silverback: Recording the Action Editing Presentation Video Github

Tutorial: First Steps

One of the first things I realized when creating the tutorial was that it was best to have a working prototype of the technology I wanted to demonstrate before I began recording. One of the worst things that can happen to any live demo is to have the end result fail (sometimes spectacularly). The same goes for a recorded demo; it would be an unnecessary loss of time to record a demo and then have the final threeJS simulation fail to perform according to expectations. I decided that the demo must work flawlessly before any recording could be done, and this was accomplished with little to no problems


My initial tests with recording the tutorial demonstrated the need for me to have a script prepared beforehand. Attempting to do the demo in real time resulting in a lot of stumbling that would complicate the editing of the final product. Since I had already completed the code that would be presented during the tutorial, I decided that preparing all of my instructions and comments about the code would be prudent. The code was broken down into small pieces that I could record as inpidual segments which would then be edited together to make the final tutorial.


Silverback: Recording the Action

For screen recording, I decided to use an application for Mac OS X called Silverback. It is intended for user experience testing, capturing both the screen and the camera image. It does allow the export of footage without the user camera capture, which made it suitable for documenting the tutorial. One feature that I found beneficial was the mouse click point highlighting which helped keep track of actions of the screen during the presentation.


Given that my target length for the tutorial was approximately 10 minutes, it was inevitable that there was going to have to be a fair amount of footage needing to be cut after I finished recording. I ended up with 14 segments of footage in total with almost 12 minutes of length. Carefully reviewing my audio, I eliminated any unnecessarily long gaps in speech and anything else that would not adversely impact the understanding of the tutorial.


Given that the text in the tutorial would have to be legible, it was necessary to encode at a fairly high bit rate and at a sufficient size. Uploading to Youtube, I ensured that the tutorial would have the option of being presented at 720p and full screen. In the near future, I would like to add captions to the video which will require examining the script and all the remarks in the video where the script was not followed word for word.

Tutorial Video

The tutorial is featured below and can be found on Youtube using this link


The Github repository with the latest version of this project can be found here.

Aubretia Transportation Center

The Aubretia Transportation Center is intended to be a complete inter modal transportation facility combining space for the Aubretia Metro, Amtrak, California High Speed Rail, municipal bus, private cars and shared vehicles. The transportation center combines all of these services into a compact complex where moving between long distance rail and metro is as simple as ascending two escalators. Compared to Union Station or Midway Airport in Chicago where transferring to rapid transit involves considerable walking the goal of the Aubretia Transportation Center is to provide for simple transfers between transit systems. The form of the transit center will seek to evoke the classic train stations of Industrial Age Britain and France, with wide vaulted sheds enclosing passenger space.

Bellingham Bay Community Boating Center

The Bellingham Bay Community Boating Center is a non-profit organization located on the historic Fairhaven Harbor of Bellingham, Washington. The center offers boat storage, launching, and classes on boating. The objective of this studio was to develop a plan for the future of the site, aiming to dramatically expand the facilities and propose additional activities to take place alongside the new boating center. My plan consisted of a combination Boating-Nature Center meant to promote a closer connection to the water and its role in life going into the 21st century.

Greater Grand Crossing Charter School

A 80,000 sq. ft, 600 student charter school for Chicago International Charter Schools in the Greater Grand Crossing neighborhood of Chicago. The goal was to use precast concrete to create a sophisticated school of the future. The facade allows the concrete frame to permeate to the exterior, translating into a sense of structural openness and transparency that reverses the idea of a school as a warehouse for children but rather a place to set them free.