spiral_calendar/index.html

65 lines
1.5 KiB
HTML

<!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>
<script src="view/controls.js" type="module"></script>
<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>
</body>
</html>