Computer_Graphics/test_graphics_lib_1.html at master · capsidimit/Computer_Graphics · 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
63
64
<html>
    <head>
		<meta charset='utf-8'>
		<h5 id="info_angles"></h5>
		<script type="text/javascript" src="./graphics.js"></script>
     </head>
  <body>
	<canvas width="1000", height="1000", id="canvas"></canvas>
    <script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

		let point = new Vector(100,50,20);
		let alpha = 30*Math.PI/180;

		let RotM = new RotationMatrix(0,0,alpha);
		let ScaleM = new ScaleMatrix(2,0.5,3);
		let ShiftM = new ShiftMatrix(20,40,10);

		let dx = 200;
		let dy = 200;
		let center = new Vector(dx,dy,0);

		let point_size = 4;

		let p1 = VM_multiply(point,RotM);

		ctx.fillStyle = "#000000";

		let rot = 0;

		setInterval(function(){
				info_angles.innerHTML = "[ " + rot + " ]";
				ctx.clearRect(0,0,canvas.width, canvas.height);

				rot++;
				let rad = rot*Math.PI/180;
				RotM = new RotationMatrix(80*Math.PI/180,0,rad);
				p1 = VM_multiply(point,RotM);
				ctx.fillStyle = "#000000";
				ctx.fillRect(p1.arr[0] + dx, p1.arr[1] + dy, point_size, point_size);

				let x_line = VM_multiply(new Vector(100,0,0),RotM);
                ctx.fillStyle = "#00FF00";
                Draw_Line(ctx, dx, dy, x_line.arr[0] + dx, x_line.arr[1] + dy);

                let y_line = VM_multiply(new Vector(0,100,0),RotM);
                ctx.fillStyle = "#FF0000";
                Draw_Line(ctx, dx, dy, y_line.arr[0] + dx, y_line.arr[1] + dy);

                let z_line = VM_multiply(new Vector(0,0,100),RotM);
                ctx.fillStyle = "#0000FF";
				Draw_Line(ctx, dx, dy, z_line.arr[0] + dx, z_line.arr[1] + dy);

				if(rot == 360)
					{
						rot = 0;
					}
			},30);

	</script>

  </body>
</html>