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.

Course: Pixar in a Box>Unit 4

Lesson 2: Code your own simulation

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?
• 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?
• Has anyone else noticed that the subtitles say "string" at , but she says "spring"?
• No, I haven't! XD That's probably because of that I never keep my subtitles on, though. Nice catch! :D
• // 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);

};
• At , Can't You Just make An Array For The Position Of The Anchor?
(1 vote)
• Yeah, we did.
• it was pretty awesome how they do this project
• 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.
• 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.
• How am i supposed to do this coding stuff im confused??
(1 vote)
• Javasript course and Physics
• 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)

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