Pixar


1 Mar 2018

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.

Pixar in a Box logo

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:

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.

Program to animate a small field of grass

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.

String art construction building a parabolic blade of grass

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.

Interactive diagram for calculating the position of a point on a parabola

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

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.

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

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.

Animating a bouncing ball

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.

Rendering the house from Up

Rigging