-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathvector-scalar.html
75 lines (71 loc) · 2.47 KB
/
vector-scalar.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1{text-align:center;color:red;text-shadow:2px 2px 8px olive;}
</style>
</head>
<body>
<h1>Physics: Vector / Scalar - displacement and distance</h1>
<!--hidden element to store the values for animation -->
<input type="hidden" id="h" value="0" />
<!-- buttons to start and stop the animation -->
<canvas id="Canvas_One" width="400" height="300">
</canvas>
<div>
<input type="button" style="float:left;margin-left:10px;" value="Start" onclick="start_one()" id="Animation" />
<input type="button" style="float:left;margin-left:200px;" value="Stop" onclick="stop_one()" id="Stopping" >
</div>
<br />
<script type="text/javascript">
var canvas = document.getElementById('Canvas_One');
var context = canvas.getContext('2d');
// increse the movement along the road
var a=5;
var x;
// create the image of a car on canvas
var imgObj = new Image();
// create a message on load
context.font = '20pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'blue';
context.fillText('Move a Car Here!', 192, 150);
function motion() {
// initial value comes from a hidden field
x=eval(document.getElementById('h').value);
x = x + a;
// clear the canvas
context.clearRect(0, 0, 400, 300);
// draw the first image on the canvas
context.drawImage(imgObj,x,150);
// soruce of the image when conditions are met
if (x > 375) { a = -5; imgObj.src = "images/car2.png"; }
// draw the second image on the canvas
if(x<=5){a=5;imgObj.src="images/car1.png";}
document.getElementById('h').value=x;
context.font = '12pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'blue';
// show the displacement on canvas
context.fillText('Displacement = ' + x + ' m', 125, 250);
context.fillStyle = 'purple';
// show the displacement on canvas
if (a > 0) { context.fillText('Distance = ' + x + ' m', 285, 250); }
else
{ context.fillText('Distance = ' +(750-x) + ' m', 285, 250); }
if ((750 - x) >= 740 && a < 0) { stop_one(); }
context.fillStyle = 'green';
context.font = '20pt Calibri';
context.fillText('Vector VS Scalar', 200, 40);
}
var xx;
function start_one(){
xx=window.setInterval('motion()',200);
}
function stop_one(){
window.clearInterval(xx);
}
</script>
</body>
</html>