Computer_Graphics/test_graphics_lib_2.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
65
66
67
68
69
70
71
72
73
74
75
76
77
<html>
    <head>
		<meta charset='utf-8'>
		<h3>Поворот относительно локальных координат</h3>
		<h5 id="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_center = new Vector(100,50,50);
		let d = 20;

		let cube = [];
		cube.push(new Vector(point_center.arr[0]+d, point_center.arr[1]+d, point_center.arr[2]+d));
		cube.push(new Vector(point_center.arr[0]+d, point_center.arr[1]-d, point_center.arr[2]+d));
		cube.push(new Vector(point_center.arr[0]+d, point_center.arr[1]+d, point_center.arr[2]-d));
		cube.push(new Vector(point_center.arr[0]+d, point_center.arr[1]-d, point_center.arr[2]-d));

		cube.push(new Vector(point_center.arr[0]-d, point_center.arr[1]+d, point_center.arr[2]+d));
		cube.push(new Vector(point_center.arr[0]-d, point_center.arr[1]-d, point_center.arr[2]+d));
		cube.push(new Vector(point_center.arr[0]-d, point_center.arr[1]+d, point_center.arr[2]-d));
		cube.push(new Vector(point_center.arr[0]-d, point_center.arr[1]-d, point_center.arr[2]-d));

		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 rotation = 0;

		setInterval(function(){
				angles.innerHTML = "[ " + Math.round(rotation) + " ]";
				ctx.clearRect(0,0,canvas.width, canvas.height);

				rotation+=0.5;
				let rad = rotation*Math.PI/180;
				RotM = new RotationMatrix(80*Math.PI/180,rad*2,rad);
				let ResM = MM_multiply(new ShiftMatrix(point_center.arr[0],point_center.arr[1],point_center.arr[2]),MM_multiply(RotM,new ShiftMatrix(-point_center.arr[0],-point_center.arr[1],-point_center.arr[2])));
				ctx.fillStyle = "#000000";
				for (let i = 0;i<cube.length;i++)
					{
						let pos = VM_multiply(cube[i],ResM);
						ctx.fillRect(pos.arr[0] + dx, pos.arr[1] + dy, point_size, point_size);
					}

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

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

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

				if(rotation == 360)
					{
						rotation = 0;
					}
			},17);

	</script>

  </body>
</html>