-
Notifications
You must be signed in to change notification settings - Fork 0
/
changeposition.html
77 lines (62 loc) · 2.89 KB
/
changeposition.html
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!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 position</h3>
<canvas id="canvas" width="400" height="50"></canvas>
<script src="changeposition.js"></script>
<button onclick="increasex()">Increase position</button>
<button onclick="decreasex()">Decrease position</button>
<br>
<br>
<p>If you press the above buttons constanly the object seems to be moving in a constant rate.This constant rate
of movement with time is called <span style="color:blue">Speed</span>. In the example above we increase
position(increase distance from the begining of the tube) of the ball by 2px each time we press the button
.So for example if we press the button one time each second the speed of the object will be 2px/sec (which
is not the standard unit for speed).
</p>
<p>Lets assume you could increase position in a constant way. </p>
<button onclick="constantv()">Constant change of position</button>
<br>
<br>
<button onclick="stop()">Stop constant change of pos.</button>
<br>
<p>The first of the above buttons sets a constant <span style="color:blue">Speed</span>.In other words a
constant change of position in dependance with time.</p>
<hr>
There are different kinds of speed each one giving us different information about the movement of the
object.Those are:
<ul>
<li>Instantaneous speed</li>
<li>Average speed</li>
<li>Tangential speed</li>
</ul>
<hr>
The examples above help us grasp a general "feeling" about speed which is the rate at which an object covers
distance .The average speed is the distance (a scalar quantity) per time ratio. Speed is ignorant of direction.
<hr>
!Important information!
Speed is not the same thing with velocity.
<hr>
</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>