March 1, 2018


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 has been 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.

In the first year, the lessons demonstrated how high-school level mathematics and science can be used to understand the principles behind animation. In the second year, the lessons covered mathematics, science and coding. In the third year, the lessons were all about storytelling. The fourth year is currently just underway.

Pixar in a Box logo

Building interactives

I was responsible for building all interactive programs used in the videos and for students to use. I also built most of the exercises and was involved in designing some of the lessons. Below, I'll describe some of the programs I made for Pixar in a Box and what I learnt.

All the interactives were build inside 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 so immediately updates as you type and pops up with error messages if you do something wrong. This makes it nice for quickly prototyping ideas, but is not ideal for building larger programs.

Environment modeling

Environment modeling shows how blades of grass were created and controlled for the film Brave. It was our first lesson, created as a proof of principle, to demonstrate that we could take a lesson designed by Tony and put it on Khan Academy.

The lesson starts by showing how the string art construction can be used to make a parabola whose shape is controlled by three control points.

String art construction building a parabolic blade of grass

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

Subdivided hand from Pixar's character modeling lesson


The Crowds lesson is about how Pixar built crowds of robots for Wall-E, by taking combining several parts. It covers combinations and permutations.

Permutations exercise for the Pixar in a box Crowds lesson

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).

Sets and staging exercise


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.

Animating a bouncing ball

Leave a comment

cancel reply