Javascript  

  

 

 

 

 

Spring Mass

 

this code is created first by chatGPT on Jan 22 2023 (meaning using chatGPT 3.5) and then modified a little bit my me. The initial request that I put into chatGPT is as follows :

 

Can you write a javascript in the following requirement.

1. Put an html table with two rows at the center of the page. The width of the table is 600px

2. In the first row, put a canvas

3. In the second row, put three buttons horizontally. The first button with 'Start',the second button with 'Stop' and the third button with 'Reset'

4. draw the initial state of a spring and a mass in vertical direction.

5. If 'start' button is clicked, spring oscillate in vertical direction. The oscillation occurs in vertical direction only and the motion is simulated by a differential equation (2nd order ODE).  Spring stiffness,damping and gravitation should be included in the equation.

6. If 'stop' button is clicked, stop the simulation

7. If 'reset' button is clicked, go back to initial state.

8. HTML and javascript should be written in separate files.

NOTE : It is not guaranteed that you would have the same code as I got since chatGPT produce the answers differently depending on the context. And it may produce the different answers everytime you ask even with the exact the same question.

NOTE : If you don't have any of your own idea for the request, copy my request and paste it into the chatGPT and put additional requests based on the output for the previous request. I would suggest to create a new thread in the chatGPT and put my request and then continue to add your own request.

 

Usage : It may take some time to load the script. Wait until you see the spring mass (a line and small rectangle). Once you get it, hit [Start] button. Use slide bar to change the speed of simulation(Animation).

 

Spring_vert.html

 

<!DOCTYPE html>

<html>

  <head>

    <title>Spring Simulation</title>

  </head>

  <body>

    <table id="table" align="center">

      <tr>

        <td>

          <center>

          <canvas id="canvas"></canvas>

          </center>

        </td>

      </tr>

      <tr>

        <td>

          <center>  

          <button id="startBtn">Start</button>

          <button id="stopBtn">Stop</button>

          <button id="resetBtn">Reset</button>

          <input id="speedSlider" type="range" min="1" max="10" value="5">

          </center>

        </td>

      </tr>

    </table>

 

    <script src="Spring_vert.js"></script>

  </body>

</html>

 

 

Spring_vert.js

window.onload = function() {

  let canvas = document.getElementById("canvas");

  let ctx = canvas.getContext("2d");

  let startBtn = document.getElementById("startBtn");

  let stopBtn = document.getElementById("stopBtn");

  let resetBtn = document.getElementById("resetBtn");

  let speedSlider = document.getElementById("speedSlider");

  let animationId;

  let position = 0;

  let velocity = 0;

  let springConstant = 1;

  let damping = 0.01;

  let mass = 1;

  let gravity = 9.8;

  let speed = 1; // animation speed

  let speedscale = 0.05;

 

  startBtn.addEventListener("click", startSimulation);

  stopBtn.addEventListener("click", stopSimulation);

  resetBtn.addEventListener("click", resetSimulation);

  speedSlider.addEventListener("input", setSpeed);

 

  function drawInit() {

 

     // Initial state

     position = canvas.height/2 - 5;

     ctx.beginPath();

     ctx.moveTo(canvas.width/2, canvas.height/2);

     ctx.lineTo(canvas.width/2, canvas.height/2 + position);

     ctx.stroke();

     ctx.fillRect(canvas.width/2-5, canvas.height/2 + position, 10, 10);

     console.log(position);

 

  }

 

  function startSimulation() {

    animationId = requestAnimationFrame(simulate);

  }

 

  function stopSimulation() {

    cancelAnimationFrame(animationId);

  }

 

  function resetSimulation() {

    cancelAnimationFrame(animationId);

    drawInit();

  }

 

 

  function setSpeed() {

    speed = speedSlider.value;

  }

 

  function simulate() {

     let acceleration = ((-springConstant * position - damping * velocity) + (mass * gravity)) / mass;

     velocity += acceleration * speed * speedscale;

     position += velocity * speed * speedscale;

     ctx.clearRect(0, 0, canvas.width, canvas.height);

     ctx.beginPath();

     ctx.moveTo(canvas.width/2, canvas.height/2);

     ctx.lineTo(canvas.width/2, canvas.height/2 + position);

     ctx.stroke();

     ctx.fillRect(canvas.width/2-5, canvas.height/2 + position, 10, 10);

     animationId = requestAnimationFrame(simulate);

  }

 

  drawInit();

 

}