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

# 2D spring-mass system

Create a 2D motion simulation by adding X and Y components for force, acceleration, velocity, and position. To simulate realistic hair swaying in multiple directions, modify a JavaScript program to calculate net force, updating the particle and spring movement accordingly.

## Want to join the conversation?

- is it okay to say i have no idea what she's doing(16 votes)
- Agreed. It is very difficult for starters it seems. Especially ones who are new with coding and such.(6 votes)

- This is moving like a pendulum how do i create realistic movement?(4 votes)
- Honestly I think its just a matter of tweaking the code to make it look as realistic (or as not realistic) as you like(4 votes)

- I'm literally so confused- girl what in the hades are you doing(4 votes)
- there happens to be a computer programing course you can take if it helps you understand better.

' // she is using varuibles and math to make the code what she needs it to.(3 votes)

- This is brain DAMPING(4 votes)
- It is still hard for me to understand and even though I am in Gr.5.(3 votes)
- im confused i prefer animation that is more easy to understand(3 votes)
- I'm confused... how does this code work?(3 votes)
- How do you use 2D spring mass?(2 votes)
- why do you make so much stuff confusing(2 votes)
- hi what is this(2 votes)

## Video transcript

- So far we've limited our simulation to vertical motion only, but we want our hairs to
sway in various directions so we'll need to update
our code to include two dimensions of motion. It's fairly easy to do
this, we just need to double-up many of our variables so that we'll have both
an X and Y component. Right now we only have an initial vertical position called "position Y" So I am going to add a new
one called "position X." I am also going to add
a new variable to store the horizontal component of the velocity. I'll call this "velocity X" it should be initialized to
zero, the same as velocity Y because our particle starts from rest. Now I'll move into our draw function and duplicate each equation, so we have a horizontal component as well. Currently, there is springForce
Y, but not springForce X I'll add that now. SpringForce X equals negative K, times position X minus anchor X. I'm going to add a new variable
called "dampingForce X" I'll set it equal to
damping times velocity X. With these new variables I can add a new net force calculation in the
X direction called "force X" it will be slightly different than force Y because we can ignore gravity, since the force of gravity only acts in the vertical direction. So, force X equals springForce
X minus dampingForce X. Now lets move on to acceleration. I'll add a new variable
called "acceleration X" and it will be equal to
force X divided by mass. Let's do the same thing
with the resulting velocity. I'll add a new variable
called "velocity X" which is equal to velocity X, plus acceleration X, times timeStep. Finally we can update the
position so it can have a horizontal component too. I'll do this with a
variable called "position X" which equals position X plus
velocity X times timeStep. Now we have X and Y components
for force, acceleration, velocity, and position. We just need to update our
draw code so that the circle representing our particle,
and the line representing our spring, can move in the X direction. I'll simply add position
X to the end of the line connected to the mass. And for the circle representing our mass, I'll add position X to
its center position. Now watch what happens
when I run the code. Ah-hah! 2D motion. To make our movies we
do the same thing in 3D using a third Z component. That's a fun bonus project
to start thinking about. But let's pause here so
you can get comfortable with this code before
moving on to the last step.