Spring Physics

A damped spring. Reduce friction to zero, and note that the simulation becomes unstable. Why?

javascript programming
exa_11_spring

<html>
<head>
<title>Spring Physics</title>
<script>
  var x, v, x0, k, m;
  var mu, g;

function draw() {
  
    var F_spring = -k*(x-x0); // spring force
    var F_friction = -mu*m*g*Math.sign(v);  // leave out friction and see what happens!
    var F = F_spring + F_friction;
    var dt = 0.02; // elapsed time
    var dv = (F/m)*dt; // change in v
    var dx = v*dt; // change in x
    v += dv; // update current position
    x += dx; // update current velocity
  
    var canv = document.getElementById("canv");
    var ctx = canv.getContext("2d");
    ctx.clearRect(0,0,300,200);
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.fillRect (x, 100, 10, 10);
    
    requestAnimationFrame(draw);
  }
  
  function init() {
    x = 10; // current position
    v = 0;  // current velocity
    x0 = 150; // "resting position"
    k = 1; // spring constant 
    m = 1; // mass of moving object
    mu = 0.7; // coefficient of sliding friction
    g = 9.8; // acceleration due to gravity
    requestAnimationFrame(draw);
  }
  
</script>
</head>
<body onload="init();">
<h3>Spring Physics</h3>
<canvas id="canv" width="300" height="200" style="border:1px gray solid;">
</canvas>
</body>
</html>

Spring Physics

javascript programmingexa_11_spring

javascript programming
exa_11_spring