48 lines
1.4 KiB
HTML
48 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - #CodeVember 29 | Hypnotic neon lights</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<canvas id=a></canvas>
|
|
<script id=fragmentShader type=x-shader/x-fragment>
|
|
precision mediump float;
|
|
uniform float time;
|
|
uniform float width;
|
|
uniform float height;
|
|
|
|
vec2 R(vec2 p,float a) {
|
|
return vec2( p.x*cos(a) + p.y*sin(a),
|
|
-p.x*sin(a) + p.y*cos(a));
|
|
}
|
|
|
|
|
|
void main() {
|
|
vec2 resolution = vec2(width, height);
|
|
float vc = time / 50.0;
|
|
float vt = 1000.0 + sin(sin(time/16.0)*2.0*3.1415927) * 7000.0;
|
|
float vr = time / 20.0;
|
|
vec2 c0 = (gl_FragCoord.xy / resolution) - vec2(0.5 + cos(time*0.3) * sin(time * 0.1) * 0.3, 0.5 + sin(time*0.3) * sin(time * 0.2) * 0.3);
|
|
vec2 c = -R(c0, vr)*8.0;
|
|
float val = 0.5 + sin((((vt - c.x - c.y) / 2.0)*(0.5+c.x)*(c.y+0.5) + vt+ c.x + c.y)/500.0);
|
|
gl_FragColor = vec4(vec3(val* (0.2+sin(sin(1.0+vc)* 10.0 *c.x*c.y)*0.8), val * (0.3+cos(2.0 + c.x*c.y*sin(vc)* 10.0 )*0.7), val * (0.3+cos(1.0 + c.x*c.y *sin(vc)* 10.0))*0.7), 1.0);
|
|
}
|
|
</script>
|
|
|
|
<script id=vertexShader type=x-shader/x-vertex>
|
|
attribute vec3 pos;
|
|
|
|
void main() {
|
|
gl_Position=vec4(pos, 1.0);
|
|
}
|
|
</script>
|
|
<!-- partial -->
|
|
<script src='https://terabaud.github.io/hello-webgl/glutz.js'></script><script type="module" src="./script.js"></script>
|
|
|
|
</body>
|
|
</html>
|