Main content

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

© 2024 Khan AcademyTerms of usePrivacy PolicyCookie Notice

# Starting with particles

First we'll explore a single particle under the influence of gravity in a JavaScript program. Gravity, mass, and initial height are set, while time step controls animation speed. The draw function calculates force, acceleration, and velocity, updating the particle's position and drawing it on screen.

## Want to join the conversation?

- this is a lot of info to take in i feel like my head is going to explode.(18 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?(14 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)
- oh no... this is where pixar in a box gets hard.(3 votes)
- ok... im slow... im crazy...

**THiS DOeSN'T mAkE ANy SeNSE**(3 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)

- How are 6th graders supposed to know this?(2 votes)
- This course is particularly for middle school students who have finished the course for coding Javascript.(1 vote)

- Yeahhh coding!! I love this(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)

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