96 lines
2.9 KiB
HTML
96 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
<title>beppe.online</title>
|
|
<!--- <title>bvanroll.neocities</title> --->
|
|
<link rel="stylesheet" href="main.css">
|
|
<!-- 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;
|
|
|
|
const vec3 uAColor = vec3(.5,.5,.5);
|
|
const vec3 uBColor = vec3(.5,.5,.5);
|
|
const vec3 uCColor = vec3(1.,1.,1.);
|
|
const vec3 uDColor = vec3(.0,.33,.67);
|
|
|
|
//get colors from http://dev.thi.ng/gradients/
|
|
vec3 cosPalette(float t) { return uAColor + uBColor*cos(6.28318*(uCColor*t+uDColor)); }
|
|
|
|
|
|
|
|
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);
|
|
float c = 0.;
|
|
c += fill(circle,.2);
|
|
c += fill(min(circle,circle2),.5);
|
|
float sx = sin(st.x*iTime)/2. +1.;
|
|
float sy = cos(st.y*iTime/2.)/2. +1.;
|
|
color = cosPalette(((sx+sy+iTime))/2.)*(step(1.,c)*.9 + .1);
|
|
gl_FragColor = vec4(color, alpha);
|
|
}
|
|
</script>
|
|
<script>
|
|
function shade() {
|
|
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)
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
newShader = sessionStorage.getItem("customShader");
|
|
if (newShader != null) {
|
|
console.log(newShader);
|
|
document.getElementById("image").innerHTML = newShader;
|
|
}
|
|
//shade()
|
|
</script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>
|
|
beppe.online
|
|
</h1>
|
|
<nav>
|
|
<ul class="navbar_links">
|
|
<li class="navbar_link" ><a href="home.html" target="main">home</a></li>
|
|
<li class="navbar_link" ><a href="qr.html" >qr</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<iframe src="home.html" name="main" title="main" class="main_view"></iframe>
|
|
</body>
|
|
</html>
|