-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
70 lines (63 loc) · 2.07 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
<head>
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<link rel="icon" sizes="256x256" type="image/png" href="bigicon.png"/>
<link rel="apple-touch-icon" type="image/png" href="bigicon.png"/>
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script id="rainbow-vertex-shader" type="x-twgl-vertex-shader">
attribute vec4 position;
void main() {
gl_Position = position;
}
</script>
<script id="rainbow-fragment-shader" type="x-twgl-fragment-shader">
precision mediump float;
uniform vec2 resolution;
uniform vec3 background;
uniform vec2 chosenPoint;
uniform float wobble;
vec3 hsv2rgb(vec3 c) {
vec3 p = abs(fract(c.xxx + vec3(1.,2./3.,1./3.)) * 6.0 - vec3(3));
return c.z * mix(vec3(1), clamp(p - vec3(1), 0.0, 1.0), c.y);
}
void main() {
vec2 uv = gl_FragCoord.xy / resolution.xx - vec2(.5,0);
float h = length(uv)*(resolution.x/resolution.y * 2.2) -1. + sin(uv.x * 10. + wobble) * .03;
vec3 rgb = background;
if (h > 0. && h < 1.) {
float hue = .85*(mix(h, 1. - (1. - h*h), .5));
float sat = 1.;
float lum = clamp(atan(uv.y, uv.x) + .2, 0., 1.);
rgb = hsv2rgb(vec3(hue,sat,lum));
rgb = mix(background, rgb, clamp(min(h, 1.-h)*100., 0., 1.));
}
gl_FragColor = vec4(rgb, 1. );
}
</script>
<script src="js/jshue.js" ></script>
<script src="js/twgl-full.js"></script>
<style>
body { margin: 0; padding: 0; }
#msg {
position: fixed;
font-size: 10vh;
bottom: 0;
text-shadow: 0 0 4vmax #0f0ff0, 0 0 3vmax #0ff00f, 0 0 2vmax #ff0f0f, 0 0 2vmax #ffffff;
color: #ffffff;
text-align: center;
display: block;
width: 100%;
font-weight: bolder;
font-family: verdana, sans-serif;
pointer-events:none;
}
</style>
<title>huerainbo!</title>
</head>
<body>
<canvas id="twgl-canvas" style="display: block; width: 100vw;
height: 100vh; cursor: crosshair;"></canvas>
<p id=msg>huerainbo!</p>
<script src="huerainbo.js"></script>
</body>