-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (98 loc) · 5.48 KB
/
index.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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!-- Created by A36000 & A37181
░█████╗░██████╗░░█████╗░░█████╗░░█████╗░░█████╗░ ░░░░░░ ░█████╗░██████╗░███████╗░░███╗░░░█████╗░░░███╗░░
██╔══██╗╚════██╗██╔═══╝░██╔══██╗██╔══██╗██╔══██╗ ░░░░░░ ██╔══██╗╚════██╗╚════██║░████║░░██╔══██╗░████║░░
███████║░█████╔╝██████╗░██║░░██║██║░░██║██║░░██║ █████╗ ███████║░█████╔╝░░░░██╔╝██╔██║░░╚█████╔╝██╔██║░░
██╔══██║░╚═══██╗██╔══██╗██║░░██║██║░░██║██║░░██║ ╚════╝ ██╔══██║░╚═══██╗░░░██╔╝░╚═╝██║░░██╔══██╗╚═╝██║░░
██║░░██║██████╔╝╚█████╔╝╚█████╔╝╚█████╔╝╚█████╔╝ ░░░░░░ ██║░░██║██████╔╝░░██╔╝░░███████╗╚█████╔╝███████╗
╚═╝░░╚═╝╚═════╝░░╚════╝░░╚════╝░░╚════╝░░╚════╝░ ░░░░░░ ╚═╝░░╚═╝╚═════╝░░░╚═╝░░░╚══════╝░╚════╝░╚══════╝
Copyright © 2021 A36000 & A37181. All rights reserved. -->
<!DOCTYPE html>
<html>
<head>
<title>A36000 - A37181 - Đề 7</title>
<meta charset="UTF-8"/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<link rel="stylesheet" type="text/css" href="hvuong.css">
<!-- js shader -->
<script id="vertex-shader" type="x-shader/x-vertex">
#version 300 es
in vec2 aPosition; // vị trí bắt đầu
// uniform là các biến giữ dữ liệu đầu vào chung cho cả vertex và fragment shader
uniform vec2 uResolution; // (độ phân giải) dùng trong hàm vec2 convertCoordinates
uniform float uX1; // dữ liệu đầu vào uX1
uniform float uY1; // ~ ~ ~
uniform float uX2; // ~ ~ ~
uniform float uY2; // ~ ~ ~
uniform float uX3; // ~ ~ ~
uniform float uY3; // ~ ~ ~
uniform int drawStatus; // trạng thái để vẽ các hình khác nhau
vec2 convertCoordinates(vec2 vPosition) {
return vPosition / uResolution; // chuyển toạ độ
}
vec2 translate1(vec2 position) { // tịnh tiến hình 1
mat3 mTranslate = transpose(mat3(
1.0, 0.0, uX1,
0.0, 1.0, uY1,
0.0, 0.0, 1.0
));
vec3 vPosition = vec3(position, 1.0);
vec3 newPosition = mTranslate * vPosition;
return vec2(newPosition[0], newPosition[1]);
}
vec2 translate2(vec2 position) { // tịnh tiến hình 2
mat3 mTranslate = transpose(mat3(
1.0, 0.0, uX2,
0.0, 1.0, uY2,
0.0, 0.0, 1.0
));
vec3 vPosition = vec3(position, 1.0);
vec3 newPosition = mTranslate * vPosition;
return vec2(newPosition[0], newPosition[1]);
}
vec2 translate3(vec2 position) { // tịnh tiến hình 3
mat3 mTranslate = transpose(mat3(
1.0, 0.0, uX3,
0.0, 1.0, uY3,
0.0, 0.0, 1.0
));
vec3 vPosition = vec3(position, 1.0);
vec3 newPosition = mTranslate * vPosition;
return vec2(newPosition[0], newPosition[1]);
}
void main() {
if (drawStatus == 0) {
gl_Position = vec4(convertCoordinates(aPosition), 0.0, 1.0);
} else if(drawStatus == 1){
gl_Position = vec4(convertCoordinates(translate1(aPosition)), 0.0, 1.0);
} else if(drawStatus == 2){
gl_Position = vec4(convertCoordinates(translate2(aPosition)), 0.0, 1.0);
} else{
gl_Position = vec4(convertCoordinates(translate3(aPosition)), 0.0, 1.0);
}
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
#version 300 es
precision mediump float;
out vec4 fColor;
void main() {
// fColor = vec4(1.0, 0.0, 0.0, 1.0); // red
// fColor = vec4(0.0, 1.0, 0.0, 1.0); // green
// fColor = vec4(0.0, 0.0, 1.0, 1.0); // blue
// fColor = vec4(0.0, 0.0, 0.0, 1.0); // black
// fColor = vec4(1.0, 1.0, 1.0, 1.0); // white
fColor = vec4((1.0/255.0)*95.0, (1.0/255.0)*180.0, (1.0/255.0)*4.0, 1.0); // RGB(95, 180, 4)
}
</script>
<!-- end js shader -->
<!-- thư viện đồ họa -->
<script src='Common/initShaders.js' type='text/javascript'></script>
<script src='Common/MV.js' type='text/javascript'></script>
<!-- kết thúc thư viện đồ họa -->
</head>
<body>
<img class="hi" src="image/hi.gif"/>
<canvas id="hcn" width="1000" height="600"/>
<script src="hvuong.js" type="text/javascript"></script>
</body>
</html>