physicsJS/changespeed.html at master · frankagathos/physicsJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>


<head>
  <title>change postion</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="Description" content="Examples using HTMLCanvas and javascript.">
  <meta name="Keywords" content="javascript,javascript animation html Canvas, Frank Agathos, Frantzeskos Agathos">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap"
    rel="stylesheet">
</head>

<body>


  <div class="container">
    <a href="index.html">
      <h1>Javascript Physics</h1>
    </a>
  </div>


  <div class="container">
    <h3>Change speed</h3>
    <canvas id="canvas" width="400" height="50"></canvas>
    <script src="changespeed.js"></script>
    <button onclick="increasev()">Increase speed</button>
    <button onclick="decreasev()">Decrease speed</button>
    <br>
    <br>
    <p>In the example above we have an object with constant speed.We increase the speed every time we press the first
      button.The rate of change of speed per unit time is the acceleration of the object.Accelerations are vector
      quantities (they have magnitude and direction) so the correct definition is that Acceleration is the rate of
      change of velocity of an object with respect to time.</p>
    <hr>
    <button onclick="stop()">Set speed to zero</button>

    <button onclick="constanta()">Set Constant acceleration</button>

    <button onclick="stopa()">Set acceleration to zero</button>
    <p>A Constant <span style="color:blue">acceleration</span> gives us a constant change of <span
        style="color:blue">Speed</span>.Note that:</p>
    <ul>
      <li>if we give the object acceleration even when we eliminate its speed the object stops moving only temporarly.
        If we want to stop the movement completly we have to set both speed and acceleration to zero</li>
      <li>If the object has constant acceleration if we set acceleration to zero the object mantains its current speed.
      </li>
      <hr>
      TIP! Try experimenting with all the above buttons with different compinations.


  </div>
</body>
<footer>
  Created by <a href="https://frankagathos.com">Frank Agathos</a> with the help of: <a href="https://amzn.to/3nm81yo" target="_blank">Physics for JavaScript Games,
      Animation, and Simulations</a>
</footer>

</html>