Introduction
Pixar in a Box is a partnership between Pixar and Khan Academy that started in 2014. It's the brainchild of Tony DeRose at Pixar, based on several talks (for example, at TED-Ed) he's given to students about how school level mathematics can be used to understand how Pixar makes animated films. On the Khan Academy side, Brit Cruise is in charge, putting together the lessons and editing the videos. He has written a detailed description of the how Pixar in a Box came to be here.
The aim in the first year was to show how how high-school level mathematics and science can be used to understand various techniques used in creating Pixar's films. In the second year, two lessons of the six lessons also taught some coding. The lesson for the third year were about how to write and pitch a story. The fourth year is currently just underway.
Building interactives
I was responsible for building all interactive programs and tools for students to use, plus several more which we used to illustrate the videos and exercises. I also wrote most of the exercises and was involved in designing some of the lessons.
The programs I made include:
- A simple animation studio
- A simple 3D modelling tool
- A colour correction suite
- A drag-and-drop rigging tool
- A simulation of hair
- A simulation of a pinhole camera
- A water simulation using smoothed particle hydrodynamics
- A fireworks simulation
- A ray-traced scaly dinosaur leg patterned with my own noise function
- And a lot of interactive diagrams
All the interactives were all built using the Khan Academy computer science environment. This is a javascript environment that uses Processing.js and the HTML canvas element. The environment is designed for teaching beginners by immediately updating as you type and giving error messages as soon as something goes wrong. This makes it nice for quickly prototyping ideas, but is not ideal for building larger programs, as it gets very slow and doesn't allow you to import code.
Environment modeling
The Environment modeling lesson explains how blades of grass were created and animated in the film Brave. This was our first lesson, which we created to demonstrate that we could take a lesson designed by Tony and put it on Khan Academy.
The lesson starts by showing the string art construction: a method of drawing straight lines between two "control arms" which results in an approximated curve. We then show how these lines can be used to model a blade of grass. The design part of the lesson ends with a simple animation program, demonstrating how a field of grass can be animated by moving the control points.
The maths in this lesson includes how to calculate points along a line segment by calculating the weighted average of the two end points. This method is then used to calculate a function for the curve generated by the string art approach. The lesson ends by showing how this function is parabolic.
Character modeling
Character modeling introduces the technique of subdivision. This involves splitting the control arms of a shape and then averaging each one with its neighbour, resulting in a smooth shape you can control. It required building a program for subdividing and viewing shapes in 3D
Crowds
The Crowds lesson is about how Pixar built crowds of robots for Wall-E, by taking combining several parts. It covers combinations and permutations.
Sets & Staging
Sets & Staging is about how elements are placed in a scene. It covers the mathematics of simple transformations: translation, scaling and rotation (in 2D).
Animation
The Animation lesson teaches the mathematics of animation, specifically, how the position (and size and angle) of an item can be interpolated between frames, using straight lines or cubic beziers. This required building a simple animation studio with bezier controls.
Rendering
The Rendering lessons explains how ray tracing is used to create the final images for a film with shadows, reflection and refraction. It involved building a simple 3D setup with example rays, showing how they are used to create an array of pixel values.