Browse Source

initial commit

master
Milan 1 year ago
commit
7755b0ae2c
6 changed files with 199 additions and 0 deletions
  1. +128
    -0
      canvas.js
  2. +3
    -0
      footer.js
  3. +22
    -0
      index.html
  4. BIN
     
  5. +46
    -0
      style.css
  6. BIN
     

+ 128
- 0
canvas.js View File

@@ -0,0 +1,128 @@
'use strict';

let offsetX, offsetY, size;

const canvas = document.getElementById('canvas');
const gl = canvas.getContext("experimental-webgl", {premultipliedAlpha: false});

gl.enable(gl.BLEND);
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

const quad = [
-2, -2, 0,
-2, 2, 0,
2, -2, 0,
2, 2, 0,
];

function shaderProgram(gl, vs, fs) {
let prog = gl.createProgram();
let addshader = function(type, source) {
let s = gl.createShader((type == 'vertex') ?
gl.VERTEX_SHADER : gl.FRAGMENT_SHADER);
gl.shaderSource(s, source);
gl.compileShader(s);
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
throw "Could not compile "+type+
" shader:\n\n"+gl.getShaderInfoLog(s);
}
gl.attachShader(prog, s);
};
addshader('vertex', vs);
addshader('fragment', fs);
gl.linkProgram(prog);
if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
throw "Could not link the shader program!";
}
return prog;
}

function attributeSetFloats(gl, prog, attr_name, rsize, arr) {
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arr),
gl.STATIC_DRAW);
let attr = gl.getAttribLocation(prog, attr_name);
gl.enableVertexAttribArray(attr);
gl.vertexAttribPointer(attr, rsize, gl.FLOAT, false, 0, 0);
}

function clear(framebuffer) {
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
}

function render(prog, vertices, framebuffer, numTris, texture) {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.useProgram(prog);
gl.uniform1f(gl.getUniformLocation(prog, "time"), [(Date.now() - start) / 1000]);
gl.uniform2f(gl.getUniformLocation(prog, "resolution"), [canvas.width], [canvas.height]);
attributeSetFloats(gl, prog, "pos", 3, vertices);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, numTris);
}

const progs = [
shaderProgram(gl, `
uniform mediump float time;
varying mediump float color;
attribute vec3 pos;
void main() {
gl_Position = vec4(sin(pos.x*(time/32.)), cos(pos.x*(time/32.)), 0.0, 1.2);
color = pos.x;
}
`,`
uniform mediump float time;
uniform mediump vec2 resolution;
varying mediump float color;
void main() {
mediump vec2 position = vec2(gl_FragCoord.x, gl_FragCoord.y) / resolution;
gl_FragColor.r = sin(color);
gl_FragColor.g = cos(color);
gl_FragColor.b = 0.7;
gl_FragColor.a = 0.1;
}
`)
];

const zeroes = [];
for (let i = 0; i < 100; i++) {
zeroes.push(i);
}

function draw() {
requestAnimationFrame(draw);

clear(null);
//gl.viewport(0, 0, window.innerWidth, window.innerHeight); // background is fullscreen
render(progs[0], zeroes, null, 33);
}

const fbs = [];

function resize() {
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
for (let fb of fbs) {
gl.bindTexture(gl.TEXTURE_2D, fb.texture);
gl.texImage2D(
gl.TEXTURE_2D, 0, gl.RGBA, canvas.width, canvas.height, 0,
gl.RGBA, gl.UNSIGNED_BYTE, null);
}
if (window.innerHeight > window.innerWidth) {
offsetX = 0;
offsetY = (window.innerHeight - window.innerWidth) / 2;
size = window.innerWidth;
} else {
offsetY = 0;
offsetX = (window.innerWidth - window.innerHeight) / 2;
size = window.innerHeight;
}
gl.viewport(offsetX, offsetY, size, size); // foreground
}

window.onresize = resize;
let start = Date.now();

resize();
draw();

+ 3
- 0
footer.js View File

@@ -0,0 +1,3 @@
'use strict';

document.getElementById('footer').innerHTML = decodeURIComponent(Array.prototype.map.call(atob('TGVnYWwgY29udGFjdDogTWlsYW4gUMOkc3NsZXIsIEFtIFN0YWRlcmhvZiA4YSA0Mjc5OSBMZWljaGxpbmdlbiwgRW1haWw6IG1lQHBiYi5sYwo='), function(c) { return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); }).join(''));

+ 22
- 0
index.html View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Milan Pässler</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<div id="description">
<img src="profile.jpg" id="profile">
<h2>Milan Pässler</h2>
<h4>Software Development and System Integration</h2>
</div>
<p id="footer"></p>
</div>
<script type="text/javascript" src="footer.js"></script>
<!-- <canvas id="canvas"></canvas>
<script type="text/javascript" src="canvas.js"></script> -->
</body>
</html>

BIN
View File


+ 46
- 0
style.css View File

@@ -0,0 +1,46 @@
body{
margin:0;
overflow:hidden;
height: 100vh;
color: white;
background: url('./wallpaper.jpg'), #332244;
background-size: cover;
background-position: center center;
font-family: sans-serif;
}

#content {
text-align: center;
background-color: rgba(0, 0, 0, .6);
width: 100vw;
max-width: 600px;
height: 100vh;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}

#footer {
font-size: .8em;
}

#profile {
margin-top: 20vmin;
display: inline-block;
height: 30vmin;
width: 30vmin;
border-radius: 100%;
}

canvas {
position: fixed;
}

@media (max-width: 600px) {
#profile {
width: 60vmin;
height: 60vmin;
}
}

BIN
View File


Loading…
Cancel
Save