141 lines
6.5 KiB
HTML
141 lines
6.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 -->
|
|
<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</a></li>
|
|
</ul>
|
|
</nav>--->
|
|
</div>
|
|
<div class="links">
|
|
<h2>My links:</h2>
|
|
<p>discord: @beppe (i got so lucky getting this)</p>
|
|
<a href="https://steamcommunity.com/id/bvanroll/">steam</a>
|
|
<a href="https://github.com/bvanroll">github</a>
|
|
<a href="https://www.tiktok.com/@bvanroll">tiktok</a>
|
|
<a href="https://x.com/beppevn">twitter</a>
|
|
</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.
|
|
|
|
Here are some of the results: </p>
|
|
<div class="image-container">
|
|
<img src="img/tokyo_godfathers.jpeg" alt="painting of a scene from tokyo godfathers">
|
|
<p>this was for a 30 day drawing challenge i'm doing currently. the prompt was to paint a scene or character from your favourite movie so i picked tokyo godfathers.</p>
|
|
<img src="img/eyesmouths.jpeg" alt="painting of a grey little guy with a bunch of eyes and mouths on it's head">
|
|
<p>i got bored of practicing so i decided to turn practice into a piece and draw this thing instead of drawing 90 mouths side by side again :(</p>
|
|
<img src="img/jessepikmin.jpeg" alt="painting of jesse pinkman from breaking bad but his head becomes the top of a pikmin head">
|
|
<p>i just heard the name jesse pikmin from someone and decided to draw it :p</p>
|
|
<img src="img/mouth.jpeg" alt="painting of an open mouth with tons of little mouths, noses, eyes and hands coming out of it">
|
|
<p>this was the same with the practicing thing, got bored and decided to incorporate it into a piece</p>
|
|
<img src="img/night.jpeg" alt="painting of a giant purple guy with a theatre mask trying to grab a normal guy who is getting beamed up">
|
|
<p>idk what to say about this/what it is, i just thought of this scene. probably some of my cleanest lineart but man i hate lineart</p>
|
|
<img src="img/signalis_inspo.jpeg" alt="painting of a grey monster thing with a little blood, body looks like how the bodies look in the game signalis">
|
|
<p>wanted to draw a full body of something and was failing all day, at the end of the day thought of a scene that reminedd me of signalis and painted that</p>
|
|
<img src="img/glados.jpeg" alt="painting of glados">
|
|
<p>i had to retry glados 5 times because the geometry was fucking with my brain, this was the only time it worked. it's also only using 2 hue's (i think)</p>
|
|
<img src="img/miku_head.jpeg" alt="painting of a giant hatsune miku head skating">
|
|
<p>this frame came from a tiktok. when i started out i drew frames from tiktoks that i found.</p>
|
|
<img src="img/selfportrait.jpeg" alt="a self portrait">
|
|
<p>also from a drawing challenge, had to do a self portrait, and decided (which i regret) doing it "realistic".</p>
|
|
<img src="img/teeth.jpeg" alt="painting of a person opening their mouth">
|
|
<p>second attempt at drawing teeth, i think it worked out well</p>
|
|
<img src="img/turnip_the_clown.jpeg" alt="painting of turnip the clown">
|
|
<p>another frame from a tiktok, from tiktokker turnip the clown this time</p>
|
|
</div>
|
|
</div>
|
|
<!--<iframe src="home.html" name="main" title="main" class="main_view"></iframe> -->
|
|
</body>
|
|
</html>
|