-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
154 lines (111 loc) · 4.06 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wrestle With Jimmy!</title>
<link href="wwj.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!--responsive stuff added here-->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
</head>
<body>
<div align="center">
<p><br />
</p>
<p><img src="images/wwj_logo.png" width="1199" height="217" alt="Wrestle With Jimmy" longdesc="http://wrestle-with-jimmy.com" /></p>
</div>
<!--FOOTER JUNK BEGINS-->
<canvas id="canvas"></canvas>
<footer>Made by <a href="https://this-page-intentionally-left-blank.org/">Red Daut</a></footer>
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec4 position;
void main() {
gl_Position = vec4( position );
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;
//Taken from Book of Shaders
//https://thebookofshaders.com/edit.php#11/2d-gnoise.frag
vec2 random2(vec2 st){
st = vec2( dot(st,vec2(127.1,311.7)),
dot(st,vec2(269.5,183.3)) );
return -1.0 + 2.0*fract(sin(st)*43758.5453123);
}
// Gradient Noise by Inigo Quilez - iq/2013
// https://www.shadertoy.com/view/XdXGW8
float noise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
vec2 u = f*f*(3.0-2.0*f);
return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ),
dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x),
mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ),
dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y);
}
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution;
float waveOffset = 0.3;
float waveCenter = 1.;
float waveFocus = 0.25;
float waveSpeed = 2.; //Lower faster.
float wMin = waveCenter - waveFocus;
float wMax = waveCenter + waveFocus;
//Smoothly extend on the x axis without stretching the noise
uv.x *= u_resolution.x/u_resolution.y;
uv.x += 1787.74328; //random starting seed
uv.y *= 2.;
float rn = noise( vec2(uv.x, u_time / waveSpeed));
float ry = uv.y - rn;
float r = smoothstep(wMin, wMax, ry);
float bn = noise( vec2(uv.x, u_time / waveSpeed - waveOffset));
float by = uv.y - bn;
float b = smoothstep(wMin, wMax, by);
float gn = noise( vec2(uv.x, u_time / waveSpeed + waveOffset));
float gy = uv.y - gn;
float g = smoothstep(wMin, wMax, gy);
//float a = (r + g + b) / 3.0;
gl_FragColor = vec4(r, b, g, 1.0);
}
</script>
<script src='https://jhancock532.github.io/twgl.min.js'></script><script src="footer/script.js"></script>
<!--FOOTER JUNK ENDS-->
<div align="center">
<div class="animate-flicker">
<p>
<img src="images/blue_album_pin.png" width="300" height="300" class="rotate" />
</p>
</div>
</div>
<audio loop src="audio/wwj_trimmed.mp3" type="audio/mpeg"></audio>
<button id="button">
<i class="fa fa-volume-up"></i>
<script>
const button = document.querySelector("#button");
const icon = document.querySelector("#button > i");
const audio = document.querySelector("audio");
button.addEventListener("click", () => {
if (audio.paused) {
audio.volume = 0.2;
audio.play();
icon.classList.remove('fa-volume-up');
icon.classList.add('fa-volume-off');
} else {
audio.pause();
icon.classList.remove('fa-volume-off');
icon.classList.add('fa-volume-up');
}
button.classList.add("fade");
});
</script>
</body>
</html>