-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (82 loc) · 3.09 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script defer src="main.js"></script>
<title>thajudheen</title>
</head>
<body>
<div class="content">
<div class="section">
<div>
<a href="https://thajudheen.vercel.app" target="_top"> demo </a>
</div>
</div>
<div class="section">
<div>
GLSL shader based on <a href="https://x.com/_thaju____/" target="_blank">@_thaju____</a> <a href="https://instagram.com/_.thaju____" target="_blank">instagram</a>
</div>
</div>
<div class="section">
<div>
<a href="https://x.com/_thaju____" target="_top">X (twitter)</a>
</div>
</div>
</div>
<canvas id="neuro"></canvas>
<script type="x-shader/x-fragment" id="vertShader">
precision mediump float;
varying vec2 vUv;
attribute vec2 a_position;
void main() {
vUv = .5 * (a_position + 1.);
gl_Position = vec4(a_position, 0.0, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragShader">
precision mediump float;
varying vec2 vUv;
uniform float u_time;
uniform float u_ratio;
uniform vec2 u_pointer_position;
uniform float u_scroll_progress;
vec2 rotate(vec2 uv, float th) {
return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
}
float neuro_shape(vec2 uv, float t, float p) {
vec2 sine_acc = vec2(0.);
vec2 res = vec2(0.);
float scale = 8.;
for (int j = 0; j < 15; j++) {
uv = rotate(uv, 1.);
sine_acc = rotate(sine_acc, 1.);
vec2 layer = uv * scale + float(j) + sine_acc - t;
sine_acc += sin(layer);
res += (.5 + .5 * cos(layer)) / scale;
scale *= (1.2 - .07 * p);
}
return res.x + res.y;
}
void main() {
vec2 uv = .5 * vUv;
uv.x *= u_ratio;
vec2 pointer = vUv - u_pointer_position;
pointer.x *= u_ratio;
float p = clamp(length(pointer), 0., 1.);
p = .5 * pow(1. - p, 2.);
float t = .001 * u_time;
vec3 color = vec3(0.);
float noise = neuro_shape(uv, t, p);
noise = 1.2 * pow(noise, 3.);
noise += pow(noise, 10.);
noise = max(.0, noise - .5);
noise *= (1. - length(vUv - .5));
color = normalize(vec3(.2, .5 + .4 * cos(3. * u_scroll_progress), .5 + .5 * sin(3. * u_scroll_progress)));
color = color * noise;
gl_FragColor = vec4(color, noise);
}
</script>
</body>
</html>