Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pendulum</title>
  
<style >
canvas {
  background: #f0f0f0;
  border: 1px solid #ccc;
}
​
</style>
</head>
  <body>
    <form >
      <label>
        Angle:
        <input type="text" id="angle" name="angle" value="80" />
      </label>
      <button type="button" id="animate" >Animate</button>
      <button type="button" id="stop" >Stop</button>
    </form>
    <canvas id="canvas" width="600" height="400">
​
  <script>
var a0deg = document.getElementById("angle").value;     //a0deg start angle (deg)
var id = null; //id of setInterval
​
function animate(a0deg) { 
​
var canvas = document.getElementById('canvas');
var ctx    = canvas.getContext('2d');
​
var fps = 60;           //fps
var f = 1000/fps;       //time between frames
var t = 0;              //current time
var l = 1;              //phisical length of pendulum
​
var a0 = Math.PI*a0deg/180; //a0deg start angle (rad)
​
var lCanvas = 300;      //pendulum length on canvas (px) 
var g = 9.8 ;           //g
​
function draw() {
  t += f / 1000;
  ctx.clearRect(0, 0, 600, 400);
  
  ctx.save();
    ctx.translate(300, 0);
  
    var theta = a0 * Math.cos(t/(Math.sqrt(l/g)))/Math.exp(t/10); 
    ctx.rotate(theta);
​
    ctx.strokeStyle = '#000'; /* нить */
    ctx.beginPath();
    ctx.moveTo(0, 0); 
    ctx.lineTo(0, lCanvas);
    ctx.lineWidth = 1;
    ctx.stroke();
    ctx.closePath(); 
  
    ctx.beginPath();         /* груз */
    ctx.arc(0, lCanvas, 5, 0, 2*Math.PI, false);
    ctx.fill();
  ctx.restore();
  }  
  id = setInterval(draw , f);
}
​
animate(a0deg); 
​
document.getElementById("animate").onclick = function () {
    alert('onClick begin');
    clearInterval(id);
    a0deg = document.getElementById("angle").value;
    animate(a0deg); 
    alert('a0deg = '+a0deg);
};
​
document.getElementById("stop").onclick = function () {
    clearInterval(id);
};
​
</script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers