-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
397 lines (292 loc) · 9.23 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>csv-umbrella</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<!-- https://codepen.io/TomHinton/pen/GRPaaeN -->
<style>
#shader {
position: fixed;
inset: 0;
z-index: -1;
}
</style>
<div id="shader"></div>
<script id="vertex" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
gl_Position = vec4(position, 1.0);
vUv = uv;
}
</script>
<script id="fragment" type="x-shader/x-fragment">
precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
varying vec2 vUv;
const float PI = 3.1415926535897932384626433832795;
const float TAU = PI * 2.;
const float HALF_PI = PI * .5;
float wiggly(float cx, float cy, float amplitude, float frequency, float spread){
float w = sin(cx * amplitude * frequency * PI) * cos(cy * amplitude * frequency * PI) * spread;
return w;
}
void coswarp(inout vec3 trip, float warpsScale ){
trip.xyz += warpsScale * .1 * cos(3. * trip.yzx + (u_time * .25));
trip.xyz += warpsScale * .05 * cos(11. * trip.yzx + (u_time * .25));
trip.xyz += warpsScale * .025 * cos(17. * trip.yzx + (u_time * .25));
}
void uvRipple(inout vec2 uv, float intensity){
vec2 p = uv -.5;
float cLength=length(p);
uv= uv +(p/cLength)*cos(cLength*15.0-u_time*.5)*intensity;
}
float smoothMod(float x, float y, float e){
float top = cos(PI * (x/y)) * sin(PI * (x/y));
float bot = pow(sin(PI * (x/y)),2.);
float at = atan(top/bot);
return y * (1./2.) - (1./PI) * at ;
}
vec2 modPolar(vec2 p, float repetitions) {
float angle = 2.*3.14/repetitions;
float a = atan(p.y, p.x) + angle/2.;
float r = length(p);
//float c = floor(a/angle);
a = smoothMod(a,angle,033323231231561.9) - angle/2.;
//a = mix(a,)
vec2 p2 = vec2(cos(a), sin(a))*r;
p2 += wiggly(p2.x + u_time * .05, p2.y + u_time * .05, 2., 4., 0.05);
return p2;
}
float stroke(float x, float s, float w){
float d = step(s, x+ w * .5) - step(s, x - w * .5);
return clamp(d, 0., 1.);
}
// Classic Perlin 2D Noise
// by Stefan Gustavson
//
vec4 permute(vec4 x)
{
return mod(((x*34.0)+1.0)*x, 289.0);
}
vec2 fade(vec2 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
float cnoise(vec2 P){
vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation
vec4 ix = Pi.xzxz;
vec4 iy = Pi.yyww;
vec4 fx = Pf.xzxz;
vec4 fy = Pf.yyww;
vec4 i = permute(permute(ix) + iy);
vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024...
vec4 gy = abs(gx) - 0.5;
vec4 tx = floor(gx + 0.5);
gx = gx - tx;
vec2 g00 = vec2(gx.x,gy.x);
vec2 g10 = vec2(gx.y,gy.y);
vec2 g01 = vec2(gx.z,gy.z);
vec2 g11 = vec2(gx.w,gy.w);
vec4 norm = 1.79284291400159 - 0.85373472095314 *
vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11));
g00 *= norm.x;
g01 *= norm.y;
g10 *= norm.z;
g11 *= norm.w;
float n00 = dot(g00, vec2(fx.x, fy.x));
float n10 = dot(g10, vec2(fx.y, fy.y));
float n01 = dot(g01, vec2(fx.z, fy.z));
float n11 = dot(g11, vec2(fx.w, fy.w));
vec2 fade_xy = fade(Pf.xy);
vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
return 2.3 * n_xy;
}
vec2 rotate2D (vec2 _st, float _angle) {
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}
vec2 rotateTilePattern(vec2 _st){
float t = (u_time * .25) ;
// Scale the coordinate system by 2x2
_st *= 2.0;
// Give each cell an index number
// according to its position
float index = 0.0;
index += step(1., mod(_st.x,2.0));
index += step(1., mod(_st.y,2.0))*2.0;
// |
// 2 | 3
// |
//--------------
// |
// 0 | 1
// |
// Make each cell between 0.0 - 1.0
_st = fract(_st);
// Rotate each cell according to the index
if(index == 0.0){
// Rotate cell 1 by 90 degrees
_st = rotate2D(_st,PI );
}
if(index == 1.0){
// Rotate cell 1 by 90 degrees
_st = rotate2D(_st,PI*0.5 );
} else if(index == 2.0){
// Rotate cell 2 by -90 degrees
_st = rotate2D(_st,PI*-0.5 );
} else if(index == 3.0){
// Rotate cell 3 by 180 degrees
_st = rotate2D(_st,PI );
}
return _st;
}
vec2 tile(vec2 st, float _zoom){
float vTime = u_time;
st *= _zoom;
return fract(st);
}
vec2 rotateUV(vec2 uv, vec2 pivot, float rotation) {
mat2 rotation_matrix=mat2( vec2(sin(rotation),-cos(rotation)),
vec2(cos(rotation),sin(rotation))
);
uv -= pivot;
uv= uv*rotation_matrix;
uv += pivot;
return uv;
}
void coswarp2(inout vec2 trip, float warpsScale ){
float vTime = u_time;
trip.xy += warpsScale * .1 * cos(3. * trip.yx + (vTime * .25));
trip.xy += warpsScale * .05 * cos(11. * trip.yx + (vTime * .25));
trip.xy += warpsScale * .025 * cos(17. * trip.yx + (vTime * .25));
}
float roundedBoxSDF(vec2 CenterPosition, vec2 Size, float Radius) {
return length(max(abs(CenterPosition)-Size+Radius,0.0))-Radius;
}
float shape( in vec2 p, float sides ,float size)
{
float d = 0.0;
vec2 st = p *2.-1.;
// Number of sides of your shape
float N = sides ;
// Angle and radius from the current pixel
float a = atan(st.x,st.y)+PI ;
float r = (2.* PI)/(N) ;
// Shaping function that modulate the distance
d = cos(floor(.5+a/r)*r-a)*length(st);
return 1.0-smoothstep(size,size +.1,d);
}
void main() {
vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.yy + 0.5;
float vTime = u_time * .5 ;
vec2 uv2 = uv;
vec2 uv3= uv;
uv *= 4.0 - (step((uv.x / uv.y), sin(u_time + length(uv+.5))));
uv.x += (u_time * .1);
// Give each cell an index number
// according to its position
float index = 0.0;
index += step(1., mod(uv.x,2.0));
index += step(1., mod(uv.y,2.0))*2.0;
// |
// 2 | 3
// |
//--------------
// |
// 0 | 1
// |
// Make each cell between 0.0 - 1.0
uv = fract(uv);
// Rotate each cell according to the index
if(index == 0.0){
// Rotate cell 1 by 90 degrees
uv = rotate2D(uv,PI );
uv = rotateTilePattern(uv);
}
if(index == 1.0){
// Rotate cell 1 by 90 degrees
uv = rotate2D(uv,PI*0.5 );
uv = rotateTilePattern(uv);
uv = rotateTilePattern(uv);
} else if(index == 2.0){
// Rotate cell 2 by -90 degrees
uv = rotate2D(uv,PI*-0.5
);
uv = rotateTilePattern(uv);
uv = rotateTilePattern(uv);
uv = rotateTilePattern(uv);
} else if(index == 3.0){
// Rotate cell 3 by 180 degrees
uv = rotate2D(uv,PI );
}
uv = rotateTilePattern(uv);
uv = rotateTilePattern(uv);
float t = (u_time * .025) + length(uv -.5) ;
float tx = (u_time * .025) + uv.x ;
float ty = (u_time * .0125) + uv.y ;
vec3 color = vec3(cos(tx), sin(t), sin(ty));
color *= 1.-step(shape(uv, 4., .5), .3);
color = mix(color, 1.-color, step(length(uv-.5),.2));
uv2 = rotateTilePattern(uv2);
uv2 = rotateTilePattern(uv2);
color = mix(color, 1.-color, step(shape(uv2, 3., .4),.2));
color = mix(color, 1.-color, step(shape(uv3, 40., sin(u_time)*2.),.2));
gl_FragColor = vec4(vec3(color.r, color.g, color.b), 1.0);
}
</script>
<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
let camera, scene, renderer, clock;
let uniforms;
function init() {
const container = document.getElementById("shader");
clock = new THREE.Clock();
camera = new THREE.Camera();
camera.position.z = 1;
scene = new THREE.Scene();
const geometry = new THREE.PlaneBufferGeometry(2, 2);
uniforms = {
u_time: { type: "f", value: 1.0 },
u_resolution: { type: "v2", value: new THREE.Vector2() },
};
const material = new THREE.ShaderMaterial({
uniforms,
vertexShader: document.getElementById("vertex").textContent,
fragmentShader: document.getElementById("fragment").textContent
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
onWindowResize();
window.addEventListener("resize", onWindowResize);
}
function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
uniforms.u_resolution.value.x = renderer.domElement.width;
uniforms.u_resolution.value.y = renderer.domElement.height;
}
function render() {
uniforms.u_time.value = clock.getElapsedTime();
renderer.render(scene, camera);
}
function animate() {
render();
requestAnimationFrame(animate);
}
init();
animate();
</script>
</body>
</html>