beppe/neocities
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

shader test?

Browse Source
This commit is contained in:
Beppe Vanrolleghem
2024-06-16 16:27:42 +02:00
parent d8304cbed2
commit 01f088d062
1 changed files with 47 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
public/index.html
View File

@@ -6,9 +6,55 @@
<title>beppe.online</title> <title>beppe.online</title>
<!--- <title>bvanroll.neocities</title> ---> <!--- <title>bvanroll.neocities</title> --->
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
<script> <!-- shader as bg via xemantic/shader-web-background -->
<script src="https://xemantic.github.io/shader-web-background/dist/shader-web-background.min.js"></script>
<script type="x-shader/x-fragment" id="image">
precision mediump float;
uniform float iTime;
uniform vec2 iResolution;
float fill(float x, float size) { return 1.-step(size, x); }
float circleSDF(vec2 st) { return length(st); }
void main() {
vec2 st = (gl_FragCoord.xy*2. - iResolution.xy)/iResolution.y;
vec3 color = vec3(0.0,0.0,0.0);
float alpha = 1.0;
float sp = iTime/8.;
float m = step(mod(sp*10.,2.),1.);
vec2 st2 = st;
//vec2 st2 = fract(st*10.)-.5;
vec2 u = vec2(1.);
u.x = step(mod(st2.y*10.,2.),1.)*2.-1.;
u.y = step(mod(st2.x*10.,2.),1.)*2.-1.;
st2.x += u.x*fract(sp*m);
st2.y += u.y*fract(sp*(1.-m));
st2 = fract(st2*10.)-.5;
st2 *= 2.;
float circle = (circleSDF(st2));
float circle2 = (circle);
color += fill(circle,.2);
color += fill(min(circle,circle2),.5);
gl_FragColor = vec4(color, alpha);
}
</script> </script>
<script>
shaderWebBackground.shade({
shaders: {
image: {
uniforms: {
iTime: (gl, loc) => gl.uniform1f(loc, performance.now() /1000),
iResolution: (gl, loc, ctx) => gl.uniform2f(loc, ctx.width, ctx.height)
}
}
}
});
</script>
</head> </head>
<body> <body>
<div class="header"> <div class="header">