127 lines
5.5 KiB
HTML
127 lines
5.5 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 -->
|
|
<style>
|
|
|
|
</style>
|
|
<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>
|
|
import * as img from 'img/'
|
|
function load_img() {
|
|
for var i=0;i<img.length;i++) {
|
|
document.querySelector("iamge-container").innerHTML+=('<img src='+igm[i].src);
|
|
// via https://stackoverflow.com/a/61382627
|
|
}
|
|
}
|
|
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 code thing that loads glsl shaders</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="links">
|
|
<h2>my links/contact:</h2>
|
|
<p><a href="mailto:beppe.vanrolleghem@gmail.com">my email</a> probably the best way to get in contact with me</p>
|
|
<p><a href="https://www.tiktok.com/@bvanroll">tiktok</a> my fav social media, mostly posting what i draw on there, another good way to get in contact with me</p>
|
|
<p><a href="https://steamcommunity.com/id/bvanroll/">steam</a> Gamers tend to be pretty toxic so most of the things on here are set to private, but if you wanna see what games i enjoy it's pretty good</p>
|
|
<p><a href="https://letterboxd.com/beppev/">letterboxd</a> i should watch more movies</p>
|
|
<p>discord: @beppe (i got so lucky getting this, also i rarely use this at this point)</p>
|
|
<p><a href="https://github.com/bvanroll">github</a> (don't look at my bad code :( )</p>
|
|
</div>
|
|
<div class="content">
|
|
<h2> my """art""" </h2>
|
|
<p>A while ago i got gifted an ipad mini by a family member, so out of interest i borrowed my sisters pencil and fell in love with learning how to draw. Drawing for some reason made me really statisfied/happy. So since then i've kept drawing (we're 2 months in now at the time of writing this) and really enjoyed it ever since.</p>
|
|
|
|
<p>And then recently i've gotten into drawing on paper more, i mainly enjoy using the staedler .5mm fineliners and i also use a mechanical pencil. It's been really nice and improved my line control a lot i feel.</p>
|
|
|
|
<p>Most of my "art" can be found on my tiktok account (Linked on the homepage). I haven't found a manageable way to keep them stored here so for now thats where they'll be since out of the social media platforms it's by far my favourite to use. I often private what i post because I feel insecure about my abilities, but i'm trying to get better at that.</p>
|
|
|
|
|
|
|
|
<h2> what's coming </h2>
|
|
<p> i really wanna make a shader that emulates my "boxes" i've been drawing recently and use it as the background for this page. It's gonna be a wip but i think it's gonna be really cool if i can get it to work. I hope i can do it in 2d emulating 3d but i might have to do the 3d shader thing that i'm dreading</p>
|
|
<p> also i really wanna make a way for me to make posts about my thoughts. but i have no clue how to do it easily. Ideally i'd be able to upload from my phone. gotta figure something out for that.</p>
|
|
</div>
|
|
</body>
|
|
</html>
|