initial commit

7755b0ae · Milan Pässler · 7755b0ae · 7755b0ae · 7755b0ae · 7755b0ae
Commit 7755b0ae authored 6 years ago by Milan Pässler
--- a/canvas.js
+++ b/canvas.js
+'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();
--- a/footer.js
+++ b/footer.js
+'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(''));
--- a/index.html
+++ b/index.html
+<!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>
--- a/profile.jpg
+++ b/profile.jpg
--- a/style.css
+++ b/style.css
+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;
+	}
+}
--- a/wallpaper.jpg
+++ b/wallpaper.jpg