Design Challenge #4: Math Cookbook


Design a lecture or instructional piece for something missing from the MFADT curriculum.


Teaching graduate design students the kinds of math they need to do interesting graphics, games, and other computational designs.
Parsons MFADT students.
In class or in lab project work.
What is the best and most useful way to provide Parsons MFADT students with the kinds of math that they need with out getting bogged down in details that do not relate to their needs or work?


  1. Python Cookbook. ActiveState Programmer Network. Retrieved 23 April 2007 <>.
  2. "Trigonometry Tutorials and Problems." Mathematics Tutorials and Problems (with applets). 30 Apr. 2007 <>.
  3. "XP Math - Math Topics That Designers Require." XP Math. 30 Apr. 2007 <>.

Idea Sketches

  • recipes
    • velocity
      • simple equations
      • rates
    • acceleration
      • equations with exponents
      • rates of rates
      • gravity
      • constants
    • "wiggling"
      • sine and cosine
      • parametric equations
    • bouncing
      • parametric equations
      • vector math
      • resultant vectors

  • interaction
    • controllable applets
    • can modify parameters
    • observe

Idea Sketch - Sine Wave: A mock up of an applet that would let designers explore the possibilities of a sine wave graphically.Idea Sketch - Sine Wave: A mock up of an applet that would let designers explore the possibilities of a sine wave graphically.


My concept is to create an interactive "cookbook" that will allow Parsons MFADT students to explore, test, and create their own interactive or computational pieces using simple but powerful math fragments. The idea is threefold:

  1. Organize sets of simple mathematical equations into visual domains as a kind of taxonomy. Equating the equations with visual representations, allow the user to search for the kind of effect they want (rather than by the mathematical taxa). This will create a cookbook style of math excerpts. Concepts like sine waves could be grouped into animal motion (wiggling) for example.
  2. In each recipe, show an applet or other interactive model with sliders or other simple inputs that allow the user to manipulate a graphical representation of the equation, etc. while also seeing, in real time, the changes to the equation. This multiple encoding will help emphasize the relationship between the graphical and mathematical.
  3. Once the user is satisfied with their settings, allow her or him to save the settings with a comment. This will allow the user to:
    • Save their work
    • See other people's settings and explore what they have done


The purpose of the cookbook is to teach DT students about mathematical formulas that can help them achieve desired effects in their interactive and computational work. It should be a persistent and expanding resource for students to use as a reference and repository of collective associations between different math concepts.


The overall structure of the product is very similar to other community content sites, like the Python Cookbook or instructables. That is, there are individual pages that host particular pieces of information, say about the sine wave function or elasticity functions, that are linked together to form a whole corpus and are supplemented with user responses and other data.

More specifically, each page contains an interface that displays the function as line, in most cases, and shows an example, where applicable, of what that function would look like it it were placed in motion.

The page will also contain keywords that link to this page (as well as others), a list of similar pages (derived implicitly by automated analysis of the keyword linkages), a set of saved settings for the student and other users, so people could go back and explore their experiments, and a threaded list of comments, where users can post more about their experiences.

The pages would be linked together via a search page that allows users to search by keyword. The result of this search would be a graphical result page that would visually show the user what the relevant results looked like. The user could than navigate into the individual pages themselves and begin exploring.

Formutator Search PageFormutator Search Page


Simple pause, play, rewind and fast-forward buttons would aid study of the function as motion.

Formutator Sine Function PageFormutator Sine Function Page

Below the graphical display are a set of sliders and numerical readouts that would allow the user to modify useful parameters of the function in order to display different results. The function itself is prominently displayed next to the sliders and changes in response to alterations in the numbers. This provides a multiple-syntax approach to the learning--both the graphical and formulaic representations are provided for the student.

Formutator Cosine Function PageFormutator Cosine Function Page

To the right are the keywords, similar pages, and saved settings of the user and others.


  1. Make the search more graphical. Since this is a tool for visual designers, continuing this work to its logical conclusion requires that students should be able to identify the formulas they need, at least in part, on sight. This is not a replacement for the tagging system, which works alongside the visual search and augments the results and the connections between each page.
  2. Allow for more narrative. Students are going to want to talk about how they did X, Y, or Z in their own work. This is a valuable resource to add in for future students, so that conversations could be started around the sine function, for example, on how it can be used statically, dynamically, in games, in artwork, etc. Allowing user generated content to augment the existing page is rarely a bad idea. In this case, in fact, it serves the educational purpose by further clarifying the connection of math to the work of designers, based on the work of other designers.

Copyright Mike Edwards 2006-2009. All content available under the Creative Commons Attribution ShareAlike license, unless otherwise noted.