diff options
| -rw-r--r-- | blockgame/index.html | 16 | ||||
| -rw-r--r-- | blockgame/main.js | 18 | ||||
| -rw-r--r-- | blockgame/shaders.js | 49 | ||||
| -rw-r--r-- | img/artix.png | bin | 0 -> 14591 bytes | |||
| -rw-r--r-- | img/artix.svg | 22 | ||||
| -rw-r--r-- | img/icon.ico | bin | 0 -> 1406 bytes | |||
| -rw-r--r-- | index.html | 25 | ||||
| -rw-r--r-- | pfp.png | bin | 0 -> 894 bytes | |||
| -rw-r--r-- | style.css | 34 |
9 files changed, 163 insertions, 1 deletions
diff --git a/blockgame/index.html b/blockgame/index.html new file mode 100644 index 0000000..a882e14 --- /dev/null +++ b/blockgame/index.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> + +<html> + <head> + <title>WebGL Block Game</title> + <link rel="stylesheet" href="/style.css"> + </head> + <body> + <center> + <div style="margin: 0;position:absolute;top:50%;left:50%;-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);"> + <canvas id="glCanvas" width="1024" height="768"></canvas> + </div> + </center> + <script type="module" src="main.js"></script> + </body> +</html> diff --git a/blockgame/main.js b/blockgame/main.js new file mode 100644 index 0000000..d7bf3ea --- /dev/null +++ b/blockgame/main.js @@ -0,0 +1,18 @@ +import * as shaders from "./shaders.js" + +function main() { + const canvas = document.querySelector("#glCanvas"); + const gl = canvas.getContext("webgl") + + if(gl == null) { + alert("Unable to initialize WebGL."); + return; + } + + const shaderProgram = shaders.init(gl); + + gl.clearColor(0.0, 0.0, 0.0, 1.0); + gl.clear(gl.COLOR_BUFFER_BIT); +} + +window.onload = main; diff --git a/blockgame/shaders.js b/blockgame/shaders.js new file mode 100644 index 0000000..f89270a --- /dev/null +++ b/blockgame/shaders.js @@ -0,0 +1,49 @@ +const vs_src = ` + attribute vec4 position; + + uniform mat4 mv_matrix; + uniform mat4 projection_matrix; + + void main() { + gl_Position = projection_matrix * mv_matrix * position; + } +`; + +const fs_src = ` + void main() { + gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); + } +`; + +export function init(gl) { + const vshader = loadShader(gl, gl.VERTEX_SHADER, vs_src); + const fshader = loadShader(gl, gl.FRAGMENT_SHADER, fs_src); + + const program = gl.createProgram(); + gl.attachShader(program, vshader); + gl.attachShader(program, fshader); + + gl.linkProgram(program); + + if(!gl.getProgramParameter(program, gl.LINK_STATUS)) { + alert("Unable to initialize shader program: " + gl.getProgramInfoLog(program)); + return null; + } + + return program; +} + +export function loadShader(gl, type, src){ + const shader = gl.createShader(type) + + gl.shaderSource(shader, src); + gl.compileShader(shader); + + if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { + alert('Failed to compile shader : ' + gl.getShaderInfoLog(shader)); + gl.deleteShader(shader); + return null; + } + + return shader; +} diff --git a/img/artix.png b/img/artix.png Binary files differnew file mode 100644 index 0000000..02253fe --- /dev/null +++ b/img/artix.png diff --git a/img/artix.svg b/img/artix.svg new file mode 100644 index 0000000..933d4bf --- /dev/null +++ b/img/artix.svg @@ -0,0 +1,22 @@ +<?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" + "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> +<svg version="1.0" xmlns="http://www.w3.org/2000/svg" + width="150.000000pt" height="158.000000pt" viewBox="0 0 150.000000 158.000000" + preserveAspectRatio="xMidYMid meet"> +<metadata> +Created by potrace 1.16, written by Peter Selinger 2001-2019 +</metadata> +<g transform="translate(0.000000,158.000000) scale(0.100000,-0.100000)" +fill="#000000" stroke="none"> +<path d="M0 790 l0 -790 750 0 750 0 0 790 0 790 -750 0 -750 0 0 -790z m955 +310 c109 -228 202 -422 209 -430 26 -33 -44 25 -240 201 -113 101 -217 194 +-231 205 l-25 22 21 128 c41 245 53 306 62 297 4 -4 96 -195 204 -423z m-388 +-367 c234 -177 272 -208 272 -218 0 -9 -579 -358 -684 -412 l-43 -22 13 27 +c13 26 234 560 277 670 11 28 24 52 28 52 5 0 66 -44 137 -97z m650 -69 c-3 +-3 -12 -4 -19 -1 -8 3 -5 6 6 6 11 1 17 -2 13 -5z m10 -166 c-3 -7 -5 -2 -5 +12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m77 -120 c8 -18 48 -104 89 -190 l76 +-158 -42 27 c-23 14 -95 62 -160 105 -107 72 -117 81 -105 96 8 9 36 47 62 85 +26 37 51 67 56 67 6 0 16 -15 24 -32z"/> +</g> +</svg> diff --git a/img/icon.ico b/img/icon.ico Binary files differnew file mode 100644 index 0000000..5769682 --- /dev/null +++ b/img/icon.ico @@ -1,5 +1,28 @@ +<!DOCTYPE html> <html> +<head> + <title>Jon Santmyer</title> - <h1>Jon Santmyer Website!</h1> + <link rel="stylesheet" href="style.css"> +</head> +<body> + <div class="page-body"> + <center> + <h1>Jon Santmyer's Website</h1> + <p>A place where I put links to things I find interesting / notable</p> + <a class="link-button" href="https://git.jonsantmyer.com">git.jonsantmyer.com</a> + <a class="link-button" href="https://searx.jonsantmyer.com">searx.jonsantmyer.com</a> + </center> + <div style="margin: 25px"> + <p>There won't really be any physical media here because storage is expensive. Maybe torrent links...</p> + <p> + I use + <img src="img/artix.png" style="max-height:16px"> + <a href="https://artixlinux.org/">Artix</a> + on my main system and laptop + </p> + </div> + </div> +</body> </html> Binary files differdiff --git a/style.css b/style.css new file mode 100644 index 0000000..92f050e --- /dev/null +++ b/style.css @@ -0,0 +1,34 @@ +body { + background-color: #FFFFBB; + margin: 0px; + padding: 0px; +} + +.header { + background-color: #FFFFCC; + margin: 0px; + padding: 5px; +} + +.link-button { + display: inline-block; + background-color: #DDDDDD; + color: #000000; + border: outset; + padding: 10px 15px; + text-align: center; + text-decoration: none; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; +} + +.page-body { + display: inline-block; + background-color: #CCCCCC; + + border: solid 5px #DDDDDD; + margin: 5% 10% 5% 10%; + padding: 25px 0px 25px 0px; + width: 80%; +} |
