Main content

## Pixar in a Box

### Course: Pixar in a Box > Unit 4

Lesson 2: Code your own simulation- Starting with particles
- Step 1 (particle under gravity)
- 1D spring-mass system
- Step 2 (spring-mass system)
- Damping
- Step 3 (damped spring-mass system)
- 2D spring-mass system
- Step 4 (2D spring-mass system)
- Multiple spring-mass system
- Step 5 (multiple spring-mass system)

© 2023 Khan AcademyTerms of usePrivacy PolicyCookie Notice

# Starting with particles

First we'll explore a single particle under the influence of gravity. Click here to check out the Effects lesson.

## Want to join the conversation?

- this is a lot of info to take in i feel like my head is going to explode.(14 votes)
- yeah, I know. Me too. I've never focused much on coding so this is like learning another language! ;3; I really like it though, it's fun(5 votes)

- you do realize that since forceY = mass * gravity, that forceY/mass = gravity, so why not write that accelerationY = gravity?(13 votes)
- Is this the robot c programming for vex? It looks really similar.(4 votes)
- Probably Java Script. The CS courses here cover Java Script and HTML only. I wished that they could cover Java.(2 votes)

- im not sure i understand but i get some of what the video says....(4 votes)
- what language is this in?(2 votes)
- Processing.js! Learn it at: https://www.khanacademy.org/computing/computer-programming/programming

Make a new program at: https://www.khanacademy.org/cs/new/pjs(2 votes)

- On where we are writing the code? Which software or platform(1 vote)
- This is Khan Academy's version of Javascript.(2 votes)

- hey do u guys like the conversation?(1 vote)
- Why would we use forceY.(1 vote)
- I'm guessing some computer programming lessons should be taken before going any further huh?(1 vote)
- Its easy if you've been in coding classes. And please be more specific on the code translation.(1 vote)
- This explanation is actually simpler than the coding for forces (found in advanced JS: natural simulations) Of course one must understand Intro to JS.

As for the code translation:`//this is the force pulling the shape down`

var gravity= 10;

//this is the "weight" of the shape

var mass=30;

//this is where the shape is draw on the canvas.

The canvas has an x and y axis like a graph but

starts at 0,0 in the top left corner and (with

default) ends at 400,400

var positionY=100;

//this means that it starts with 0 velocity or

speed

velocityY=0;

// one way to control speed or how fast the shape

moves

var timeStep=0.2;

draw function(){

/* this function get repeatedly carried out at an

average time of 30 Fps (frames per second*/

// this redraws the background after every frame

so that it looks smoothly animated and does not

show the previous frame, its good practice to put

this at the beginning of a draw function

background(255,255,255);

//this tells our computer that what ever the

product of force times gravity is, that's the

equivalent of the var (short for variable) for

forceY this serves as the "drag"

var forceY= mass*gravity;

//the more mass the more acceleration as mass overpowers "drag"

var accelerationY= forceY/mass;

//this redefines the Velocity var and makes it

dependent on the acceleration and timeStep, all

of which control the speed

velocityY= velocityY+ accelerationY+ timeStep;

//this updates position so that it is dependent on

the velocity and timeStep

positionY= positionY + velocityY + timeStep;

// this draws the circle ellipse draws circles and

ovals. It takes 4 parameters in this order (x

coordinate, y coordinate, width, height) in this

particular shape the x and y denote the center of

the ellipse

ellipse(200,positionY, 20,20)

};

Feel free to as more questions, and I will gladly explain it. Also feel free to check out my coding projects.(1 vote)

## Video transcript

- In the last lesson, we
came up with the model that mimicked the behavior of curly hair. Our model used a variety of
springs connected together with weights to give us this effect. The goal of this lesson is
to write the computer code powering this simulation. One thing to consider
before starting this lesson, we will be using some
of Newton's equations to animate our simulation,
and we explored how these equations worked in our effects lesson. To begin, let's simulate
a very simple model. A particle which is only
experiencing gravity, and it's dropped from some
position on the screen. The program I'll write to
simulate this situation will divide into two parts. At the top, I'll put our
initial system settings, such as the starting position
and force of gravity, and below that we'll use
a function called draw to do the animating. First, let's define our initial settings. Gravity is a force we'll want to control, so let's define a variable called gravity, and set it to, say, 10. We can play with it later. We'll want another variable
to store the particle's mass. I'll set this at 30 for
now, plus a variable for the initial height we
dropped the particle from. I'll call this position Y. We'll also need an initial
velocity for our particle. I'll call this velocity Y,
and at the very beginning of our simulation right before we drop it, we set this to be zero. Finally, we need a way
to control the speed of our simulation. We'll do this with a
variable called time step. Think of time step as how
much time elapses between each drawing update. A larger time step will
make the particle speed up between frames, and a
smaller time step will slow it down. Now let's consider what goes
on inside the draw function. When we run our program,
the computer will first execute the initial
settings once, and then loop through the draw function
multiple times per second. So each frame of our animation
will be a single pass of this draw function. First, I'll compute the
forces acting on the particle. For now, the only force
acting on it is gravity, which is pointing downwards. I'll store this downward
force using a variable called force Y. And from Newton's second
law, we know that this force will be equal to the particle's
mass times acceleration due to gravity. Next, I'll use that
force to define how fast our particle will accelerate downward. I'll store this value
in a new variable called acceleration Y. To do that, I'll rearrange
the handy formula, f equals m a, to give
acceleration y equals force y divided by mass. Notice we've already calculated force y in the previous step. Now that we know how fast
our particle's accelerating, we can update its
velocity using the formula velocity equals velocity
plus acceleration times time step. We derived this formula
in our effects lesson. Check it out for more details. Note that the velocity
variable on the right-hand side of this equation initially
stores the previous velocity value. After this line is executed,
the velocity variable on the left stores the
updated velocity value. Finally, we can use this
velocity to draw our particle in a new position using
the equation, position Y equals position Y plus
velocity Y times time step. As before, the position Y
variable on the right-hand side of this equation initially
stores the previous position value. After this line is executed,
the position Y variable on the left stores the
next position value. Notice how each step in our
calculation uses the result of the previous step. The initial force calculation
is used to find acceleration. Acceleration is used to find velocity, and velocity is used
to update the position. Now the fun part. We just draw our particle
in that new position. To do that, we just draw a
circle using the position Y variable as its height. Here I'm drawing a circle
using the ellipse function with equal width and height. Now let's run our program
to see what happens. Oops, I want to erase the
previous circle every time we move it so it looks
like one thing falling instead of this snakey thing. I'll fix this by erasing
or redrawing the screen every time I draw a new circle. Let's try that. Nice. If I increase the force of
gravity, our particle falls faster as we'd expect. That's Newton's laws of motion in action. Let's pause here so you can
get comfortable with this code.