If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Start here!

Introduction to this lesson

Ready to dive into some code?

In this lesson you will build a simple snowman model and rig it using javascript. Then you can extend the model to create your own character in the final project.
You will be filling in some important pieces of a much larger program in this lesson—similar to how people work with software at Pixar.

Overview of lesson

First, you'll build some circles using objects.
Then you'll combine your various shapes in an array of objects.
Finally you'll write deformer functions so that you can move your model around.
By the end, you'll be ready for the final project!

What do you need to know before starting?

  • If you've never programmed anything before, we recommend going through our Intro to JS course to learn the concepts of variables, arrays, functions, and objects. And, of course, come back here when you're ready!
  • If you've programmed before but not on Khan Academy, we recommend getting comfortable with our environment first by creating a new program here.
  • If you've learned programming here on Khan Academy, perfect! Just review the concepts below and refresh yourself on any skills you're rusty on.
  • This lesson touches on math concepts—equations for geometric transformations—appropriate for grade eight and above. You can review this concept in our sets and staging lesson.

Quick review of programming concepts you'll use

Variables

var sulleysAge=15;
  • This creates a variable called sulleysAge which stores the value 15.

Arrays

var ages=[2,4,8];
  • This creates an array called ages which stores three values 2,4,8.
  • ages[1] holds the value 4.

Functions

var sayHello=function() {
text("Hello world!",100,200);
}
  • This creates a function called sayHello that will output the text "Hello world!" at the screen coordinates (100,200) when it's called.
var sayHello=function(x, y) {
text("Hello world!", x, y);
}
  • This sayHello function now has two input parameters, x and y, to define the coordinates of the text.

Objects

var snowman={};
  • This creates an empty object called snowman.
var snowman={
age:2,
color:"white",
likes:["milk", "cold days"]
}
  • The object snowman now contains three properties: snowman.age=2 and snowman.color="white". The third property of snowman is an array called likes.

Have fun!

Want to join the conversation?