-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (115 loc) · 4.21 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
131
132
133
134
<!DOCTYPE html>
<html>
<head>
<title>Zone by @foolmoron</title>
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
<style>
body {
background: white;
margin: 0;
}
video, canvas {
position: absolute;
}
#canvas {
width: 100%;
height: 100%;
}
#video-canvas {
z-index: -10;
}
#video {
z-index: -10;
}
.shader {
display: none;
}
.cr.function {
height: auto !important;
}
.closed .cr.function {
height: 0 !important;
}
.cr.function span {
width: 100%;
font-size: 1.4em;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<canvas id="video-canvas" width=10 height=10></canvas>
<video id="video" autoplay=true width=10 height=10></video>
<script id="vert" type="x-shader/x-fragment">
varying vec2 UV;
varying vec4 v_position;
void main() {
UV = uv;
v_position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
}
</script>
<script id="frag" type="x-shader/x-fragment">
#define TAU 6.283185307179586476925286766559
uniform sampler2D video;
uniform mat4 viewProjInverse;
uniform float time;
uniform float saturation;
uniform float multiply;
uniform float waveAmp;
uniform float waveSpeed;
uniform float waveFreq;
uniform float waveSmooth;
uniform float cameraMultiply;
uniform float cameraAdd;
uniform float cameraSaturation;
varying vec2 UV;
varying vec4 v_position;
float round(float x) {
return floor(x + 0.5);
}
float round(float x, float step) {
return round(x * step) / step;
}
float psin(float x) {
return (sin(x) + 1.) / 2.;
}
vec3 hsv2rgb(vec3 c) {
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
float rand(vec2 co){
return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453);
}
vec2 rotateAroundCenter(vec2 p, float rot) {
return vec2(0.5 + (cos(rot) * (p.x - 0.5)) - (sin(rot) * (p.y - 0.5)), 0.5 + (sin(rot) * (p.x - 0.5)) + (cos(rot) * (p.y - 0.5)));
}
void main() {
vec4 t = viewProjInverse * v_position;
vec3 view = normalize(t.xyz / t.w);
vec3 color = vec3(
round(psin(view.x * 21. + time * 1.92 + round(waveAmp * sin(waveSpeed * time) * sin(view.z * waveFreq), waveSmooth)), 5.),
round(psin(view.y * 17. + time * 1.55 + round(waveAmp * sin(waveSpeed * time) * sin(view.x * waveFreq), waveSmooth)), 4.),
round(psin(view.z * 176. + time * 2.3 + round(waveAmp * sin(waveSpeed * time) * sin(view.y * waveFreq), waveSmooth)), 2.0)
);
float lum = dot(color, vec3(.2126, .7152, .0722));
vec3 gray = vec3(lum, lum, lum);
vec4 finalColor = vec4(mix(gray, color, saturation), 1);
finalColor *= multiply;
vec4 cameraColor = texture2D(video, vec2(1,1) - UV) * cameraSaturation;
float distanceToEdge = 1. - 2. * abs(UV.x - 0.5);
float cameraModifier = sqrt(distanceToEdge);
finalColor = finalColor * mix(vec4(1,1,1,1), cameraColor, cameraMultiply * cameraModifier) + mix(vec4(0,0,0,0), cameraColor, cameraAdd * cameraModifier);
gl_FragColor = finalColor;
}
</script>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<script src="DeviceOrientationControls.js"></script>
<script src="dat.gui.min.js"></script>
<script src="main.js"></script>
</html>