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
1D spring-mass system
Learn how to create a mass spring system using Hooke's Law in an interactive JavaScript simulation. Add a spring to a particle, calculate spring force, and simulate the motion. Then determine the spring constant (K) and anchor points to create realistic movement.
Want to join the conversation?
i'm having a problem with the videos. no matter what i do it says i haven't watched them all the way through. which i have and have done many time over again trying to fix it. what should i do?(4 votes)
Sometimes it says that to me, too. I just ignore it--knowing that I've already done that project--and go on to the next thing.
Do whatever works for you!
Just a question though: Does it leave any mark? Like a line through the half of the box?(5 votes)
Has anyone else noticed that the subtitles say "string" at0:16, but she says "spring"?(2 votes)- No, I haven't! XD That's probably because of that I never keep my subtitles on, though. Nice catch! :D(2 votes)
- it was pretty awesome how they do this project(2 votes)
At0:50, Can't You Just make An Array For The Position Of The Anchor?(1 vote)
Yes you could, or you could use aPVector. The aim here is to keep things as simple as possible for beginners. However, in the final step, you can spin-off with an improvements you can think of:
https://www.khanacademy.org/partner-content/pixar/simulation/hair-simulation-code/p/step-5-multiple-spring-mass-system(4 votes)
// INITIAL SETTINGS
var gravity = -20;
var mass = 100;
var positionY = -89;
var velocityY = 0;
var timeStep = 0.02;
// DRAW FUNCTION
draw = function() {
// FORCE CALCULATIONS
var forceY = mass * gravity;
var accelerationY = forceY/mass;
velocityY = velocityY + accelerationY * timeStep;
positionY = positionY + velocityY * timeStep;
// DRAW PARTICLE
background(0, 0, 0);
color(46, 41, 41);
ellipse(200, positionY, 100, 100);
};(2 votes)
what app are we using in this lesson to put the codes in(1 vote)
Hi Tori, Khan Academy imports a language called Processing.js, a library with draw commands and a bunch of other pre-defined code to help beginners learn to code. The real-time editor we type the code into is built using HTML, which is how webpages are coded. For more information on how to code, go to the Computer Programming section, and click on Intro to JS.(2 votes)
For the anchor position, can we use a vector?(1 vote)
Yes, pretty much any number pair (or group of three numbers for a 3D vector!) can be called a vector. In this case, we can differentiate between a point-vector (like the anchor position) and a directional vector (like force, velocity, etc.). This differentiation is only abstract, the computer simply cares about the two numbers that can be used to perform various calculations.(2 votes)
How am i supposed to do this coding stuff im confused??(1 vote)
var gravity = 100;
var mass = 30;
var positionY = 100;
var velocityY = 0;
var timeStep = 0.02;
// DRAW FUNCTION
draw = function() {
// FORCE CALCULATIONS
var forceY = mass * gravity;
var accelerationY = forceY/mass;
velocityY = velocityY + accelerationY * timeStep;
positionY = positionY + velocityY * timeStep;
// DRAW PARTICLE
background(255, 255, 255);
ellipse(200, positionY, 20, 20);
};(1 vote)- How would a spring force do that?(1 vote)
0:16Video transcript
(jumping, bouncing) (light switches on) - Great work. Now it's time to
throw a spring into the mix. Let's imagine we connect
one end of a spring to our particle, and the other end
to an anchor point, like this. The particle is being
pulled down by gravity causing the string to stretch out. When springs are displaced,
they try to pull back together and this is known as a spring force. In lesson one we saw the
strength of this spring force depends on the displacement and
the stiffness of the spring. And we can express the
stiffness of a spring with a variable K, called
the spring constant. This is known as Hooke's Law. Spring force equals negative
K times displacement. Now let's modify our program
to include this new spring. First, I'll add new variables
for the anchor position of the spring to the initial settings. One for the X coordinate and
one for the Y coordinate. I'll call these anchor X and anchor Y. I'll set these so the anchor
is in the middle of the screen. There is another initial
setting to consider which is the spring constant. It expresses how stiff the spring is. Let's call this K, I'll
give it a value, say, seven. Now we can go into our draw function and add the spring force. I'm going to define a new
variable called spring force Y to represent the vertical spring forces. From Hooke's Law, we know
this will be spring force Y equals negative K times displacement, or position Y minus anchor
Y, which is the distance from the anchor to the mass. Now we just need to add
the spring force to our existing force Y
calculation which gives us force Y equals spring force
Y plus mass times gravity. And that's it for updating our forces. Finally, we just need to do
some new drawing to account for the spring we've added. I'll draw an anchor with a
little box centered at the anchor position we've defined
in our initial settings. And I'll draw the spring
with a line which extends from the anchor to the
particle position, like this. Now, let's run our simulation
and see what happens. It's alive! Let's pause here so
you can get comfortable with this mass spring system.