2023-11-30 16:19:45 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Чё зыришь глаза пузыришь?</title>
|
|
|
|
|
<link rel="stylesheet" href="css/index.css">
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<canvas id="canvas"></canvas>
|
|
|
|
|
<script type="importmap">
|
|
|
|
|
{
|
|
|
|
|
"imports": {
|
|
|
|
|
"three": "https://unpkg.com/three@0.158.0/build/three.module.js",
|
|
|
|
|
"three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<script src="view/graphics.js" type="module"></script>
|
2023-12-01 12:57:41 +03:00
|
|
|
<script src="view/controls.js" type="module"></script>
|
2024-01-29 00:57:46 +03:00
|
|
|
|
|
|
|
|
<script id="vertexShader" type="x-shader/x-vertex">
|
|
|
|
|
const float PI = 3.14159;
|
|
|
|
|
|
|
|
|
|
varying vec4 v_color;
|
|
|
|
|
varying float rad;
|
|
|
|
|
|
|
|
|
|
void main() {
|
|
|
|
|
rad = atan(position.z, position.x) - PI/2.;
|
|
|
|
|
if (rad < 0.) rad = 2. * PI - abs(rad);
|
|
|
|
|
|
|
|
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x, position.y, position.z, 1.0);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<script id="fragmentShader" type="x-shader/x-fragment">
|
|
|
|
|
const float PI = 3.14159;
|
|
|
|
|
|
|
|
|
|
varying vec4 v_color;
|
|
|
|
|
varying float rad;
|
|
|
|
|
|
|
|
|
|
vec4 colors[12] = vec4[12](
|
|
|
|
|
vec4(0.0980, 0.4627, 0.8235, 1), // jan
|
|
|
|
|
vec4(0.102, 0.1406, 0.4922, 1), // feb
|
|
|
|
|
vec4(1, 0, 1, 1), // mar
|
|
|
|
|
vec4(1, 1, 0, 1), // apr
|
|
|
|
|
vec4(0, 1, 1, 1), // may
|
|
|
|
|
vec4(0, 1, 0, 1), // jun
|
|
|
|
|
vec4(1, 0, 0, 1), // jul
|
|
|
|
|
vec4(0, 0, 1, 1), // aug
|
|
|
|
|
vec4(0.5, 1, 1, 1), // sep
|
|
|
|
|
vec4(1, 0.5, 1, 1), // oct
|
|
|
|
|
vec4(1, 1, 0.5, 1), // nov
|
|
|
|
|
vec4(1, 1, 1, 1) // dec
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
void main() {
|
|
|
|
|
int month = int(floor(rad / (PI/6.)));
|
|
|
|
|
|
|
|
|
|
gl_FragColor = colors[month];
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2023-11-30 16:19:45 +03:00
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
